// ─── Directorio · Médicos — lista + detalle (7 secciones) ──────────────────
// MedicosScreen (lista, sobre EntityListScreen) + MedicoDetailScreen (detalle
// read-only + Editar → RecordFormScreen). Movido a screens/directorio/ (P10,
// junto con entidades.jsx/particulares.jsx — mismo esqueleto sobre dir-kit).
// Expone a window: MedicosScreen, MedicoDetailScreen. Consume window.MEDICOS
// (core/colecciones.js), EntityListScreen/useEntityStats (ui/
// entity-list.jsx), MED_ESTADO_CFG (dominio/pipeline.js), Avatar/TablePill
// (ui/primitives.jsx), DirHeader/DirCard/DirFieldGrid/DirChip/DirRegistros/
// DirNotas (ui/dir-kit.jsx), MedicoCentros (screens/directorio/medico-centros.jsx).
//
// FIX P13 (ítem 17, anti-patrón `|| MEDICOS[0]` residual): mismo fix que
// EntidadDetailScreen (screens/directorio/entidades.jsx) — guard de
// fetch-and-merge (molde de InventarioDetailScreen, P10) en vez de caer
// silenciosamente a MEDICOS[0] si `medicoId` no está en la ventana hidratada.
//
// DECISIÓN 1 (ARBITRAJES.md ítem 1, 06/07/2026): "Agregar centro"/lápiz por-centro
// (disabled-honesto desde AUDITORIA-ui-decorativa-05-07-2026.md) cobran vida real —
// ver medico-centros.jsx, dueño del CRUD contra /api/medico-entidades.
const { useState: _useStateMedD, useEffect: _useEffectMedD } = React;

// ─── Lista ──────────────────────────────────────────
function MedicosScreen({ onOpen, onNew }) {
  const todasEspecialidades = [...new Set(MEDICOS.flatMap(m => m.especialidades || [m.especialidad]).filter(Boolean))];
  // Especialidad más frecuente (derivada)
  const espCount = {};
  MEDICOS.forEach(m => (m.especialidades || [m.especialidad]).filter(Boolean).forEach(e => { espCount[e] = (espCount[e] || 0) + 1; }));
  const topEsp = Object.keys(espCount).sort((a, b) => espCount[b] - espCount[a])[0] || '—';

  // v_medicos_stats: {activos, especialidades, sumDerivaciones, porEspecialidad}.
  // "Centros" (distinct entidadId de centros[]) no está en la vista — queda local.
  const srvStats = window.useEntityStats('medicos');
  const kActivos = srvStats ? srvStats.activos : MEDICOS.filter(m => m.estado === 'ACTIVO').length;
  const kEspecialidades = srvStats ? srvStats.especialidades : todasEspecialidades.length;
  const kDerivaciones = srvStats ? srvStats.sumDerivaciones : MEDICOS.reduce((s, m) => s + (m.derivaciones || 0), 0);
  const kPorEsp = srvStats ? (srvStats.porEspecialidad || {}) : null;
  // FIX AUDITORIA-ui-decorativa-05-07-2026.md BAJA "KpiCard 'Centros' del header de la
  // lista de Médicos": `m.centros` nunca llega poblado (GET /api/medicos sin join a
  // medico_entidad, que no tiene ruta; la tabla `medicos` ni tiene columna `centros`) —
  // contador estructuralmente siempre 0. Se saca (CLAUDE.md decisión estructural #3),
  // vuelve el día que medico_entidad tenga ruta de lectura.

  return (
    <EntityListScreen
      eyebrow="Directorio · Médicos"
      rowChevron
      title="Médicos"
      description="Profesionales que derivan expedientes y operan en los centros asociados."
      primaryAction={{ label: 'Nuevo médico', icon: IconPlus, onClick: onNew }}
      secondaryAction={{ label: 'Exportar', icon: IconDownload }}
      kpis={[
        { label: 'Activos',          value: String(kActivos), deltaTone: 'neutral', icon: IconStethoscope },
        { label: 'Especialidades',   value: String(kEspecialidades), deltaTone: 'neutral', icon: IconBriefcase },
        { label: 'Derivaciones',     value: String(kDerivaciones), deltaTone: 'neutral', icon: IconTrendingUp },
      ]}
      filterChips={{
        options: todasEspecialidades.map(e => ({
          label: e, value: e,
          count: kPorEsp ? (kPorEsp[e] || 0) : MEDICOS.filter(m => (m.especialidades || [m.especialidad]).includes(e)).length,
        })).filter(o => o.count > 0),
        applyFilter: (m, v) => (m.especialidades || [m.especialidad]).includes(v),
        allLabel: 'Todas',
      }}
      columns={[
        { key: 'medico', label: 'Médico', width: 'minmax(190px, 1fr)',
          render: m => (
            <div className="flex items-center gap-3 min-w-0">
              <Avatar name={`${m.nombre} ${m.apellido}`} />
              <div className="min-w-0">
                <p className="text-[13px] font-bold truncate" style={{ color: 'var(--foreground)' }}>
                  {`${m.titulo ? m.titulo + ' ' : ''}${m.nombre} ${m.apellido}`}
                </p>
                <p className="font-mono text-[11px] font-bold tracking-wide uppercase mt-0.5" style={{ color: 'var(--accent)' }}>{m.publicId}</p>
              </div>
            </div>
          ),
        },
        { key: 'especialidades', label: 'Especialidades', width: 'minmax(170px, 1fr)',
          render: m => {
            const esps = m.especialidades || [m.especialidad];
            return (
              <div className="flex flex-wrap gap-1.5">
                {esps.slice(0, 2).map((e, i) => <TablePill key={i} label={e} tone="accent" />)}
                {esps.length > 2 && <TablePill label={`+${esps.length - 2}`} tone="neutral" />}
              </div>
            );
          },
        },
        { key: 'telefono', label: 'Teléfono', width: 'minmax(140px, 1fr)', mono: true,
          render: m => <span className="text-[12px] font-mono tabular-nums" style={{ color: 'var(--muted-foreground)' }}>{m.telefono}</span> },
        { key: 'matricula', label: 'Matrícula', width: 'minmax(130px, 1fr)',
          render: m => (
            <div className="min-w-0">
              <p className="font-mono text-[11.5px] font-bold tabular-nums" style={{ color: 'var(--foreground)' }}>{m.matricula || m.matriculaProvincial || '—'}</p>
              {m.matricula && m.matriculaProvincial && (
                <p className="font-mono text-[10.5px] tabular-nums mt-0.5" style={{ color: 'var(--muted-foreground)' }}>{m.matriculaProvincial}</p>
              )}
            </div>
          ),
        },
        { key: 'expedientes', label: 'Expedientes', width: 'minmax(110px, 1fr)',
          render: m => <span className="text-[14px] font-extrabold tabular-nums" style={{ color: 'var(--foreground)' }}>{m.expedientes}</span> },
        { key: 'estado', label: 'Estado', width: 'minmax(120px, 1fr)',
          render: m => {
            const cfg = MED_ESTADO_CFG[m.estado] || MED_ESTADO_CFG.ACTIVO;
            return <TablePill label={cfg.label} tone={cfg.tone} />;
          },
        },
      ]}
      rows={MEDICOS}
      collection="medicos"
      searchPlaceholder="Buscar por nombre, matrícula o especialidad…"
      searchFilter={(m, q) =>
        `${m.nombre} ${m.apellido}`.toLowerCase().includes(q) ||
        (m.especialidades || [m.especialidad]).filter(Boolean).join(' ').toLowerCase().includes(q) ||
        (m.matricula || '').toLowerCase().includes(q) ||
        (m.email || '').toLowerCase().includes(q)
      }
      onRowClick={onOpen}
      dateField="fechaCreacion"
      exportFilename="Médicos"
      exportConfig={[
        { label: 'ID', value: (m) => m.publicId },
        { label: 'Nombre', value: (m) => `${m.titulo ? m.titulo + ' ' : ''}${m.nombre} ${m.apellido}` },
        { label: 'Especialidades', value: (m) => (m.especialidades || [m.especialidad]).filter(Boolean).join(', ') },
        { label: 'Matrícula', value: (m) => m.matricula },
        { label: 'Teléfono', value: (m) => m.telefono || '' },
        { label: 'Email', value: (m) => m.email || '' },
        { label: 'Expedientes', value: (m) => m.expedientes },
        { label: 'Derivaciones', value: (m) => m.derivaciones || 0 },
        { label: 'Estado', value: (m) => (MED_ESTADO_CFG[m.estado] || {}).label || m.estado || '' },
      ]}
    />
  );
}

// ─── Detalle ────────────────────────────────────────
function MedicoDetailScreen({ medicoId, onBack, navigator, onEdit }) {
  // Guard fetch-and-merge (ver header) — nunca MEDICOS[0].
  const foundLocal = (window.MEDICOS || []).find(x => x.id === medicoId);
  const [, _setMergeTickMed] = _useStateMedD(0);
  const [notFoundMed, setNotFoundMed] = _useStateMedD(false);
  _useEffectMedD(() => {
    if (foundLocal || !medicoId) return undefined;
    let cancelled = false;
    fetch(`/api/medicos/${encodeURIComponent(medicoId)}`, { credentials: 'same-origin' })
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((server) => {
        if (cancelled || !server || !server.id) throw new Error('sin id');
        const col = window.MEDICOS || (window.MEDICOS = []);
        if (!col.some((x) => x.id === server.id)) col.push(server);
        _setMergeTickMed((t) => t + 1);
      })
      .catch((err) => {
        if (cancelled) return;
        console.warn('[MedicoDetailScreen] fetch-and-merge', medicoId, err);
        setNotFoundMed(true);
      });
    return () => { cancelled = true; };
  }, [medicoId, foundLocal]);

  if (!foundLocal) {
    if (notFoundMed) {
      return (
        <div className="space-y-6 pt-2">
          <button onClick={onBack} className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.12em] cursor-pointer" style={{ color: 'var(--muted-foreground)' }}>
            <IconArrowLeft size={13} />Volver a Médicos
          </button>
          <p className="text-[14px] font-semibold" style={{ color: 'var(--muted-foreground)' }}>No se encontró el médico.</p>
        </div>
      );
    }
    return null;
  }
  const m = foundLocal;
  const estCfg = MED_ESTADO_CFG[m.estado] || MED_ESTADO_CFG.ACTIVO;
  const esps = m.especialidades || [m.especialidad];
  const [exportToast, setExportToast] = _useStateMedD(null);

  // Datos personales
  const datosPersonales = [
    { label: 'Nombre y apellido', value: `${m.titulo ? m.titulo + ' ' : ''}${m.nombre} ${m.apellido}` },
    { label: 'DNI',               value: m.dni,             mono: true },
    { label: 'CUIT',              value: m.cuit,            mono: true },
  ];

  // Matrículas (combinado con especialidades)
  const matriculas = [
    { label: 'Matrícula Nacional',   value: m.matricula,             mono: true, accent: true },
    { label: 'Matrícula Provincial', value: m.matriculaProvincial,   mono: true, accent: true },
  ];

  // Contacto
  const contacto = [
    { label: 'Teléfono', value: m.telefono, mono: true },
    { label: 'Email',    value: m.email },
  ];

  // Acuerdo comercial
  const acuerdo = [
    { label: 'Comisión',              value: m.comision ? `${m.comision.porcentaje}%` : '—', mono: true, accent: true },
    { label: 'Forma de liquidación',  value: m.comision?.formaLiquidacion || '—' },
    { label: 'CBU',                   value: m.comision?.cbu || '—',                          mono: true },
    { label: 'Alias',                 value: m.comision?.cbuAlias || '—',                     mono: true },
  ];

  return (
    <div className="space-y-7 pt-2">

      {/* Header con avatar grande */}
      <DirHeader
        backLabel="Volver a Médicos"
        eyebrow="Directorio · Médico"
        onBack={onBack}
        avatar={<Avatar name={`${m.nombre} ${m.apellido}`} size={64} />}
        title={`${m.titulo ? m.titulo + ' ' : ''}${m.nombre} ${m.apellido}`}
        subtitle={
          <>
            <span className="font-mono font-bold" style={{ color: 'var(--accent)' }}>{m.publicId}</span>
            <span className="mx-1.5 opacity-50">·</span>
            <span className="font-mono">{m.matricula}</span>
            {esps[0] && <><span className="mx-1.5 opacity-50">·</span><span>{esps[0]}</span></>}
          </>
        }
        statusLabel={estCfg.label}
        statusTone={estCfg.tone}
        actions={<>
          {/* FIX MEDIA "Exportar de detalle de Médico": wired de verdad (dirExportRegistro,
              ui/dir-kit.jsx) — antes sin onClick. */}
          <button className="btn btn-outline" onClick={() => {
            const res = dirExportRegistro(`Médico ${m.publicId}`, [datosPersonales, matriculas, contacto, acuerdo]);
            setExportToast(`Exportado · 1 fila${res.format === 'csv' ? ' (CSV)' : ''}`);
            setTimeout(() => setExportToast(null), 3600);
          }}><IconDownload size={15} /><span className="hidden sm:inline">Exportar</span></button>
          <button className="btn btn-primary" onClick={() => onEdit && onEdit()}><IconPencil size={14} /><span className="hidden sm:inline">Editar</span></button>
        </>}
      />

      {/* Datos personales */}
      <DirCard eyebrow="Datos personales">
        <DirFieldGrid fields={datosPersonales} cols={3} />
      </DirCard>

      {/* Matrículas + Especialidades */}
      <DirCard eyebrow="Matrículas y especialidades">
        <DirFieldGrid fields={matriculas} cols={3} />
        <div className="mt-7 pt-6" style={{ borderTop: '1px solid color-mix(in oklab, var(--border) 50%, transparent)' }}>
          <p className="text-[10.5px] font-bold uppercase tracking-[0.14em] mb-3" style={{ color: 'var(--muted-foreground)' }}>
            Especialidades
          </p>
          <div className="flex flex-wrap gap-2">
            {esps.map((e, i) => <DirChip key={i} label={e} tone="accent" />)}
          </div>
        </div>
      </DirCard>

      {/* Contacto */}
      <DirCard eyebrow="Contacto">
        <DirFieldGrid fields={contacto} cols={3} />
      </DirCard>

      {/* Centros donde opera — DECISIÓN 1 (ARBITRAJES.md ítem 1, 06/07/2026): CRUD real
          contra /api/medico-entidades (antes disabled-honesto,
          AUDITORIA-ui-decorativa-05-07-2026.md MEDIA "Agregar centro + lápiz por centro").
          Partido a su propio archivo (medico-centros.jsx) — mismo criterio que
          entidad-subrecursos.jsx: tema aparte (fetch/POST/PATCH/DELETE + modal) del layout
          de solo-lectura de esta ficha. */}
      <MedicoCentros medicoId={m.id} navigator={navigator} />

      {/* Acuerdo comercial */}
      <DirCard eyebrow="Acuerdo comercial">
        <DirFieldGrid fields={acuerdo} />
      </DirCard>

      {/* Registros asociados */}
      <div className="space-y-3">
        <p className="text-[11px] font-bold uppercase tracking-[0.2em]" style={{ color: 'var(--accent)' }}>
          Registros asociados
        </p>
        <DirRegistros items={[
          { label: 'Expedientes',         value: String(m.expedientes),     sublabel: 'activos',   icon: <IconFileText size={16} />, onClick: () => navigator && navigator.toExpedientes({ medicoId: m.id }) },
          { label: 'Pacientes atendidos', value: String(m.derivaciones),    sublabel: 'derivados', icon: <IconUsers size={16} />,    onClick: () => navigator && navigator.toParticulares({ medicoId: m.id }) },
        ]} />
      </div>

      {/* Notas */}
      <DirNotas notas={m.notas} />

      <DirToast message={exportToast} />
    </div>
  );
}

Object.assign(window, { MedicosScreen, MedicoDetailScreen });