<div class="page-shell">
  <div class="content-container">
    <app-header
      [title]="titulo"
      subtitle="Módulo de autorizaciones médicas"
      badgeText="SALUD UT"
      [showUserInfo]="isLoggedIn()"
      [userName]="getCurrentUser()?.nombre_completo"
      [userRole]="getCurrentUser()?.nombre_rol"
      [showLogout]="isLoggedIn()"
      (logout)="logout()"
      [showBack]="true"
      backLabel="Volver"
      (back)="irADashboard()"
    ></app-header>

    <!-- Tarjeta de búsqueda -->
    <div class="search-card 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 class="btn btn-primary" (click)="buscar()" [disabled]="cargando">
          {{ cargando ? 'Buscando...' : 'Buscar' }}
        </button>
      </div>

      

      <div class="admin-actions" *ngIf="puedeVerTodasAutorizaciones()">
        <button
          class="btn btn-gradient"
          (click)="irAAutorizacionesPorFecha()"
          title="Ver autorizaciones por fecha"
        >
          Ver autorizaciones por fecha
        </button>
        <button
          class="btn btn-secondary"
          (click)="irACargarPacientes()"
          title="Cargar pacientes"
        >
          Cargar pacientes
        </button>
      </div>

      <div class="status 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="table 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
                    class="btn btn-primary btn-sm"
                    (click)="seleccionarPaciente(p)"
                    [disabled]="!puedeGenerarAutorizaciones()"
                  >
                    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()"
          aria-label="Cerrar"
        >
          &times;
        </button>

        <h2>{{ autorizacionEditando ? 'Editar autorizacion' : 'Nueva autorizacion' }}</h2>
        <p class="edit-info" *ngIf="autorizacionEditando">
          Editando {{ autorizacionEditando.numero_autorizacion }} (v{{ autorizacionEditando.version || 1 }})
        </p>

        <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="tipoAutorizacion">Tipo de autorizacion:</label>
          <select
            id="tipoAutorizacion"
            [(ngModel)]="formAutorizacion.tipo_autorizacion"
            (change)="onTipoAutorizacionChange()"
          >
            <option value="consultas_externas">Consultas externas</option>
            <option value="brigadas_ambulancias_hospitalarios">
              Brigadas/Ambulancias/Hospitalarios
            </option>
          </select>
        </div>

        <div
          class="form-row"
          *ngIf="
            formAutorizacion.tipo_autorizacion ===
            'brigadas_ambulancias_hospitalarios'
          "
        >
          <label for="tipoServicio">Tipo de servicio:</label>
          <select id="tipoServicio" [(ngModel)]="formAutorizacion.tipo_servicio">
            <option value="">-- Seleccione --</option>
            <option value="brigadas">Brigadas</option>
            <option value="ambulancias">Ambulancias</option>
            <option value="hospitalarios">Hospitalarios</option>
          </select>
        </div>

        <div class="form-row">
          <label for="ips">IPS / Hospital:</label>
          <div class="ips-field">
            <select
              id="ips"
              [(ngModel)]="formAutorizacion.id_ips"
              (change)="onIpsChange()"
            >
              <option value="">-- Seleccione IPS --</option>
              <option *ngFor="let ips of ipsDisponibles" [value]="ips.id_ips">
                {{ ips.nombre_ips }} ({{ ips.municipio || '-' }} - {{ ips.departamento || '-' }}){{ ips.tiene_convenio === false ? ' - NO CUBRE' : '' }}
              </option>
            </select>
            <button
              type="button"
              class="btn btn-secondary btn-sm ips-toggle"
              (click)="toggleVerMasIps()"
            >
              {{ verMasIps ? 'Ver solo cercanas' : 'Ver mas sedes' }}
            </button>
          </div>
        </div>

        <div class="ips-helper" *ngIf="verMasIps">
          Mostrando IPS de todos los departamentos.
        </div>
        <div class="ips-traslado" *ngIf="observacionTraslado">
          Se agregara a observaciones: {{ observacionTraslado }}
        </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 cup-row">
        <label for="cupCodigo">CUPS:</label>
        <div class="cup-input">
          <input
            id="cupCodigo"
            type="text"
            [(ngModel)]="formAutorizacion.cup_codigo"
            placeholder="Codigo o descripcion"
            (keyup.enter)="buscarCups()"
            (input)="onCupInputChange()"
          />
          <button
            type="button"
            class="btn btn-secondary btn-sm"
            (click)="buscarCups()"
            [disabled]="buscandoCups"
          >
            {{ buscandoCups ? 'Buscando...' : 'Buscar' }}
          </button>
        </div>
      </div>

      <div class="cup-results" *ngIf="cupsDisponibles.length > 0">
        <div class="cup-results-header">
          <span>Selecciona un CUPS:</span>
          <span class="cup-results-count">{{ cupsDisponibles.length }} resultados</span>
        </div>
        <div class="cup-results-list">
          <button
            type="button"
            class="cup-item"
            *ngFor="let cup of cupsDisponibles"
            [class.selected]="cup.codigo === formAutorizacion.cup_codigo"
            (click)="seleccionarCup(cup)"
          >
            <div class="cup-code">{{ cup.codigo }}</div>
            <div class="cup-desc">{{ cup.descripcion }}</div>
            <div class="cup-meta" *ngIf="cup.nivel">Nivel {{ cup.nivel }}</div>
            <div class="cup-status">
              <span
                class="badge"
                [ngClass]="cup.cubierto ? 'badge-success' : 'badge-danger'"
              >
                {{ cup.cubierto ? 'CUBIERTO' : 'NO CUBIERTO' }}
              </span>
            </div>
          </button>
        </div>
      </div>

      <div class="cup-alert" *ngIf="cupSeleccionado">
        <span
          class="badge"
          [ngClass]="cupSeleccionado.cubierto ? 'badge-success' : 'badge-danger'"
        >
          {{ cupSeleccionado.cubierto ? 'CUBIERTO' : 'NO CUBIERTO' }}
        </span>
        <span class="cup-alert-text">
          {{
            cupSeleccionado.cubierto
              ? 'Este CUPS esta cubierto por la nota tecnica.'
              : 'Este CUPS no esta cubierto por la nota tecnica.'
          }}
        </span>
      </div>

      <div class="status error" *ngIf="errorCups">
        {{ errorCups }}
      </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
            class="btn btn-primary"
            (click)="guardarAutorizacion()"
            [disabled]="guardandoAutorizacion || !puedeGenerarAutorizaciones()"
          >
            {{
              guardandoAutorizacion
                ? 'Guardando...'
                : (autorizacionEditando ? 'Guardar cambios' : 'Guardar autorizacion')
            }}
          </button>

          <button
            type="button"
            class="btn btn-secondary"
            *ngIf="autorizacionEditando"
            (click)="cancelarEdicion()"
          >
            Cancelar edicion
          </button>

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

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

        <div
          class="autorizaciones-previas"
          *ngIf="pacienteSeleccionado && autorizacionesPaciente.length > 0"
        >
          <h3>Autorizaciones previas</h3>
          <table class="table tabla-autorizaciones">
            <thead>
              <tr>
                <th>N° autorización</th>
                <th>Fecha</th>
                <th>CUPS</th>
                <th>Nivel</th>
                <th>Tipo autorizacion</th>
                <th>Tipo servicio</th>
                <th>Version</th>
                <th>IPS</th>
                <th>Autoriza</th>
                <th>Estado</th>
                <th>Acciones</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.cup_codigo }}</td>
                <td>{{ a.cup_nivel }}</td>
                <td>{{ getTipoAutorizacionLabel(a.tipo_autorizacion) }}</td>
                <td>{{ getTipoServicioLabel(a.tipo_servicio) }}</td>
                <td class="version-cell">
                  <div class="version-stack">
                    <span>v{{ a.version || 1 }}</span>
                    <button
                      type="button"
                      class="btn-link"
                      *ngIf="!versionesPorAutorizacion[a.numero_autorizacion] && !cargandoVersiones[a.numero_autorizacion]"
                      (click)="cargarVersiones(a.numero_autorizacion)"
                    >
                      Ver versiones
                    </button>
                    <span *ngIf="cargandoVersiones[a.numero_autorizacion]">Cargando...</span>
                    <select
                      *ngIf="versionesPorAutorizacion[a.numero_autorizacion]"
                      [(ngModel)]="versionSeleccionada[a.numero_autorizacion]"
                    >
                      <option
                        *ngFor="let v of versionesPorAutorizacion[a.numero_autorizacion]"
                        [ngValue]="v.version"
                      >
                        v{{ v.version }}
                      </option>
                    </select>
                  </div>
                </td>
                <td>
                  <div class="ips-info">
                    <span>{{ a.nombre_ips }}</span>
                    <span
                      class="badge badge-danger ips-convenio"
                      *ngIf="a.ips_tiene_convenio === false"
                    >
                      No cubre IPS
                    </span>
                  </div>
                </td>
                <td>{{ a.nombre_autorizante }}</td>
                <td class="estado-cell">
                  <ng-container *ngIf="isAdministrador(); else estadoSoloLectura">
                    <select
                      [ngModel]="a.estado_autorizacion || 'pendiente'"
                      (ngModelChange)="actualizarEstadoAutorizacion(a, $event)"
                    >
                      <option value="pendiente">Pendiente</option>
                      <option value="autorizado">Autorizado</option>
                      <option value="no_autorizado">No autorizado</option>
                    </select>
                    <span
                      class="mini-status"
                      *ngIf="actualizandoEstado[a.numero_autorizacion]"
                    >
                      Guardando...
                    </span>
                  </ng-container>
                  <ng-template #estadoSoloLectura>
                    <span
                      class="badge"
                      [ngClass]="
                        (a.estado_autorizacion || 'pendiente') === 'autorizado'
                          ? 'badge-success'
                          : (a.estado_autorizacion || 'pendiente') === 'no_autorizado'
                          ? 'badge-danger'
                          : ''
                      "
                    >
                      {{ getEstadoAutorizacionLabel(a.estado_autorizacion) }}
                    </span>
                  </ng-template>
                </td>
                <td>
                  <div class="accion-buttons">
                    <button
                      class="btn btn-secondary btn-sm"
                      [disabled]="!puedeGenerarAutorizaciones()"
                      (click)="iniciarEdicion(a)"
                    >
                      Editar
                    </button>
                    <button
                      *ngIf="puedeDescargarPdfAutorizacion(a)"
                      class="btn btn-secondary btn-sm"
                      [disabled]="descargandoPdf"
                      (click)="descargarPdf(a, getVersionSeleccionada(a.numero_autorizacion, a.version))"
                    >
                      PDF
                    </button>
                    <span *ngIf="!puedeDescargarPdfAutorizacion(a)" class="pdf-restricted">
                      Pendiente de aprobacion
                    </span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

          <div class="status" *ngIf="descargandoPdf">
            Generando y descargando PDF, por favor espera...
          </div>

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