<div class="contenedor">
  <h1>{{ titulo }}</h1>

  <!-- ===================== -->
  <!-- IMPORTACIÓN EXCEL -->
  <!-- ===================== -->
  <div class="seccion">
    <h2>Importación de Excel (PLANILLA vs HISTOR)</h2>

    <div *ngIf="errorImport" class="error">{{ errorImport }}</div>
    <div *ngIf="mensajeImport" class="info">{{ mensajeImport }}</div>

    <div class="info" *ngIf="cargandoImport">Consultando estado...</div>

    <div *ngIf="estadoImport">
      <p>
        <strong>Estado:</strong>
        Planilla:
        <span [style.color]="estadoImport.planilla_cargada ? 'green' : 'red'">
          {{ estadoImport.planilla_cargada ? '✅ Cargada' : '❌ No cargada' }}
        </span>
        |
        Histor:
        <span [style.color]="estadoImport.histor_cargada ? 'green' : 'red'">
          {{ estadoImport.histor_cargada ? '✅ Cargado' : '❌ No cargado' }}
        </span>
      </p>

      <p *ngIf="estadoImport.ultima_sync">
        <strong>Última sync:</strong> {{ estadoImport.ultima_sync }}
      </p>
    </div>

    <div style="display:flex; gap:16px; flex-wrap:wrap; align-items:center;">
      <div>
        <strong>Citas programadas (PLANILLA)</strong>
        <input type="file" (change)="onSeleccionarPlanilla($event)" />
        <button (click)="subirPlanilla()" [disabled]="subiendoPlanilla || sincronizando">
          {{ subiendoPlanilla ? 'Cargando...' : 'Cargar planilla' }}
        </button>
      </div>

      <div>
        <strong>Citas realizadas (HISTOR)</strong>
        <input type="file" (change)="onSeleccionarHistor($event)" />
        <button (click)="subirHistor()" [disabled]="subiendoHistor || sincronizando">
          {{ subiendoHistor ? 'Cargando...' : 'Cargar histor' }}
        </button>
      </div>

      <div>
        <button (click)="refrescarEstadoImport()" [disabled]="sincronizando">Refrescar estado</button>
      </div>

      <div>
        <button
          (click)="sincronizarImportacion()"
          [disabled]="sincronizando || !estadoImport?.planilla_cargada || !estadoImport?.histor_cargada"
        >
          {{ sincronizando ? 'Procesando...' : 'Procesar excels (sincronizar)' }}
        </button>
      </div>

      <div>
        <button (click)="limpiarImportacion()" [disabled]="sincronizando">Limpiar</button>
      </div>
    </div>

    <div *ngIf="sincronizando" class="info" style="margin-top:10px;">
      ⏳ Por favor espera: se están procesando los excels (puede tardar).
    </div>

    <div *ngIf="logImport.length > 0" class="info" style="margin-top:10px; white-space:pre-wrap;">
      <h4>Log importación</h4>
      <div *ngFor="let l of logImport">{{ l }}</div>
    </div>
  </div>

  <!-- ===================== -->
  <!-- HISTOGRAMA GENERAL -->
  <!-- ===================== -->
  <div class="seccion">
    <h2>Histograma general (plan anual real)</h2>

    <button (click)="cargarHistogramaGeneral()" [disabled]="cargandoHistGeneral || sincronizando">
      {{ cargandoHistGeneral ? 'Cargando...' : 'Ver histograma general' }}
    </button>

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

    <div *ngIf="histGeneral">
      <p>
        <strong>Pacientes incluidos:</strong> {{ histGeneral.pacientes_incluidos }}
        |
        <strong>Total esperado:</strong> {{ histGeneral.total_esperado }}
        |
        <strong>Total asistidas:</strong> {{ histGeneral.total_asistidas }}
        |
        <strong>% Cumplimiento:</strong> {{ histGeneral.porcentaje }}%
      </p>

      <h4>Por especialidad</h4>
      <canvas #canvasGeneralEsp style="width:100%; max-width:1100px; height:360px;"></canvas>

      <h4 style="margin-top:18px;">Por mes del programa (1..12)</h4>
      <canvas #canvasGeneralMes style="width:100%; max-width:1100px; height:360px;"></canvas>
    </div>
  </div>

  <!-- ===================== -->
  <!-- Tipo de búsqueda -->
  <!-- ===================== -->
  <div class="seccion">
    <h3>Tipo de búsqueda</h3>
    <label>
      <input type="radio" name="tipoBusqueda" value="documento" [(ngModel)]="tipoBusqueda" />
      Por número de documento
    </label>
    <label>
      <input type="radio" name="tipoBusqueda" value="nombre" [(ngModel)]="tipoBusqueda" />
      Por nombre completo
    </label>
  </div>

  <!-- Buscador -->
  <div class="seccion buscador">
    <input
      type="text"
      [(ngModel)]="termino"
      [placeholder]="tipoBusqueda === 'documento'
        ? 'Ej: 1013105461 o 1013...'
        : 'Ej: JHONATHAN, GUALDRON...'"
      (keyup.enter)="buscar()"
    />
    <button (click)="buscar()" [disabled]="sincronizando">Buscar</button>
  </div>

  <div *ngIf="cargando" class="info">Cargando pacientes...</div>
  <div *ngIf="error" class="error">{{ error }}</div>

  <!-- Resultados de pacientes -->
  <div class="seccion" *ngIf="pacientes.length > 0">
    <h3>Pacientes encontrados</h3>
    <table class="tabla">
      <thead>
        <tr>
          <th>Tipo doc.</th>
          <th>Documento</th>
          <th>Nombre completo</th>
          <th>Género</th>
          <th>Edad</th>
          <th>Detalle</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let p of pacientes">
          <td>{{ p.tipo_documento }}</td>
          <td>{{ p.numero_documento }}</td>
          <td>{{ p.nombre_completo }}</td>
          <td>{{ p.genero }}</td>
          <td>{{ p.edad }}</td>
          <td>
            <button (click)="seleccionarPaciente(p)">Ver citas</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <p *ngIf="!cargando && pacientes.length === 0 && !error" class="info">
    No hay resultados. Ingresa un criterio de búsqueda y presiona "Buscar".
  </p>

  <!-- Detalle de paciente -->
  <div class="seccion detalle" *ngIf="pacienteSeleccionado">
    <h3>Detalle del paciente</h3>
    <p><strong>Documento:</strong> {{ pacienteSeleccionado.numero_documento }}</p>
    <p><strong>Nombre:</strong> {{ pacienteSeleccionado.nombre_completo }}</p>
    <p><strong>Género:</strong> {{ pacienteSeleccionado.genero }}</p>
    <p><strong>Edad:</strong> {{ pacienteSeleccionado.edad }}</p>
    <p>
      <strong>Fecha de nacimiento:</strong>
      {{ pacienteSeleccionado.fecha_nacimiento | date:'yyyy-MM-dd' }}
    </p>
    <p><strong>Celular:</strong> {{ pacienteSeleccionado.celular }}</p>
    <p><strong>Correo:</strong> {{ pacienteSeleccionado.correo }}</p>

    <!-- HISTOGRAMA PACIENTE -->
    <h4>Histograma anual del paciente (plan por meses)</h4>

    <div *ngIf="cargandoHistPaciente" class="info">Cargando histograma del paciente...</div>
    <div *ngIf="errorHistPaciente" class="error">{{ errorHistPaciente }}</div>

    <div *ngIf="histPaciente">
      <p>
        <strong>Ingreso:</strong> {{ histPaciente.ingreso.fecha }} ({{ histPaciente.ingreso.fuente }})
        |
        <strong>Mes del programa:</strong> {{ histPaciente.ventana.mes_programa }}
      </p>

      <p>
        <strong>Este mes:</strong>
        {{ histPaciente.cumplimiento.asistidas_mes_actual }}/{{ histPaciente.cumplimiento.esperado_mes_actual }}
        ({{ histPaciente.cumplimiento.porcentaje_mes_actual }}%)
        |
        <strong>Hasta hoy:</strong>
        {{ hastaHoyAsistidas() }}/{{ hastaHoyEsperado() }}
        ({{ hastaHoyPorcentaje() }}%)
      </p>

      <canvas #canvasPaciente style="width:100%; max-width:1100px; height:360px;"></canvas>

      <table class="tabla" style="margin-top:10px;">
        <thead>
          <tr>
            <th>Mes</th>
            <th>Rango</th>
            <th>Esperado (mes)</th>
            <th>Asistidas (mes + arrastre)</th>
            <th>Pendiente (mes)</th>
            <th>Pendientes total</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let m of histPaciente.porMes">
            <td>{{ m.mes }}</td>
            <td>{{ m.inicio }} → {{ m.fin }}</td>
            <td>{{ valorEsperadoMes(m) }}</td>
            <td>{{ valorAsistidasMes(m) }}</td>
            <td>{{ valorPendienteMes(m) }}</td>
            <td>{{ valorPendientesTotal(m) }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Citas existentes -->
    <h4>Citas</h4>
    <div *ngIf="cargandoCitas" class="info">Cargando citas...</div>

    <!-- (tu bloque de citas sigue igual abajo) -->
  </div>
</div>
