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

// ============================================================================
// 02 · BANDEJA DE CASOS
// ============================================================================
function BandejaPage({go, onOpenPreview}) {
  const [vista, setVista] = useState('tabla');
  const [fEstado, setFEstado] = useState('Todos');
  const [fCircuito, setFCircuito] = useState('Todos');
  const [fFinanc, setFFinanc] = useState('Todos');
  const [fRiesgo, setFRiesgo] = useState('Todos');
  const [q, setQ] = useState('');
  const [selected, setSelected] = useState(new Set());
  const [nuevoOpen, setNuevoOpen] = useState(false);

  const estados = ['Todos','Alta','Receta vigente','Adherencia','Dispensa','Consolidación doc.','Reglas económicas','Legajo armado','Facturado'];

  const filtered = useMemo(()=>{
    return DATA.pacientes.filter(p => {
      if (fEstado!=='Todos' && p.estado!==fEstado) return false;
      if (fCircuito!=='Todos' && p.circuito!==fCircuito) return false;
      if (fFinanc!=='Todos' && p.fin!==fFinanc) return false;
      if (fRiesgo==='Crítico' && p.risk<80) return false;
      if (fRiesgo==='Alto' && (p.risk<60 || p.risk>=80)) return false;
      if (fRiesgo==='Medio' && (p.risk<40 || p.risk>=60)) return false;
      if (fRiesgo==='Bajo' && p.risk>=40) return false;
      if (q) {
        const qq = q.toLowerCase();
        if (!p.n.toLowerCase().includes(qq) && !p.dni.includes(q) && !p.id.toLowerCase().includes(qq) && !(p.receta||'').toLowerCase().includes(qq)) return false;
      }
      return true;
    });
  }, [fEstado,fCircuito,fFinanc,fRiesgo,q]);

  const toggleSel = (id) => setSelected(s => {
    const n = new Set(s); n.has(id)?n.delete(id):n.add(id); return n;
  });

  return <div className="px-7 py-6 min-w-0">
    <PageHeader titulo="Bandeja de casos"
      subtitulo="10 de 248 casos activos · trabajo operativo diario"
      action={<div className="flex gap-2">
        <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={()=>setNuevoOpen(true)}>Nuevo caso</Button>
      </div>}/>

    <div className="grid grid-cols-3 gap-3 mb-4">
      <QuickStat tone="danger" n="31" l="Sin retiro" sub="Activar recontacto"/>
      <QuickStat tone="warn"   n="18" l="Recetas por vencer" sub="Próximos 7 días"/>
      <QuickStat tone="sun"    n="7"  l="Escalados a humano" sub="Requieren intervención"/>
    </div>

    <Card noPad>
      <div className="px-4 py-3 border-b border-slate-100 flex items-center gap-x-3 gap-y-2 flex-wrap">
        <div className="relative flex-1 min-w-[220px] 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 pointer-events-none"/>
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Nombre, DNI, ID caso, receta…"
            className="pl-8 pr-3 py-1.5 text-[12px] bg-slate-50 border border-slate-200 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-helios-400/50 focus:bg-white"/>
        </div>
        <FilterSelect label="Estado" value={fEstado} onChange={setFEstado} options={estados}/>
        <FilterSelect label="Circuito" value={fCircuito} onChange={setFCircuito} options={['Todos','CABA','Interior']}/>
        <FilterSelect label="Financiador" value={fFinanc} onChange={setFFinanc} options={['Todos',...DATA.financiadores.map(f=>f.n)]}/>
        <FilterSelect label="Riesgo" value={fRiesgo} onChange={setFRiesgo} options={['Todos','Crítico','Alto','Medio','Bajo']} align="right"/>
        <div className="ml-auto flex items-center gap-1.5 bg-slate-50 rounded-lg p-0.5 shrink-0">
          <button onClick={()=>setVista('tabla')} className={'px-2 py-1 rounded-md '+(vista==='tabla'?'bg-white shadow-sm':'text-ink-400')} title="Tabla"><ExtraIcons.list c="w-3.5 h-3.5"/></button>
          <button onClick={()=>setVista('kanban')} className={'px-2 py-1 rounded-md '+(vista==='kanban'?'bg-white shadow-sm':'text-ink-400')} title="Kanban"><ExtraIcons.grid c="w-3.5 h-3.5"/></button>
        </div>
      </div>

      {selected.size>0 && <div className="px-5 py-2 bg-helios-50/50 border-b border-helios-100 flex items-center gap-2 text-[12px]">
        <span className="font-semibold text-helios-700">{selected.size} seleccionados</span>
        <Button variant="ghost" size="sm">Asignar</Button>
        <Button variant="ghost" size="sm">Exportar</Button>
        <button onClick={()=>setSelected(new Set())} className="ml-auto text-ink-400 hover:text-ink-700 text-[11px]">Limpiar</button>
      </div>}

      {vista==='tabla' ? <div className="overflow-x-auto scrollbar-thin">
        <div className="grid grid-cols-[32px_88px_minmax(200px,2.4fr)_minmax(140px,1.2fr)_minmax(130px,1.1fr)_88px_72px_72px_minmax(140px,1.3fr)_64px] gap-x-4 px-5 py-2.5 border-b border-slate-100 bg-slate-50/40 text-[10px] font-mono uppercase tracking-wider text-ink-400 font-semibold min-w-[1180px]">
          <span></span>
          <span>ID</span>
          <span>Paciente</span>
          <span>Financiador</span>
          <span>Estado</span>
          <span className="text-right">HbA1c·Adh</span>
          <span className="text-right">Días s/d</span>
          <span className="text-right">Riesgo</span>
          <span>Próx. acción</span>
          <span></span>
        </div>
        {filtered.map(p => <div key={p.id} className="grid grid-cols-[32px_88px_minmax(200px,2.4fr)_minmax(140px,1.2fr)_minmax(130px,1.1fr)_88px_72px_72px_minmax(140px,1.3fr)_64px] gap-x-4 items-center px-5 py-3 border-b border-slate-100 last:border-0 text-[12px] hover:bg-slate-50 cursor-pointer group min-w-[1180px]"
          onClick={()=>onOpenPreview(p)}>
          <input type="checkbox" checked={selected.has(p.id)} onChange={()=>toggleSel(p.id)} onClick={e=>e.stopPropagation()} className="rounded justify-self-start"/>
          <span className="font-mono text-[11px] text-ink-500 tabular-nums">{p.id}</span>
          <div className="flex items-center gap-2.5 min-w-0">
            <Avatar name={p.n} size="sm" tone={p.tone}/>
            <div className="min-w-0">
              <div className="font-semibold text-ink-800 text-[12.5px] truncate flex items-center gap-1.5 leading-tight">
                {p.n}
                {p.risk>=80 && <span className="w-1.5 h-1.5 rounded-full bg-[#E04B4B] shrink-0" title="Crítico"/>}
              </div>
              <div className="text-[10.5px] font-mono text-ink-400 truncate mt-0.5">{p.dx} · {p.circuito}</div>
            </div>
          </div>
          <div className="min-w-0">
            <div className="text-[11.5px] text-ink-700 font-medium truncate leading-tight">{p.fin}</div>
            <div className="text-[10px] text-ink-400 truncate mt-0.5">{p.plan}</div>
          </div>
          <div><StatePill estado={p.estado}/></div>
          <div className="text-right tabular-nums">
            <div className={'font-mono text-[11.5px] font-semibold leading-tight '+(p.hba1c>p.hba1cObj?'text-[#B93535]':'text-[#1E8057]')}>{p.hba1c}%</div>
            <div className="text-[10px] text-ink-400 font-mono mt-0.5">Adh {p.adh}%</div>
          </div>
          <div className={'text-right font-mono text-[11.5px] tabular-nums '+(p.diasSinDisp>14?'text-[#B93535] font-semibold':'text-ink-600')}>{p.diasSinDisp}d</div>
          <div className="flex justify-end"><RiskPill score={p.risk}/></div>
          <div className="text-[11px] text-ink-500 truncate">{p.proxAccion}</div>
          <div className="flex justify-end">
            <Button variant="ghost" size="sm" onClick={e=>{e.stopPropagation(); go('caso',p.id);}}>Ver</Button>
          </div>
        </div>)}
        <div className="px-5 py-3 border-t border-slate-100 flex items-center justify-between text-[11px] text-ink-500 min-w-[1180px]">
          <span>Mostrando <strong>1–10</strong> de <strong>248</strong> casos</span>
          <div className="flex gap-1">
            <button className="px-2 py-1 rounded-md border border-slate-200 text-ink-400" disabled>←</button>
            <button className="px-2.5 py-1 rounded-md bg-helios-600 text-white font-semibold">1</button>
            <button className="px-2.5 py-1 rounded-md hover:bg-slate-50">2</button>
            <button className="px-2.5 py-1 rounded-md hover:bg-slate-50">3</button>
            <span className="px-1 text-ink-400">…</span>
            <button className="px-2.5 py-1 rounded-md hover:bg-slate-50">25</button>
            <button className="px-2 py-1 rounded-md hover:bg-slate-50">→</button>
          </div>
        </div>
      </div> : <KanbanView pacientes={filtered} go={go}/>}
    </Card>

    <Modal open={nuevoOpen} onClose={()=>setNuevoOpen(false)} title="Nuevo caso de diabetes"
      subtitle="Los datos mínimos para abrir el caso — WF-ALT completa el resto"
      footer={<>
        <Button variant="outline" size="sm" onClick={()=>setNuevoOpen(false)}>Cancelar</Button>
        <Button variant="primary" size="sm" onClick={()=>setNuevoOpen(false)}>Crear caso</Button>
      </>}>
      <div className="grid grid-cols-2 gap-3">
        <Field label="Nombre completo"><Input placeholder="Ej: María Elena Fernández"/></Field>
        <Field label="DNI"><Input placeholder="12.345.678"/></Field>
        <Field label="Tipo de diabetes"><Select><option>DM2</option><option>DM1</option><option>LADA</option><option>MODY</option><option>Gestacional</option></Select></Field>
        <Field label="Circuito"><Select><option>CABA</option><option>Interior</option></Select></Field>
        <Field label="Financiador"><Select>{DATA.financiadores.map(f=><option key={f.codigo}>{f.n}</option>)}</Select></Field>
        <Field label="Sede asignada"><Select><option>Obispo Trejo</option><option>Caballito</option><option>Morón</option><option>Quilmes</option><option>La Plata</option></Select></Field>
      </div>
    </Modal>
  </div>;
}

function QuickStat({tone, n, l, sub}) {
  const bg = tone==='danger'?'bg-[#E04B4B]/5 ring-[#E04B4B]/15':tone==='warn'?'bg-[#EEA028]/5 ring-[#EEA028]/15':'bg-[#F5B84D]/5 ring-[#EEA028]/15';
  const fg = tone==='danger'?'text-[#B93535]':'text-[#D28513]';
  return <div className={'rounded-2xl ring-1 px-4 py-3 flex items-center gap-3 '+bg}>
    <div className={'font-display font-extrabold text-[28px] tabular-nums '+fg}>{n}</div>
    <div>
      <div className="text-[12.5px] font-semibold text-ink-800">{l}</div>
      <div className="text-[10.5px] text-ink-500">{sub}</div>
    </div>
  </div>;
}

function KanbanView({pacientes, go}) {
  const estados = ['Alta','Receta vigente','Adherencia','Dispensa','Consolidación doc.','Reglas económicas','Legajo armado','Facturado'];
  return <div className="p-4 overflow-x-auto">
    <div className="flex gap-3 min-w-max">
      {estados.map(e => {
        const col = pacientes.filter(p=>p.estado===e);
        return <div key={e} className="w-[220px] shrink-0">
          <div className="px-2 py-2 flex items-center justify-between">
            <StatePill estado={e}/>
            <span className="text-[10.5px] font-mono font-semibold text-ink-500">{col.length}</span>
          </div>
          <div className="space-y-2 min-h-[100px] bg-slate-50/60 rounded-lg p-2">
            {col.map(p => <button key={p.id} onClick={()=>go('caso',p.id)} className="w-full text-left bg-white rounded-lg border border-slate-100 p-2.5 hover:shadow-sm hover:-translate-y-px transition-all">
              <div className="flex items-center gap-2 mb-1.5">
                <Avatar name={p.n} size="sm" tone={p.tone}/>
                <div className="min-w-0 flex-1">
                  <div className="text-[11.5px] font-semibold text-ink-800 truncate">{p.n}</div>
                  <div className="text-[9.5px] font-mono text-ink-400">{p.id}</div>
                </div>
              </div>
              <div className="text-[10.5px] text-ink-500 mb-1.5">{p.fin}</div>
              <div className="flex items-center justify-between">
                <span className="text-[10px] font-mono text-ink-500">{p.diasSinDisp}d sin disp.</span>
                <RiskPill score={p.risk}/>
              </div>
            </button>)}
            {col.length===0 && <div className="text-center text-[10.5px] text-ink-400 py-4">—</div>}
          </div>
        </div>;
      })}
    </div>
  </div>;
}

// ---------- Preview drawer ----------
function PreviewDrawer({p, open, onClose, go}) {
  if (!p) return null;
  return <Drawer open={open} onClose={onClose} title={p.n} subtitle={p.id+' · '+p.dxDetalle}>
    <div className="p-5 space-y-4">
      <div className="grid grid-cols-4 gap-2">
        <MiniStat l="HbA1c" v={p.hba1c+'%'} tone={p.hba1c>p.hba1cObj?'danger':'ok'}/>
        <MiniStat l="Adh." v={p.adh+'%'}/>
        <MiniStat l="Días s/d." v={p.diasSinDisp+'d'} tone={p.diasSinDisp>14?'danger':'ok'}/>
        <MiniStat l="Score" v={p.risk}/>
      </div>
      <div className="flex items-center gap-2">
        <StatePill estado={p.estado}/>
        <Badge tone="slate" size="sm">{p.fin} · {p.plan}</Badge>
        <Badge tone="slate" size="sm">{p.circuito}</Badge>
      </div>
      <div>
        <div className="text-[11px] font-mono uppercase tracking-wider text-ink-400 font-semibold mb-2">Últimos eventos</div>
        <div className="space-y-1">
          {DATA.eventos.filter(e=>e.pac===p.id).slice(0,3).map(e => <div key={e.id} className="flex gap-2 py-1.5 border-b border-slate-100 last:border-0">
            <span className="font-mono text-[10px] text-ink-400 w-14 shrink-0">{e.t}</span>
            <span className="text-[11.5px] text-ink-700 flex-1">{e.desc}</span>
          </div>)}
        </div>
      </div>
      <Button variant="primary" size="md" className="w-full justify-center" onClick={()=>{onClose(); go('caso',p.id);}}>Ver caso completo →</Button>
    </div>
  </Drawer>;
}
function MiniStat({l, v, tone='slate'}) {
  const fg = tone==='danger'?'text-[#B93535]':tone==='ok'?'text-[#1E8057]':'text-ink-800';
  return <div className="bg-slate-50 rounded-lg px-2 py-1.5">
    <div className="text-[9.5px] font-mono uppercase text-ink-400">{l}</div>
    <div className={'font-display font-bold text-[15px] tabular-nums '+fg}>{v}</div>
  </div>;
}

window.BandejaPage = BandejaPage;
window.PreviewDrawer = PreviewDrawer;