/* global React, DATA, Icon, ExtraIcons, Card, Badge, Button, Avatar, PageHeader, Tabs, ProgressBar, Field, Input, Select, FilterSelect, ChartTooltip, useOnScreen, AnalyticsFilterProvider, useAnalyticsFilter */
const { useState, useRef, useMemo } = React;

// ============================================================================
// 08 · ANALÍTICA  ·  09 · TRAZABILIDAD  ·  10 · CONFIGURACIÓN
// ============================================================================

// --- 08 · ANALÍTICA --------------------------------------------------------
function AnaliticaPage() {
  return <AnalyticsFilterProvider><AnaliticaInner/></AnalyticsFilterProvider>;
}

function AnaliticaInner() {
  const [periodo, setPeriodo] = useState('Trimestre');
  const {fin, setFin} = useAnalyticsFilter();
  return <div className="px-7 py-6 max-w-[1480px]">
    <PageHeader titulo="Analítica"
      subtitulo="Visión ejecutiva del programa · comparativos y tendencias"
      action={<div className="flex gap-2 items-center">
        <div className="flex rounded-lg border border-slate-200 bg-white overflow-hidden">
          {['Mes','Trimestre','Año'].map(p => <button key={p} onClick={()=>setPeriodo(p)}
            className={['px-2.5 py-1.5 text-[11.5px] font-medium',periodo===p?'bg-helios-50 text-helios-700':'text-ink-500 hover:bg-slate-50'].join(' ')}>{p}</button>)}
        </div>
        <Button variant="outline" size="sm" icon={<ExtraIcons.dl c="w-3.5 h-3.5"/>}>Exportar</Button>
      </div>}/>

    {fin && <div className="-mt-3 mb-4 flex items-center gap-2">
      <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-helios-50 border border-helios-200 text-[11.5px] text-helios-700 animate-fade-in">
        <span className="font-mono uppercase tracking-wider text-[9.5px] font-semibold text-helios-700/70">Filtrando</span>
        <span className="font-semibold">{fin}</span>
        <button onClick={()=>setFin(null)} className="w-4 h-4 rounded-full hover:bg-helios-100 flex items-center justify-center text-helios-700 leading-none" aria-label="Quitar filtro">×</button>
      </div>
    </div>}

    <div className="grid grid-cols-4 gap-3 mb-5">
      <Kpi l="Pacientes activos" v="248" sub="↑ 22 en el trimestre" tone="ok"/>
      <Kpi l="Adherencia programa" v="82,4%" sub="↑ 3,1 pp vs trim. ant." tone="ok"/>
      <Kpi l="HbA1c promedio" v="7,9%" sub="↓ 0,4 pp" tone="ok"/>
      <Kpi l="Resolución automática" v="94,5%" sub="↑ 6 pp" tone="ok"/>
    </div>

    <div className="grid grid-cols-3 gap-3 mb-4">
      <Card title="Pacientes activos · 12 meses" subtitle="Altas nuevas por mes" className="col-span-2">
        <PacientesActivosChart/>
      </Card>
      <Card title="Adherencia por financiador" subtitle="Click para filtrar · benchmark 85%">
        <AdherenciaFinChart/>
      </Card>
    </div>

    <div className="grid grid-cols-2 gap-3 mb-4">
      <Card title="Tiempo de ciclo" subtitle="Días promedio por etapa · vs mes anterior">
        <TiempoCicloChart/>
      </Card>
      <Card title="Resolución automática vs humana" subtitle="Por workflow · ejecuciones del mes">
        <ResolucionChart/>
      </Card>
    </div>

    <div className="grid grid-cols-3 gap-3 mb-4">
      <Card title="Distribución HbA1c" subtitle="Cohorte activa · 248 pacientes">
        <HbA1cDonut/>
      </Card>
      <Card title="Ingresos mensuales" subtitle="ARS · marcador WF-ADH sep/25" className="col-span-2">
        <IngresosChart/>
      </Card>
    </div>

    <Card title="Outcomes clínicos · cohorte DM2 completo" subtitle="Comparado con baseline de ingreso al programa">
      <div className="grid grid-cols-4 gap-4">
        <OutcomeCard l="Pacientes en objetivo HbA1c<7%" pre="22%" post="41%" trend="↑ 19 pp"/>
        <OutcomeCard l="Gaps de adherencia/trimestre" pre="2,4" post="1,1" trend="↓ 54%"/>
        <OutcomeCard l="Internaciones por descompensación" pre="8%" post="3%" trend="↓ 5 pp"/>
        <OutcomeCard l="Abandono del programa" pre="14%" post="4%" trend="↓ 10 pp"/>
      </div>
    </Card>
  </div>;
}

// ============================================================================
// Pacientes activos · vertical bar chart (activos + altas nuevas)
// ============================================================================
function PacientesActivosChart() {
  const {fin} = useAnalyticsFilter();
  // Reduce totals if filtered (OSDE ≈ 31% etc.)
  const mult = fin ? 0.31 : 1;
  const base = [
    {m:'may/25',a:220,n:10},{m:'jun/25',a:224,n:7},{m:'jul/25',a:226,n:8},
    {m:'ago/25',a:228,n:5},{m:'sep/25',a:232,n:9},{m:'oct/25',a:234,n:6},
    {m:'nov/25',a:238,n:7},{m:'dic/25',a:240,n:5},{m:'ene/26',a:244,n:8},
    {m:'feb/26',a:245,n:6},{m:'mar/26',a:247,n:5},{m:'abr/26',a:248,n:7},
  ];
  const data = base.map(d => ({...d, a: Math.round(d.a*mult), n: Math.round(d.n*mult)||1}));
  const wrapRef = useRef(null);
  const visible = useOnScreen(wrapRef);
  const [hover, setHover] = useState(null);
  const max = Math.max(...data.map(d=>d.a)) * 1.05;
  const H = 200;

  return <div ref={wrapRef} className="relative">
    <div className="h-[200px] flex items-end gap-1.5 px-1" onMouseLeave={()=>setHover(null)}>
      {data.map((d,i)=>{
        const h = (d.a/max)*H;
        const dim = hover!=null && hover!==i ? 0.35 : 1;
        return <div key={d.m} className="flex-1 flex flex-col items-center gap-1 relative" style={{height:H+'px', justifyContent:'flex-end'}}
          onMouseEnter={()=>setHover(i)}>
          {visible && <div className={'w-full rounded-t-sm chart-bar-anim'}
            style={{
              height: h+'px',
              background: hover===i ? '#185F75' : '#1B7690',
              opacity: dim,
              transition:'opacity 150ms, background 150ms',
              animationDelay: (i*0.04)+'s',
            }}/>}
          <span className="text-[10px] font-mono text-ink-400 absolute -bottom-5">{d.m.slice(0,3)}</span>
        </div>;
      })}
    </div>
    <div className="mt-6 text-[11px] text-ink-500 flex gap-4">
      <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm bg-[#1B7690]"/>Pacientes activos</span>
      {fin && <span className="font-mono text-[10.5px] text-helios-700">· filtrado por {fin}</span>}
    </div>
    {hover!=null && <BarActivosTooltip data={data[hover]} wrapRef={wrapRef} idx={hover} total={data.length}/>}
  </div>;
}
function BarActivosTooltip({data, wrapRef, idx, total}) {
  const w = wrapRef.current?.clientWidth || 600;
  const x = ((idx+0.5)/total) * w;
  const y = 40;
  const side = idx===0 ? 'right' : 'top';
  return <ChartTooltip pos={{x,y}} side={side}>
    <div className="text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">Mes</div>
    <div className="text-[12.5px] font-semibold text-ink-800 mb-1.5">{data.m}</div>
    <div className="font-display font-extrabold text-[20px] text-helios-700 tabular-nums leading-none">{data.a}</div>
    <div className="text-[10.5px] text-ink-500 mt-0.5">pacientes activos</div>
    <div className="text-[10.5px] text-[#1E8057] font-semibold font-mono mt-1">+{data.n} altas nuevas</div>
  </ChartTooltip>;
}

// ============================================================================
// Adherencia por financiador · clickable horizontal bars
// ============================================================================
function AdherenciaFinChart() {
  const {fin, setFin} = useAnalyticsFilter();
  const benchmark = 85;
  const data = [
    {n:'OSDE',v:88,p:77},
    {n:'Swiss Medical',v:84,p:42},
    {n:'Galeno',v:86,p:35},
    {n:'Medifé',v:81,p:22},
    {n:'OMINT',v:89,p:17},
    {n:'PAMI',v:74,p:17},
    {n:'OSDEPYM',v:79,p:14},
    {n:'IOMA',v:77,p:12},
  ];
  const [hover, setHover] = useState(null);
  const wrapRef = useRef(null);
  const visible = useOnScreen(wrapRef);
  const max = 100;

  return <div ref={wrapRef} className="space-y-2 mt-2 relative" onMouseLeave={()=>setHover(null)}>
    {data.map((d,i)=>{
      const below = d.v < benchmark;
      const active = fin === d.n;
      const dim = hover!=null && hover!==i ? 0.35 : 1;
      return <div key={d.n}
        onMouseEnter={()=>setHover(i)}
        onClick={()=>setFin(fin===d.n?null:d.n)}
        className={'group cursor-pointer rounded-md px-2 -mx-2 py-0.5 '+(active?'bg-helios-50':'hover:bg-slate-50')}
        style={{opacity:dim, transition:'opacity 150ms'}}>
        <div className="flex items-center gap-3">
          <span className={'text-[12px] flex-1 truncate '+(active?'font-semibold text-helios-700':'')}>{d.n}</span>
          <div className="w-24 h-2 bg-slate-100 rounded-full overflow-hidden relative">
            {visible && <div className="chart-bar-anim-h h-full rounded-full"
              style={{
                width:(d.v/max)*100+'%',
                background: below ? '#E04B4B' : (active ? '#185F75' : '#1B7690'),
                animationDelay: (i*0.05)+'s',
                transition:'background 150ms',
              }}/>}
            {/* benchmark tick */}
            <div className="absolute top-[-2px] bottom-[-2px] w-px bg-ink-300" style={{left:benchmark+'%'}}/>
          </div>
          <span className={'font-mono font-semibold text-[11px] w-10 text-right '+(below?'text-[#B93535]':'text-ink-700')}>{d.v}%</span>
        </div>
      </div>;
    })}
    <div className="pt-1 text-[10px] text-ink-400 font-mono flex justify-between">
      <span>Benchmark 85%</span>
      <span>{hover!=null ? 'click para filtrar' : ''}</span>
    </div>
    {hover!=null && <AdherenciaTooltip data={data[hover]} idx={hover} benchmark={benchmark} wrapRef={wrapRef}/>}
  </div>;
}
function AdherenciaTooltip({data, idx, benchmark, wrapRef}) {
  const w = wrapRef.current?.clientWidth || 300;
  const x = w - 60;
  const y = idx*28 + 20;
  const below = data.v < benchmark;
  return <ChartTooltip pos={{x,y}} side="top">
    <div className="text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">Financiador</div>
    <div className="text-[12.5px] font-semibold text-ink-800 mb-1">{data.n}</div>
    <div className={'font-display font-extrabold text-[20px] tabular-nums leading-none '+(below?'text-[#B93535]':'text-[#1E8057]')}>{data.v}%</div>
    <div className="text-[10.5px] text-ink-500 mt-0.5">{data.p} pacientes · adherencia</div>
    {below && <div className="text-[10.5px] text-[#B93535] font-semibold mt-1">↓ bajo benchmark ({benchmark}%)</div>}
  </ChartTooltip>;
}

// ============================================================================
// Tiempo de ciclo · horizontal bars
// ============================================================================
function TiempoCicloChart() {
  const data = [
    {e:'Alta → Receta vigente',v:1.2,meta:1.5,prev:1.5,ok:true},
    {e:'Receta → Dispensa',v:3.4,meta:3.0,prev:3.7,ok:false},
    {e:'Dispensa → Doc. completa',v:2.1,meta:2.5,prev:2.4,ok:true},
    {e:'Doc. → Legajo armado',v:1.8,meta:2.0,prev:2.1,ok:true},
    {e:'Legajo → Facturado',v:4.6,meta:4.0,prev:4.8,ok:false},
  ];
  const [hover, setHover] = useState(null);
  const wrapRef = useRef(null);
  const visible = useOnScreen(wrapRef);
  const max = Math.max(...data.map(d=>Math.max(d.v,d.meta)))*1.15;

  return <div ref={wrapRef} className="relative space-y-3 mt-2" onMouseLeave={()=>setHover(null)}>
    {data.map((d,i)=>{
      const dim = hover!=null && hover!==i ? 0.35 : 1;
      const delta = +(d.v-d.prev).toFixed(1);
      return <div key={d.e} onMouseEnter={()=>setHover(i)} style={{opacity:dim, transition:'opacity 150ms'}}>
        <div className="flex justify-between items-baseline mb-1">
          <span className="text-[11.5px] text-ink-700">{d.e}</span>
          <span className={'font-mono font-semibold text-[11px] '+(d.ok?'text-[#1E8057]':'text-[#D28513]')}>{d.v} d <span className="text-ink-400 font-normal">· meta {d.meta}d</span></span>
        </div>
        <div className="h-2 bg-slate-100 rounded-full overflow-hidden relative">
          {visible && <div className="chart-bar-anim-h h-full rounded-full"
            style={{width:(d.v/max)*100+'%', background:d.ok?'#2EA571':'#EEA028', animationDelay:(i*0.06)+'s'}}/>}
          {/* meta tick */}
          <div className="absolute top-[-3px] bottom-[-3px] w-px bg-ink-400" style={{left:(d.meta/max)*100+'%'}}/>
        </div>
      </div>;
    })}
    {hover!=null && <TiempoCicloTooltip data={data[hover]} idx={hover} wrapRef={wrapRef}/>}
  </div>;
}
function TiempoCicloTooltip({data, idx, wrapRef}) {
  const w = wrapRef.current?.clientWidth || 400;
  const delta = +(data.v - data.prev).toFixed(1);
  return <ChartTooltip pos={{x:w*0.5, y:idx*38+12}} side="top">
    <div className="text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">Etapa</div>
    <div className="text-[12.5px] font-semibold text-ink-800 mb-1 max-w-[240px] whitespace-normal">{data.e}</div>
    <div className={'font-display font-extrabold text-[20px] tabular-nums leading-none '+(data.ok?'text-[#1E8057]':'text-[#D28513]')}>{data.v} d</div>
    <div className="text-[10.5px] text-ink-500 mt-0.5">promedio · meta {data.meta}d</div>
    <div className={'text-[10.5px] font-semibold mt-1 '+(delta>0?'text-[#B93535]':'text-[#1E8057]')}>
      {delta>0?'▲ +':'▼ '}{Math.abs(delta).toFixed(1)}d vs mes anterior
    </div>
  </ChartTooltip>;
}

// ============================================================================
// Resolución automática vs humana · grouped bars
// ============================================================================
function ResolucionChart() {
  const data = [
    {n:'WF-ADH',auto:84,tot:412},
    {n:'WF-DIS',auto:92,tot:298},
    {n:'WF-FAC',auto:96,tot:241},
    {n:'WF-FIN',auto:97,tot:188},
    {n:'WF-ALT',auto:63,tot:42},
    {n:'WF-ESC',auto:0,tot:78},
    {n:'WF-AUT',auto:62,tot:156},
  ];
  const [hover, setHover] = useState(null);
  const wrapRef = useRef(null);
  const visible = useOnScreen(wrapRef);
  const H = 160;

  return <div ref={wrapRef} className="relative" onMouseLeave={()=>setHover(null)}>
    <div className="h-[170px] flex items-end gap-2 px-1">
      {data.map((d,i)=>{
        const dim = hover!=null && hover!==i ? 0.35 : 1;
        return <div key={d.n} className="flex-1 flex flex-col items-center gap-1"
          onMouseEnter={()=>setHover(i)}
          style={{opacity:dim, transition:'opacity 150ms'}}>
          <div className="w-full flex gap-1 items-end" style={{height:H+'px'}}>
            {visible && <div className="flex-1 rounded-t-sm chart-bar-anim"
              style={{height:(d.auto/100)*H+'px', background:'#1B7690', animationDelay:(i*0.04)+'s'}}/>}
            {visible && <div className="flex-1 rounded-t-sm chart-bar-anim"
              style={{height:((100-d.auto)/100)*H+'px', background:'#EEA028', animationDelay:(i*0.04+0.05)+'s'}}/>}
          </div>
          <span className="text-[10px] font-mono text-ink-400">{d.n}</span>
        </div>;
      })}
    </div>
    <div className="mt-2 flex gap-4 text-[11px] text-ink-500">
      <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm bg-[#1B7690]"/>Auto</span>
      <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm bg-[#EEA028]"/>Humano</span>
    </div>
    {hover!=null && <ResolTooltip data={data[hover]} idx={hover} total={data.length} wrapRef={wrapRef}/>}
  </div>;
}
function ResolTooltip({data, idx, total, wrapRef}) {
  const w = wrapRef.current?.clientWidth || 400;
  const x = ((idx+0.5)/total)*w;
  const side = idx===0 ? 'right' : 'top';
  return <ChartTooltip pos={{x, y:30}} side={side}>
    <div className="text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">Workflow</div>
    <div className="text-[12.5px] font-semibold text-ink-800 mb-1.5">{data.n}</div>
    <div className="flex items-baseline gap-2">
      <span className="font-display font-extrabold text-[20px] text-helios-700 tabular-nums leading-none">{data.auto}%</span>
      <span className="text-[10.5px] text-ink-500">auto</span>
    </div>
    <div className="text-[10.5px] text-[#D28513] font-semibold font-mono mt-0.5">{100-data.auto}% humano</div>
    <div className="text-[10.5px] text-ink-500 mt-1">{data.tot} ejecuciones · mes</div>
  </ChartTooltip>;
}

// ============================================================================
// Distribución HbA1c · donut
// ============================================================================
function HbA1cDonut() {
  const data = [
    {n:'<7%',v:41,p:102,c:'#1E8057'},
    {n:'7–8%',v:28,p:69,c:'#4CC28C'},
    {n:'8–9%',v:19,p:47,c:'#EEA028'},
    {n:'>9%',v:12,p:30,c:'#E04B4B'},
  ];
  const wrapRef = useRef(null);
  const visible = useOnScreen(wrapRef);
  const [hover, setHover] = useState(null);
  const R = 62, CX = 90, CY = 90, SW = 22;
  const C = 2*Math.PI*R;
  let acc = 0;
  const segs = data.map((d,i)=>{
    const len = (d.v/100)*C;
    const seg = {...d, i, len, offset: -acc, startAngle: acc/C*360};
    acc += len;
    return seg;
  });

  return <div ref={wrapRef} className="relative flex items-center gap-3 mt-1" onMouseLeave={()=>setHover(null)}>
    <svg viewBox="0 0 180 180" className="w-[180px] h-[180px] shrink-0">
      <g transform="rotate(-90 90 90)">
        {segs.map((s,i)=>{
          const isHover = hover===i;
          const scale = isHover ? 1.05 : 1;
          return <circle key={i} cx={CX} cy={CY} r={R} fill="none"
            stroke={s.c} strokeWidth={SW}
            strokeDasharray={`${s.len} ${C}`}
            strokeDashoffset={s.offset}
            style={{
              transformOrigin:'90px 90px',
              transform:`scale(${scale})`,
              opacity: hover!=null && !isHover ? 0.35 : 1,
              transition:'transform 180ms ease-out, opacity 150ms',
              animation: visible ? 'sliceDraw .6s ease-out both' : 'none',
              animationDelay: (i*0.08)+'s',
              '--circ': C,
              '--circ-end': s.offset,
            }}
            onMouseEnter={()=>setHover(i)}/>;
        })}
      </g>
      <text x="90" y="86" textAnchor="middle" fontSize="22" fontWeight="800" fill="#151922" className="tabular-nums">{hover!=null?segs[hover].v+'%':'248'}</text>
      <text x="90" y="102" textAnchor="middle" fontSize="10" fill="#7E8798" fontFamily="Inter">{hover!=null?segs[hover].p+' pacientes':'pacientes'}</text>
    </svg>
    <div className="flex-1 space-y-1.5">
      {segs.map((s,i)=>
        <div key={i} className="flex items-center gap-2 text-[11.5px]"
          onMouseEnter={()=>setHover(i)}
          style={{opacity: hover!=null && hover!==i ? 0.45 : 1, transition:'opacity 150ms'}}>
          <span className="w-2.5 h-2.5 rounded-sm" style={{background:s.c}}/>
          <span className="text-ink-700 flex-1">{s.n}</span>
          <span className="font-mono font-semibold text-[11px] text-ink-800">{s.v}%</span>
        </div>
      )}
    </div>
    {hover!=null && <ChartTooltip pos={{x:170, y:30}} side="right">
      <div className="text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">Rango HbA1c</div>
      <div className="text-[12.5px] font-semibold text-ink-800 mb-1">{segs[hover].n}</div>
      <div className="font-display font-extrabold text-[20px] tabular-nums leading-none" style={{color:segs[hover].c}}>{segs[hover].p}</div>
      <div className="text-[10.5px] text-ink-500 mt-0.5">pacientes · {segs[hover].v}% del total</div>
    </ChartTooltip>}
  </div>;
}

// ============================================================================
// Ingresos mensuales · area chart con marcador WF-ADH
// ============================================================================
function IngresosChart() {
  const {fin} = useAnalyticsFilter();
  const mult = fin ? 0.31 : 1;
  const base = [
    {m:'may/25',v:9200000},{m:'jun/25',v:9350000},{m:'jul/25',v:9700000},
    {m:'ago/25',v:9550000},{m:'sep/25',v:10100000},{m:'oct/25',v:10450000},
    {m:'nov/25',v:10820000},{m:'dic/25',v:11050000},{m:'ene/26',v:11220000},
    {m:'feb/26',v:11480000},{m:'mar/26',v:11640000},{m:'abr/26',v:11800000},
  ];
  const data = base.map(d => ({...d, v: Math.round(d.v*mult)}));
  // idx of WF-ADH marker: sep/25
  const adhIdx = 4;
  const wrapRef = useRef(null);
  const visible = useOnScreen(wrapRef);
  const [hover, setHover] = useState(null);

  const W = 600, H = 200, padL = 50, padR = 10, padT = 14, padB = 20;
  const innerW = W-padL-padR, innerH = H-padT-padB;
  const max = Math.max(...data.map(d=>d.v))*1.05;
  const min = Math.min(...data.map(d=>d.v))*0.95;
  const range = max-min;
  const x = (i)=> padL + i*(innerW/(data.length-1));
  const y = (v)=> padT + innerH - ((v-min)/range)*innerH;
  const line = data.map((d,i)=>(i===0?'M':'L')+x(i)+','+y(d.v)).join(' ');
  const area = line + ` L${x(data.length-1)},${padT+innerH} L${x(0)},${padT+innerH} Z`;
  const pathLen = useMemo(()=>{
    let L=0; for (let i=1;i<data.length;i++){const dx=x(i)-x(i-1),dy=y(data[i].v)-y(data[i-1].v);L+=Math.sqrt(dx*dx+dy*dy);} return L;
  },[data]);

  const hoverData = hover!=null ? data[hover] : null;
  const prev = hover!=null && hover>0 ? data[hover-1] : null;
  const pct = hoverData && prev ? ((hoverData.v-prev.v)/prev.v*100) : null;

  const wrapW = wrapRef.current?.clientWidth || 0;
  const wrapH = wrapRef.current?.clientHeight || 0;
  const tX = hover!=null ? (x(hover)/W)*wrapW : 0;
  const tY = hover!=null ? (y(hoverData.v)/H)*wrapH : 0;

  return <div ref={wrapRef} className="h-[200px] relative">
    <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full" onMouseLeave={()=>setHover(null)}>
      <defs>
        <linearGradient id="ingresosGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#1B7690" stopOpacity="0.35"/>
          <stop offset="1" stopColor="#1B7690" stopOpacity="0.02"/>
        </linearGradient>
      </defs>

      {/* Y axis grid */}
      {[0,0.5,1].map(t =>
        <line key={t} x1={padL} x2={W-padR} y1={padT+innerH*(1-t)} y2={padT+innerH*(1-t)} stroke="#EDEFF3" strokeWidth="1"/>
      )}
      <text x={padL-6} y={padT+6} textAnchor="end" fontSize="9" fontFamily="Inter" fill="#AFB6C4">{'$'+(max/1e6).toFixed(1)+'M'}</text>
      <text x={padL-6} y={padT+innerH} textAnchor="end" fontSize="9" fontFamily="Inter" fill="#AFB6C4">{'$'+(min/1e6).toFixed(1)+'M'}</text>

      {/* WF-ADH marker */}
      <line x1={x(adhIdx)} y1={padT} x2={x(adhIdx)} y2={padT+innerH} stroke="#EEA028" strokeDasharray="3 3" strokeWidth="1"/>
      <text x={x(adhIdx)+4} y={padT+10} fontSize="9" fontFamily="Inter" fill="#D28513" fontWeight="700">Inicio WF-ADH</text>

      {/* Area */}
      {visible && <path d={area} fill="url(#ingresosGrad)" className="chart-area-anim"/>}

      {/* Line */}
      {visible && <path d={line} fill="none" stroke="#1B7690" strokeWidth="2" strokeLinecap="round"
        className="chart-line-anim" style={{'--dash':pathLen}}/>}

      {/* Crosshair */}
      {hover!=null && <line x1={x(hover)} y1={y(hoverData.v)} x2={x(hover)} y2={padT+innerH} stroke="#D6DAE2" strokeDasharray="2 3" strokeWidth="1"/>}

      {/* Month labels */}
      {data.map((d,i)=> <text key={i} x={x(i)} y={H-4} textAnchor="middle" fontSize="9" fontFamily="Inter" fill="#7E8798">{d.m.slice(0,3)}</text>)}

      {/* Dots */}
      {data.map((d,i)=>{
        const cx=x(i), cy=y(d.v);
        const isH = hover===i;
        const dim = hover!=null && !isH ? 0.35 : 1;
        return <g key={'d'+i} style={{opacity:dim, transition:'opacity 150ms'}}>
          {visible && <circle cx={cx} cy={cy} r={isH?6:3} fill="#1B7690"
            className="chart-dot-anim"
            style={{animationDelay:(0.6+i*0.05)+'s', transition:'r 150ms'}}/>}
          <rect x={cx-16} y={padT} width="32" height={innerH} fill="transparent"
            onMouseEnter={()=>setHover(i)}/>
        </g>;
      })}
    </svg>
    {hover!=null && <ChartTooltip pos={{x:tX, y:tY}} side={hover<=0?'right':'top'}>
      <div className="flex items-center gap-2">
        <div className="text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">{hoverData.m}</div>
        {hover>=adhIdx && <span className="text-[9px] font-mono font-semibold bg-sun-500/15 text-[#D28513] px-1.5 py-0.5 rounded">POST WF-ADH</span>}
      </div>
      <div className="font-display font-extrabold text-[20px] text-ink-800 tabular-nums leading-none mt-1">
        ${hoverData.v.toLocaleString('es-AR')}
      </div>
      {pct!=null && <div className={'text-[10.5px] font-semibold mt-1 '+(pct>0?'text-[#1E8057]':'text-[#B93535]')}>
        {pct>0?'▲ +':'▼ '}{Math.abs(pct).toFixed(1)}% vs {prev.m}
      </div>}
    </ChartTooltip>}
  </div>;
}
function OutcomeCard({l, pre, post, trend}) {
  return <div className="bg-white rounded-xl p-4 border border-slate-100">
    <div className="text-[11px] text-ink-500 leading-snug h-[32px]">{l}</div>
    <div className="flex items-baseline gap-2 mt-2">
      <span className="font-display font-extrabold text-[22px] text-slate-300 tabular-nums line-through">{pre}</span>
      <Icon.chevR c="w-3.5 h-3.5 text-ink-300"/>
      <span className="font-display font-extrabold text-[28px] text-[#1E8057] tabular-nums">{post}</span>
    </div>
    <div className="text-[11px] text-[#1E8057] font-semibold mt-1">{trend}</div>
  </div>;
}

// --- 09 · TRAZABILIDAD -----------------------------------------------------
function TrazabilidadPage() {
  const [q, setQ] = useState('');
  const [tipoF, setTipoF] = useState('Todos');
  const [actorF, setActorF] = useState('Todos');

  const logs = [
    {id:'LOG-982314',t:'hoy 12:10',ag:'Auto',actor:'WF-ADH',acc:'caso.escalar',obj:'P-0428',payload:'reason=gap_gi · confidence=0.92'},
    {id:'LOG-982313',t:'hoy 12:10',ag:'Auto',actor:'IA-Clasif',acc:'ia.classify',obj:'msg:wa-0198',payload:'efecto_adverso=0.92'},
    {id:'LOG-982312',t:'hoy 12:10',ag:'Externo',actor:'WhatsApp API',acc:'msg.in',obj:'+54911*****328',payload:'text="me marea..."'},
    {id:'LOG-982310',t:'hoy 11:44',ag:'Auto',actor:'WF-ADH',acc:'msg.out',obj:'+54911*****328',payload:'template=ADH-GLP1-01'},
    {id:'LOG-982308',t:'hoy 11:43',ag:'Auto',actor:'WF-ADH',acc:'caso.score',obj:'P-0428',payload:'score=78'},
    {id:'LOG-982306',t:'hoy 11:42',ag:'Auto',actor:'WF-ADH',acc:'caso.gap',obj:'P-0428',payload:'dias=22 · medicamento=dulaglutida'},
    {id:'LOG-982289',t:'hoy 10:15',ag:'Humano',actor:'C. Díaz',acc:'caso.nota',obj:'P-0312',payload:'"llamada ok, reagendó"'},
    {id:'LOG-982271',t:'hoy 09:42',ag:'Auto',actor:'WF-DIS',acc:'dispensa.rechazar',obj:'P-0221',payload:'reason=receta_vencida'},
    {id:'LOG-982264',t:'hoy 09:21',ag:'Externo',actor:'OSDE API',acc:'autoriz.sync',obj:'P-0428',payload:'status=vigente · vence=20/05'},
    {id:'LOG-982251',t:'hoy 08:00',ag:'Auto',actor:'CRON-WF-ADH',acc:'wf.trigger',obj:'batch',payload:'evaluated=31 · triggered=19'},
    {id:'LOG-982198',t:'ayer 17:40',ag:'Humano',actor:'V. Alemán',acc:'caso.revisar',obj:'P-0428',payload:'tab=adherencia'},
    {id:'LOG-982180',t:'ayer 16:05',ag:'Humano',actor:'M. López',acc:'legajo.firmar',obj:'LEG-2026-04-0127',payload:'accion=aprobar'},
  ];
  const vis = logs.filter(l => {
    if (tipoF!=='Todos' && l.ag!==tipoF) return false;
    if (actorF!=='Todos' && !l.actor.includes(actorF)) return false;
    if (q && !(l.id+l.actor+l.acc+l.obj+l.payload).toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });
  return <div className="px-7 py-6 max-w-[1480px]">
    <PageHeader titulo="Trazabilidad"
      subtitulo="Registro inmutable de todas las acciones · sistema + humanos + externos"
      action={<Button variant="outline" size="sm" icon={<ExtraIcons.dl c="w-3.5 h-3.5"/>}>Exportar logs</Button>}/>

    <div className="grid grid-cols-4 gap-3 mb-4">
      <Kpi l="Eventos hoy" v="2.431"/>
      <Kpi l="Por automatización" v="94,5%" sub="2.298 eventos" tone="ok"/>
      <Kpi l="Intervenciones humanas" v="133" sub="5,5%"/>
      <Kpi l="Integraciones externas" v="12" sub="HIS, WA, CRM, financiadores"/>
    </div>

    <Card noPad>
      <div className="px-4 py-3 border-b border-slate-100 flex items-center gap-2 flex-wrap">
        <div className="relative flex-1 min-w-[240px] max-w-sm">
          <Icon.search c="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-400"/>
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="ID log, actor, acción, objeto…"
            className="pl-8 pr-3 py-1.5 text-[12px] bg-slate-50 border border-slate-200 rounded-lg w-full font-mono focus:outline-none focus:ring-2 focus:ring-helios-400/50 focus:bg-white"/>
        </div>
        <FilterSelect label="Tipo" value={tipoF} onChange={setTipoF} options={['Todos','Auto','Humano','Externo']}/>
        <FilterSelect label="Actor" value={actorF} onChange={setActorF} options={['Todos','WF-ADH','WF-DIS','WF-FAC','IA','API']}/>
        <div className="ml-auto text-[11px] text-ink-400 font-mono">{vis.length} eventos</div>
      </div>

      <div className="grid grid-cols-[120px_100px_80px_140px_1.2fr_1fr_2fr] gap-3 px-5 py-2 border-b border-slate-100 text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold">
        <span>ID</span><span>Timestamp</span><span>Tipo</span><span>Actor</span><span>Acción</span><span>Objeto</span><span>Payload</span>
      </div>
      {vis.map(l => <div key={l.id} className="grid grid-cols-[120px_100px_80px_140px_1.2fr_1fr_2fr] gap-3 items-center px-5 py-2 border-b border-slate-100 last:border-0 text-[11.5px] hover:bg-slate-50 font-mono">
        <span className="text-[10.5px] text-helios-700 font-semibold">{l.id}</span>
        <span className="text-ink-500">{l.t}</span>
        <Badge tone={l.ag==='Auto'?'helios':l.ag==='Humano'?'teal2':'slate'} size="sm">{l.ag}</Badge>
        <span className="text-ink-700 font-semibold truncate">{l.actor}</span>
        <span className="text-[#B93535] font-semibold">{l.acc}</span>
        <span className="text-ink-600 truncate">{l.obj}</span>
        <span className="text-ink-500 truncate">{l.payload}</span>
      </div>)}
    </Card>
  </div>;
}

// --- 10 · CONFIGURACIÓN ----------------------------------------------------
function ConfigPage() {
  const [sec, setSec] = useState('equipo');
  return <div className="px-7 py-6 max-w-[1480px]">
    <PageHeader titulo="Configuración"
      subtitulo="Parámetros del programa, equipo, integraciones y reglas"/>

    <div className="flex gap-4">
      <nav className="w-56 shrink-0 space-y-0.5 bg-white rounded-2xl border border-slate-100 p-2" style={{boxShadow:'0 1px 2px rgba(15,23,42,0.04)'}}>
        {[
          {k:'equipo',l:'Equipo y roles',i:'user'},
          {k:'financ',l:'Financiadores',i:'dollar'},
          {k:'reglas',l:'Reglas económicas',i:'zap'},
          {k:'plantillas',l:'Plantillas de mensajes',i:'msg'},
          {k:'inte',l:'Integraciones',i:'doc'},
          {k:'noti',l:'Notificaciones',i:'alert'},
          {k:'seg',l:'Seguridad y accesos',i:'user'},
        ].map(s => <button key={s.k} onClick={()=>setSec(s.k)}
          className={'w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-[12px] '+(sec===s.k?'bg-helios-50 text-helios-700 font-semibold':'text-ink-600 hover:bg-slate-50')}>
          <IconOf name={s.i} c="w-3.5 h-3.5"/>
          {s.l}
        </button>)}
      </nav>
      <div className="flex-1 min-w-0">
        {sec==='equipo' && <EquipoSec/>}
        {sec==='financ' && <FinancSec/>}
        {sec==='reglas' && <ReglasSec/>}
        {sec==='plantillas' && <PlantillasSec/>}
        {sec==='inte' && <IntegracionesSec/>}
        {sec==='noti' && <NotifSec/>}
        {sec==='seg' && <SegSec/>}
      </div>
    </div>
  </div>;
}

function EquipoSec() {
  const team = [
    {n:'Dra. Valeria Alemán',r:'Directora médica',e:'valeria.aleman@helios.health',rol:'Admin',act:'hoy 12:10',t:'helios'},
    {n:'Dr. Fernando Hidalgo',r:'Médico endocrinólogo',e:'fernando.hidalgo@helios.health',rol:'Clínico',act:'hoy 11:40',t:'teal2'},
    {n:'Lic. Magdalena Ferrer',r:'Nutricionista senior',e:'mag.ferrer@helios.health',rol:'Clínico',act:'hoy 10:05',t:'sun'},
    {n:'Camila Díaz',r:'Coord. adherencia',e:'camila.diaz@helios.health',rol:'Operación',act:'hoy 09:58',t:'danger'},
    {n:'Martín López',r:'Resp. facturación',e:'martin.lopez@helios.health',rol:'Económico',act:'ayer 18:30',t:'helios'},
    {n:'Sofía Aguirre',r:'Operadora farmacia',e:'sofia.aguirre@helios.health',rol:'Operación',act:'hoy 12:45',t:'teal2'},
  ];
  return <Card title="Equipo" subtitle={team.length+' miembros · accesos activos'} action={<Button variant="primary" size="sm" icon={<Icon.plus c="w-3.5 h-3.5"/>}>Invitar</Button>}>
    <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">Persona</th><th className="text-left">Rol</th><th className="text-left">Permisos</th><th className="text-left">Último acceso</th><th></th>
      </tr></thead>
      <tbody>
        {team.map(m => <tr key={m.e} className="border-b border-slate-100 last:border-0">
          <td className="py-2.5">
            <div className="flex items-center gap-2.5">
              <Avatar name={m.n} size="sm" tone={m.t}/>
              <div><div className="font-semibold">{m.n}</div><div className="text-[10.5px] font-mono text-ink-400">{m.e}</div></div>
            </div>
          </td>
          <td className="text-ink-700">{m.r}</td>
          <td><Badge tone={m.rol==='Admin'?'danger':m.rol==='Clínico'?'teal2':'slate'} size="sm">{m.rol}</Badge></td>
          <td className="font-mono text-[11px] text-ink-500">{m.act}</td>
          <td className="text-right"><Button variant="ghost" size="sm">Editar</Button></td>
        </tr>)}
      </tbody>
    </table>
  </Card>;
}
function FinancSec() {
  return <Card title="Financiadores" subtitle="8 convenios activos" action={<Button variant="primary" size="sm" icon={<Icon.plus c="w-3.5 h-3.5"/>}>Nuevo</Button>}>
    <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">Código</th><th className="text-left">Pacientes</th><th className="text-left">Contrato</th><th className="text-left">Bonif.</th><th className="text-left">Estado</th>
      </tr></thead>
      <tbody>
        {DATA.financiadores.map(f => <tr key={f.codigo} className="border-b border-slate-100 last:border-0">
          <td className="py-2 font-semibold">{f.n}</td>
          <td className="font-mono text-[11px] text-ink-500">{f.codigo}</td>
          <td className="font-mono">{f.pacientes}</td>
          <td className="font-mono text-[11px]">{f.contrato}</td>
          <td className="font-mono font-semibold">{f.bonif}</td>
          <td><Badge tone="ok" size="sm" dot>Activo</Badge></td>
        </tr>)}
      </tbody>
    </table>
  </Card>;
}
function ReglasSec() {
  return <Card title="Reglas económicas" subtitle="24 reglas activas · afectan a WF-FIN y WF-FAC" action={<Button variant="primary" size="sm" icon={<Icon.plus c="w-3.5 h-3.5"/>}>Nueva regla</Button>}>
    <div className="space-y-2">
      {[
        {n:'R-012',l:'OSDE 310 · bonificación 40% sobre GLP-1',act:true},
        {n:'R-013',l:'Swiss Medical · precio techo Dulaglutida ≤ $19.200',act:true},
        {n:'R-014',l:'Galeno 440 · exige autorización cada 60 días',act:true},
        {n:'R-015',l:'PAMI · dispensa sólo en sede oficial',act:true},
        {n:'R-016',l:'Todos · descuento cruzado si >3 productos',act:false},
      ].map(r => <div key={r.n} className="flex items-center gap-3 p-3 bg-white rounded-lg border border-slate-100">
        <span className="font-mono text-[11px] font-semibold text-helios-700 w-14">{r.n}</span>
        <span className="text-[12px] flex-1">{r.l}</span>
        <Badge tone={r.act?'ok':'slate'} size="sm" dot={r.act}>{r.act?'Activa':'Pausada'}</Badge>
        <Button variant="ghost" size="sm">Editar</Button>
      </div>)}
    </div>
  </Card>;
}
function PlantillasSec() {
  return <Card title="Plantillas de mensajes" subtitle="Mensajes enviados por los workflows" action={<Button variant="primary" size="sm" icon={<Icon.plus c="w-3.5 h-3.5"/>}>Nueva plantilla</Button>}>
    <div className="grid grid-cols-2 gap-2">
      {[
        {id:'ADH-GLP1-01',c:'WhatsApp',u:'WF-ADH',d:'Hola {nombre}, vimos que todavía no retiraste tu Dulaglutida este mes. ¿Querés coordinar?'},
        {id:'ADH-GLP1-02',c:'WhatsApp',u:'WF-ADH',d:'{nombre}, tu tratamiento necesita continuidad. ¿Podés pasar mañana por {sede}?'},
        {id:'ADH-SMS',c:'SMS',u:'WF-ADH',d:'Helios: tu medicación espera en {sede}. Reagendá en helios.health/r'},
        {id:'DIS-LISTO',c:'WhatsApp',u:'WF-DIS',d:'Tu pedido está listo para retirar en {sede}. Horario {horario}.'},
        {id:'REC-VENCE',c:'WhatsApp',u:'WF-REN',d:'{nombre}, tu receta vence el {fecha}. Coordiná renovación con {medico}.'},
        {id:'CTRL-REC',c:'SMS',u:'WF-ALT',d:'Helios: control próximo {fecha} con {esp}. Confirmá asistencia.'},
      ].map(t => <div key={t.id} className="p-3 bg-white rounded-lg border border-slate-100">
        <div className="flex items-center gap-2 mb-1.5">
          <span className="font-mono text-[11px] font-semibold">{t.id}</span>
          <Badge tone="slate" size="sm">{t.c}</Badge>
          <Badge tone="helios" size="sm">{t.u}</Badge>
        </div>
        <p className="text-[11.5px] text-ink-600 leading-snug">{t.d}</p>
      </div>)}
    </div>
  </Card>;
}
function IntegracionesSec() {
  return <Card title="Integraciones" subtitle="Servicios conectados al sistema operativo">
    <div className="grid grid-cols-2 gap-2">
      {[
        {n:'HIS · GlobalHC',d:'Historia clínica · bidireccional',s:'ok'},
        {n:'WhatsApp Business API',d:'Canal oficial Meta',s:'ok'},
        {n:'Twilio · SMS + voz',d:'Fallback omnicanal',s:'ok'},
        {n:'OSDE · API de autorizaciones',d:'Validación en tiempo real',s:'ok'},
        {n:'Swiss Medical · SFTP',d:'Carga de facturación',s:'ok'},
        {n:'OpenAI · clasificación',d:'Modelos gpt-4o-mini',s:'ok'},
        {n:'Google Drive',d:'Backup documental',s:'warn'},
        {n:'ERP Bejerman',d:'Facturación electrónica',s:'ok'},
      ].map(i => <div key={i.n} className="flex items-center gap-3 p-3 bg-white rounded-lg border border-slate-100">
        <div className="w-9 h-9 rounded-lg bg-helios-50 text-helios-700 flex items-center justify-center shrink-0"><ExtraIcons.zap c="w-4 h-4"/></div>
        <div className="flex-1 min-w-0">
          <div className="text-[12px] font-semibold">{i.n}</div>
          <div className="text-[10.5px] text-ink-400">{i.d}</div>
        </div>
        <Badge tone={i.s==='ok'?'ok':'warn'} size="sm" dot={i.s!=='ok'}>{i.s==='ok'?'Conectado':'Revisar'}</Badge>
      </div>)}
    </div>
  </Card>;
}
function NotifSec() {
  return <Card title="Notificaciones del operador" subtitle="Controlá qué alertas recibís">
    <div className="space-y-2">
      {[
        {l:'Paciente crítico sin dispensa > 20 días',e:true,sms:true,wa:false},
        {l:'Workflow escalado a mi equipo',e:true,sms:false,wa:true},
        {l:'Legajo listo para facturar',e:true,sms:false,wa:false},
        {l:'Diferencia económica detectada',e:true,sms:true,wa:false},
        {l:'Integración externa caída',e:true,sms:true,wa:true},
        {l:'Resumen diario 18:00',e:true,sms:false,wa:false},
      ].map((n,i) => <div key={i} className="flex items-center gap-3 p-3 bg-white rounded-lg border border-slate-100">
        <span className="text-[12px] flex-1">{n.l}</span>
        <Toggle l="Email" on={n.e}/>
        <Toggle l="SMS" on={n.sms}/>
        <Toggle l="WhatsApp" on={n.wa}/>
      </div>)}
    </div>
  </Card>;
}
function Toggle({l, on}) {
  return <label className="flex items-center gap-1.5">
    <span className="text-[10.5px] font-mono uppercase text-ink-500 tracking-wide">{l}</span>
    <div className={'w-7 h-4 rounded-full relative '+(on?'bg-helios-600':'bg-slate-200')}>
      <div className={'w-3 h-3 bg-white rounded-full absolute top-0.5 transition-all '+(on?'right-0.5':'left-0.5')}/>
    </div>
  </label>;
}
function SegSec() {
  return <div className="space-y-3">
    <Card title="Autenticación">
      <div className="space-y-2">
        <Row k="Método principal" v="SSO SAML · Google Workspace"/>
        <Row k="2FA obligatorio" v={<Badge tone="ok" size="sm" dot>Activado</Badge>}/>
        <Row k="Rotación de contraseña" v="90 días"/>
        <Row k="Sesión inactiva" v="30 min"/>
      </div>
    </Card>
    <Card title="Cumplimiento">
      <div className="space-y-2">
        <Row k="Ley 25.326 Protección de Datos" v={<Badge tone="ok" size="sm">Cumple</Badge>}/>
        <Row k="HIPAA" v={<Badge tone="ok" size="sm">Equivalente</Badge>}/>
        <Row k="Retención auditoría" v="7 años"/>
        <Row k="Cifrado en reposo" v="AES-256"/>
        <Row k="Cifrado en tránsito" v="TLS 1.3"/>
      </div>
    </Card>
  </div>;
}
function Row({k,v}) {
  return <div className="flex items-center justify-between py-2 border-b border-slate-100 last:border-0">
    <span className="text-[12px] text-ink-600">{k}</span>
    <span className="text-[12px] font-medium text-ink-800">{v}</span>
  </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.AnaliticaPage = AnaliticaPage;
window.TrazabilidadPage = TrazabilidadPage;
window.ConfigPage = ConfigPage;