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

// ============================================================================
// 01 · TORRE DE CONTROL
// ============================================================================
function TorrePage({go}) {
  const [periodo, setPeriodo] = useState('Hoy');
  const periodos = ['Hoy','Esta semana','Este mes'];

  // Period-scaled data ------------------------------------------------------
  const periodData = {
    'Hoy': {
      kpiOp: [
        {label:'Pacientes activos',     value:'248',   delta:'↑ 2 desde ayer',    tone:'ok',    icon:'user',  route:'casos'},
        {label:'Sin retiro hoy',        value:'31',    delta:'↑ 3 vs ayer',     tone:'danger',icon:'heart', route:'adherencia'},
        {label:'Recetas por vencer 7d', value:'18',    delta:'→ estable',       tone:'warn',  icon:'doc',   route:'casos'},
        {label:'Resolución IA (hoy)',   value:'76%',   delta:'↑ 2 pp vs ayer', tone:'ok', icon:'zap',   route:'workflows'},
      ],
      kpiEc: [
        {label:'Facturación esperada',  value:'$612 K', sub:'Proyección del día', icon:'dollar', route:'facturacion'},
        {label:'Confirmado hoy',        value:'$438 K', sub:'14 casos cerrados',  icon:'check',  route:'facturacion'},
        {label:'Pendiente de legajo',   value:'$108 K', sub:'3 casos en armado',  icon:'clip',   route:'facturacion'},
        {label:'Diferencias motor',     value:'$28 K',  sub:'1 caso observado · revisar', tone:'warn', icon:'alert', route:'facturacion'},
      ],
      motor: [
        {l:'Workflows hoy',value:'422',sub:'Ejecuciones'},
        {l:'Intervenciones humanas',value:'156',sub:'5,5% del total'},
        {l:'SLA medio',value:'2,1 h',sub:'Alerta → resolución'},
        {l:'Sin escalamiento',value:'94,5%',sub:'Resolución 1er intento',tone:'ok'},
      ],
      feedTitle:'Feed del sistema · últimas 24 h',
    },
    'Esta semana': {
      kpiOp: [
        {label:'Pacientes activos',     value:'248',   delta:'↑ 7 · 7 días',    tone:'ok',    icon:'user',  route:'casos'},
        {label:'Sin retiro (sem.)',     value:'128',   delta:'↑ 12 vs sem. ant.', tone:'danger',icon:'heart', route:'adherencia'},
        {label:'Recetas por vencer 7d', value:'64',    delta:'↑ 8',             tone:'warn',  icon:'doc',   route:'casos'},
        {label:'Resolución IA (sem.)',  value:'74%',   delta:'↑ 3 pp vs sem. ant.', tone:'ok', icon:'zap',   route:'workflows'},
      ],
      kpiEc: [
        {label:'Facturación esperada',  value:'$3,08 M', sub:'Proyección de la semana', icon:'dollar', route:'facturacion'},
        {label:'Confirmado',            value:'$2,21 M', sub:'67 casos cerrados',       icon:'check',  route:'facturacion'},
        {label:'Pendiente de legajo',   value:'$518 K',  sub:'14 casos en armado',      icon:'clip',   route:'facturacion'},
        {label:'Diferencias motor',     value:'$104 K',  sub:'2 casos observados · revisar', tone:'warn', icon:'alert', route:'facturacion'},
      ],
      motor: [
        {l:'Workflows (sem.)',value:'2.614',sub:'Ejecuciones'},
        {l:'Intervenciones humanas',value:'841',sub:'5,8% del total'},
        {l:'SLA medio',value:'2,3 h',sub:'Alerta → resolución'},
        {l:'Sin escalamiento',value:'93,8%',sub:'Resolución 1er intento',tone:'ok'},
      ],
      feedTitle:'Feed del sistema · últimos 7 días',
    },
    'Este mes': {
      kpiOp: [
        {label:'Pacientes activos',     value:'248',   delta:'↑ 22 en el mes',  tone:'ok',    icon:'user',  route:'casos'},
        {label:'Sin retiro (mes)',      value:'412',   delta:'↓ 38 vs mes ant.', tone:'warn',icon:'heart', route:'adherencia'},
        {label:'Recetas por vencer 30d',value:'187',   delta:'→ estable',       tone:'warn',  icon:'doc',   route:'casos'},
        {label:'Resolución IA (mes)',   value:'72%',   delta:'↑ 4 pp vs mes ant.', tone:'ok', icon:'zap',   route:'workflows'},
      ],
      kpiEc: [
        {label:'Facturación esperada',  value:'$12,84 M', sub:'Proyección del mes',  icon:'dollar', route:'facturacion'},
        {label:'Confirmado',            value:'$9,21 M',  sub:'134 casos cerrados',  icon:'check',  route:'facturacion'},
        {label:'Pendiente de legajo',   value:'$2,18 M',  sub:'34 casos en armado',  icon:'clip',   route:'facturacion'},
        {label:'Diferencias motor',     value:'$450 K',   sub:'4 casos observados · revisar', tone:'warn', icon:'alert', route:'facturacion'},
      ],
      motor: [
        {l:'Workflows (mes)',value:'11.240',sub:'Ejecuciones'},
        {l:'Intervenciones humanas',value:'3.482',sub:'5,5% del total'},
        {l:'SLA medio',value:'2,1 h',sub:'Alerta → resolución'},
        {l:'Sin escalamiento',value:'94,5%',sub:'Resolución 1er intento',tone:'ok'},
      ],
      feedTitle:'Feed del sistema · este mes',
    },
  };
  const current = periodData[periodo];
  const kpiOp = current.kpiOp;
  const kpiEc = current.kpiEc;

  const distrib = [
    {estado:'Alta',                count:18, tone:'helios'},
    {estado:'Receta vigente',      count:42, tone:'teal2'},
    {estado:'Adherencia',          count:31, tone:'danger'},
    {estado:'Dispensa',            count:58, tone:'sun'},
    {estado:'Consolidación doc.',  count:22, tone:'warn'},
    {estado:'Reglas económicas',   count:17, tone:'slate'},
    {estado:'Legajo armado',       count:26, tone:'helios'},
    {estado:'Facturado',           count:34, tone:'ok'},
  ];
  const top5 = DATA.pacientes.slice().sort((a,b)=>b.risk-a.risk).slice(0,5);
  const feed = [
    {t:'11:42',tipo:'auto',desc:'WF-ADH detectó gap en P-0428 · Dulaglutida 22 días',tone:'danger'},
    {t:'11:39',tipo:'auto',desc:'WF-REC validó receta R-2026-03120 · Jorge Benítez',tone:'helios'},
    {t:'11:35',tipo:'humano',desc:'Camila Díaz registró llamada con Roberto Tonini',tone:'teal2'},
    {t:'10:55',tipo:'auto',desc:'WF-FAC armó legajo automáticamente · P-0402 · $186.400',tone:'ok'},
    {t:'10:12',tipo:'auto',desc:'Dispensa confirmada P-0312 · Farmacity Caballito',tone:'sun'},
    {t:'09:32',tipo:'humano',desc:'Intervención manual marcó P-0221 como resuelto',tone:'ok'},
    {t:'08:45',tipo:'excep',desc:'WF-FIN: precio Glargina fuera de rango OSDE · P-0189',tone:'warn'},
    {t:'08:00',tipo:'auto',desc:'Cron WF-ADH · 31 pacientes evaluados · 19 workflows iniciados',tone:'helios'},
  ];

  return <div className="px-7 py-6 max-w-[1480px]">
    <PageHeader titulo="Torre de control"
      subtitulo="Sistema Operativo Autónomo · 248 casos activos · 10 workflows ejecutándose"
      chip={<Badge tone="helios" size="sm" dot>En vivo · actualizado hace 4 min</Badge>}
      action={<div className="flex gap-2 items-center">
        <div className="flex rounded-lg border border-slate-200 bg-white overflow-hidden">
          {periodos.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>
        <Button variant="primary" size="sm" icon={<Icon.plus c="w-3.5 h-3.5"/>} onClick={()=>go('casos')}>Nuevo caso</Button>
      </div>}/>

    <div className="mb-2 px-1 text-[10.5px] font-mono uppercase tracking-wider text-ink-400 font-semibold">Operación</div>
    <div className="grid grid-cols-4 gap-3 mb-4">
      {kpiOp.map(k => <button key={k.label} onClick={()=>go(k.route)} className="text-left hover-raise">
        <KpiTile label={k.label} value={k.value} delta={k.delta} deltaTone={k.tone}
          icon={<IconOf name={k.icon} c="w-4 h-4"/>}
          iconTone={k.tone==='danger'?'danger':k.tone==='warn'?'sun':'helios'}/>
      </button>)}
    </div>

    <div className="mb-2 px-1 text-[10.5px] font-mono uppercase tracking-wider text-ink-400 font-semibold">Economía</div>
    <div className="grid grid-cols-4 gap-3 mb-5">
      {kpiEc.map(k => <button key={k.label} onClick={()=>go(k.route)} className="text-left hover-raise">
        <KpiTile label={k.label} value={k.value} sub={k.sub}
          icon={<IconOf name={k.icon} c="w-4 h-4"/>}
          iconTone={k.tone==='warn'?'sun':'teal2'}/>
      </button>)}
    </div>

    <div className="grid grid-cols-3 gap-3">
      <Card className="col-span-2" title="Distribución de los 248 casos por estado"
        subtitle="Máquina de estados · CABA + Interior"
        action={<Button variant="ghost" size="sm" iconRight={<Icon.chevR c="w-3.5 h-3.5"/>} onClick={()=>go('casos')}>Ver bandeja</Button>}>
        <div className="space-y-2.5 mt-2">
          {distrib.map(d => <button key={d.estado} onClick={()=>go('casos')} className="w-full flex items-center gap-3 p-1 -m-1 rounded-lg hover:bg-slate-50 text-left">
            <StatePill estado={d.estado}/>
            <div className="flex-1"><ProgressBar value={d.count} max={60} tone={d.tone==='slate'?'helios':d.tone==='warn'?'sun':d.tone}/></div>
            <span className="font-mono text-[11.5px] font-semibold text-ink-800 tabular-nums w-10 text-right">{d.count}</span>
          </button>)}
        </div>
      </Card>

      <Card title="Alertas activas" subtitle="Agrupadas por tipo"
        action={<Button variant="ghost" size="sm" onClick={()=>go('adherencia')}>Ver todas</Button>}>
        <div className="space-y-3 mt-1">
          <AlertGroup tone="danger" tipo="Clínica" count={9} msg="HbA1c fuera de objetivo en P-0221 · urgente"/>
          <AlertGroup tone="warn"   tipo="Adherencia" count={31} msg="Dulaglutida sin retirar > 20 días · P-0428"/>
          <AlertGroup tone="sun"    tipo="Económica" count={4} msg="Glargina fuera de rango OSDE · P-0189"/>
        </div>
      </Card>
    </div>

    <div className="grid grid-cols-3 gap-3 mt-3">
      <Card title="Top 5 pacientes por riesgo" subtitle="Ordenados por score descendente" className="col-span-1">
        <div className="space-y-1 mt-1">
          {top5.map(p => <button key={p.id} onClick={()=>go('caso',p.id)} className="w-full flex items-center gap-2.5 p-2 rounded-lg hover:bg-slate-50 text-left">
            <Avatar name={p.n} size="sm" tone={p.tone}/>
            <div className="min-w-0 flex-1">
              <div className="text-[12px] font-semibold text-ink-800 truncate">{p.n}</div>
              <div className="text-[10.5px] text-ink-400 font-mono">{p.id} · {p.estado}</div>
            </div>
            <RiskPill score={p.risk}/>
          </button>)}
        </div>
      </Card>

      <Card title={current.feedTitle} subtitle="Acciones automáticas y humanas" className="col-span-2">
        <div className="space-y-1 mt-1">
          {feed.map((e,i) => <div key={i} className="flex gap-3 py-2 border-b border-slate-100 last:border-0">
            <div className="w-14 shrink-0 text-[10.5px] font-mono text-ink-400 pt-0.5">{e.t}</div>
            <Badge tone={e.tone} size="sm">{e.tipo==='auto'?'Auto':e.tipo==='humano'?'Humano':'Excep.'}</Badge>
            <div className="flex-1 text-[12px] text-ink-700 leading-snug">{e.desc}</div>
          </div>)}
        </div>
      </Card>
    </div>

    <div className="grid grid-cols-4 gap-3 mt-3">
      {current.motor.map(m => <MotorTile key={m.l} label={m.l} value={m.value} sub={m.sub} tone={m.tone}/>)}
    </div>
  </div>;
}

function AlertGroup({tone, tipo, count, msg}) {
  return <div className="flex gap-2.5 items-start">
    <div className={'w-7 h-7 rounded-lg flex items-center justify-center shrink-0 '+(
      tone==='danger'?'bg-[#E04B4B]/10 text-[#B93535]':
      tone==='warn'?'bg-[#EEA028]/10 text-[#D28513]':
      'bg-[#F5B84D]/10 text-[#D28513]'
    )}><Icon.alert c="w-3.5 h-3.5"/></div>
    <div className="min-w-0 flex-1">
      <div className="flex items-center gap-2">
        <span className="text-[12px] font-semibold text-ink-800">{tipo}</span>
        <Badge tone={tone} size="sm">{count}</Badge>
      </div>
      <div className="text-[11px] text-ink-500 leading-snug mt-0.5 truncate">{msg}</div>
    </div>
  </div>;
}
function MotorTile({label, value, sub, tone='helios'}) {
  return <div className="bg-white rounded-2xl border border-slate-100 px-4 py-3.5"
    style={{boxShadow:'0 1px 2px rgba(15,23,42,0.04)'}}>
    <p className="text-[10.5px] text-ink-400 uppercase tracking-wide font-medium">{label}</p>
    <p className="font-display font-extrabold text-[22px] text-ink-800 tabular-nums leading-none mt-1.5">{value}</p>
    <p className="text-[10.5px] text-ink-400 mt-1.5">{sub}</p>
  </div>;
}

window.TorrePage = TorrePage;