<div class="container">
  <!-- Header con logo SALUD UT -->
  <header class="app-header">
    <div class="header-left">
      <img
        src="/logo_SALUDUT.png"
        alt="SALUD UT"
        class="logo-saludut"
      />
      <div class="header-text">
        <h1>{{ titulo }}</h1>
        <p class="subtitle">Módulo de autorizaciones médicas</p>
      </div>
    </div>

    <div class="header-right">
      <span class="badge-saludut">SALUD UT</span>
    </div>
  </header>

  <!-- Tarjeta de búsqueda -->
  <div class="search-card">
    <div class="form-row">
      <label for="tipo">Buscar por:</label>
      <select id="tipo" [(ngModel)]="tipoBusqueda">
        <option value="documento">Cédula / Documento</option>
        <option value="interno">Número interno</option>
        <option value="nombre">Nombre completo</option>
      </select>
    </div>

    <div class="form-row">
      <label for="termino">Valor:</label>
      <input
        id="termino"
        type="text"
        [(ngModel)]="termino"
        placeholder="Ej: 79427056, 372, JORGE IVAN"
        (keyup.enter)="buscar()"
      />
      <button (click)="buscar()" [disabled]="cargando">
        {{ cargando ? 'Buscando...' : 'Buscar' }}
      </button>
    </div>

    <div class="upload-excel">
      <button type="button" (click)="inputExcel.click()" [disabled]="cargandoExcel">
        {{ cargandoExcel ? 'Cargando Excel...' : 'Cargar Excel de PPL' }}
      </button>

      <input
        #inputExcel
        type="file"
        accept=".xlsx,.xls"
        (change)="onExcelSelected($event)"
        hidden
      />

      <span class="upload-msg" *ngIf="estadoCargaExcel">
        {{ estadoCargaExcel }}
      </span>
    </div>

    <div class="estado error" *ngIf="error">{{ error }}</div>
  </div>

  <!-- Layout: tabla de pacientes -->
  <div class="resultados-layout">
    <div class="col-tabla">
      <div *ngIf="pacientes.length > 0">
        <table class="tabla">
          <thead>
            <tr>
              <th>Interno</th>
              <th>Documento</th>
              <th>Nombre completo</th>
              <th>Sexo</th>
              <th>Fecha nacimiento</th>
              <th>Establecimiento</th>
              <th>Estado</th>
              <th>Fecha ingreso</th>
              <th>Tiempo reclusión (años)</th>
              <th>Autorización</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let p of pacientes">
              <td>{{ p.interno }}</td>
              <td>{{ p.numero_documento }}</td>
              <td>
                {{ p.primer_nombre }} {{ p.segundo_nombre }}
                {{ p.primer_apellido }} {{ p.segundo_apellido }}
              </td>
              <td>{{ p.sexo }}</td>
              <td>{{ p.fecha_nacimiento | date: 'yyyy-MM-dd' }}</td>
              <td>{{ p.nombre_establecimiento }}</td>
              <td>{{ p.estado }}</td>
              <td>{{ p.fecha_ingreso | date: 'yyyy-MM-dd' }}</td>
              <td>{{ p.tiempo_reclusion }}</td>
              <td>
                <button (click)="seleccionarPaciente(p)">Autorizar</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div *ngIf="!cargando && !error && pacientes.length === 0">
        No hay resultados para mostrar.
      </div>
    </div>
  </div>

  <!-- Modal de autorización -->
  <div class="aut-modal-backdrop" *ngIf="pacienteSeleccionado">
    <div class="aut-modal">
      <button
        type="button"
        class="aut-modal-close"
        (click)="cerrarAutorizacion()"
      >
        ×
      </button>

      <h2>Nueva autorización</h2>

      <p class="aut-paciente">
        <strong>Interno:</strong> {{ pacienteSeleccionado?.interno }}<br />
        <strong>Nombre:</strong>
        {{ pacienteSeleccionado?.primer_nombre }}
        {{ pacienteSeleccionado?.segundo_nombre }}
        {{ pacienteSeleccionado?.primer_apellido }}
        {{ pacienteSeleccionado?.segundo_apellido }}<br />
        <strong>Establecimiento:</strong>
        {{ pacienteSeleccionado?.nombre_establecimiento }}
      </p>

      <div class="form-row">
        <label for="numAut">Número autorización:</label>
        <input
          id="numAut"
          type="text"
          [(ngModel)]="formAutorizacion.numero_autorizacion"
          placeholder="Ej: 2025-000123"
        />
      </div>

      <div class="form-row">
        <label for="ips">IPS / Hospital:</label>
        <select id="ips" [(ngModel)]="formAutorizacion.id_ips">
          <option value="">-- Seleccione IPS --</option>
          <option *ngFor="let ips of ipsDisponibles" [value]="ips.id_ips">
            {{ ips.nombre_ips }} ({{ ips.municipio }} - {{ ips.departamento }})
          </option>
        </select>
      </div>

      <div class="form-row">
        <label for="autorizante">Quién autoriza:</label>
        <select
          id="autorizante"
          [(ngModel)]="formAutorizacion.numero_documento_autorizante"
        >
          <option value="">-- Seleccione --</option>
          <option
            *ngFor="let a of autorizantes"
            [value]="a.numero_documento"
          >
            {{ a.nombre }} ({{ a.cargo }})
          </option>
        </select>
      </div>

      <div class="form-row">
        <label for="fechaAut">Fecha autorización:</label>
        <input
          id="fechaAut"
          type="date"
          [(ngModel)]="formAutorizacion.fecha_autorizacion"
        />
      </div>

      <div class="form-row">
        <label for="obs">Observación / servicios autorizados:</label>
        <textarea
          id="obs"
          rows="4"
          [(ngModel)]="formAutorizacion.observacion"
        ></textarea>
      </div>

      <div class="aut-actions">
        <button
          (click)="guardarAutorizacion()"
          [disabled]="guardandoAutorizacion"
        >
          {{ guardandoAutorizacion ? 'Guardando...' : 'Guardar autorización' }}
        </button>

        <button
          type="button"
          class="btn-secondary"
          *ngIf="pacienteSeleccionado"
          (click)="verAutorizaciones()"
        >
          Ver autorizaciones
        </button>
      </div>

      <div class="estado ok" *ngIf="mensajeAutorizacion">
        {{ mensajeAutorizacion }}
      </div>
      <div class="estado error" *ngIf="errorAutorizacion">
        {{ errorAutorizacion }}
      </div>

      <div
        class="autorizaciones-previas"
        *ngIf="pacienteSeleccionado && autorizacionesPaciente.length > 0"
      >
        <h3>Autorizaciones previas</h3>
        <table class="tabla-autorizaciones">
          <thead>
            <tr>
              <th>N° autorización</th>
              <th>Fecha</th>
              <th>IPS</th>
              <th>Autoriza</th>
              <th>Ver PDF</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let a of autorizacionesPaciente">
              <td>{{ a.numero_autorizacion }}</td>
              <td>{{ a.fecha_autorizacion | date: 'yyyy-MM-dd' }}</td>
              <td>{{ a.nombre_ips }}</td>
              <td>{{ a.nombre_autorizante }}</td>
              <td>
                <button (click)="descargarPdf(a.numero_autorizacion)">
                  Ver PDF
                </button>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="estado error" *ngIf="errorAutLista">
          {{ errorAutLista }}
        </div>
      </div>
    </div>
  </div>
</div>
