/* global React, Icon, ExtraIcons, Card, Badge, Button, PageHeader, ProgressBar, Modal, Field, Input, Select, Textarea */
const { useState: _useStateP } = React;

// ============================================================================
// 10 · PORTAL FINANCIADORES
// ============================================================================

const FINANCIADORES = {
  'OSDE':          {afiliados:98, adh:88, delta:'+3,1pp', hba1c:41, cont:94, ult:'hace 2 días', estado:'Activo',    nivel:2, firma:'12/03/2026', acceso:'hace 2 días'},
  'Swiss Medical': {afiliados:52, adh:84, delta:'+2,4pp', hba1c:38, cont:91, ult:'hace 1 semana', estado:'Activo',  nivel:1, firma:'04/02/2026', acceso:'hace 1 semana'},
  'Galeno':        {afiliados:38, adh:81, delta:'+1,2pp', hba1c:35, cont:88, ult:'—',           estado:'Pendiente', nivel:null, firma:'—', acceso:'—'},
  'Medifé':        {afiliados:32, adh:86, delta:'+2,0pp', hba1c:40, cont:92, ult:'—',           estado:'Sin acceso', nivel:null, firma:'—', acceso:'—'},
  'OMINT':         {afiliados:24, adh:83, delta:'+1,8pp', hba1c:37, cont:89, ult:'—',           estado:'Sin acceso', nivel:null, firma:'—', acceso:'—'},
  'PAMI':          {afiliados:28, adh:79, delta:'+0,6pp', hba1c:33, cont:85, ult:'—',           estado:'Sin acceso', nivel:null, firma:'—', acceso:'—'},
  'IOMA':          {afiliados:18, adh:76, delta:'+0,2pp', hba1c:31, cont:82, ult:'—',           estado:'Sin acceso', nivel:null, firma:'—', acceso:'—'},
};

const TRENDS = {
  'OSDE':          [81, 83, 84, 86, 87, 88],
  'Swiss Medical': [78, 80, 81, 82, 83, 84],
  'Galeno':        [75, 77, 78, 79, 80, 81],
  'Medifé':        [80, 82, 83, 84, 85, 86],
  'OMINT':         [78, 79, 80, 81, 82, 83],
  'PAMI':          [73, 74, 75, 76, 78, 79],
  'IOMA':          [70, 71, 72, 73, 75, 76],
};

const CASOS_OSDE = [
  {id:'AFI-840221', dm:'DM2', adh:94, hba1c:6.8, retiro:'02/04',  ctrl:true,  est:'En meta'},
  {id:'AFI-840312', dm:'DM2', adh:88, hba1c:7.2, retiro:'05/04',  ctrl:true,  est:'En meta'},
  {id:'AFI-840428', dm:'DM2', adh:68, hba1c:8.6, retiro:'03/03',  ctrl:false, est:'En seguimiento'},
  {id:'AFI-840517', dm:'DM2', adh:82, hba1c:7.8, retiro:'08/04',  ctrl:true,  est:'En meta'},
  {id:'AFI-840634', dm:'DM1', adh:91, hba1c:7.0, retiro:'10/04',  ctrl:true,  est:'En meta'},
  {id:'AFI-840703', dm:'DM1', adh:86, hba1c:7.4, retiro:'09/04',  ctrl:true,  est:'En meta'},
  {id:'AFI-840811', dm:'DM2', adh:73, hba1c:8.1, retiro:'01/04',  ctrl:false, est:'Recuperación'},
  {id:'AFI-840920', dm:'DM2', adh:79, hba1c:7.6, retiro:'07/04',  ctrl:true,  est:'En meta'},
  {id:'AFI-841044', dm:'LADA',adh:84, hba1c:7.3, retiro:'11/04',  ctrl:true,  est:'En meta'},
  {id:'AFI-841188', dm:'DM2', adh:90, hba1c:7.1, retiro:'12/04',  ctrl:true,  est:'En meta'},
];

function PortalFinanciadoresPage() {
  const [fin, setFin] = _useStateP('OSDE');
  const [accesosOpen, setAccesosOpen] = _useStateP(false);
  const [pausarFin, setPausarFin] = _useStateP(null);
  const [editarFin, setEditarFin] = _useStateP(null);
  const d = FINANCIADORES[fin];
  const trend = TRENDS[fin];

  return <div className="px-7 py-6 max-w-[1480px]">
    <PageHeader
      titulo="Portal financiadores"
      subtitulo="Ventana de auditoría que Helios expone a cada financiador · accesos administrados por Helios"
      action={<div className="flex items-center gap-2">
        <FinSelector value={fin} onChange={setFin}/>
        <Badge tone="slate" size="sm">Solo lectura</Badge>
        <Badge tone="helios" size="sm" dot>Accesos activos: 3</Badge>
        <Button variant="outline" size="sm" icon={<Icon.users c="w-3.5 h-3.5"/>}
          onClick={()=>setAccesosOpen(true)}>Gestionar accesos</Button>
      </div>}/>

    {/* KPI STRIP */}
    <div className="grid grid-cols-5 gap-3 mb-5">
      <PfKpi l="Afiliados en programa"    v={d.afiliados}/>
      <PfKpi l="Adherencia promedio"      v={d.adh+'%'}   sub={d.delta+' vs trim. previo'} tone="ok"/>
      <PfKpi l="HbA1c en meta"            v={d.hba1c+'%'} sub="objetivo < 7,0" tone="warn"/>
      <PfKpi l="Continuidad terapéutica"  v={d.cont+'%'}  sub="sin interrupciones"/>
      <PfKpi l="Último acceso portal"     v={d.ult}       sub={'Auditado · Trazabilidad'}/>
    </div>

    {/* SECCIÓN 1 — Adherencia población */}
    <div className="grid grid-cols-3 gap-3 mb-4">
      <Card title={'Adherencia de tu población · '+fin}
        subtitle="Últimos 6 meses · línea de referencia: 85%" className="col-span-2">
        <TrendChart data={trend} benchmark={85} meses={['oct/25','nov/25','dic/25','ene/26','feb/26','mar/26']}/>
      </Card>
      <Card title="Por cohorte" subtitle={'Afiliados '+fin}>
        <CohorteBreakdown fin={fin}/>
      </Card>
    </div>

    {/* SECCIÓN 2 — Continuidad */}
    <div className="grid grid-cols-3 gap-3 mb-4">
      <Card title="Retiros en tiempo" subtitle="Este mes">
        <div className="flex items-baseline gap-2 mt-1">
          <div className="font-display font-extrabold text-[34px] text-ink-800 tabular-nums leading-none">82</div>
          <div className="text-[13px] text-ink-500">/ {d.afiliados} pacientes</div>
        </div>
        <div className="mt-3"><ProgressBar value={82} max={d.afiliados} tone="ok"/></div>
        <div className="text-[11px] text-ink-500 mt-2">{Math.round(82/d.afiliados*100)}% con retiro dentro de ventana clínica.</div>
      </Card>
      <Card title="Recetas vigentes" subtitle="Al día vs. por vencer">
        <div className="flex items-baseline gap-2 mt-1">
          <div className="font-display font-extrabold text-[34px] text-ink-800 tabular-nums leading-none">94</div>
          <div className="text-[13px] text-ink-500">/ {d.afiliados} al día</div>
        </div>
        <div className="mt-3 flex items-center gap-2">
          <Badge tone="warn" size="sm" dot>4 próximas a vencer</Badge>
        </div>
        <div className="text-[11px] text-ink-500 mt-2">Motor WF-REC renueva automáticamente 72h antes.</div>
      </Card>
      <Card title="Controles clínicos" subtitle="Con ≥1 control en 90 días">
        <div className="flex items-baseline gap-2 mt-1">
          <div className="font-display font-extrabold text-[34px] text-ink-800 tabular-nums leading-none">73%</div>
        </div>
        <div className="mt-3"><ProgressBar value={73} tone="warn"/></div>
        <div className="text-[11px] text-ink-500 mt-2">27% del padrón sin consulta trimestral · WF-CTRL activo.</div>
      </Card>
    </div>

    {/* SECCIÓN 3 — Casos individuales */}
    <Card
      title="Vista de casos individuales"
      subtitle={'10 afiliados '+fin+' · identificadores internos · sin datos personales'}
      action={<Badge tone="sun" size="sm" dot>Nivel 2 · datos clínicos básicos</Badge>}
      footer="Helios administra los accesos y puede modificarlos en cualquier momento. Toda consulta queda registrada en Trazabilidad."
      className="mb-4">
      <div className="grid grid-cols-[110px_60px_1fr_80px_90px_90px_140px] gap-3 px-2 py-2 border-b border-slate-100 text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">
        <span>ID afiliado</span><span>Tipo DM</span><span>Adherencia</span><span>HbA1c</span><span>Últ. retiro</span><span>Ctrl. al día</span><span>Estado</span>
      </div>
      {CASOS_OSDE.map(c => <div key={c.id}
        className="group relative grid grid-cols-[110px_60px_1fr_80px_90px_90px_140px] gap-3 items-center px-2 py-2.5 border-b border-slate-100 last:border-0 text-[12px] hover:bg-slate-50"
        title={'Nivel 2 · acuerdo firmado '+d.firma}>
        <span className="font-mono text-[11px] font-semibold text-ink-700">{c.id}</span>
        <Badge tone="slate" size="sm">{c.dm}</Badge>
        <div className="flex items-center gap-2 max-w-[260px]">
          <div className="flex-1"><ProgressBar value={c.adh} tone={c.adh>=85?'ok':c.adh>=75?'warn':'danger'}/></div>
          <span className="font-mono font-semibold tabular-nums w-9 text-[11px] text-right">{c.adh}%</span>
        </div>
        <span className={'font-mono text-[11.5px] tabular-nums '+(c.hba1c<=7?'text-[#1E8057] font-semibold':c.hba1c<=8?'text-[#D28513]':'text-[#B93535] font-semibold')}>{c.hba1c.toFixed(1)}</span>
        <span className="font-mono text-[11px] text-ink-600">{c.retiro}</span>
        {c.ctrl ? <Icon.check c="w-4 h-4 text-[#2EA571]"/> : <span className="text-[10.5px] text-ink-400 font-mono">Pendiente</span>}
        <Badge tone={c.est==='En meta'?'ok':c.est==='En seguimiento'?'warn':'helios'} size="sm" dot={c.est!=='En meta'}>{c.est}</Badge>
      </div>)}
    </Card>

    {/* SECCIÓN 4 — Consumo del programa */}
    <div className="grid grid-cols-2 gap-3 mb-4">
      <Card title="Dispensas del mes" subtitle={'Abril 2026 · '+fin}>
        <div className="flex items-baseline gap-4 mb-3">
          <div>
            <div className="font-display font-extrabold text-[28px] text-ink-800 tabular-nums leading-none">312</div>
            <div className="text-[11px] text-ink-500 mt-0.5">dispensas</div>
          </div>
          <div>
            <div className="font-display font-extrabold text-[28px] text-ink-800 tabular-nums leading-none">$3.980.000</div>
            <div className="text-[11px] text-ink-500 mt-0.5">ARS facturados</div>
          </div>
        </div>
        <MiniBars semanas={[62, 78, 84, 88]}/>
      </Card>
      <Card title="Cobertura de contacto" subtitle="Gaps detectados y resueltos">
        <div className="grid grid-cols-4 gap-2 mb-3">
          <MiniStat v="12" l="gaps" tone="warn"/>
          <MiniStat v="9"  l="resueltos auto" tone="ok"/>
          <MiniStat v="2"  l="escalados" tone="danger"/>
          <MiniStat v="1"  l="seguimiento"/>
        </div>
        <div className="flex items-center gap-3 pt-3 border-t border-slate-100">
          <span className="text-[11px] text-ink-500 flex-1">Tasa de cobertura de contacto</span>
          <div className="w-32"><ProgressBar value={91} tone="ok"/></div>
          <span className="font-mono font-bold text-[13px] tabular-nums">91%</span>
        </div>
      </Card>
    </div>

    <AccesosDrawer open={accesosOpen} onClose={()=>setAccesosOpen(false)}
      onPausar={(k)=>{setAccesosOpen(false); setPausarFin(k);}}
      onEditar={(k)=>{setAccesosOpen(false); setEditarFin(k);}}/>

    <PausarModal fin={pausarFin} onClose={()=>setPausarFin(null)}/>
    <EditarNivelModal fin={editarFin} onClose={()=>setEditarFin(null)}/>
  </div>;
}

// ---- Financiador selector
function FinSelector({value, onChange}) {
  const [open, setOpen] = _useStateP(false);
  return <div className="relative">
    <button type="button" onClick={()=>setOpen(o=>!o)}
      className="flex items-center gap-2 pl-3 pr-2 py-1.5 bg-white rounded-lg ring-1 ring-slate-200 hover:ring-slate-300 text-[12.5px] font-medium">
      <span className="text-ink-400 text-[10.5px] font-mono uppercase tracking-wider">Viendo como</span>
      <span className="text-ink-800 font-semibold">{value}</span>
      <svg className={'w-3 h-3 text-ink-400 transition-transform '+(open?'rotate-180':'')} viewBox="0 0 12 12" fill="none"><path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </button>
    {open && <>
      <div className="fixed inset-0 z-10" onClick={()=>setOpen(false)}/>
      <div className="absolute top-full mt-1 right-0 z-20 bg-white rounded-lg ring-1 ring-slate-200 shadow-[0_12px_32px_-8px_rgba(15,23,42,0.18)] py-1 min-w-[200px]">
        {Object.keys(FINANCIADORES).map(k => {
          const sel = k===value;
          return <button key={k} type="button" onClick={()=>{onChange(k);setOpen(false);}}
            className={'w-full flex items-center justify-between gap-2 px-3 py-1.5 text-[12px] text-left '+(sel?'bg-helios-50 text-helios-700 font-semibold':'text-ink-700 hover:bg-slate-50')}>
            <span>{k}</span>
            <span className="text-[10px] font-mono text-ink-400">{FINANCIADORES[k].afiliados} afiliados</span>
          </button>;
        })}
      </div>
    </>}
  </div>;
}

function PfKpi({l, v, sub, tone}) {
  const fg = tone==='ok'?'text-[#1E8057]':tone==='warn'?'text-[#D28513]':'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>;
}

// ---- Trend chart (6 meses + benchmark)
function TrendChart({data, benchmark, meses}) {
  const max = 100, min = 70;
  const h = 170, w = 560;
  const step = w/(data.length-1);
  const y = v => h - ((v-min)/(max-min))*h;
  const benchY = y(benchmark);
  const [hoverIdx, setHoverIdx] = _useStateP(null);
  const wrapRef = React.useRef(null);
  const svgRef = React.useRef(null);
  const [tipPos, setTipPos] = _useStateP({x:0,y:0});

  const onMove = (e) => {
    const rect = svgRef.current.getBoundingClientRect();
    const wrap = wrapRef.current.getBoundingClientRect();
    const scaleX = rect.width / (w+60);
    const svgX = (e.clientX - rect.left) / scaleX - 16;
    let best = 0, bestD = Infinity;
    for (let i=0;i<data.length;i++){
      const d = Math.abs(i*step - svgX);
      if (d<bestD){ bestD = d; best = i; }
    }
    setHoverIdx(best);
    setTipPos({x: e.clientX - wrap.left, y: e.clientY - wrap.top});
  };

  const prev = hoverIdx!==null && hoverIdx>0 ? data[hoverIdx]-data[hoverIdx-1] : null;

  return <div ref={wrapRef} className="mt-2 relative" onMouseLeave={()=>setHoverIdx(null)}>
    <svg ref={svgRef} viewBox={'-16 -16 '+(w+60)+' '+(h+40)} className="w-full" onMouseMove={onMove}>
      {/* grid */}
      {[80,85,90].map(g => <g key={g}>
        <line x1={0} x2={w} y1={y(g)} y2={y(g)} stroke="#E5E8EC" strokeWidth="1" strokeDasharray="2 3"/>
        <text x={-8} y={y(g)+3} textAnchor="end" fontSize="9" fontFamily="Inter, system-ui, sans-serif" fill="#94A3B8" fontWeight="500">{g}%</text>
      </g>)}
      {/* benchmark */}
      <line x1={0} x2={w} y1={benchY} y2={benchY} stroke="#D28513" strokeWidth="1.5" strokeDasharray="4 3"/>
      <text x={w+6} y={benchY+3} fontSize="9" fontFamily="Inter, system-ui, sans-serif" fill="#D28513" fontWeight="700" letterSpacing="0.3">BENCH {benchmark}%</text>
      {/* bars */}
      {data.map((v,i) => {
        const bx = i*step - 22, bw = 44;
        const active = hoverIdx===i;
        const dim = hoverIdx!==null && !active;
        return <g key={i}>
          <rect x={bx} y={y(v)} width={bw} height={h-y(v)} rx="3" fill="#268AA6" opacity={dim?0.35:(active?1:0.85)} style={{transition:'opacity 150ms'}}/>
          <text x={i*step} y={y(v)-6} textAnchor="middle" fontSize="10" fontFamily="Inter, system-ui, sans-serif" fill="#0B4A5F" fontWeight="700" style={{fontVariantNumeric:'tabular-nums', opacity: dim?0.4:1, transition:'opacity 150ms'}}>{v}%</text>
          <text x={i*step} y={h+16} textAnchor="middle" fontSize="9.5" fontFamily="Inter, system-ui, sans-serif" fill={active?'#0F172A':'#94A3B8'} fontWeight={active?700:500}>{meses[i]}</text>
        </g>;
      })}
    </svg>
    {hoverIdx!==null && <div
      className="absolute pointer-events-none z-10 bg-ink-800 text-white rounded-lg px-3 py-2 shadow-[0_8px_24px_-6px_rgba(15,23,42,0.4)] min-w-[150px]"
      style={{left:Math.min(tipPos.x+14, 420), top:tipPos.y-10}}>
      <div className="text-[10px] font-mono uppercase tracking-wider text-white/60 font-semibold">{meses[hoverIdx]}</div>
      <div className="font-display font-extrabold text-[18px] tabular-nums leading-none mt-0.5">{data[hoverIdx]}%</div>
      <div className="border-t border-white/15 mt-1.5 pt-1.5 space-y-0.5 text-[10.5px]">
        <div className="flex items-center justify-between gap-3">
          <span className="text-white/60">vs benchmark</span>
          <span className={'font-mono font-bold tabular-nums '+(data[hoverIdx]>=benchmark?'text-[#6EE7B7]':'text-[#FCA5A5]')}>{data[hoverIdx]>=benchmark?'+':''}{(data[hoverIdx]-benchmark).toFixed(1)}pp</span>
        </div>
        {prev!==null && <div className="flex items-center justify-between gap-3">
          <span className="text-white/60">vs mes ant.</span>
          <span className={'font-mono font-bold tabular-nums '+(prev>=0?'text-[#6EE7B7]':'text-[#FCA5A5]')}>{prev>=0?'+':''}{prev}pp</span>
        </div>}
      </div>
    </div>}
  </div>;
}

function CohorteBreakdown({fin}) {
  const base = {
    'OSDE':          [{g:'DM2 + GLP-1',n:44,adh:85},{g:'DM2 + SGLT2',n:32,adh:90},{g:'DM1',n:22,adh:92}],
    'Swiss Medical': [{g:'DM2 + GLP-1',n:22,adh:82},{g:'DM2 + SGLT2',n:18,adh:86},{g:'DM1',n:12,adh:88}],
    'Galeno':        [{g:'DM2 + GLP-1',n:16,adh:78},{g:'DM2 + SGLT2',n:14,adh:83},{g:'DM1',n:8, adh:85}],
    'Medifé':        [{g:'DM2 + GLP-1',n:14,adh:84},{g:'DM2 + SGLT2',n:12,adh:88},{g:'DM1',n:6, adh:89}],
    'OMINT':         [{g:'DM2 + GLP-1',n:10,adh:81},{g:'DM2 + SGLT2',n:8, adh:85},{g:'DM1',n:6, adh:86}],
    'PAMI':          [{g:'DM2 + GLP-1',n:12,adh:76},{g:'DM2 + SGLT2',n:10,adh:80},{g:'DM1',n:6, adh:83}],
    'IOMA':          [{g:'DM2 + GLP-1',n:8, adh:74},{g:'DM2 + SGLT2',n:6, adh:78},{g:'DM1',n:4, adh:80}],
  }[fin];
  return <div className="space-y-3 mt-1">
    {base.map(c => <div key={c.g}>
      <div className="flex items-baseline justify-between text-[11.5px] mb-1">
        <span className="font-semibold text-ink-800">{c.g}</span>
        <span className="font-mono text-ink-400">{c.n} afiliados</span>
      </div>
      <div className="flex items-center gap-2">
        <div className="flex-1"><ProgressBar value={c.adh} tone={c.adh>=85?'ok':'warn'}/></div>
        <span className="font-mono font-bold text-[11.5px] tabular-nums w-10 text-right">{c.adh}%</span>
      </div>
    </div>)}
  </div>;
}

function MiniBars({semanas}) {
  const max = Math.max(...semanas);
  const [hover, setHover] = _useStateP(null);
  const prev = hover!==null && hover>0 ? semanas[hover]-semanas[hover-1] : null;
  return <div className="relative">
    <div className="flex items-end gap-2 h-16">
      {semanas.map((v,i) => {
        const active = hover===i;
        const dim = hover!==null && !active;
        return <div key={i} className="flex-1 flex flex-col items-center gap-1 cursor-pointer"
          onMouseEnter={()=>setHover(i)} onMouseLeave={()=>setHover(null)}
          style={{opacity:dim?0.4:1, transition:'opacity 150ms'}}>
          <div className="text-[9.5px] font-mono text-ink-500 tabular-nums" style={{fontWeight:active?700:500,color:active?'#0F172A':undefined}}>{v}</div>
          <div className="w-full rounded-t" style={{height:(v/max*50)+'px',background:'#268AA6',opacity:active?1:0.8, transition:'opacity 150ms'}}/>
          <div className="text-[9px] font-mono" style={{color:active?'#0F172A':'#94A3B8',fontWeight:active?700:500}}>S{i+1}</div>
        </div>;
      })}
    </div>
    {hover!==null && <div className="absolute pointer-events-none z-10 bg-ink-800 text-white rounded-lg px-2.5 py-1.5 shadow-[0_8px_24px_-6px_rgba(15,23,42,0.4)] -translate-x-1/2 min-w-[110px]"
      style={{left:`${(hover+0.5)/semanas.length*100}%`, bottom:'calc(100% + 4px)'}}>
      <div className="text-[9.5px] font-mono uppercase tracking-wider text-white/60 font-semibold">Semana {hover+1}</div>
      <div className="font-display font-extrabold text-[14px] tabular-nums leading-none mt-0.5">{semanas[hover]}</div>
      {prev!==null && <div className="text-[10px] mt-0.5">
        <span className="text-white/60">vs S{hover} </span>
        <span className={'font-mono font-bold tabular-nums '+(prev>=0?'text-[#6EE7B7]':'text-[#FCA5A5]')}>{prev>=0?'+':''}{prev}</span>
      </div>}
    </div>}
  </div>;
}

function MiniStat({v, l, tone}) {
  const fg = tone==='ok'?'text-[#1E8057]':tone==='warn'?'text-[#D28513]':tone==='danger'?'text-[#B93535]':'text-ink-800';
  return <div className="bg-slate-50 rounded-lg px-2 py-2 text-center">
    <div className={'font-display font-extrabold text-[20px] leading-none tabular-nums '+fg}>{v}</div>
    <div className="text-[10px] text-ink-500 mt-1 leading-tight">{l}</div>
  </div>;
}

// ---- Drawer: Gestionar accesos
function AccesosDrawer({open, onClose, onPausar, onEditar}) {
  if (!open) return null;
  const rows = [
    {k:'OSDE',          e:'Activo',     n:2, ult:'hace 2 días'},
    {k:'Swiss Medical', e:'Activo',     n:1, ult:'hace 1 semana'},
    {k:'Galeno',        e:'Pendiente',  n:null, ult:'—'},
    {k:'PAMI',          e:'Sin acceso', n:null, ult:'—'},
    {k:'Medifé',        e:'Sin acceso', n:null, ult:'—'},
    {k:'OMINT',         e:'Sin acceso', n:null, ult:'—'},
  ];
  return <div className="fixed inset-0 z-50 flex justify-end" onClick={onClose}>
    <div className="absolute inset-0 bg-ink-900/40 backdrop-blur-[1px]"/>
    <div onClick={e=>e.stopPropagation()} className="relative w-[640px] h-full bg-white shadow-[0_0_40px_rgba(0,0,0,0.15)] flex flex-col">
      <div className="px-6 pt-5 pb-4 border-b border-slate-100 flex items-start justify-between">
        <div>
          <h3 className="text-[16px] font-semibold text-ink-800 font-display">Gestionar accesos al portal</h3>
          <p className="text-[12px] text-ink-500 mt-0.5">Helios decide qué financiador accede, con qué nivel y durante cuánto tiempo.</p>
        </div>
        <Button variant="ghost" size="sm" onClick={onClose}>Cerrar</Button>
      </div>
      <div className="flex-1 overflow-y-auto px-6 py-4">
        <div className="grid grid-cols-[140px_110px_110px_130px_1fr] gap-2 pb-2 border-b border-slate-100 text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">
          <span>Financiador</span><span>Estado</span><span>Nivel</span><span>Último acceso</span><span className="text-right">Acciones</span>
        </div>
        {rows.map(r => {
          const tone = r.e==='Activo'?'ok':r.e==='Pendiente'?'warn':'slate';
          return <div key={r.k} className="grid grid-cols-[140px_110px_110px_130px_1fr] gap-2 items-center py-2.5 border-b border-slate-100 text-[12px]">
            <span className="font-semibold text-ink-800">{r.k}</span>
            <Badge tone={tone} size="sm" dot>{r.e}</Badge>
            <span className="font-mono text-[11px] text-ink-600">{r.n?'Nivel '+r.n:'—'}</span>
            <span className="font-mono text-[10.5px] text-ink-500">{r.ult}</span>
            <div className="flex gap-1.5 justify-end">
              {r.e==='Activo' && <>
                <Button variant="outline" size="sm" onClick={()=>onPausar(r.k)}>Pausar</Button>
                <Button variant="ghost" size="sm" onClick={()=>onEditar(r.k)}>Editar nivel</Button>
              </>}
              {r.e==='Pendiente' && <Button variant="primary" size="sm">Activar</Button>}
              {r.e==='Sin acceso' && <Button variant="outline" size="sm">Invitar</Button>}
            </div>
          </div>;
        })}
        <div className="mt-4 rounded-lg bg-slate-50 p-3 text-[11.5px] text-ink-600 leading-snug">
          <div className="font-semibold text-ink-800 mb-1">Niveles de acceso</div>
          <div><span className="font-mono">Nivel 1</span> · solo métricas agregadas de la población.</div>
          <div><span className="font-mono">Nivel 2</span> · métricas + vista micro con identificadores internos.</div>
          <div><span className="font-mono">Nivel 3</span> · datos clínicos ampliados · requiere acuerdo específico.</div>
        </div>
      </div>
      <div className="px-6 py-3 border-t border-slate-100 text-[11px] text-ink-400">Toda consulta queda registrada en Trazabilidad.</div>
    </div>
  </div>;
}

function PausarModal({fin, onClose}) {
  if (!fin) return null;
  return <Modal open={true} onClose={onClose} title="Pausar acceso al portal"
    subtitle={fin+' dejará de poder consultar la información del programa.'}
    footer={<>
      <Button variant="outline" size="sm" onClick={onClose}>Cancelar</Button>
      <Button variant="danger" size="sm" onClick={onClose}>Pausar acceso</Button>
    </>}>
    <div className="text-[12.5px] text-ink-700 leading-relaxed">
      Mientras esté pausado, todas las consultas quedarán registradas como <span className="font-mono text-ink-800">[acceso denegado]</span> en el log de Trazabilidad. Podés reactivarlo desde esta misma pantalla.
    </div>
    <Field label="Motivo (visible solo para Helios)" className="mt-3">
      <Textarea rows={3} placeholder="Ej: revisión del acuerdo de tratamiento de datos…"/>
    </Field>
  </Modal>;
}

function EditarNivelModal({fin, onClose}) {
  const [nivel, setNivel] = _useStateP(2);
  if (!fin) return null;
  const opts = [
    {n:1, t:'Solo métricas agregadas', d:'Sin identificadores. Solo KPIs de la población.'},
    {n:2, t:'Métricas + vista micro',  d:'Incluye ID afiliado, tipo DM y datos clínicos básicos.'},
    {n:3, t:'Datos clínicos ampliados',d:'Requiere acuerdo específico firmado.'},
  ];
  return <Modal open={true} onClose={onClose} title={'Editar nivel de acceso · '+fin}
    subtitle="El cambio se aplica inmediatamente. Los accesos quedan auditados."
    footer={<>
      <Button variant="outline" size="sm" onClick={onClose}>Cancelar</Button>
      <Button variant="primary" size="sm" onClick={onClose}>Guardar cambios</Button>
    </>}>
    <div className="space-y-2">
      {opts.map(o => {
        const sel = nivel===o.n;
        return <button key={o.n} type="button" onClick={()=>setNivel(o.n)}
          className={'w-full text-left rounded-lg px-3 py-2.5 ring-1 transition-colors '+(sel?'bg-helios-50 ring-helios-300':'bg-white ring-slate-200 hover:bg-slate-50')}>
          <div className="flex items-center gap-2">
            <span className={'w-3.5 h-3.5 rounded-full ring-2 ring-inset shrink-0 '+(sel?'bg-helios-600 ring-helios-600':'bg-white ring-slate-300')}/>
            <span className="text-[12.5px] font-semibold text-ink-800">Nivel {o.n} · {o.t}</span>
          </div>
          <div className="text-[11.5px] text-ink-500 mt-1 ml-5">{o.d}</div>
        </button>;
      })}
    </div>
  </Modal>;
}

window.PortalFinanciadoresPage = PortalFinanciadoresPage;