/* global React, DATA, Icon, ExtraIcons, Card, Badge, Button, Avatar, StatePill, RiskPill, PageHeader, Tabs, ProgressBar, Modal, Field, Input, Select, Textarea */
const { useState } = React;

// ============================================================================
// 05 · ADHERENCIA  ·  06 · DISPENSA  ·  07 · FACTURACIÓN
// ============================================================================

// --- 05 · ADHERENCIA -------------------------------------------------------

// Escalamiento cards data — 7 casos activos
const ESCALADOS = [
  {id:'P-0221', n:'Roberto Tonini',          nivel:3, esquema:'DM2 + SGLT2',      gap:18, risk:88,
   motivo:'Sin respuesta 18 días + 2 llamadas sin atender + receta vence en 5 días',
   referente:'Dr. Martín Hidalgo · endocrinólogo', canalRef:'WhatsApp', horaRef:'hace 34 min'},
  {id:'P-0428', n:'María Elena Fernández',   nivel:2, esquema:'DM2 + GLP-1',      gap:22, risk:78,
   motivo:'Refirió efecto adverso GI en llamada. Requiere criterio médico.',
   recomendacion:'Derivar a Dra. Alemán · reevaluar esquema terapéutico'},
  {id:'P-0811', n:'Esteban Funes',           nivel:2, esquema:'DM2 + Metformina', gap:11, risk:64,
   motivo:'3 intentos WA sin respuesta + llamada no atendida',
   recomendacion:'Contacto telefónico insistente · verificar canal alternativo'},
  {id:'P-0703', n:'Verónica Colombo',        nivel:2, esquema:'DM1 Insulina',     gap:6,  risk:58,
   motivo:'Respondió WA con consulta clínica. Derivada a Lic. Ferrer.',
   recomendacion:'Seguimiento nutricional · respuesta en <24h'},
  {id:'P-0517', n:'Pedro Alvarado',          nivel:1, esquema:'DM2 + SGLT2',      gap:9,  risk:44, motivo:'WF-ADH corriendo · intento 1/3'},
  {id:'P-0634', n:'Javier Ramírez',          nivel:1, esquema:'DM2 + GLP-1',      gap:12, risk:52, motivo:'WF-ADH corriendo · intento 2/3'},
  {id:'P-0920', n:'Matías Gutiérrez',        nivel:1, esquema:'Insulinoterapia',  gap:7,  risk:46, motivo:'WF-ADH corriendo · intento 1/3'},
];

// Conversaciones WhatsApp — últimas 10 activas
const WA_CONV = [
  {id:'P-0428', n:'María Fernández',  ult:'"Hola María, notamos que hace 22 días…"',   resp:'"me marea, lo dejé"',          estado:'derivado', hace:'hace 42 min'},
  {id:'P-0312', n:'Jorge Benítez',    ult:'"Tu medicación está lista para retirar…"',  resp:'"voy mañana a las 10"',        estado:'respondio', hace:'hace 1 hs'},
  {id:'P-0221', n:'Roberto Tonini',   ult:'"Roberto, ¿pudiste retirar la medicación?"',resp:'(sin respuesta)',              estado:'sinresp',   hace:'hace 6 hs'},
  {id:'P-0517', n:'Pedro Alvarado',   ult:'"Tu receta vence en 7 días…"',              resp:'"ok gracias"',                 estado:'respondio', hace:'hace 2 hs'},
  {id:'P-0634', n:'Javier Ramírez',   ult:'"Javier, falta el consentimiento firmado…"',resp:'(sin respuesta)',              estado:'sinresp',   hace:'hace 1 día'},
  {id:'P-0703', n:'Verónica Colombo', ult:'"Hola Verónica, ¿cómo te cayó la nueva dosis?"', resp:'"tengo una duda de la cena"', estado:'derivado', hace:'hace 3 hs'},
  {id:'P-0811', n:'Esteban Funes',    ult:'"Esteban, pasó una semana desde el aviso…"',resp:'(sin respuesta)',              estado:'sinresp',   hace:'hace 8 hs'},
  {id:'P-0920', n:'Matías Gutiérrez', ult:'"Tenés la receta lista en Caballito."',    resp:'"paso el viernes"',            estado:'respondio', hace:'hace 30 min'},
  {id:'P-0402', n:'Silvina Pereyra',  ult:'"Confirmamos tu turno para mañana 15:00."',resp:'"perfecto, gracias"',          estado:'respondio', hace:'hace 12 min'},
  {id:'P-0189', n:'Alicia Lombardi',  ult:'"Hola Alicia, ¿pudiste hablar con tu médico?"', resp:'"todavía no, esta semana"', estado:'respondio', hace:'hace 4 hs'},
];

// Llamadas agente de voz — últimas 8
const VOICE_CALLS = [
  {id:'P-0221', n:'Roberto Tonini',   hora:'11:30', dur:'2:14 min', res:'Refirió malestar con la medicación. Derivado a Dra. Alemán.', prox:'Escalado a clínica', tone:'danger'},
  {id:'P-0428', n:'María Fernández',  hora:'10:15', dur:'1:48 min', res:'No atendió. Segundo intento.',                                prox:'Reintento programado 16:00', tone:'warn'},
  {id:'P-0811', n:'Esteban Funes',    hora:'09:45', dur:'3:02 min', res:'Confirmó retiro para mañana 10:00 en Caballito.',              prox:'Retiro agendado', tone:'ok'},
  {id:'P-0703', n:'Verónica Colombo', hora:'09:20', dur:'0:00 min', res:'No atendió.',                                                  prox:'SMS de seguimiento enviado', tone:'slate'},
  {id:'P-0517', n:'Pedro Alvarado',   hora:'09:02', dur:'1:12 min', res:'Confirmó recepción de receta. Sin observaciones.',             prox:'Seguimiento estándar', tone:'ok'},
  {id:'P-0634', n:'Javier Ramírez',   hora:'08:48', dur:'0:38 min', res:'Atendió familiar. Prometió devolver llamada.',                 prox:'Reintento programado 17:30', tone:'warn'},
  {id:'P-0920', n:'Matías Gutiérrez', hora:'08:30', dur:'0:00 min', res:'No atendió. Primer intento.',                                  prox:'Reintento programado 14:00', tone:'slate'},
  {id:'P-0402', n:'Silvina Pereyra',  hora:'08:14', dur:'2:42 min', res:'Reagendó consulta por conflicto laboral. Nuevo turno 02/05.',  prox:'Turno reagendado', tone:'ok'},
];

function AdherenciaPage({go, toast}) {
  const [tab, setTab] = useState('alertas');
  const [referenteOpen, setReferenteOpen] = useState(null);
  const [asignados, setAsignados] = useState({});

  const cohortes = [
    {g:'DM2 + GLP-1',          n:184, adh:74, gaps:31, tone:'danger'},
    {g:'DM2 + SGLT2',          n:142, adh:86, gaps:12, tone:'ok'},
    {g:'DM1 (Insulina basal)', n:58,  adh:91, gaps:4,  tone:'ok'},
    {g:'DM2 + Metformina solo',n:212, adh:88, gaps:18, tone:'ok'},
    {g:'Insulinoterapia plena',n:76,  adh:79, gaps:14, tone:'warn'},
  ];

  return <div className="px-7 py-6 max-w-[1480px]">
    <PageHeader titulo="Adherencia"
      subtitulo="Vista agregada de 248 pacientes · WF-ADH corriendo sobre 86 casos"
      action={<div className="flex gap-2">
        <Button variant="outline" size="sm" icon={<ExtraIcons.dl c="w-3.5 h-3.5"/>}>Exportar cohorte</Button>
        <Button variant="primary" size="sm" icon={<Icon.msg c="w-3.5 h-3.5"/>}>Campaña masiva</Button>
      </div>}/>

    {/* KPI strip: 5 tiles, last one with pulsing "Motor activo" */}
    <div className="grid grid-cols-5 gap-3 mb-5">
      <Kpi l="Adherencia promedio" v="82,4%" sub="Global · últimos 90d" tone="warn"/>
      <Kpi l="Gaps abiertos" v="86" sub="↑ 7 vs semana anterior" tone="danger"/>
      <Kpi l="Recuperados esta semana" v="42" sub="Retomaron dispensa" tone="ok"/>
      <Kpi l="Tasa de éxito WF-ADH" v="78%" sub="sin escalar a humano"/>
      <KpiLlamadas/>
    </div>

    <div className="bg-white rounded-t-2xl border border-slate-100 border-b-0">
      <Tabs
        tabs={[
          {key:'alertas',  label:'Alertas y escalamiento'},
          {key:'canales',  label:'Canales activos'},
          {key:'cohortes', label:'Cohortes'},
          {key:'resol',    label:'Resolución WF-ADH'},
        ]}
        active={tab} onChange={setTab}
        counts={{alertas:7, canales:'live', cohortes:5}}
      />
    </div>
    <div className="bg-white rounded-b-2xl border border-slate-100 p-5 mb-4"
      style={{boxShadow:'0 1px 2px rgba(15,23,42,0.04)'}}>

      {tab==='alertas' && <AlertasTab data={ESCALADOS} go={go} toast={toast}
        asignados={asignados} setAsignados={setAsignados}
        onReferente={(row)=>setReferenteOpen(row)}/>}

      {tab==='canales' && <CanalesTab go={go} toast={toast}/>}

      {tab==='cohortes' && <CohortesTab cohortes={cohortes} go={go}/>}

      {tab==='resol' && <ResolucionTab/>}
    </div>

    <ReferenteModal open={!!referenteOpen} row={referenteOpen}
      onClose={()=>setReferenteOpen(null)}
      onSend={(canal)=>{toast && toast('Referente contactado por '+canal,'ok'); setReferenteOpen(null);}}/>
  </div>;
}

// ---- KPI: Llamadas autónomas con dot "Motor activo" pulsante
function KpiLlamadas() {
  return <div className="bg-white rounded-xl border border-slate-100 px-3.5 py-2.5 relative"
    style={{boxShadow:'0 1px 2px rgba(15,23,42,0.04)'}}>
    <div className="flex items-start justify-between gap-2">
      <div className="text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold leading-tight">Llamadas<br/>autónomas hoy</div>
      <span className="inline-flex items-center gap-1 shrink-0 mt-0.5">
        <span className="relative flex h-1.5 w-1.5">
          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#2EA571] opacity-70"/>
          <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#2EA571]"/>
        </span>
        <span className="text-[9px] font-mono uppercase tracking-wider text-[#1E8057] font-semibold">Motor activo</span>
      </span>
    </div>
    <div className="font-display font-extrabold text-[22px] text-ink-800 tabular-nums leading-none mt-1.5">38</div>
    <div className="text-[10.5px] text-ink-500 mt-1">26 atendidas · 68%</div>
  </div>;
}

// ---- Tab: Alertas y escalamiento (3 niveles)
function AlertasTab({data, go, toast, asignados, setAsignados, onReferente}) {
  const n1 = data.filter(d=>d.nivel===1);
  const n2 = data.filter(d=>d.nivel===2);
  const n3 = data.filter(d=>d.nivel===3);
  return <div className="space-y-5">
    <div className="grid grid-cols-3 gap-3">
      <NivelHeader nivel={3} count={n3.length}/>
      <NivelHeader nivel={2} count={n2.length}/>
      <NivelHeader nivel={1} count={n1.length}/>
    </div>

    {/* Nivel 3 — críticos */}
    <div>
      <SectionLabel tone="danger" title="Nivel 3 · Alerta crítica a referente clínico"
        hint="Patrón que sugiere riesgo de interrupción prolongada del tratamiento o discontinuidad económica material."/>
      {n3.map(r => <EscaladoRow key={r.id} row={r} go={go} onReferente={onReferente}/>)}
    </div>

    {/* Nivel 2 — operador */}
    <div>
      <SectionLabel tone="sun" title="Nivel 2 · Escalado a operador de adherencia"
        hint="Casos priorizados en la cola del equipo con historial completo y acción recomendada por el sistema."/>
      {n2.map(r => <EscaladoRow key={r.id} row={r} go={go}
        asignado={asignados[r.id]}
        onTomar={()=>{setAsignados(a=>({...a,[r.id]:true})); toast && toast('Caso '+r.id+' asignado a vos','ok');}}/>)}
    </div>

    {/* Nivel 1 — motor activo */}
    <div>
      <SectionLabel tone="ok" title="Nivel 1 · Seguimiento automático estándar"
        hint="El sistema maneja el caso con la secuencia multicanal habitual. No aparece en la cola humana."/>
      {n1.map(r => <EscaladoRow key={r.id} row={r} go={go}/>)}
    </div>
  </div>;
}

function NivelHeader({nivel, count}) {
  const cfg = {
    3:{tone:'danger', bg:'bg-[#E04B4B]/5',  ring:'ring-[#E04B4B]/25', fg:'text-[#B93535]', label:'Nivel 3 · Clínico', sub:'Alerta crítica'},
    2:{tone:'sun',    bg:'bg-[#EEA028]/5',  ring:'ring-[#EEA028]/25', fg:'text-[#D28513]', label:'Nivel 2 · Operador', sub:'Cola humana priorizada'},
    1:{tone:'ok',     bg:'bg-[#2EA571]/5',  ring:'ring-[#2EA571]/25', fg:'text-[#1E8057]', label:'Nivel 1 · Motor',    sub:'Secuencia automática'},
  }[nivel];
  return <div className={'rounded-xl px-4 py-3 ring-1 '+cfg.bg+' '+cfg.ring}>
    <div className="flex items-baseline justify-between">
      <span className={'text-[10px] font-mono uppercase tracking-wider font-semibold '+cfg.fg}>{cfg.label}</span>
      <span className={'font-display font-extrabold text-[22px] tabular-nums '+cfg.fg}>{count}</span>
    </div>
    <div className="text-[11px] text-ink-500 mt-0.5">{cfg.sub}</div>
  </div>;
}

function SectionLabel({tone, title, hint}) {
  const dot = tone==='danger'?'bg-[#E04B4B]':tone==='sun'?'bg-[#EEA028]':'bg-[#2EA571]';
  return <div className="flex items-center gap-2 px-1 pb-2 mb-1">
    <span className={'w-1.5 h-1.5 rounded-full '+dot}/>
    <h4 className="text-[12.5px] font-semibold text-ink-800">{title}</h4>
    <span className="text-[11px] text-ink-400 font-normal">· {hint}</span>
  </div>;
}

function EscaladoRow({row, go, onTomar, onReferente, asignado}) {
  const n = row.nivel;
  const border = n===3?'border-l-[#E04B4B]':n===2?'border-l-[#EEA028]':'border-l-[#2EA571]';
  return <div className={'border border-slate-100 border-l-2 rounded-lg mb-2 px-3 py-2.5 hover:bg-slate-50/70 transition-colors '+border}>
    <div className="grid grid-cols-[150px_minmax(180px,1.4fr)_minmax(280px,2.2fr)_auto] gap-3 items-start">
      <div className="min-w-0 flex flex-col gap-1.5 items-start pt-0.5">
        <div className="font-mono text-[10.5px] text-ink-500">{row.id}</div>
        {n===3 && <Badge tone="danger" size="sm" dot className="whitespace-nowrap text-[10px] px-1.5 py-0.5">Alerta · clínico</Badge>}
        {n===2 && <Badge tone="sun" size="sm" dot className="whitespace-nowrap text-[10px] px-1.5 py-0.5">{asignado?'Asignado · vos':'Escalado · operador'}</Badge>}
        {n===1 && <Badge tone="ok" size="sm" className="whitespace-nowrap text-[10px] px-1.5 py-0.5">Motor activo</Badge>}
      </div>

      <div className="flex items-center gap-2 min-w-0">
        <Avatar name={row.n} size="sm" tone={n===3?'rose2':n===2?'sun':'helios'}/>
        <div className="min-w-0">
          <div className="text-[12.5px] font-semibold text-ink-800 truncate">{row.n}</div>
          <div className="text-[10.5px] text-ink-400 truncate">{row.esquema} · gap {row.gap}d · score {row.risk}</div>
        </div>
      </div>

      <div className="min-w-0 text-[11.5px]">
        <div className="text-ink-700 leading-snug">{row.motivo}</div>
        {n===3 && row.referente && <div className="flex items-center gap-1.5 mt-1 text-[10.5px] text-ink-500">
          <Icon.bell c="w-3 h-3 text-[#B93535]"/>
          <span>Notificado: <span className="font-medium text-ink-700">{row.referente}</span> vía <span className="font-mono text-ink-600">{row.canalRef}</span> · <span className="text-ink-400">{row.horaRef}</span></span>
        </div>}
        {n===2 && row.recomendacion && <div className="mt-1 text-[10.5px] text-ink-500">
          <span className="font-mono uppercase tracking-wider text-[9.5px] font-semibold text-[#D28513]">Sugerido</span>
          <span className="ml-1.5">{row.recomendacion}</span>
        </div>}
      </div>

      <div className="flex gap-1.5 justify-end">
        {n===3 && <>
          <Button variant="danger" size="sm" icon={<Icon.bell c="w-3.5 h-3.5"/>}
            onClick={()=>onReferente && onReferente(row)}>Contactar referente</Button>
          <Button variant="outline" size="sm" onClick={()=>go('caso',row.id)}>Ver caso</Button>
        </>}
        {n===2 && <>
          <Button variant={asignado?'soft':'primary'} size="sm" onClick={onTomar} disabled={asignado}>
            {asignado?'Tomado':'Tomar caso'}
          </Button>
          <Button variant="outline" size="sm" onClick={()=>go('caso',row.id)}>Historial</Button>
        </>}
        {n===1 && <Button variant="ghost" size="sm" iconRight={<Icon.chevR c="w-3 h-3"/>} onClick={()=>go('caso',row.id)}>Ver</Button>}
      </div>
    </div>
  </div>;
}

// ---- Tab: Canales activos (WhatsApp + Voz)
function CanalesTab({go, toast}) {
  return <div className="space-y-4">
    {/* WhatsApp */}
    <div className="rounded-xl border border-slate-100 overflow-hidden">
      <div className="px-5 pt-4 pb-3 flex items-start justify-between gap-3 border-b border-slate-100">
        <div>
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-lg bg-[#2EA571]/10 flex items-center justify-center"><Icon.msg c="w-3.5 h-3.5 text-[#1E8057]"/></div>
            <h3 className="text-[14px] font-semibold text-ink-800 font-display">WhatsApp orquestado — hoy</h3>
            <Badge tone="ok" size="sm" dot>En vivo</Badge>
          </div>
          <p className="text-[12px] text-ink-400 mt-1 ml-9">Plantillas validadas · clasificación IA de respuestas · derivación automática al escalar.</p>
        </div>
      </div>
      <div className="grid grid-cols-4 gap-0 border-b border-slate-100">
        <MiniKpi l="Mensajes enviados" v="124"/>
        <MiniKpi l="Respondidos"      v="89"  sub="72%" tone="ok"/>
        <MiniKpi l="Derivados a humano" v="14" tone="warn"/>
        <MiniKpi l="Pendientes de respuesta" v="21" tone="slate"/>
      </div>
      <div className="px-5 pt-3 pb-1 text-[11px] font-mono uppercase tracking-wider text-ink-400 font-semibold">Últimas 10 conversaciones activas</div>
      <div className="px-2 pb-2">
        <div className="grid grid-cols-[80px_minmax(140px,1.2fr)_minmax(220px,2fr)_minmax(180px,1.3fr)_130px_90px_92px] gap-3 px-3 py-2 text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">
          <span>ID</span><span>Paciente</span><span>Último mensaje enviado</span><span>Respuesta</span><span>Estado</span><span>Hace</span><span className="text-right">Acción</span>
        </div>
        {WA_CONV.map(c => <WARow key={c.id} c={c} go={go}/>)}
      </div>
    </div>

    {/* Voz autónoma */}
    <div className="rounded-xl border border-slate-100 overflow-hidden">
      <div className="px-5 pt-4 pb-3 flex items-start justify-between gap-3 border-b border-slate-100">
        <div>
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-lg bg-helios-50 flex items-center justify-center"><Icon.phone c="w-3.5 h-3.5 text-helios-700"/></div>
            <h3 className="text-[14px] font-semibold text-ink-800 font-display">Agente de voz autónomo — hoy</h3>
            <span className="inline-flex items-center gap-1">
              <span className="relative flex h-1.5 w-1.5">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#2EA571] opacity-70"/>
                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#2EA571]"/>
              </span>
              <span className="text-[9.5px] font-mono uppercase tracking-wider text-[#1E8057] font-semibold">Motor activo</span>
            </span>
          </div>
          <p className="text-[12px] text-ink-500 mt-1 ml-9 max-w-[720px] leading-snug">
            El agente realiza conversaciones naturales para confirmar retiros, reagendar consultas y detectar señales de abandono.
            <span className="text-ink-400"> No es un IVR con opciones numéricas.</span>
          </p>
        </div>
      </div>
      <div className="grid grid-cols-4 gap-0 border-b border-slate-100">
        <MiniKpi l="Llamadas realizadas" v="38"/>
        <MiniKpi l="Atendidas" v="26" sub="68%" tone="ok"/>
        <MiniKpi l="No atendidas" v="12" tone="slate"/>
        <MiniKpi l="Escaladas tras llamada" v="6" tone="danger"/>
      </div>
      <div className="px-5 pt-3 pb-1 text-[11px] font-mono uppercase tracking-wider text-ink-400 font-semibold">Últimas 8 llamadas</div>
      <div className="px-2 pb-2">
        <div className="grid grid-cols-[80px_minmax(140px,1.2fr)_60px_78px_minmax(280px,2.4fr)_minmax(180px,1fr)] gap-3 px-3 py-2 text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">
          <span>ID</span><span>Paciente</span><span>Hora</span><span>Duración</span><span>Resultado</span><span>Próxima acción</span>
        </div>
        {VOICE_CALLS.map(c => <VoiceRow key={c.hora+c.id} c={c} go={go}/>)}
      </div>
    </div>
  </div>;
}

function MiniKpi({l, v, sub, tone}) {
  const fg = tone==='ok'?'text-[#1E8057]':tone==='warn'?'text-[#D28513]':tone==='danger'?'text-[#B93535]':'text-ink-800';
  return <div className="px-5 py-3 border-r border-slate-100 last:border-r-0">
    <div className="text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">{l}</div>
    <div className="flex items-baseline gap-1.5 mt-1">
      <div className={'font-display font-extrabold text-[22px] tabular-nums leading-none '+fg}>{v}</div>
      {sub && <div className={'text-[11px] font-mono font-semibold '+fg}>{sub}</div>}
    </div>
  </div>;
}

function WARow({c, go}) {
  const st = {
    respondio:{tone:'ok',   label:'Respondió'},
    sinresp:  {tone:'slate',label:'Sin respuesta'},
    derivado: {tone:'warn', label:'Derivado'},
  }[c.estado];
  return <div className="grid grid-cols-[80px_minmax(140px,1.2fr)_minmax(220px,2fr)_minmax(180px,1.3fr)_130px_90px_92px] gap-3 items-center px-3 py-2.5 border-t border-slate-50 text-[12px] hover:bg-slate-50/60">
    <span className="font-mono text-[11px] text-ink-500">{c.id}</span>
    <div className="flex items-center gap-2 min-w-0">
      <Avatar name={c.n} size="sm" tone="helios"/>
      <span className="font-semibold truncate">{c.n}</span>
    </div>
    <span className="text-[11.5px] text-ink-600 truncate italic">{c.ult}</span>
    <span className={'text-[11.5px] truncate '+(c.resp.startsWith('(')?'text-ink-400 italic':'text-ink-800 font-medium')}>{c.resp}</span>
    <Badge tone={st.tone} size="sm" dot={c.estado!=='respondio'}>{st.label}</Badge>
    <span className="text-[10.5px] font-mono text-ink-400">{c.hace}</span>
    <div className="flex justify-end">
      {c.estado==='sinresp'
        ? <Button variant="outline" size="sm" onClick={()=>go('caso',c.id)}>Escalar</Button>
        : <Button variant="ghost" size="sm" onClick={()=>go('caso',c.id)}>Ver caso</Button>}
    </div>
  </div>;
}

function VoiceRow({c, go}) {
  return <div className="grid grid-cols-[80px_minmax(140px,1.2fr)_60px_78px_minmax(280px,2.4fr)_minmax(180px,1fr)] gap-3 items-start px-3 py-2.5 border-t border-slate-50 text-[12px] hover:bg-slate-50/60">
    <span className="font-mono text-[11px] text-ink-500 pt-0.5">{c.id}</span>
    <div className="flex items-center gap-2 min-w-0">
      <Avatar name={c.n} size="sm" tone="helios"/>
      <span className="font-semibold truncate">{c.n}</span>
    </div>
    <span className="font-mono text-[11px] text-ink-600 pt-0.5">{c.hora}</span>
    <span className="font-mono text-[11px] text-ink-600 pt-0.5">{c.dur}</span>
    <span className="text-[11.5px] text-ink-700 leading-snug">{c.res}</span>
    <div>
      <Badge tone={c.tone} size="sm" dot={c.tone!=='ok'}>{c.prox}</Badge>
    </div>
  </div>;
}

// ---- Tab: Cohortes
function CohortesTab({cohortes, go}) {
  return <div>
    <div className="flex items-baseline justify-between mb-3 px-1">
      <div>
        <h3 className="text-[14px] font-semibold text-ink-800 font-display">Adherencia por cohorte</h3>
        <p className="text-[12px] text-ink-400 mt-0.5">Agrupado por esquema terapéutico · ventana 90 días</p>
      </div>
      <Button variant="ghost" size="sm" iconRight={<Icon.chevR c="w-3 h-3"/>} onClick={()=>go('casos')}>Ver catálogo completo</Button>
    </div>
    <table className="w-full text-[12px]">
      <thead><tr className="text-[10px] font-mono uppercase tracking-wider text-ink-400 border-b border-slate-100">
        <th className="text-left py-2">Cohorte</th><th className="text-left">N</th><th className="text-left">Adh. media</th><th className="text-left">Gaps abiertos</th><th></th>
      </tr></thead>
      <tbody>
        {cohortes.map(c => <tr key={c.g} className="border-b border-slate-100 last:border-0 hover:bg-slate-50">
          <td className="py-2.5 font-semibold text-ink-800">{c.g}</td>
          <td className="font-mono text-ink-600">{c.n}</td>
          <td>
            <div className="flex items-center gap-2">
              <div className="w-24"><ProgressBar value={c.adh} tone={c.adh>=85?'ok':c.adh>=75?'warn':'danger'}/></div>
              <span className="font-mono font-semibold text-[11.5px] tabular-nums w-10">{c.adh}%</span>
            </div>
          </td>
          <td><Badge tone={c.gaps>20?'danger':c.gaps>15?'warn':'ok'} size="sm">{c.gaps}</Badge></td>
          <td className="text-right"><Button variant="ghost" size="sm" iconRight={<Icon.chevR c="w-3 h-3"/>} onClick={()=>go('casos')}>Ver pacientes</Button></td>
        </tr>)}
      </tbody>
    </table>
  </div>;
}

// ---- Tab: Resolución WF-ADH (with voice agent channel)
function ResolucionTab() {
  const rows = [
    {l:'Resueltos con WhatsApp',        v:48, t:'ok'},
    {l:'Resueltos con llamada autónoma',v:22, t:'helios', nuevo:true},
    {l:'Resueltos con SMS',             v:18, t:'teal2'},
    {l:'Escalados a clínica',           v:14, t:'warn'},
    {l:'Escalados a económico',         v:6,  t:'sun'},
    {l:'Sin respuesta',                 v:4,  t:'danger'},
  ];
  return <div>
    <div className="mb-3 px-1">
      <h3 className="text-[14px] font-semibold text-ink-800 font-display">Resolución WF-ADH · últimos 30 días</h3>
      <p className="text-[12px] text-ink-400 mt-0.5">Desglose de los 112 casos cerrados por canal de resolución.</p>
    </div>
    <div className="space-y-2.5 max-w-[680px]">
      {rows.map(r => <div key={r.l} className="flex items-center gap-3">
        <div className="flex-1 flex items-center gap-2 min-w-0">
          <span className="text-[12.5px] text-ink-700">{r.l}</span>
          {r.nuevo && <Badge tone="helios" size="sm">Nuevo</Badge>}
        </div>
        <div className="w-40"><ProgressBar value={r.v} max={50} tone={r.t}/></div>
        <span className="font-mono text-[12px] font-semibold w-8 text-right tabular-nums">{r.v}</span>
      </div>)}
    </div>
    <div className="mt-5 pt-4 border-t border-slate-100 text-[12px] text-ink-500">
      <span className="font-display font-bold text-ink-800 tabular-nums">72</span> de
      <span className="font-display font-bold text-ink-800 tabular-nums"> 86</span> gaps resueltos
      <span className="text-ink-700 font-medium"> sin intervención humana directa</span>
      <span className="text-ink-400"> · 83,7% de autonomía del motor</span>
    </div>
  </div>;
}

// ---- Modal: Contactar referente clínico
function ReferenteModal({open, row, onClose, onSend}) {
  const [canal, setCanal] = useState('WhatsApp');
  const [msg, setMsg] = useState('');
  if (!row) return null;
  const canales = [
    {k:'WhatsApp', icon:<Icon.msg c="w-3.5 h-3.5"/>,   dest:'+54 9 11 4832-7611'},
    {k:'Llamada',  icon:<Icon.phone c="w-3.5 h-3.5"/>, dest:'+54 11 4832-7611'},
    {k:'Email',    icon:<Icon.mail c="w-3.5 h-3.5"/>,  dest:'mhidalgo@heliossalud.com.ar'},
  ];
  const cSel = canales.find(c=>c.k===canal);
  return <Modal open={open} onClose={onClose} title="Contactar referente clínico"
    subtitle={row.referente}
    footer={<>
      <Button variant="outline" size="sm" onClick={onClose}>Cancelar</Button>
      <Button variant="primary" size="sm" onClick={()=>onSend(canal)} icon={cSel?.icon}>Enviar por {canal}</Button>
    </>}>
    <div className="space-y-3">
      <div className="bg-[#E04B4B]/5 ring-1 ring-[#E04B4B]/20 rounded-lg px-3 py-2.5">
        <div className="text-[10px] font-mono uppercase tracking-wider text-[#B93535] font-semibold mb-1">Caso · {row.id}</div>
        <div className="text-[12.5px] font-semibold text-ink-800">{row.n}</div>
        <div className="text-[11.5px] text-ink-600 mt-1 leading-snug">{row.motivo}</div>
      </div>

      <Field label="Canal">
        <div className="grid grid-cols-3 gap-1.5">
          {canales.map(c => <button key={c.k} type="button" onClick={()=>setCanal(c.k)}
            className={'flex items-center justify-center gap-1.5 px-2.5 py-2 rounded-lg text-[12px] font-medium transition-colors ring-1 '+
              (canal===c.k?'bg-helios-50 text-helios-700 ring-helios-300':'bg-white text-ink-700 ring-slate-200 hover:bg-slate-50')}>
            {c.icon}{c.k}
          </button>)}
        </div>
      </Field>

      <Field label="Destinatario">
        <Input value={cSel.dest} readOnly/>
      </Field>

      <Field label="Mensaje">
        <Textarea rows={4} value={msg} onChange={e=>setMsg(e.target.value)}
          placeholder={'Dr./Dra., activamos alerta por '+row.n+'. '+row.motivo+' Requerimos su criterio clínico para continuar.'}/>
      </Field>
    </div>
  </Modal>;
}

// --- 06 · DISPENSA ---------------------------------------------------------
function DispensaPage({go, toast}) {
  const [open, setOpen] = useState(false);
  const pendientes = DATA.pacientes.slice(0,6).map((p,i) => ({...p, tipo:['Pendiente','Listo para retirar','En camino'][i%3], sede:['Obispo Trejo','Caballito','Morón','Quilmes','La Plata','Rosario'][i%6]}));
  const hoy = [
    {t:'12:45',p:'P-0428',n:'María Fernández',f:'Dulaglutida 1.5mg',s:'Caballito',r:'Pendiente confirmación',t2:'warn'},
    {t:'12:10',p:'P-0312',n:'Roberto Tonini',f:'Empagliflozina 25mg',s:'Obispo Trejo',r:'Retirado · firmado',t2:'ok'},
    {t:'11:35',p:'P-0189',n:'Alicia Lombardi',f:'Glargina U300',s:'Morón',r:'Retirado · firmado',t2:'ok'},
    {t:'11:02',p:'P-0503',n:'Claudio Ferraro',f:'Metformina 850mg',s:'Obispo Trejo',r:'En preparación',t2:'helios'},
    {t:'10:18',p:'P-0627',n:'Beatriz Salgado',f:'Insulina NPH',s:'Quilmes',r:'Retirado · firmado',t2:'ok'},
    {t:'09:42',p:'P-0221',n:'Daniel Esposito',f:'Dulaglutida 1.5mg',s:'La Plata',r:'Rechazado · receta vencida',t2:'danger'},
  ];

  return <div className="px-7 py-6 max-w-[1480px]">
    <PageHeader titulo="Dispensa"
      subtitulo="Centro operativo de dispensas · 6 sedes activas"
      action={<Button variant="primary" size="sm" icon={<ExtraIcons.pin c="w-3.5 h-3.5"/>} onClick={()=>setOpen(true)}>Registrar dispensa</Button>}/>

    <div className="grid grid-cols-5 gap-3 mb-5">
      <Kpi l="Hoy" v="24" sub="Dispensas completadas" tone="ok"/>
      <Kpi l="En preparación" v="8"/>
      <Kpi l="Pendientes retiro" v="12" sub="Listos en sede" tone="warn"/>
      <Kpi l="Observadas" v="2" sub="Requieren revisión" tone="danger"/>
      <Kpi l="Cobertura semana" v="97,2%" tone="ok"/>
    </div>

    <div className="grid grid-cols-3 gap-3 mb-4">
      <Card title="Dispensas por sede · hoy" className="col-span-2">
        <div className="space-y-2 mt-2">
          {[
            {s:'Obispo Trejo · CABA',n:8, cap:12, m:'Operativa'},
            {s:'Caballito · CABA',n:6, cap:8, m:'Operativa'},
            {s:'Morón · GBA Oeste',n:4, cap:6, m:'Operativa'},
            {s:'Quilmes · GBA Sur',n:3, cap:5, m:'Operativa'},
            {s:'La Plata',n:2, cap:4, m:'Operativa'},
            {s:'Rosario',n:1, cap:3, m:'Stock bajo'},
          ].map(s => <div key={s.s} className="flex items-center gap-3 p-2">
            <div className="w-8 h-8 rounded-lg bg-helios-50 text-helios-700 flex items-center justify-center shrink-0"><ExtraIcons.pin c="w-3.5 h-3.5"/></div>
            <div className="flex-1 min-w-0"><div className="text-[12.5px] font-semibold text-ink-800">{s.s}</div><div className="text-[10.5px] text-ink-400">{s.m}</div></div>
            <div className="w-32"><ProgressBar value={s.n} max={s.cap} tone={s.n>=s.cap*0.9?'warn':'ok'}/></div>
            <div className="font-mono text-[12px] font-semibold tabular-nums w-14 text-right">{s.n}/{s.cap}</div>
          </div>)}
        </div>
      </Card>

      <Card title="Logística" subtitle="Rutas activas CABA + Interior">
        <div className="space-y-2 mt-2">
          <LogRow ruta="RT-014" destino="Rosario · 3 paq." estado="En tránsito" hora="ETA 16:30" tone="helios"/>
          <LogRow ruta="RT-013" destino="Córdoba · 5 paq." estado="Entregado" hora="12:10" tone="ok"/>
          <LogRow ruta="RT-012" destino="Mendoza · 2 paq." estado="Demorado" hora="+2h" tone="warn"/>
          <LogRow ruta="RT-011" destino="Mar del Plata" estado="En sede" hora="Listo" tone="helios"/>
        </div>
      </Card>
    </div>

    <Card title="Feed de dispensa · hoy" subtitle="24 movimientos · última actualización hace 2 min">
      <div className="grid grid-cols-[60px_80px_minmax(180px,2fr)_minmax(160px,1.4fr)_minmax(110px,1fr)_180px_64px] gap-3 px-2 py-2 border-b border-slate-100 text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">
        <span>Hora</span><span>ID</span><span>Paciente</span><span>Fármaco</span><span>Sede</span><span>Estado</span><span className="text-right">Acc.</span>
      </div>
      {hoy.map((h,i) => <div key={i} className="grid grid-cols-[60px_80px_minmax(180px,2fr)_minmax(160px,1.4fr)_minmax(110px,1fr)_180px_64px] gap-3 items-center px-2 py-2.5 border-b border-slate-100 last:border-0 text-[12px] hover:bg-slate-50">
        <span className="font-mono text-[11px] text-ink-500">{h.t}</span>
        <span className="font-mono text-[11px]">{h.p}</span>
        <span className="font-semibold truncate">{h.n}</span>
        <span className="text-ink-700 truncate">{h.f}</span>
        <div className="min-w-0"><Badge tone="slate" size="sm">{h.s}</Badge></div>
        <div className="min-w-0"><Badge tone={h.t2} size="sm" dot={h.t2!=='ok'}>{h.r}</Badge></div>
        <div className="flex justify-end"><Button variant="ghost" size="sm" onClick={()=>go('caso',h.p)}>Ver</Button></div>
      </div>)}
    </Card>

    <Modal open={open} onClose={()=>setOpen(false)} title="Registrar dispensa"
      subtitle="Operación manual · el workflow automático completa el resto"
      footer={<><Button variant="outline" size="sm" onClick={()=>setOpen(false)}>Cancelar</Button>
        <Button variant="primary" size="sm" onClick={()=>{toast('Dispensa registrada','ok');setOpen(false);}}>Confirmar</Button></>}>
      <div className="space-y-3">
        <Field label="Paciente"><Input placeholder="Buscar por nombre, DNI o ID…"/></Field>
        <div className="grid grid-cols-2 gap-3">
          <Field label="Sede"><Select><option>Obispo Trejo</option><option>Caballito</option><option>Morón</option><option>Quilmes</option><option>La Plata</option><option>Rosario</option></Select></Field>
          <Field label="Fecha/hora"><Input type="datetime-local" defaultValue="2026-04-23T15:00"/></Field>
        </div>
        <Field label="Medicamentos"><Input placeholder="Dulaglutida 1.5mg × 4"/></Field>
        <Field label="Observaciones"><Textarea placeholder="—"/></Field>
      </div>
    </Modal>
  </div>;
}
function LogRow({ruta, destino, estado, hora, tone}) {
  return <div className="flex items-center gap-2 p-2 rounded-lg hover:bg-slate-50">
    <div className="w-7 h-7 rounded-md bg-slate-100 flex items-center justify-center shrink-0"><ExtraIcons.truck c="w-3.5 h-3.5 text-ink-500"/></div>
    <div className="flex-1 min-w-0">
      <div className="text-[11.5px] font-semibold">{ruta} · <span className="text-ink-500 font-normal">{destino}</span></div>
      <div className="text-[10px] font-mono text-ink-400">{hora}</div>
    </div>
    <Badge tone={tone} size="sm" dot={tone!=='ok'}>{estado}</Badge>
  </div>;
}

// --- 07 · FACTURACIÓN ------------------------------------------------------
function FacturacionPage({go}) {
  const legajos = [
    {n:'LEG-2026-04-0128',p:'P-0428',pn:'María Fernández',f:'OSDE 310',m:'$284.900',e:'Pendiente doc.',t:'warn'},
    {n:'LEG-2026-04-0127',p:'P-0312',pn:'Roberto Tonini',f:'Swiss Medical',m:'$186.400',e:'Listo para facturar',t:'ok'},
    {n:'LEG-2026-04-0126',p:'P-0189',pn:'Alicia Lombardi',f:'Galeno 440',m:'$312.200',e:'Con diferencia',t:'danger'},
    {n:'LEG-2026-04-0125',p:'P-0503',pn:'Claudio Ferraro',f:'Medifé Plata',m:'$98.700',e:'Listo para facturar',t:'ok'},
    {n:'LEG-2026-04-0124',p:'P-0627',pn:'Beatriz Salgado',f:'OSDE 410',m:'$222.500',e:'Facturado',t:'ok2'},
    {n:'LEG-2026-04-0123',p:'P-0221',pn:'Daniel Esposito',f:'OMINT Plata',m:'$142.100',e:'En revisión',t:'helios'},
  ];
  const fin = [
    {n:'OSDE',x:'$3,98 M', pac:98, p:42},
    {n:'Swiss Medical',x:'$2,14 M', pac:52, p:22},
    {n:'Galeno',x:'$1,78 M', pac:38, p:16},
    {n:'Medifé',x:'$1,21 M', pac:32, p:12},
    {n:'OMINT',x:'$0,92 M', pac:24, p:8},
    {n:'PAMI',x:'$0,88 M', pac:28, p:10},
    {n:'Unión Personal',x:'$0,65 M', pac:18, p:6},
    {n:'Accord',x:'$0,32 M', pac:12, p:4},
  ];

  return <div className="px-7 py-6 max-w-[1480px]">
    <PageHeader titulo="Facturación"
      subtitulo="Pipeline del dinero · 134 casos cerrados este mes"
      action={<div className="flex gap-2">
        <Button variant="outline" size="sm" icon={<ExtraIcons.dl c="w-3.5 h-3.5"/>}>Exportar período</Button>
        <Button variant="primary" size="sm" icon={<Icon.check c="w-3.5 h-3.5"/>}>Facturar lote</Button>
      </div>}/>

    <div className="grid grid-cols-4 gap-3 mb-5">
      <Kpi l="Facturación esperada" v="$12,84 M" sub="Proyección abril"/>
      <Kpi l="Confirmado" v="$9,21 M" sub="134 casos" tone="ok"/>
      <Kpi l="Pendiente doc." v="$2,18 M" sub="34 casos en armado" tone="warn"/>
      <Kpi l="Diferencias motor" v="$450 K" sub="4 casos · revisar" tone="danger"/>
    </div>

    <Card title="Pipeline del dinero" subtitle="Casos por etapa · valor retenido en cada fase" className="mb-4">
      <div className="grid grid-cols-5 gap-2">
        {[
          {l:'Alta',n:18, v:'$1.2 M'},
          {l:'Dispensa',n:58,v:'$4.8 M'},
          {l:'Doc. completa',n:22,v:'$2.4 M'},
          {l:'Legajo armado',n:26,v:'$2.9 M'},
          {l:'Facturado',n:134,v:'$9.2 M'},
        ].map((s,i)=><div key={s.l} className={'rounded-xl px-3 py-3 '+(i===4?'bg-[#2EA571]/10 ring-1 ring-[#2EA571]/20':'bg-slate-50 ring-1 ring-slate-100')}>
          <div className="text-[10px] font-mono uppercase text-ink-400 font-semibold">{s.l}</div>
          <div className="font-display font-extrabold text-[22px] text-ink-800 tabular-nums leading-none mt-1">{s.n}</div>
          <div className="text-[11px] text-ink-500 mt-1">{s.v}</div>
        </div>)}
      </div>
    </Card>

    <div className="grid grid-cols-3 gap-3 mb-4">
      <Card title="Facturación por financiador · abril 2026" className="col-span-2">
        <table className="w-full text-[12px]">
          <thead><tr className="text-[10px] font-mono uppercase tracking-wider text-ink-400 border-b border-slate-100">
            <th className="text-left py-2">Financiador</th><th className="text-left">Pacientes</th><th className="text-left">Casos</th><th className="text-left">Facturado</th>
          </tr></thead>
          <tbody>
            {fin.map(f => <tr key={f.n} className="border-b border-slate-100 last:border-0">
              <td className="py-2 font-semibold text-ink-800">{f.n}</td>
              <td className="font-mono">{f.pac}</td>
              <td className="font-mono">{f.p}</td>
              <td className="font-mono font-semibold">{f.x}</td>
            </tr>)}
          </tbody>
        </table>
      </Card>
      <Card title="Calendario de vencimientos" subtitle="Próximas presentaciones">
        {[
          {f:'30 abr',fin:'OSDE',m:'$3,98 M',d:'6 días'},
          {f:'05 may',fin:'Swiss Medical',m:'$2,14 M',d:'11 días'},
          {f:'10 may',fin:'Galeno',m:'$1,78 M',d:'16 días'},
          {f:'15 may',fin:'PAMI',m:'$0,88 M',d:'21 días'},
        ].map(v => <div key={v.fin} className="flex items-center gap-3 py-2 border-b border-slate-100 last:border-0">
          <div className="text-center w-10 shrink-0">
            <div className="font-mono text-[10px] text-helios-700 font-semibold uppercase">{v.f.split(' ')[1]}</div>
            <div className="font-display font-bold text-[16px] text-ink-800 leading-none">{v.f.split(' ')[0]}</div>
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-[12px] font-semibold">{v.fin}</div>
            <div className="text-[10.5px] text-ink-400">{v.d}</div>
          </div>
          <div className="font-mono font-bold text-[12px]">{v.m}</div>
        </div>)}
      </Card>
    </div>

    <Card title="Legajos en armado" subtitle="34 legajos pendientes · ordenados por antigüedad">
      <div className="grid grid-cols-[1.4fr_1fr_1.2fr_1fr_1fr_1fr_auto] gap-3 px-2 py-2 border-b border-slate-100 text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">
        <span>Legajo</span><span>Caso</span><span>Paciente</span><span>Financiador</span><span>Monto</span><span>Estado</span><span></span>
      </div>
      {legajos.map(l => <div key={l.n} className="grid grid-cols-[1.4fr_1fr_1.2fr_1fr_1fr_1fr_auto] gap-3 items-center px-2 py-2.5 border-b border-slate-100 last:border-0 text-[12px] hover:bg-slate-50">
        <span className="font-mono text-[11px] font-semibold">{l.n}</span>
        <span className="font-mono text-[11px] text-ink-500">{l.p}</span>
        <span className="font-semibold">{l.pn}</span>
        <span className="text-ink-700">{l.f}</span>
        <span className="font-mono font-semibold tabular-nums">{l.m}</span>
        <Badge tone={l.t==='ok2'?'ok':l.t} size="sm" dot={l.t!=='ok2'}>{l.e}</Badge>
        <Button variant="ghost" size="sm" onClick={()=>go('caso',l.p)}>Ver</Button>
      </div>)}
    </Card>
  </div>;
}

function Kpi({l,v,sub,tone}) {
  const fg = tone==='ok'?'text-[#1E8057]':tone==='warn'?'text-[#D28513]':tone==='danger'?'text-[#B93535]':'text-ink-800';
  return <div className="bg-white rounded-xl border border-slate-100 px-3.5 py-2.5" style={{boxShadow:'0 1px 2px rgba(15,23,42,0.04)'}}>
    <div className="text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">{l}</div>
    <div className={'font-display font-extrabold text-[22px] tabular-nums leading-none mt-1 '+fg}>{v}</div>
    {sub && <div className="text-[10.5px] text-ink-500 mt-1">{sub}</div>}
  </div>;
}

window.AdherenciaPage = AdherenciaPage;
window.DispensaPage = DispensaPage;
window.FacturacionPage = FacturacionPage;