/* ============================================================
   FLOWSHIELD — Findings / Scans / Reports / Surface / misc
   ============================================================ */
function DemoBanner({ what }) {
  return (
    <div className="mono" style={{ display:'flex', alignItems:'center', gap:9, fontSize:11.5, color:'var(--amber)', background:'color-mix(in srgb,var(--amber) 10%,transparent)', border:'1px solid color-mix(in srgb,var(--amber) 35%,transparent)', borderRadius:8, padding:'9px 13px', marginBottom:16 }}>
      <Icon name="alert" size={15} /> Este workspace aún no tiene {what}. Lanza un escaneo y aparecerán aquí automáticamente.
    </div>
  );
}

function csvDownload(name, header, rows) {
  const esc = (x) => '"' + String(x == null ? '' : x).replace(/"/g, '""') + '"';
  const csv = [header, ...rows].map(r => r.map(esc).join(',')).join('\n');
  const a = document.createElement('a');
  a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
  a.download = name; document.body.appendChild(a); a.click(); a.remove();
}

function Findings() {
  const [filter, setFilter] = useStateL('all');
  const [sevF, setSevF] = useStateL('all');
  const [raw, setRaw] = useStateL(null);     // null = cargando
  const [counts, setCounts] = useStateL(null);
  const [demo, setDemo] = useStateL(false);
  const [drawer, setDrawer] = useStateL(null);   // detalle del hallazgo (revelar credencial)
  const Drawer = window.RtFindingDrawer;

  const load = () => {
    window.fsApi('/api/results/findings', { method:'GET' })
      .then(d => {
        const items = (d && d.findings) || [];
        setRaw(items); setCounts((d && d.counts) || null); setDemo(items.length === 0);
      })
      .catch(() => { setRaw([]); setCounts(null); setDemo(false); });
  };
  useEffectL(() => { load(); }, []);

  const all = raw || [];
  const data = all.filter(f => (filter==='all'||f.status===filter) && (sevF==='all'||f.sev===sevF));
  const c = counts ? counts.sev : all.reduce((a,f)=>{a[f.sev]=(a[f.sev]||0)+1;return a;},{});
  const total = counts ? counts.total : all.length;
  const openN = counts ? counts.status.open : all.filter(f=>f.status==='open').length;
  const fixedN = counts ? counts.status.fixed : all.filter(f=>f.status==='fixed').length;

  const cycle = async (f) => {
    if (demo) return;
    const next = f.status==='open' ? 'triage' : f.status==='triage' ? 'fixed' : 'open';
    try { await window.fsApi('/api/results/findings/'+f.id, { method:'PATCH', body:{ status: next } }); load(); }
    catch (e) { window.alert('No se pudo cambiar el estado: ' + (e.message||e)); }
  };
  const exportCsv = () => csvDownload('flowshield-hallazgos.csv',
    ['id','hallazgo','objetivo','severidad','cvss','estado','origen','fecha'],
    all.map(f=>[f.code||f.id, f.name, f.target, f.sev, f.cvss, f.status, f.source, f.date]));
  const [pdfBusy, setPdfBusy] = useStateL(false);
  const exportPdf = async () => {
    if (demo) return;
    setPdfBusy(true);
    try { await window.fsDownloadPdf('/api/report/findings', {}); } catch (e) { window.alert('No se pudo generar el informe: ' + (e.message||e)); }
    setPdfBusy(false);
  };

  return (
    <div className="enter theme-red">
      <PageHeader title="Hallazgos" crumb="OPERACIONES / HALLAZGOS"
        sub="Vulnerabilidades consolidadas de todos los escaneos del workspace, con CVSS y trazabilidad de origen."
        right={<><Btn variant="ghost" icon="reload" onClick={load}>Actualizar</Btn><Btn variant="ghost" icon="download" onClick={exportCsv}>CSV</Btn><Btn variant="primary" icon="report" className="theme-red" style={{ opacity:(demo||pdfBusy)?0.5:1, pointerEvents:pdfBusy?'none':'auto' }} onClick={exportPdf}>{pdfBusy?'Generando…':'Informe PDF'}</Btn></>} />

      {demo && <DemoBanner what="hallazgos" />}

      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:24 }}>
        <Stat label="Total hallazgos" value={total} icon="findings" accent="var(--fs)" />
        <Stat label="Críticos" value={c.crit||0} icon="alert" accent="var(--sev-crit)" />
        <Stat label="Abiertos" value={openN} icon="x" accent="var(--sev-high)" />
        <Stat label="Resueltos" value={fixedN} icon="check" accent="var(--ok)" />
      </div>

      <div style={{ display:'flex', gap:8, marginBottom:18, flexWrap:'wrap' }}>
        {[['all','Todos'],['open','Abiertos'],['triage','Triaje'],['fixed','Resueltos']].map(([k,l])=>(
          <button key={k} onClick={()=>setFilter(k)} className={'fchip'+(filter===k?' active':'')}>{l}</button>
        ))}
        <div style={{ width:1, background:'var(--line)', margin:'0 4px' }} />
        {[['all','Toda severidad'],['crit','Crítico'],['high','Alto'],['med','Medio'],['low','Bajo']].map(([k,l])=>(
          <button key={k} onClick={()=>setSevF(k)} className={'fchip'+(sevF===k?' active':'')}>{l}</button>
        ))}
      </div>

      <div className="panel" style={{ overflow:'hidden' }}>
        <table className="tbl">
          <thead><tr><th>ID</th><th>Hallazgo</th><th>Objetivo</th><th>Severidad</th><th>CVSS</th><th>Estado</th><th>Origen</th><th>Fecha</th></tr></thead>
          <tbody>
            {raw === null && <tr><td colSpan={8} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Cargando…</td></tr>}
            {raw !== null && data.length === 0 && <tr><td colSpan={8} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Sin hallazgos para este filtro.</td></tr>}
            {data.map(f => (
              <tr key={f.id} onClick={()=>!demo && setDrawer({ mode:'detail', id:f.id })} style={{ cursor:demo?'default':'pointer' }}>
                <td className="mono" style={{ color:'var(--red)', whiteSpace:'nowrap' }}>{f.code || f.id}</td>
                <td style={{ color:'var(--txt-hi)', fontWeight:500, maxWidth:320 }}>{f.has_secret && <span title="Credencial recuperada — abre el hallazgo para revelarla" style={{ marginRight:7, verticalAlign:'middle', display:'inline-flex' }}><Icon name="lock" size={12} style={{ color:'var(--red)' }} /></span>}{f.name}</td>
                <td className="mono" style={{ color:'var(--txt-dim)', fontSize:12 }}>{f.target}</td>
                <td><Sev level={f.sev} pulse={f.sev==='crit'} /></td>
                <td><span className="mono" style={{ fontWeight:600, color:`var(--sev-${f.sev==='crit'?'crit':f.sev})` }}>{f.cvss}</span></td>
                <td onClick={(e)=>{ e.stopPropagation(); cycle(f); }} title={demo?'':'Cambiar estado (abierto → triaje → resuelto)'} style={{ cursor:demo?'default':'pointer' }}><StatusBadge status={f.status} /></td>
                <td className="mono" style={{ fontSize:11.5, color:'var(--txt-dim)' }}>{f.source}</td>
                <td className="mono" style={{ fontSize:11.5, color:'var(--txt-mute)' }}>{rptDate(f.date)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <ChipCSS />
      {drawer && Drawer && <Drawer view={drawer} onClose={()=>{ setDrawer(null); load(); }} />}
    </div>
  );
}

const _TEAM_LABEL = { red:'RED', blue:'BLUE', amber:'NORM', fs:'—' };
const _TEAM_COLOR = { red:'var(--red)', blue:'var(--blue)', amber:'var(--amber)', fs:'var(--txt-dim)' };

function Scans({ onNav, onRelaunch }) {
  const [raw, setRaw] = useStateL(null);
  const [demo, setDemo] = useStateL(false);

  const load = () => {
    window.fsApi('/api/results/scans', { method:'GET' })
      .then(d => { const items = (d && d.scans) || []; setRaw(items); setDemo(items.length === 0); })
      .catch(() => { setRaw([]); setDemo(false); });
  };
  useEffectL(() => { load(); }, []);

  const del = async (s) => {
    if (demo) return;
    if (!window.confirm('¿Borrar este escaneo y sus hallazgos?')) return;
    try { await window.fsApi('/api/results/scans/'+s.id, { method:'DELETE' }); load(); } catch (e) { window.alert('No se pudo borrar el escaneo: ' + (e.message||e)); }
  };
  const clearData = async () => {
    if (!window.confirm('¿Vaciar los datos de Red Team del workspace? Se borrarán escaneos, hallazgos y activos descubiertos. Blue Team y Normativa se conservan.')) return;
    try { const r = await window.fsApi('/api/results/clear', { method:'POST', body:{} }); load(); window.alert('Datos vaciados: ' + (r.scans_deleted||0) + ' escaneos borrados.'); }
    catch (e) { window.alert('No se pudo vaciar: ' + (e.message||e)); }
  };

  const list = raw || [];
  return (
    <div className="enter theme-fs">
      <PageHeader title="Escaneos" crumb="CONFIGURACIÓN / ESCANEOS"
        sub="Historial completo de escaneos del workspace actual."
        right={<><Btn variant="ghost" icon="trash" onClick={clearData} style={{ color:'var(--danger)' }}>Vaciar datos</Btn><Btn variant="ghost" icon="reload" onClick={load}>Actualizar</Btn><Btn variant="primary" icon="bolt" className="theme-fs" onClick={()=>onNav && onNav('redteam')}>Nuevo escaneo</Btn></>} />
      {demo && <DemoBanner what="escaneos" />}
      <div className="panel" style={{ overflow:'hidden' }}>
        <table className="tbl">
          <thead><tr><th>ID</th><th>Herramienta</th><th>Equipo</th><th>Objetivo</th><th>Estado</th><th>Resumen</th><th>Fecha</th><th></th></tr></thead>
          <tbody>
            {raw === null && <tr><td colSpan={8} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Cargando…</td></tr>}
            {raw !== null && list.length === 0 && <tr><td colSpan={8} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Aún no hay escaneos.</td></tr>}
            {list.map(s => {
              const team = s.team || (s.module==='redteam'?'red':s.module==='blueteam'?'blue':s.module==='compliance'?'amber':'fs');
              return (
              <tr key={s.id}>
                <td className="mono" style={{ color:'var(--fs)', whiteSpace:'nowrap' }}>{s.code || s.id}</td>
                <td style={{ color:'var(--txt-hi)', fontWeight:500 }}>{s.tool}</td>
                <td><span className="badge" style={{ color:_TEAM_COLOR[team], borderColor:`color-mix(in srgb,${_TEAM_COLOR[team]} 35%,transparent)`, background:'transparent' }}>{_TEAM_LABEL[team]}</span></td>
                <td className="mono" style={{ color:'var(--txt-dim)', fontSize:12 }}>{s.target}</td>
                <td>{s.status==='running' ? <span style={{ display:'flex', alignItems:'center', gap:8 }}><StatusBadge status="running" /><div className="bar" style={{ width:60 }}><span style={{ width:(s.progress||0)+'%' }} /></div></span> : <StatusBadge status="done" />}</td>
                <td>{s.found && (s.found.crit||s.found.high||s.found.med||s.found.low) ? <div style={{ display:'flex', gap:5 }}>{['crit','high','med','low'].map(k=>s.found[k]?<span key={k} className={'badge '+window.sevClass(k)} style={{ padding:'1px 7px', fontSize:10 }}>{s.found[k]}</span>:null)}</div> : <span className="mono" style={{ color:'var(--txt-mute)', fontSize:11 }}>—</span>}</td>
                <td className="mono" style={{ fontSize:11.5, color:'var(--txt-mute)' }}>{rptDate(s.date)}</td>
                <td style={{ textAlign:'right', whiteSpace:'nowrap' }}>{!demo && <>
                  {onRelaunch && <Btn variant="ghost" size="sm" icon="play" onClick={()=>onRelaunch(s)} title="Re-escanear con los mismos parámetros">Re-escanear</Btn>}
                  <Btn variant="ghost" size="sm" icon="trash" onClick={()=>del(s)} style={{ color:'var(--danger)' }} title="Borrar escaneo y sus hallazgos">Borrar</Btn>
                </>}</td>
              </tr>
            );})}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function rptDate(iso) {
  try { return new Date(iso).toLocaleString('es-ES', { dateStyle:'medium', timeStyle:'short' }); }
  catch { return iso || '—'; }
}

/* ---- Proyectos / engagements + informes ejecutivo/técnico/comercial ---- */
const PROJECT_REPORTS = [
  ['executive', 'Ejecutivo', 'Resumen para dirección: postura de riesgo, prioridades y plan.'],
  ['technical', 'Técnico', 'Entregable completo: hallazgos detallados, superficie y CVE.'],
  ['commercial', 'Propuesta comercial', 'Exposición al riesgo + servicios de remediación propuestos.'],
];

function ProjField({ label, value, onChange, type, placeholder, rows }) {
  const common = { value: value ?? '', placeholder: placeholder || '', onChange: e => onChange(e.target.value), disabled: false };
  return (
    <div style={{ marginBottom:13 }}>
      <label className="mono" style={{ fontSize:11, color:'var(--txt-dim)', display:'block', marginBottom:6 }}>{label}</label>
      {rows
        ? <textarea className="input" rows={rows} style={{ resize:'vertical' }} {...common} />
        : <input className="input" type={type || 'text'} {...common} />}
    </div>
  );
}

function ProjectForm({ initial, onSave, onCancel, busy }) {
  const [f, setF] = useStateL(initial || { status:'active' });
  const set = (k) => (v) => setF(s => ({ ...s, [k]: v }));
  return (
    <div className="panel enter" style={{ padding:'18px 20px', marginBottom:20 }}>
      <div className="eyebrow" style={{ marginBottom:14 }}>{initial && initial.id ? 'Editar proyecto' : 'Nuevo proyecto de seguridad'}</div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'0 18px' }}>
        <ProjField label="NOMBRE DEL PROYECTO *" value={f.name} onChange={set('name')} placeholder="Pentest web ACME Q3" />
        <ProjField label="CLIENTE" value={f.client} onChange={set('client')} placeholder="ACME S.A." />
        <ProjField label="PREPARADO POR (consultor)" value={f.consultant} onChange={set('consultant')} placeholder="Tu empresa / tú" />
        <ProjField label="PREPARADO PARA (contacto)" value={f.contact} onChange={set('contact')} placeholder="CISO de ACME" />
        <ProjField label="INICIO" value={(f.started_at||'').slice(0,10)} onChange={set('started_at')} type="date" />
        <ProjField label="FIN" value={(f.ended_at||'').slice(0,10)} onChange={set('ended_at')} type="date" />
      </div>
      <ProjField label="ALCANCE AUTORIZADO" value={f.scope} onChange={set('scope')} rows={2} placeholder="*.acme.com, 10.0.0.0/24, repos github.com/acme/*" />
      <ProjField label="RESUMEN EJECUTIVO (opcional · si vacío se genera solo)" value={f.summary} onChange={set('summary')} rows={3} />
      <ProjField label="ALCANCE / ESTIMACIÓN DE LA PROPUESTA (opcional · informe comercial)" value={f.proposal} onChange={set('proposal')} rows={2} placeholder="Bolsa de 40 h de remediación acompañada + retest." />
      <div style={{ display:'flex', gap:9, marginTop:6 }}>
        <Btn variant="primary" className="theme-fs" icon="check" disabled={busy || !(f.name||'').trim()} onClick={() => onSave(f)}>{busy ? 'Guardando…' : 'Guardar'}</Btn>
        <Btn variant="ghost" onClick={onCancel}>Cancelar</Btn>
      </div>
    </div>
  );
}

function ScanRow({ s, action, onClick, busy }) {
  const fnd = s.found || {};
  return (
    <div style={{ display:'flex', alignItems:'center', gap:12, padding:'9px 12px', border:'1px solid var(--line)', borderRadius:8, flexWrap:'wrap' }}>
      <span className="badge" style={{ padding:'1px 7px', fontSize:9 }}>{(s.module||'').toUpperCase()}</span>
      <div style={{ flex:1, minWidth:150 }}>
        <div style={{ fontSize:12.5, color:'var(--txt-hi)' }}>{s.tool} · {s.target}</div>
        <div className="mono" style={{ fontSize:10.5, color:'var(--txt-mute)', marginTop:2 }}>{s.code} · {rptDate(s.date)} · {s.findings_count} hallazgos</div>
      </div>
      {(fnd.crit||fnd.high) ? <span className="mono" style={{ fontSize:11, color:'var(--danger)' }}>{fnd.crit||0}C/{fnd.high||0}A</span> : null}
      <Btn variant={action==='add'?'solid':'ghost'} size="sm" className="theme-fs" icon={action==='add'?'plus':'x'} disabled={busy} onClick={onClick}>{action==='add'?'Añadir':'Quitar'}</Btn>
    </div>
  );
}

function ProjectDetail({ pid, onBack, onChanged }) {
  const [d, setD] = useStateL(null);     // null = cargando
  const [edit, setEdit] = useStateL(false);
  const [busy, setBusy] = useStateL('');
  const activeProject = useProject();    // proyecto activo (alcance global)
  const isActive = activeProject === pid;

  const load = () => window.fsApi('/api/projects/' + encodeURIComponent(pid), { method:'GET' })
    .then(setD).catch(() => setD(false));
  useEffectL(() => { load(); }, [pid]);

  const save = async (f) => {
    setBusy('save');
    try { await window.fsApi('/api/projects/' + encodeURIComponent(pid), { method:'PATCH', body:f }); setEdit(false); await load(); onChanged && onChanged(); }
    catch (e) { window.alert('No se pudo guardar: ' + (e.message||e)); } finally { setBusy(''); }
  };
  const assign = async (ids, doAssign) => {
    setBusy('scan:'+ids.join(','));
    try { await window.fsApi('/api/projects/'+encodeURIComponent(pid)+'/scans', { method:'POST', body:{ scan_ids:ids, assign:doAssign } }); await load(); onChanged && onChanged(); }
    catch (e) { window.alert('No se pudo actualizar: ' + (e.message||e)); } finally { setBusy(''); }
  };
  const dl = async (kind) => {
    setBusy('rep:'+kind);
    try { await window.fsDownloadPdf('/api/report/project/'+encodeURIComponent(pid)+'/'+kind, {}); }
    catch (e) { window.alert('No se pudo generar el informe: ' + (e.message||e)); } finally { setBusy(''); }
  };

  if (d === null) return <div className="panel" style={{ padding:'18px 22px', color:'var(--txt-mute)', fontSize:13 }}>Cargando proyecto…</div>;
  if (d === false) return <div className="panel" style={{ padding:'18px 22px', color:'var(--danger)', fontSize:13 }}>No se pudo cargar el proyecto. <Btn variant="ghost" size="sm" onClick={onBack}>Volver</Btn></div>;

  const assigned = d.scans || [];
  const available = d.available_scans || [];

  return (
    <div className="enter">
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16, flexWrap:'wrap' }}>
        <Btn variant="ghost" size="sm" icon="chevron" onClick={onBack}>Proyectos</Btn>
        <div style={{ flex:1 }}>
          <div className="disp" style={{ fontSize:18, fontWeight:700, color:'var(--txt-hi)' }}>{d.name}</div>
          <div style={{ fontSize:12.5, color:'var(--txt-dim)', marginTop:2 }}>{d.client || 'Sin cliente'} · {assigned.length} escaneos · {d.status==='active'?'Activo':'Cerrado'}</div>
        </div>
        <Btn variant={isActive?'ghost':'primary'} size="sm" className={isActive?'':'theme-fs'} icon={isActive?'check':'folder'}
          onClick={()=>window.fsProject.set(isActive?'':pid)}
          title="Fija este proyecto como alcance activo en toda la app">
          {isActive?'Proyecto activo':'Trabajar en este proyecto'}
        </Btn>
        <Btn variant="ghost" size="sm" icon="doc" onClick={()=>setEdit(e=>!e)}>{edit?'Cerrar edición':'Editar'}</Btn>
      </div>

      {edit && <ProjectForm initial={d} onSave={save} onCancel={()=>setEdit(false)} busy={busy==='save'} />}

      <div className="panel" style={{ padding:'18px 20px', marginBottom:20 }}>
        <div className="eyebrow" style={{ marginBottom:6 }}>Generar informes del proyecto</div>
        <div style={{ fontSize:12.5, color:'var(--txt-dim)', marginBottom:14 }}>Tres formas del mismo proyecto, cada una en PDF. Se archivan en Informes.</div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))', gap:12 }}>
          {PROJECT_REPORTS.map(([kind,label,desc]) => (
            <div key={kind} style={{ border:'1px solid var(--line)', borderRadius:10, padding:'14px 15px', display:'flex', flexDirection:'column', gap:8 }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}><Icon name="report" size={16} style={{ color:'var(--fs)' }} /><span style={{ fontWeight:700, color:'var(--txt-hi)', fontSize:13.5 }}>{label}</span></div>
              <div style={{ fontSize:12, color:'var(--txt-mute)', flex:1, lineHeight:1.5 }}>{desc}</div>
              <Btn variant="primary" size="sm" className="theme-fs" icon="download" disabled={!!busy} onClick={()=>dl(kind)}>{busy==='rep:'+kind?'Generando…':'Descargar PDF'}</Btn>
            </div>
          ))}
        </div>
        {!assigned.length && <div className="mono" style={{ fontSize:11, color:'var(--amber)', marginTop:12 }}>Asigna escaneos abajo para que los informes tengan contenido.</div>}
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18 }}>
        <div className="panel" style={{ padding:'16px 18px' }}>
          <div className="eyebrow" style={{ marginBottom:12 }}>En el proyecto ({assigned.length})</div>
          <div style={{ display:'grid', gap:8 }}>
            {assigned.length ? assigned.map(s => <ScanRow key={s.id} s={s} action="remove" busy={!!busy} onClick={()=>assign([s.id], false)} />)
              : <div style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Ningún escaneo asignado todavía.</div>}
          </div>
        </div>
        <div className="panel" style={{ padding:'16px 18px' }}>
          <div className="eyebrow" style={{ marginBottom:12 }}>Escaneos disponibles ({available.length})</div>
          <div style={{ display:'grid', gap:8, maxHeight:420, overflowY:'auto' }}>
            {available.length ? available.map(s => <ScanRow key={s.id} s={s} action="add" busy={!!busy} onClick={()=>assign([s.id], true)} />)
              : <div style={{ color:'var(--txt-mute)', fontSize:12.5 }}>No hay escaneos libres. Lanza escaneos o quita alguno de otro proyecto.</div>}
          </div>
        </div>
      </div>
    </div>
  );
}

function Projects() {
  const [list, setList] = useStateL(null);   // null = cargando
  const [sel, setSel] = useStateL(null);     // id del proyecto abierto
  const [creating, setCreating] = useStateL(false);
  const [busy, setBusy] = useStateL(false);

  const load = () => window.fsApi('/api/projects', { method:'GET' })
    .then(d => setList(d.projects || [])).catch(() => setList([]));
  useEffectL(() => { load(); }, []);

  const create = async (f) => {
    setBusy(true);
    try { const p = await window.fsApi('/api/projects', { method:'POST', body:f }); setCreating(false); await load(); setSel(p.id); }
    catch (e) { window.alert('No se pudo crear el proyecto: ' + (e.message||e)); } finally { setBusy(false); }
  };
  const del = async (id, e) => {
    e.stopPropagation();
    if (!window.confirm('¿Eliminar este proyecto? Los escaneos no se borran, solo se desasignan.')) return;
    try { await window.fsApi('/api/projects/'+encodeURIComponent(id), { method:'DELETE' }); setList(l => (l||[]).filter(p => p.id !== id)); }
    catch (e) { window.alert('No se pudo eliminar: ' + (e.message||e)); }
  };

  if (sel) return (
    <div className="enter theme-fs">
      <PageHeader title="Proyecto" crumb="CONFIGURACIÓN / PROYECTOS" sub="Agrupa escaneos y genera los informes ejecutivo, técnico y de propuesta comercial." />
      <ProjectDetail pid={sel} onBack={()=>{ setSel(null); load(); }} onChanged={load} />
    </div>
  );

  return (
    <div className="enter theme-fs">
      <PageHeader title="Proyectos" crumb="CONFIGURACIÓN / PROYECTOS"
        sub="Un proyecto de seguridad agrupa escaneos concretos y es la fuente de los informes ejecutivo, técnico y de propuesta comercial."
        right={<Btn variant="primary" icon="plus" className="theme-fs" onClick={()=>setCreating(c=>!c)}>{creating?'Cerrar':'Nuevo proyecto'}</Btn>} />

      {creating && <ProjectForm onSave={create} onCancel={()=>setCreating(false)} busy={busy} />}

      {list === null ? (
        <div className="panel" style={{ padding:'18px 22px', color:'var(--txt-mute)', fontSize:13 }}>Cargando proyectos…</div>
      ) : !list.length ? (
        <Empty icon="folder" title="Sin proyectos todavía"
          sub="Crea un proyecto, asígnale escaneos y genera sus tres informes en PDF." />
      ) : (
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))', gap:14 }}>
          {list.map(p => (
            <div key={p.id} className="panel" style={{ padding:'16px 18px', cursor:'pointer', position:'relative' }} onClick={()=>setSel(p.id)}>
              <div style={{ display:'flex', alignItems:'flex-start', gap:10 }}>
                <div className="tool-ico theme-fs" style={{ width:38, height:38, flexShrink:0 }}><Icon name="folder" size={19} /></div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontWeight:700, color:'var(--txt-hi)', fontSize:14, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{p.name}</div>
                  <div style={{ fontSize:12, color:'var(--txt-dim)', marginTop:2 }}>{p.client || 'Sin cliente'}</div>
                </div>
                <span className={'badge '+(p.status==='active'?'sev-low':'')} style={{ padding:'1px 7px', fontSize:9 }}>{p.status==='active'?'ACTIVO':'CERRADO'}</span>
              </div>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:14 }}>
                <span className="mono" style={{ fontSize:11, color:'var(--txt-mute)' }}>{p.scan_count} escaneos · {rptDate(p.updated_at)}</span>
                <Btn variant="ghost" size="sm" icon="trash" onClick={(e)=>del(p.id, e)} style={{ color:'var(--danger)' }} />
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function Reports() {
  const [reports, setReports] = useStateL(null);   // null = cargando
  const [tab, setTab] = useStateL('all');           // all | red | blue | amber
  const [gen, setGen] = useStateL(false);           // panel generador abierto
  const [scans, setScans] = useStateL(null);        // escaneos Blue Team para generar
  const [busy, setBusy] = useStateL('');            // id en curso (generar)

  const refresh = () => window.fsApi('/api/report/list', { method:'GET' })
    .then(d => setReports(d.reports || [])).catch(()=> setReports([]));
  useEffectL(() => { refresh(); }, []);

  const toggleGen = () => {
    setGen(g => !g);
    if (scans === null) window.fsApi('/api/blueteam/scans', { method:'GET' })
      .then(d => setScans(d.scans || [])).catch(()=> setScans([]));
  };

  const genFromScan = async (s) => {
    setBusy('gen:'+s.scan_id);
    try { await window.fsDownloadPdf('/api/report/blueteam', s); await refresh(); }
    catch(e) { window.alert('No se pudo generar el informe: ' + (e.message||e)); } finally { setBusy(''); }
  };

  const del = async (id) => {
    if (!window.confirm('¿Eliminar este informe de la biblioteca?')) return;
    try { await window.fsApi('/api/report/'+encodeURIComponent(id), { method:'DELETE' });
      setReports(rs => (rs||[]).filter(r => r.id !== id)); } catch(e) { window.alert('No se pudo eliminar el informe: ' + (e.message||e)); }
  };

  const TABS = [['all','Todos'],['red','Red Team'],['blue','Blue Team'],['amber','Cumplimiento']];
  const list = (reports||[]).filter(r => tab==='all' || r.team===tab);

  return (
    <div className="enter theme-fs">
      <PageHeader title="Informes" crumb="CONFIGURACIÓN / INFORMES"
        sub="Biblioteca de informes técnicos y ejecutivos generados a partir de tus escaneos, hallazgos y cumplimiento. Cada PDF que generas queda archivado aquí."
        right={<Btn variant="primary" icon="plus" className="theme-fs" onClick={toggleGen}>{gen?'Cerrar':'Crear informe'}</Btn>} />

      {gen && (
        <div className="panel enter" style={{ padding:'16px 18px', marginBottom:20 }}>
          <div className="eyebrow" style={{ marginBottom:10 }}>Generar informe desde un escaneo Blue Team</div>
          {scans === null ? (
            <div style={{ color:'var(--txt-mute)', fontSize:13 }}>Cargando escaneos…</div>
          ) : !scans.length ? (
            <div style={{ color:'var(--txt-mute)', fontSize:13, lineHeight:1.6 }}>No hay escaneos Blue Team registrados. Lanza uno en <strong style={{color:'var(--txt-hi)'}}>Blue Team → Nuevo scan</strong>. Los informes de Red Team y Normativa se archivan automáticamente al pulsar «Informe PDF» en sus paneles.</div>
          ) : (
            <div style={{ display:'grid', gap:8 }}>
              {scans.slice(0,20).map(s => { const su=s.summary||{}; return (
                <div key={s.scan_id} style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 12px', border:'1px solid var(--line)', borderRadius:8, flexWrap:'wrap' }}>
                  <div style={{ flex:1, minWidth:160 }}>
                    <div style={{ fontSize:12.5, color:'var(--txt-hi)' }}>{s.os} · {s.target}</div>
                    <div className="mono" style={{ fontSize:10.5, color:'var(--txt-mute)', marginTop:2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{rptDate(s.ts)} · {s.profile_title||s.profile}</div>
                  </div>
                  <span className="disp" style={{ fontSize:14, fontWeight:700, color:'var(--blue)' }}>{su.score||0}%</span>
                  <Btn variant="solid" size="sm" icon="report" className="theme-blue" onClick={()=>genFromScan(s)}>{busy==='gen:'+s.scan_id?'Generando…':'Generar PDF'}</Btn>
                </div>
              );})}
            </div>
          )}
        </div>
      )}

      <div className="tabs" style={{ marginBottom:22 }}>
        {TABS.map(([k,l])=><button key={k} onClick={()=>setTab(k)} className={'tab'+(tab===k?' active':'')}>{l}</button>)}
      </div>

      {reports === null ? (
        <div className="panel" style={{ padding:'18px 22px', color:'var(--txt-mute)', fontSize:13 }}>Cargando informes…</div>
      ) : !list.length ? (
        <Empty icon="report" title="Sin informes todavía"
          sub="Genera uno con «Crear informe», o pulsa «Informe PDF» en Red Team / Blue Team / Normativa: todos se archivan aquí." />
      ) : (
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(300px,1fr))', gap:14 }}>
          {list.map(r => (
            <div key={r.id} className={'tool-card theme-'+(r.team||'fs')} style={{ flexDirection:'column' }}>
              <span className="bracket tl" /><span className="bracket tr" /><span className="bracket bl" /><span className="bracket br" />
              <div style={{ display:'flex', justifyContent:'space-between', width:'100%', alignItems:'center' }}>
                <div className="tool-ico"><Icon name="report" size={22} /></div>
                <span className="badge sev-info">{r.fmt||'PDF'}</span>
              </div>
              <div className="tool-title" style={{ marginTop:14, fontSize:14 }}>{r.title}</div>
              <div style={{ display:'flex', justifyContent:'space-between', width:'100%', marginTop:12, alignItems:'center', gap:8 }}>
                <span className="mono" style={{ fontSize:10.5, color:'var(--txt-mute)' }}>{rptDate(r.date)}</span>
                <div style={{ display:'flex', gap:6 }}>
                  <Btn variant="ghost" size="sm" icon="download" onClick={()=>{ if(!r.available) return; const a=document.createElement('a'); a.href='/api/report/file/'+r.id; a.download=r.filename||''; document.body.appendChild(a); a.click(); a.remove(); }} style={{ opacity:r.available?1:0.4 }} title={r.available?'Descargar PDF':'Archivo no disponible'}>Descargar</Btn>
                  <Btn variant="ghost" size="sm" icon="x" onClick={()=>del(r.id)} title="Eliminar informe">Borrar</Btn>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function Surface() {
  const [rows, setRows] = useStateL(null);
  const [counts, setCounts] = useStateL(null);
  const [demo, setDemo] = useStateL(false);

  const load = () => {
    window.fsApi('/api/results/surface', { method:'GET' })
      .then(d => {
        const items = (d && d.assets) || [];
        setRows(items); setCounts((d && d.counts) || null); setDemo(items.length === 0);
      })
      .catch(() => { setRows([]); setCounts(null); setDemo(false); });
  };
  useEffectL(() => { load(); }, []);

  const list = rows || [];
  const exportCsv = () => csvDownload('flowshield-superficie.csv',
    ['ip','hostname','so','puerto','servicio','tecnologia','riesgo'],
    list.map(r=>[r.ip, r.host, r.os, r.port, r.svc, r.tech, r.risk]));
  const atRisk = counts ? counts.at_risk : list.filter(r=>r.risk==='crit'||r.risk==='high').length;
  const [pdfBusy, setPdfBusy] = useStateL(false);
  const exportPdf = async () => {
    if (demo) return;
    setPdfBusy(true);
    try { await window.fsDownloadPdf('/api/report/surface', {}); } catch (e) { window.alert('No se pudo generar el informe: ' + (e.message||e)); }
    setPdfBusy(false);
  };

  return (
    <div className="enter theme-fs">
      <PageHeader title="Superficie de ataque" crumb="OPERACIONES / SUPERFICIE"
        sub="Vista centralizada de hosts, puertos, servicios y tecnologías descubiertas en los escaneos del workspace."
        right={<><Btn variant="ghost" icon="reload" onClick={load}>Actualizar</Btn><Btn variant="ghost" icon="download" onClick={exportCsv}>CSV</Btn><Btn variant="primary" icon="report" className="theme-fs" style={{ opacity:(demo||pdfBusy)?0.5:1, pointerEvents:pdfBusy?'none':'auto' }} onClick={exportPdf}>{pdfBusy?'Generando…':'Informe PDF'}</Btn></>} />
      {demo && <DemoBanner what="activos descubiertos" />}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:24 }}>
        <Stat label="Hosts" value={counts ? counts.hosts : new Set(list.map(r=>r.host)).size} icon="server" accent="var(--fs)" />
        <Stat label="Puertos abiertos" value={counts ? counts.ports : list.filter(r=>r.port&&r.port!=='—').length} icon="port" accent="var(--blue)" />
        <Stat label="Servicios" value={counts ? counts.services : new Set(list.map(r=>r.svc).filter(s=>s&&s!=='—')).size} icon="network" accent="var(--amber)" />
        <Stat label="Activos en riesgo" value={atRisk} icon="alert" accent="var(--red)" />
      </div>
      <div className="panel" style={{ overflow:'hidden' }}>
        <table className="tbl">
          <thead><tr><th>IP</th><th>Hostname</th><th>SO</th><th>Puerto</th><th>Servicio</th><th>Tecnología</th><th>Riesgo</th></tr></thead>
          <tbody>
            {rows === null && <tr><td colSpan={7} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Cargando…</td></tr>}
            {rows !== null && list.length === 0 && <tr><td colSpan={7} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Sin activos. Lanza un Port Scanner, Subdomain Finder o Fingerprint.</td></tr>}
            {list.map((r,i)=>(
              <tr key={r.id||i}>
                <td className="mono" style={{ color:'var(--fs)' }}>{r.ip}</td>
                <td className="mono" style={{ color:'var(--txt-hi)' }}>{r.host}</td>
                <td style={{ color:'var(--txt-dim)', fontSize:12.5 }}>{r.os}</td>
                <td className="mono" style={{ color:'var(--txt)' }}>{r.port}</td>
                <td style={{ color:'var(--txt-dim)', fontSize:12.5 }}>{r.svc}</td>
                <td className="mono" style={{ color:'var(--txt-mute)', fontSize:11.5 }}>{r.tech}</td>
                <td><Sev level={r.risk} pulse={r.risk==='crit'} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Handlers() {
  const h = [
    { name:'XSS Exploiter', icon:'xss', desc:'Explota un XSS extrayendo cookies, contenido HTML, capturas o pulsaciones de teclado.' },
    { name:'HTTP Request Loggers', icon:'http', desc:'Captura peticiones HTTP entrantes: IP origen, método, parámetros, User-Agent, SO, cabeceras.' },
  ];
  return (
    <div className="enter theme-red">
      <PageHeader title="Handlers" crumb="CONFIGURACIÓN / HANDLERS"
        sub="Un handler espera y almacena conexiones entrantes de los sistemas explotados." />
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
        {h.map((x,i)=>(
          <div key={i} className="tool-card theme-red" style={{ flexDirection:'column', minHeight:150, opacity:0.62, filter:'grayscale(.6)', cursor:'not-allowed' }}>
            <span className="bracket tl" /><span className="bracket tr" /><span className="bracket bl" /><span className="bracket br" />
            <div style={{ display:'flex', justifyContent:'space-between', width:'100%', alignItems:'flex-start' }}>
              <div className="tool-ico"><Icon name={x.icon} size={24} /></div>
              <span className="badge sev-info" style={{ height:'fit-content' }}><Icon name="lock" size={12} />PRÓXIMAMENTE</span>
            </div>
            <div className="tool-title" style={{ marginTop:14 }}>{x.name}</div>
            <div className="tool-desc">{x.desc}</div>
            <div style={{ flex:1 }} />
            <div className="mono" style={{ marginTop:16, fontSize:9.5, color:'var(--txt-mute)', letterSpacing:'.12em' }}>REQUIERE MÓDULO DE EXPLOTACIÓN · PRÓXIMAMENTE</div>
          </div>
        ))}
      </div>
    </div>
  );
}

const _INT_CATALOG = [
  { n:'Microsoft Teams', d:'Resumen instantáneo de resultados en tu canal.', c:'#5059C9', kind:'teams' },
  { n:'Slack', d:'Digest de escaneos y alertas por indicadores de riesgo.', c:'#E01E5A', kind:'slack' },
  { n:'Discord', d:'Recibe el resumen de tus escaneos en tu canal.', c:'#5865F2', kind:'discord' },
  { n:'Webhook', d:'POST JSON a tu endpoint ante cada escaneo o hallazgo.', c:'#00F5C0', kind:'webhook' },
  { n:'Jira', d:'Crea y asigna tareas desde los hallazgos.', c:'#2684FF', kind:null },
  { n:'AWS', d:'Importa automáticamente tus targets EC2 y S3.', c:'#FF9900', kind:null },
  { n:'GitHub Actions', d:'Testea apps web en cada despliegue.', c:'#AEBAD0', kind:null },
  { n:'Burp Suite', d:'Envía issues de Burp a tus Findings en segundos.', c:'#FF6633', kind:null },
];
const _KIND_LABEL = { slack:'Slack', teams:'Microsoft Teams', discord:'Discord', webhook:'Webhook' };

function Integrations() {
  const [list, setList] = useStateL(null);       // null = cargando
  const [form, setForm] = useStateL(null);        // {kind,name,url} | null
  const [busy, setBusy] = useStateL('');           // id/acción en curso
  const [msg, setMsg] = useStateL(null);           // {type,text}

  const load = () => window.fsApi('/api/integrations', { method:'GET' })
    .then(d => setList((d&&d.integrations)||[])).catch(()=>setList([]));
  useEffectL(() => { load(); }, []);

  const openForm = (kind) => { setMsg(null); setForm({ kind, name:_KIND_LABEL[kind]||'', url:'' }); };
  const create = async () => {
    if (!form || !form.url.trim()) return;
    setBusy('create'); setMsg(null);
    try {
      await window.fsApi('/api/integrations', { body:{ kind:form.kind, name:form.name, url:form.url.trim() } });
      setForm(null); load(); setMsg({ type:'ok', text:'Integración añadida.' });
    } catch (e) { setMsg({ type:'err', text:e.message||'No se pudo añadir.' }); }
    setBusy('');
  };
  const toggle = async (it) => {
    setBusy(it.id);
    try { await window.fsApi('/api/integrations/'+it.id+'/enabled', { body:{ enabled: !it.enabled } }); load(); }
    catch (e) { setMsg({ type:'err', text:e.message||'Error.' }); }
    setBusy('');
  };
  const test = async (it) => {
    setBusy('test:'+it.id); setMsg(null);
    try { await window.fsApi('/api/integrations/'+it.id+'/test', { method:'POST' }); setMsg({ type:'ok', text:'Mensaje de prueba enviado a «'+it.name+'».' }); }
    catch (e) { setMsg({ type:'err', text:e.message||'El webhook no respondió.' }); }
    setBusy('');
  };
  const del = async (it) => {
    if (!window.confirm('¿Eliminar la integración «'+it.name+'»?')) return;
    setBusy(it.id);
    try { await window.fsApi('/api/integrations/'+it.id, { method:'DELETE' }); load(); }
    catch (e) { setMsg({ type:'err', text:e.message||'Error.' }); }
    setBusy('');
  };

  const connected = list || [];
  return (
    <div className="enter theme-fs">
      <PageHeader title="Integraciones" crumb="CONFIGURACIÓN / INTEGRACIONES"
        sub="Conecta aplicaciones y servicios externos para recibir las actualizaciones más relevantes de tus escaneos." />

      {msg && <div className="mono" style={{ fontSize:12, marginBottom:14, padding:'9px 13px', borderRadius:8, color: msg.type==='ok'?'var(--ok)':'var(--danger)', background:`color-mix(in srgb,${msg.type==='ok'?'var(--ok)':'var(--danger)'} 10%,transparent)`, border:`1px solid color-mix(in srgb,${msg.type==='ok'?'var(--ok)':'var(--danger)'} 35%,transparent)` }}>{msg.text}</div>}

      {/* connected */}
      {connected.length > 0 && (
        <div className="panel" style={{ overflow:'hidden', marginBottom:20 }}>
          <div className="eyebrow" style={{ margin:0, padding:'14px 18px', borderBottom:'1px solid var(--line)' }}>Conectadas</div>
          <table className="tbl">
            <thead><tr><th>Integración</th><th>Tipo</th><th>Endpoint</th><th>Estado</th><th></th></tr></thead>
            <tbody>
              {connected.map(it => (
                <tr key={it.id}>
                  <td style={{ color:'var(--txt-hi)', fontWeight:500 }}>{it.name}</td>
                  <td className="mono" style={{ fontSize:12, color:'var(--txt-dim)' }}>{_KIND_LABEL[it.kind]||it.kind}</td>
                  <td className="mono" style={{ fontSize:11.5, color:'var(--txt-mute)' }}>{it.url_masked}</td>
                  <td><span className={'badge '+(it.enabled?'sev-ok':'sev-info')}>{it.enabled?'Activa':'Pausada'}</span></td>
                  <td style={{ textAlign:'right', whiteSpace:'nowrap' }}>
                    <Btn variant="ghost" size="sm" onClick={()=>test(it)}>{busy==='test:'+it.id?'Enviando…':'Probar'}</Btn>
                    <Btn variant="ghost" size="sm" onClick={()=>toggle(it)}>{it.enabled?'Pausar':'Activar'}</Btn>
                    <Btn variant="ghost" size="sm" icon="trash" onClick={()=>del(it)} style={{ color:'var(--danger)' }} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* add form */}
      {form && (
        <div className="panel enter" style={{ padding:'18px 20px', marginBottom:20 }}>
          <div className="eyebrow" style={{ marginBottom:12 }}>Nueva integración · {_KIND_LABEL[form.kind]}</div>
          <div style={{ display:'grid', gap:12 }}>
            <div>
              <label className="mono" style={{ fontSize:11, color:'var(--txt-dim)', display:'block', marginBottom:6 }}>NOMBRE</label>
              <input className="input" value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} placeholder="p.ej. #seguridad" style={{ width:'100%' }} />
            </div>
            <div>
              <label className="mono" style={{ fontSize:11, color:'var(--txt-dim)', display:'block', marginBottom:6 }}>URL DEL WEBHOOK ({_KIND_LABEL[form.kind]} incoming webhook)</label>
              <input className="input" value={form.url} onChange={e=>setForm(f=>({...f,url:e.target.value}))} placeholder="https://…" style={{ width:'100%' }} />
              <div className="mono" style={{ fontSize:10.5, color:'var(--txt-mute)', marginTop:6 }}>Solo URLs públicas. Las direcciones internas/metadata se rechazan por seguridad.</div>
            </div>
            <div style={{ display:'flex', gap:10 }}>
              <Btn variant="solid" className="theme-fs" onClick={create} style={{ opacity: form.url.trim()?1:0.5 }}>{busy==='create'?'Añadiendo…':'Añadir integración'}</Btn>
              <Btn variant="ghost" onClick={()=>setForm(null)}>Cancelar</Btn>
            </div>
          </div>
        </div>
      )}

      {/* catalog */}
      <div className="eyebrow theme-fs">Disponibles</div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))', gap:14 }}>
        {_INT_CATALOG.map((x,i)=>{
          const soon = !x.kind;
          return (
          <div key={i} className="panel" style={{ padding:20, transition:'border-color .2s, transform .18s', cursor: soon?'default':'pointer', opacity: soon?0.7:1 }} onMouseEnter={e=>{ if(!soon){e.currentTarget.style.borderColor=x.c;e.currentTarget.style.transform='translateY(-2px)';} }} onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--line)';e.currentTarget.style.transform='none';}}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
              <div style={{ width:42, height:42, borderRadius:10, display:'grid', placeItems:'center', background:`color-mix(in srgb,${x.c} 16%,transparent)`, color:x.c, marginBottom:14, fontFamily:'var(--font-display)', fontWeight:700, fontSize:18 }}>{x.n[0]}</div>
              {soon && <span className="badge sev-info" style={{ fontSize:9 }}>PRÓXIMAMENTE</span>}
            </div>
            <div className="disp" style={{ fontSize:15, fontWeight:600, color:'var(--txt-hi)', marginBottom:6 }}>{x.n}</div>
            <div style={{ fontSize:12.5, color:'var(--txt-dim)', lineHeight:1.5, marginBottom:14 }}>{x.d}</div>
            <button disabled={soon} onClick={()=>!soon && openForm(x.kind)} style={{ background:'none', border:'none', color: soon?'var(--txt-mute)':x.c, fontSize:12, cursor: soon?'default':'pointer', fontFamily:'var(--font-mono)', display:'flex', alignItems:'center', gap:6 }}>{soon?'en preparación':<>conectar <Icon name="chevron" size={13} /></>}</button>
          </div>
        );})}
      </div>
    </div>
  );
}

function Settings({ initialTab }) {
  const tabs = [
    { id:'workspace', label:'Workspace', icon:'folder' },
    { id:'targets', label:'Objetivos', icon:'target' },
    { id:'vpn', label:'Perfiles VPN', icon:'lock' },
    { id:'notif', label:'Notificaciones', icon:'alert' },
    { id:'wordlists', label:'Wordlists', icon:'hash' },
    { id:'templates', label:'Plantillas nuclei', icon:'spider' },
    { id:'license', label:'Facturación', icon:'card' },
  ];
  const [tab, setTab] = useStateL(initialTab || 'workspace');
  useEffectL(()=>{ if(initialTab) setTab(initialTab); }, [initialTab]);

  return (
    <div className="enter theme-fs">
      <PageHeader title="Ajustes" crumb="CONFIGURACIÓN / AJUSTES"
        sub="Workspace, objetivos autorizados, perfiles VPN, notificaciones, wordlists y facturación." />
      <div style={{ display:'grid', gridTemplateColumns:'230px 1fr', gap:24, alignItems:'start' }}>
        <div className="panel" style={{ padding:8, display:'flex', flexDirection:'column', gap:2, position:'sticky', top:0 }}>
          {tabs.map(t => (
            <button key={t.id} onClick={()=>setTab(t.id)} className="set-tab" style={{ color: tab===t.id?'var(--fs)':'var(--txt-dim)', background: tab===t.id?'var(--fs-soft)':'transparent' }}>
              <Icon name={t.icon} size={16} />{t.label}
            </button>
          ))}
        </div>
        <div className="fade-soft">
          {tab==='workspace' && <WorkspacePanel />}
          {tab==='targets' && <ScopePanel />}
          {tab==='vpn' && <VpnPanel />}
          {tab==='notif' && <NotifPanel />}
          {tab==='wordlists' && <WordlistsPanel />}
          {tab==='templates' && <NucleiTemplatesPanel />}
          {tab==='license' && <LicensePanel />}
        </div>
      </div>
      <style>{`.set-tab{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:500;font-size:13.5px;border:none;border-radius:8px;padding:11px 13px;cursor:pointer;transition:all .16s;text-align:left}.set-tab:hover{background:var(--bg-panel-2)!important;color:var(--txt-hi)!important}`}</style>
    </div>
  );
}

function WorkspacePanel() {
  const [u, setU] = useStateL(null);   // {plan,name,email,tenant_name,role,assets,scans_month,reports}
  useEffectL(() => {
    let alive = true;
    window.fsApi('/api/account/usage', { method:'GET' })
      .then(d => { if(alive) setU(d); })
      .catch(() => { if(alive) setU('na'); });
    return () => { alive = false; };
  }, []);
  const ok = u && u !== 'na';
  const email = ok ? (u.email || '') : '';
  const display = email ? email.split('@')[0] : '—';
  const initial = (String(display||'?').trim()[0] || '?').toUpperCase();
  const planName = ok ? (u.name || u.plan || '—') : '—';
  const role = ok ? (u.role || 'owner') : '';
  const roleLabel = role === 'owner' ? 'Propietario' : role === 'admin' ? 'Administrador' : 'Operador';
  return (
    <div>
      <div className="panel" style={{ padding:24, marginBottom:16 }}>
        <div className="eyebrow">Cuenta del operador</div>
        <div style={{ display:'flex', alignItems:'center', gap:16, marginBottom:20 }}>
          <div style={{ width:54, height:54, borderRadius:12, background:'linear-gradient(135deg,var(--fs),#29E0FF)', display:'grid', placeItems:'center', color:'#04110D', fontFamily:'var(--font-display)', fontWeight:700, fontSize:24 }}>{initial}</div>
          <div>
            <div className="disp" style={{ fontSize:18, fontWeight:700, color:'var(--txt-hi)' }}>{display}</div>
            <div className="mono" style={{ fontSize:11.5, color:'var(--txt-mute)', marginTop:3 }}>{email || '—'}</div>
          </div>
        </div>
        <div style={{ display:'grid', gap:12 }}>
          <SetRow k="Rol" v={roleLabel} />
          <SetRow k="Workspace" v={ok ? (u.tenant_name || '—') : '—'} />
          <SetRow k="Plan" v={planName} ok />
        </div>
      </div>
      <div className="panel" style={{ padding:24 }}>
        <div className="eyebrow">Límites del plan · {planName}</div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }}>
          <LimitMeter label="Activos" v={ok ? u.assets.used : 0} max={ok ? u.assets.max : 1} />
          <LimitMeter label="Escaneos/mes" v={ok ? u.scans_month.used : 0} max={ok ? u.scans_month.max : 1} />
          <LimitMeter label="Informes" v={ok ? u.reports.used : 0} max={ok ? u.reports.max : 1} />
        </div>
        <TokensMeter />
      </div>
    </div>
  );
}

function VpnPanel() {
  const [profiles, setProfiles] = useStateL(null);   // null = cargando
  const [busy, setBusy] = useStateL(false);
  const [err, setErr] = useStateL('');
  const fileRef = useRefL(null);

  const load = () => window.fsApi('/api/vpn/profiles', { method:'GET' })
    .then(d => setProfiles((d&&d.profiles)||[])).catch(()=>setProfiles([]));
  useEffectL(() => { load(); }, []);

  const onFile = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return; e.target.value='';
    setBusy(true); setErr('');
    try { const fd = new FormData(); fd.append('file', file); fd.append('name', file.name); await window.fsApiForm('/api/vpn/profiles', fd); load(); }
    catch (e) { setErr(e.message || 'No se pudo subir el perfil.'); }
    setBusy(false);
  };
  const del = async (p) => {
    if (!window.confirm('¿Borrar el perfil «'+p.name+'»?')) return;
    try { await window.fsApi('/api/vpn/profiles/'+p.id, { method:'DELETE' }); load(); }
    catch (e) { setErr(e.message || 'No se pudo borrar.'); }
  };

  const list = profiles || [];
  return (
    <div>
      <div className="panel" style={{ padding:22, marginBottom:16, display:'flex', gap:16, alignItems:'center' }}>
        <div className="tool-ico theme-fs" style={{ width:48, height:48 }}><Icon name="lock" size={24} /></div>
        <div style={{ flex:1 }}>
          <div className="disp" style={{ fontSize:16, fontWeight:700, color:'var(--txt-hi)' }}>Perfiles VPN</div>
          <div style={{ fontSize:12.5, color:'var(--txt-dim)', marginTop:3 }}>Sube y gestiona tus perfiles OpenVPN para escaneo de redes internas. El túnel en vivo llegará próximamente.</div>
        </div>
        <input ref={fileRef} type="file" accept=".ovpn,text/plain" style={{ display:'none' }} onChange={onFile} />
        <Btn variant="primary" icon="plus" className="theme-fs" onClick={()=>{ if(!busy && fileRef.current) fileRef.current.click(); }}>{busy?'Subiendo…':'Subir .ovpn'}</Btn>
      </div>
      {err && <div className="panel" style={{ padding:'10px 14px', marginBottom:12, color:'var(--danger)', fontSize:12.5 }}>{err}</div>}
      <div className="panel" style={{ overflow:'hidden' }}>
        <table className="tbl">
          <thead><tr><th>Perfil</th><th>Remote</th><th>Tamaño</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {profiles === null && <tr><td colSpan={5} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Cargando…</td></tr>}
            {profiles !== null && list.length === 0 && <tr><td colSpan={5} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>No hay perfiles. Sube un fichero .ovpn.</td></tr>}
            {list.map((p)=>(
              <tr key={p.id}>
                <td className="mono" style={{ color:'var(--txt-hi)' }}><span style={{ display:'inline-flex', alignItems:'center', gap:9 }}><Icon name="lock" size={15} style={{ color:'var(--fs)' }} />{p.name}</span></td>
                <td style={{ color:'var(--txt-dim)', fontSize:12.5 }}>{p.region}</td>
                <td className="mono" style={{ color:'var(--txt)', fontSize:12.5 }}>{wlFmtBytes(p.size)}</td>
                <td><span className="badge sev-info" title="El túnel en vivo llegará próximamente">Próximamente</span></td>
                <td style={{ textAlign:'right' }}><Btn variant="ghost" size="sm" icon="trash" onClick={()=>del(p)} style={{ color:'var(--danger)' }}>Borrar</Btn></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function NotifPanel() {
  const [rules, setRules] = useStateL(null);       // null = cargando
  const [channels, setChannels] = useStateL(null);
  const [saving, setSaving] = useStateL(false);
  const [err, setErr] = useStateL('');
  const items = [
    ['crit','Hallazgo crítico detectado','Avisa al instante ante cualquier severidad crítica.'],
    ['high','Hallazgo de severidad alta',''],
    ['scanDone','Escaneo completado',''],
    ['newAsset','Nuevo activo en la superficie de ataque',''],
    ['ssl','Certificado SSL próximo a caducar','Aviso con 30 días de antelación.'],
    ['weekly','Resumen semanal de postura',''],
  ];
  useEffectL(() => {
    window.fsApi('/api/notifications/rules', { method:'GET' }).then(d => setRules(d.rules||{})).catch(()=>setRules({}));
    window.fsApi('/api/integrations', { method:'GET' }).then(d => setChannels((d&&d.integrations)||[])).catch(()=>setChannels([]));
  }, []);

  const toggle = async (k) => {
    if (!rules) return;
    const next = { ...rules, [k]: !rules[k] };
    setRules(next); setSaving(true); setErr('');
    try { const d = await window.fsApi('/api/notifications/rules', { method:'PUT', body:{ rules:{ [k]: next[k] } } }); setRules(d.rules); }
    catch (e) { setErr(e.message||'No se pudo guardar.'); setRules(r=>({ ...r, [k]: !next[k] })); }   // revertir
    setSaving(false);
  };

  return (
    <div>
      <div className="panel" style={{ padding:22, marginBottom:16 }}>
        <div className="eyebrow">Canales de notificación</div>
        {channels === null ? <div className="mono" style={{ fontSize:12, color:'var(--txt-mute)' }}>Cargando…</div>
         : channels.length === 0 ? <div style={{ fontSize:12.5, color:'var(--txt-dim)', lineHeight:1.6 }}>No hay canales configurados. Añade uno en <strong style={{ color:'var(--txt-hi)' }}>Integraciones</strong> (Slack, Teams, Discord o Webhook) y las alertas se enviarán ahí.</div>
         : <div style={{ display:'grid', gap:10 }}>
            {channels.map((c,i)=>(
              <div key={c.id} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 0', borderBottom: i<channels.length-1?'1px solid var(--line)':'none' }}>
                <span className="mono" style={{ fontSize:12.5, color:'var(--txt)' }}>{(_KIND_LABEL[c.kind]||c.kind)} · {c.name}</span>
                {c.enabled ? <span className="badge sev-ok">Activo</span> : <span className="badge sev-info">Pausado</span>}
              </div>
            ))}
          </div>}
      </div>
      <div className="panel" style={{ padding:22 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div className="eyebrow">Reglas de alerta</div>
          {saving && <span className="mono" style={{ fontSize:10.5, color:'var(--txt-mute)' }}>guardando…</span>}
        </div>
        {err && <div style={{ color:'var(--danger)', fontSize:12, marginBottom:10 }}>{err}</div>}
        <div style={{ display:'grid', gap:14 }}>
          {items.map(([k,label,desc])=>(
            <div key={k} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:14 }}>
              <div><div style={{ fontSize:13, color:'var(--txt-hi)' }}>{label}</div>{desc && <div style={{ fontSize:11.5, color:'var(--txt-mute)', marginTop:2 }}>{desc}</div>}</div>
              <Toggle label="" on={rules ? !!rules[k] : false} onClick={()=>toggle(k)} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function wlFmtBytes(n) {
  if (n == null) return '—';
  if (n < 1024) return n + ' B';
  if (n < 1024*1024) return (n/1024).toFixed(1) + ' K';
  return (n/(1024*1024)).toFixed(1) + ' M';
}

/* Copia texto al portapapeles con fallback para contextos sin clipboard API. */
function fsCopy(text) {
  try {
    if (navigator.clipboard && window.isSecureContext) return navigator.clipboard.writeText(text);
  } catch (_) { /* fallthrough */ }
  return new Promise((resolve) => {
    try {
      const ta = document.createElement('textarea');
      ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
      document.body.appendChild(ta); ta.focus(); ta.select();
      document.execCommand('copy'); ta.remove();
    } catch (_) { /* noop */ }
    resolve();
  });
}

/* Objetivos autorizados: verificación de propiedad por registro TXT (DNS).
   Solo los dominios verificados (o sus subdominios) permiten escaneos activos. */
function ScopePanel() {
  const [targets, setTargets] = useStateL(null);   // null = cargando
  const [domain, setDomain] = useStateL('');
  const [busy, setBusy] = useStateL(false);
  const [err, setErr] = useStateL('');

  const load = () => window.fsApi('/api/scope/targets', { method:'GET' })
    .then(d => setTargets(Array.isArray(d) ? d : (d.targets || [])))
    .catch(() => setTargets([]));
  useEffectL(() => { load(); }, []);

  const add = async (e) => {
    e.preventDefault();
    const dm = domain.trim();
    if (!dm) return;
    setBusy(true); setErr('');
    try { await window.fsApi('/api/scope/targets', { body: { domain: dm } }); setDomain(''); load(); }
    catch (ex) { setErr(ex.message || 'No se pudo añadir el dominio.'); }
    setBusy(false);
  };

  const list = targets || [];
  const verified = list.filter(t => t.verified).length;

  return (
    <div>
      <div className="panel" style={{ padding:22, marginBottom:16, display:'flex', gap:16, alignItems:'center' }}>
        <div className="tool-ico theme-fs" style={{ width:48, height:48 }}><Icon name="target" size={24} /></div>
        <div style={{ flex:1 }}>
          <div className="disp" style={{ fontSize:16, fontWeight:700, color:'var(--txt-hi)' }}>Objetivos autorizados</div>
          <div style={{ fontSize:12.5, color:'var(--txt-dim)', marginTop:3, lineHeight:1.55 }}>
            Demuestra que eres el propietario de un dominio publicando un registro TXT en su DNS.
            Los escaneos activos (puertos, vulnerabilidades, explotación) solo se permiten sobre
            dominios verificados y sus subdominios. Las IPs privadas y <span className="mono">localhost</span> están exentas.
          </div>
        </div>
        {targets !== null && <div style={{ textAlign:'right' }}>
          <div className="disp" style={{ fontSize:22, fontWeight:700, color:'var(--ok)' }}>{verified}<span style={{ color:'var(--txt-mute)', fontSize:14 }}>/{list.length}</span></div>
          <div className="mono" style={{ fontSize:9.5, color:'var(--txt-mute)', letterSpacing:'.1em' }}>VERIFICADOS</div>
        </div>}
      </div>

      <form onSubmit={add} className="panel" style={{ padding:16, marginBottom:16, display:'flex', gap:10, alignItems:'center' }}>
        <Icon name="globe" size={17} style={{ color:'var(--txt-mute)' }} />
        <input value={domain} onChange={e=>setDomain(e.target.value)} placeholder="midominio.com"
          style={{ flex:1, background:'var(--bg-void)', border:'1px solid var(--line-bright)', borderRadius:8, padding:'10px 12px', color:'var(--txt-hi)', fontSize:13.5, fontFamily:'var(--font-mono)', outline:'none' }} />
        <Btn variant="primary" icon="plus" className="theme-fs" type="submit" onClick={()=>{}}>{busy?'Añadiendo…':'Añadir dominio'}</Btn>
      </form>
      {err && <div className="panel" style={{ padding:'10px 14px', marginBottom:12, color:'var(--danger)', fontSize:12.5 }}>{err}</div>}

      {targets === null && <div className="panel" style={{ padding:20, color:'var(--txt-mute)', fontSize:12.5 }}>Cargando objetivos…</div>}
      {targets !== null && list.length === 0 && (
        <div className="panel" style={{ padding:'34px 20px', textAlign:'center' }}>
          <Icon name="target" size={30} style={{ color:'var(--txt-mute)', opacity:.6 }} />
          <div style={{ fontSize:13, color:'var(--txt-dim)', marginTop:10 }}>Aún no has añadido ningún objetivo. Añade el dominio que quieras auditar para verificar su propiedad.</div>
        </div>
      )}
      <div style={{ display:'grid', gap:12 }}>
        {list.map(t => <ScopeCard key={t.id} t={t} onChange={load} />)}
      </div>
    </div>
  );
}

function ScopeCard({ t, onChange }) {
  const [verifying, setVerifying] = useStateL(false);
  const [hint, setHint] = useStateL('');
  const [copied, setCopied] = useStateL('');

  const verify = async () => {
    setVerifying(true); setHint('');
    try {
      const r = await window.fsApi('/api/scope/targets/' + t.id + '/verify', { method:'POST' });
      if (r && r.verified) { onChange(); }
      else { setHint((r && r.hint) || 'No se encontró el registro TXT esperado. La propagación DNS puede tardar unos minutos.'); }
    } catch (ex) { setHint(ex.message || 'No se pudo verificar.'); }
    setVerifying(false);
  };
  const del = async () => {
    if (!window.confirm('¿Eliminar el objetivo «' + t.domain + '»? Dejará de permitir escaneos activos.')) return;
    try { await window.fsApi('/api/scope/targets/' + t.id, { method:'DELETE' }); onChange(); }
    catch (_) { /* noop */ }
  };
  const copy = (val, key) => { fsCopy(val); setCopied(key); setTimeout(() => setCopied(''), 1400); };

  const rec = t.txt_record || {};
  return (
    <div className="panel" style={{ padding:0, overflow:'hidden', borderColor: t.verified ? 'color-mix(in srgb,var(--ok) 40%,var(--line))' : 'var(--line)' }}>
      <div style={{ display:'flex', alignItems:'center', gap:12, padding:'15px 18px' }}>
        <Icon name="globe" size={18} style={{ color: t.verified ? 'var(--ok)' : 'var(--txt-mute)' }} />
        <div style={{ flex:1 }}>
          <div className="mono" style={{ fontSize:14, color:'var(--txt-hi)' }}>{t.domain}</div>
          {t.verified && t.verified_at && <div className="mono" style={{ fontSize:10, color:'var(--txt-mute)', marginTop:2 }}>verificado · {String(t.verified_at).slice(0,10)}</div>}
        </div>
        {t.verified
          ? <span className="badge sev-ok"><Icon name="check" size={12} /> Verificado</span>
          : <span className="badge sev-info">Pendiente</span>}
        {!t.verified && <Btn variant="primary" size="sm" className="theme-fs" onClick={verify}>{verifying?'Comprobando…':'Verificar'}</Btn>}
        <Btn variant="ghost" size="sm" icon="trash" onClick={del} style={{ color:'var(--danger)' }} />
      </div>

      {!t.verified && (
        <div style={{ padding:'16px 18px', borderTop:'1px solid var(--line)', background:'var(--bg-void)' }}>
          <div className="eyebrow" style={{ marginBottom:10 }}>Publica este registro TXT en tu DNS</div>
          <div style={{ display:'grid', gridTemplateColumns:'auto 1fr auto', gap:'8px 12px', alignItems:'center', fontSize:12 }}>
            <span className="mono" style={{ color:'var(--txt-mute)' }}>Nombre</span>
            <code className="mono" style={{ color:'var(--txt-hi)', wordBreak:'break-all' }}>{rec.name}</code>
            <button className="copy-mini" onClick={()=>copy(rec.name,'name')} title="Copiar"><Icon name={copied==='name'?'check':'copy'} size={13} /></button>
            <span className="mono" style={{ color:'var(--txt-mute)' }}>Tipo</span>
            <code className="mono" style={{ color:'var(--txt-hi)' }}>{rec.type || 'TXT'}</code>
            <span />
            <span className="mono" style={{ color:'var(--txt-mute)' }}>Valor</span>
            <code className="mono" style={{ color:'var(--fs)', wordBreak:'break-all' }}>{rec.value}</code>
            <button className="copy-mini" onClick={()=>copy(rec.value,'value')} title="Copiar"><Icon name={copied==='value'?'check':'copy'} size={13} /></button>
          </div>
          {hint && <div style={{ marginTop:12, padding:'10px 12px', background:'color-mix(in srgb,var(--amber) 8%,transparent)', border:'1px solid color-mix(in srgb,var(--amber) 30%,transparent)', borderRadius:8, fontSize:12, color:'var(--amber)', lineHeight:1.5 }}>{hint}</div>}
          <style>{`.copy-mini{display:grid;place-items:center;width:28px;height:28px;background:var(--bg-panel-2);border:1px solid var(--line-bright);border-radius:7px;color:var(--txt-dim);cursor:pointer;transition:all .15s}.copy-mini:hover{color:var(--fs);border-color:var(--fs)}`}</style>
        </div>
      )}
    </div>
  );
}

function WordlistsPanel() {
  const [lists, setLists] = useStateL([]);
  const [cats, setCats] = useStateL([]);
  const [loading, setLoading] = useStateL(true);
  const [upCat, setUpCat] = useStateL('url-fuzzer');
  const [busy, setBusy] = useStateL(false);
  const [err, setErr] = useStateL('');
  const fileRef = useRefL(null);

  const load = () => {
    setLoading(true);
    window.fsApi('/api/wordlists', { method:'GET' })
      .then(d => { setLists((d && d.wordlists) || []); setCats((d && d.categories) || []); })
      .catch(() => setErr('No se pudieron cargar las wordlists.'))
      .finally(() => setLoading(false));
  };
  useEffectL(() => { load(); }, []);

  const catLabel = (id) => { const c = cats.find(c => c.id === id); return c ? c.label : id; };

  const onFile = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (file) { e.target.value = ''; await doUpload(file); }
  };
  const doUpload = async (file) => {
    setBusy(true); setErr('');
    try {
      const fd = new FormData();
      fd.append('file', file);
      fd.append('category', upCat);
      fd.append('name', file.name);
      await window.fsApiForm('/api/wordlists', fd);
      load();
    } catch (e) { setErr(e.message || 'Error al subir el fichero.'); }
    setBusy(false);
  };
  const del = async (id) => {
    if (!window.confirm('¿Borrar esta wordlist?')) return;
    try { await window.fsApi('/api/wordlists/' + encodeURIComponent(id), { method:'DELETE' }); load(); }
    catch (e) { setErr(e.message || 'No se pudo borrar.'); }
  };

  return (
    <div>
      <div className="panel" style={{ padding:22, marginBottom:16, display:'flex', gap:16, alignItems:'center', flexWrap:'wrap' }}>
        <div className="tool-ico theme-fs" style={{ width:48, height:48 }}><Icon name="hash" size={24} /></div>
        <div style={{ flex:1, minWidth:220 }}>
          <div className="disp" style={{ fontSize:16, fontWeight:700, color:'var(--txt-hi)' }}>Wordlists</div>
          <div style={{ fontSize:12.5, color:'var(--txt-dim)', marginTop:3 }}>Diccionarios para fuzzing, subdominios, vhosts, APIs y credenciales. Catalógalos por uso y aparecerán en el escáner correspondiente.</div>
        </div>
        <div style={{ display:'inline-flex', gap:9, alignItems:'center' }}>
          <select className="wl-sel" value={upCat} onChange={e => setUpCat(e.target.value)} style={{ minWidth:190 }}>
            {cats.map(c => <option key={c.id} value={c.id}>{c.label}</option>)}
          </select>
          <input ref={fileRef} type="file" accept=".txt,.lst,.dic,text/plain" style={{ display:'none' }} onChange={onFile} />
          <Btn variant="primary" icon="plus" className="theme-fs"
            onClick={() => { if (!busy && fileRef.current) fileRef.current.click(); }}>{busy ? 'Subiendo…' : 'Subir wordlist'}</Btn>
        </div>
      </div>
      {err && <div className="panel" style={{ padding:'10px 14px', marginBottom:12, color:'var(--danger)', fontSize:12.5 }}>{err}</div>}
      <div className="panel" style={{ overflow:'hidden' }}>
        <table className="tbl">
          <thead><tr><th>Nombre</th><th>Categoría</th><th>Entradas</th><th>Tamaño</th><th></th></tr></thead>
          <tbody>
            {loading && <tr><td colSpan={5} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Cargando…</td></tr>}
            {!loading && lists.length === 0 && <tr><td colSpan={5} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>No hay wordlists.</td></tr>}
            {lists.map((l) => (
              <tr key={l.id}>
                <td className="mono" style={{ color:'var(--txt-hi)' }}>
                  <span style={{ display:'inline-flex', alignItems:'center', gap:9 }}>
                    <Icon name="doc" size={15} style={{ color:'var(--fs)' }} />{l.name}
                    {l.builtin
                      ? <span className="badge" style={{ padding:'1px 7px', fontSize:9, color:'var(--fs)' }}>INCORPORADA</span>
                      : <span className="badge sev-low" style={{ padding:'1px 7px', fontSize:9 }}>SUBIDA</span>}
                  </span>
                </td>
                <td style={{ color:'var(--txt-dim)', fontSize:12.5 }}>{catLabel(l.category)}</td>
                <td className="mono" style={{ color:'var(--txt)', fontSize:12.5 }}>{l.entries != null ? l.entries.toLocaleString('es') : '—'}</td>
                <td className="mono" style={{ color:'var(--txt-mute)', fontSize:12 }}>{wlFmtBytes(l.bytes)}</td>
                <td style={{ textAlign:'right', whiteSpace:'nowrap' }}>
                  <a className="btn btn-ghost btn-sm" href={'/api/wordlists/' + encodeURIComponent(l.id) + '/download'}
                     style={{ textDecoration:'none' }}><Icon name="download" size={13} /> Descargar</a>
                  {!l.builtin && <Btn variant="ghost" size="sm" icon="trash" onClick={() => del(l.id)} style={{ color:'var(--danger)' }}>Borrar</Btn>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <style>{`
        .wl-sel{appearance:none;-webkit-appearance:none;font-family:var(--font-mono);font-size:12.5px;color:var(--txt-hi);background-color:var(--bg-void);border:1px solid var(--line-bright);border-radius:7px;padding:10px 36px 10px 13px;outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 13px center}
        .wl-sel:hover,.wl-sel:focus{border-color:var(--fs);box-shadow:0 0 0 1px color-mix(in srgb,var(--fs) 45%,transparent)}
        .wl-sel option{background:var(--bg-panel);color:var(--txt-hi);padding:8px}
      `}</style>
    </div>
  );
}

function NucleiTemplatesPanel() {
  const [list, setList] = useStateL([]);
  const [loading, setLoading] = useStateL(true);
  const [busy, setBusy] = useStateL(false);
  const [updating, setUpdating] = useStateL(false);
  const [msg, setMsg] = useStateL('');
  const [err, setErr] = useStateL('');
  const fileRef = useRefL(null);

  const load = () => {
    setLoading(true);
    window.fsApi('/api/redteam/nuclei/templates', { method:'GET' })
      .then(d => setList((d && d.templates) || []))
      .catch(() => setErr('No se pudieron cargar las plantillas.'))
      .finally(() => setLoading(false));
  };
  useEffectL(() => { load(); }, []);

  const onFile = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return; e.target.value = '';
    setBusy(true); setErr(''); setMsg('');
    try {
      const fd = new FormData(); fd.append('file', file);
      await window.fsApiForm('/api/redteam/nuclei/templates', fd);
      setMsg('Plantilla validada y guardada.'); load();
    } catch (e) { setErr(e.message || 'No se pudo subir la plantilla.'); }
    setBusy(false);
  };
  const del = async (name) => {
    if (!window.confirm('¿Borrar esta plantilla?')) return;
    try { await window.fsApi('/api/redteam/nuclei/templates/' + encodeURIComponent(name), { method:'DELETE' }); load(); }
    catch (e) { setErr(e.message || 'No se pudo borrar.'); }
  };
  const updateCommunity = async () => {
    setUpdating(true); setErr(''); setMsg('');
    try {
      const d = await window.fsApi('/api/redteam/nuclei/update-templates', { method:'POST' });
      setMsg(d && d.updated ? ('Plantillas de la comunidad actualizadas' + (d.version ? ' (' + d.version + ').' : '.')) : ('Nuclei: ' + ((d && d.message) || 'sin cambios')));
    } catch (e) { setErr(e.message || 'No se pudo actualizar.'); }
    setUpdating(false);
  };
  const installExamples = async () => {
    setBusy(true); setErr(''); setMsg('');
    try {
      const d = await window.fsApi('/api/redteam/nuclei/templates/examples', { method:'POST' });
      const n = (d && d.installed && d.installed.length) || 0;
      setMsg(n ? (n + ' plantilla(s) de ejemplo instaladas.') : 'Los ejemplos ya estaban instalados.');
      load();
    } catch (e) { setErr(e.message || 'No se pudieron instalar los ejemplos.'); }
    setBusy(false);
  };

  return (
    <div>
      <div className="panel" style={{ padding:22, marginBottom:16, display:'flex', gap:16, alignItems:'center', flexWrap:'wrap' }}>
        <div className="tool-ico theme-fs" style={{ width:48, height:48 }}><Icon name="spider" size={24} /></div>
        <div style={{ flex:1, minWidth:220 }}>
          <div className="disp" style={{ fontSize:16, fontWeight:700, color:'var(--txt-hi)' }}>Plantillas nuclei</div>
          <div style={{ fontSize:12.5, color:'var(--txt-dim)', marginTop:3 }}>Instala plantillas de ejemplo con un clic o sube las tuyas (.yaml). Se validan con nuclei y luego las eliges en el escáner «Nuclei · mis plantillas».</div>
        </div>
        <div style={{ display:'inline-flex', gap:9, alignItems:'center' }}>
          <Btn variant="ghost" icon="refresh" onClick={updateCommunity} disabled={updating}>{updating ? 'Actualizando…' : 'Actualizar comunidad'}</Btn>
          <Btn variant="ghost" icon="spider" onClick={installExamples} disabled={busy}>{busy ? 'Instalando…' : 'Instalar ejemplos'}</Btn>
          <input ref={fileRef} type="file" accept=".yaml,.yml,text/yaml" style={{ display:'none' }} onChange={onFile} />
          <Btn variant="primary" icon="plus" className="theme-fs"
            onClick={() => { if (!busy && fileRef.current) fileRef.current.click(); }}>{busy ? 'Subiendo…' : 'Subir plantilla'}</Btn>
        </div>
      </div>
      {msg && <div className="panel" style={{ padding:'10px 14px', marginBottom:12, color:'var(--fs)', fontSize:12.5 }}>{msg}</div>}
      {err && <div className="panel" style={{ padding:'10px 14px', marginBottom:12, color:'var(--danger)', fontSize:12.5 }}>{err}</div>}
      <div className="panel" style={{ overflow:'hidden' }}>
        <table className="tbl">
          <thead><tr><th>Fichero</th><th>ID</th><th>Título</th><th>Severidad</th><th>Tamaño</th><th></th></tr></thead>
          <tbody>
            {loading && <tr><td colSpan={6} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>Cargando…</td></tr>}
            {!loading && list.length === 0 && <tr><td colSpan={6} style={{ color:'var(--txt-mute)', fontSize:12.5 }}>No has subido plantillas propias todavía.</td></tr>}
            {list.map((t) => (
              <tr key={t.name}>
                <td className="mono" style={{ color:'var(--txt-hi)' }}>
                  <span style={{ display:'inline-flex', alignItems:'center', gap:9 }}>
                    <Icon name="doc" size={15} style={{ color:'var(--fs)' }} />{t.name}
                  </span>
                </td>
                <td className="mono" style={{ color:'var(--txt-dim)', fontSize:12 }}>{t.id || '—'}</td>
                <td style={{ color:'var(--txt-dim)', fontSize:12.5 }}>{t.title || '—'}</td>
                <td style={{ fontSize:12 }}>{t.severity ? <span className={'badge sev-' + window.normSev(t.severity)} style={{ padding:'1px 7px', fontSize:9 }}>{t.severity.toUpperCase()}</span> : '—'}</td>
                <td className="mono" style={{ color:'var(--txt-mute)', fontSize:12 }}>{wlFmtBytes(t.size)}</td>
                <td style={{ textAlign:'right', whiteSpace:'nowrap' }}>
                  <Btn variant="ghost" size="sm" icon="trash" onClick={() => del(t.name)} style={{ color:'var(--danger)' }}>Borrar</Btn>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

const PLANS = [
  { id:'pentester', name:'Pentester', theme:'red', sub:'Escáneres ligeros · Red Team',
    tag:'Reconocimiento y escáneres livianos para auditar tu superficie de ataque.',
    m:'19,99', y:'16,66',
    feats:['Escaneo de puertos y servicios','Análisis TLS/SSL','DNS, WHOIS y subdominios','Reconocimiento y fingerprint web','Detección de WAF','Informes PDF y biblioteca'] },
  { id:'purple', name:'Purple Team', theme:'fs', popular:true, plus:'Pentester', sub:'Red Team + Blue Team',
    tag:'Ofensiva con más profundidad y hardening defensivo con OpenSCAP.',
    m:'29,99', y:'24,99',
    feats:['Escaneo web de vulnerabilidades (nuclei · CVEs)','WordPress scanner (WPScan)','Fuzzing de rutas y vhosts','Módulo Blue Team: hardening CIS','Remediación guiada por bloques','Escaneo remoto por SSH'] },
  { id:'security', name:'Security Team', theme:'amber', plus:'Purple Team', sub:'Red + Blue + Normativa',
    tag:'Suite completa: ofensiva, defensiva y cumplimiento normativo.',
    m:'39,99', y:'33,32',
    feats:['Módulo Normativa: RGPD / LOPDGDD','Cookies, CMP y terceros (Playwright)','Evidencias y capturas de pantalla','Informes ejecutivos de cumplimiento','Soporte prioritario'] },
];

function LicensePanel() {
  const [yearly, setYearly] = useStateL(false);
  const plan = usePlan();
  const current = plan ? plan.get() : 'pentester';

  // Configuración de facturación: ¿está la pasarela activa? ¿qué planes son comprables?
  const [cfg, setCfg] = useStateL(null);   // null=cargando | {enabled, plans, current_plan}
  const [action, setAction] = useStateL('');   // plan en curso de checkout | 'portal'
  const [err, setErr] = useStateL('');
  // Aviso de vuelta desde Stripe (?billing=success|cancel).
  const [flash, setFlash] = useStateL(() => {
    try { return new URLSearchParams(window.location.search).get('billing') || ''; } catch (_) { return ''; }
  });

  useEffectL(() => {
    window.fsApi('/api/billing/config', { method:'GET' })
      .then(setCfg).catch(() => setCfg({ enabled:false, plans:[] }));
  }, []);
  useEffectL(() => {
    if (!flash) return;
    // Limpia el query param para no repetir el aviso al recargar.
    try { const u = new URL(window.location.href); u.searchParams.delete('billing'); window.history.replaceState({}, '', u); } catch (_) {}
    const t = setTimeout(() => setFlash(''), 8000);
    return () => clearTimeout(t);
  }, [flash]);

  const enabled = !!(cfg && cfg.enabled);
  const purchasable = (id) => enabled && cfg.plans && cfg.plans.some(p => p.plan === id && p.purchasable);

  const checkout = async (id) => {
    setErr(''); setAction(id);
    try {
      const r = await window.fsApi('/api/billing/checkout', { body: { plan: id } });
      if (r && r.url) { window.location.href = r.url; return; }
      setErr('No se pudo iniciar el pago.'); setAction('');
    } catch (ex) { setErr(ex.message || 'No se pudo iniciar el pago.'); setAction(''); }
  };
  const openPortal = async () => {
    setErr(''); setAction('portal');
    try {
      const r = await window.fsApi('/api/billing/portal', { method:'POST' });
      if (r && r.url) { window.location.href = r.url; return; }
      setErr('No se pudo abrir el portal de facturación.'); setAction('');
    } catch (ex) { setErr(ex.message || 'No se pudo abrir el portal de facturación.'); setAction(''); }
  };
  // Acción del botón de cada plan: checkout real si es comprable, si no cambio manual (dev).
  const pick = (id) => { if (id === current) return; if (purchasable(id)) checkout(id); else if (window.fsPlan) window.fsPlan.set(id); };
  const btnLabel = (p) => {
    if (current === p.id) return 'Plan activo';
    if (action === p.id) return 'Redirigiendo…';
    return (purchasable(p.id) ? 'Suscribirme a ' : 'Seleccionar ') + p.name;
  };

  return (
    <div>
      {flash === 'success' && <div className="panel" style={{ padding:'12px 16px', marginBottom:16, borderColor:'color-mix(in srgb,var(--ok) 40%,transparent)', background:'color-mix(in srgb,var(--ok) 8%,transparent)', color:'var(--ok)', fontSize:13, display:'flex', alignItems:'center', gap:10 }}><Icon name="check" size={16} />¡Pago completado! Tu suscripción se activará en unos segundos. Si no ves el cambio, recarga la página.</div>}
      {flash === 'cancel' && <div className="panel" style={{ padding:'12px 16px', marginBottom:16, color:'var(--txt-dim)', fontSize:13, display:'flex', alignItems:'center', gap:10 }}><Icon name="alert" size={16} style={{ color:'var(--amber)' }} />Has cancelado el proceso de pago. No se ha realizado ningún cargo.</div>}
      {err && <div className="panel" style={{ padding:'12px 16px', marginBottom:16, color:'var(--danger)', fontSize:13 }}>{err}</div>}
      {cfg && !enabled && <div className="panel" style={{ padding:'12px 16px', marginBottom:16, color:'var(--txt-dim)', fontSize:12.5, display:'flex', alignItems:'center', gap:10 }}><Icon name="alert" size={15} style={{ color:'var(--txt-mute)' }} />La pasarela de pago no está configurada; el cambio de plan se aplica en modo manual (entorno de pruebas).</div>}

      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', flexWrap:'wrap', gap:16, marginBottom:22 }}>
        <div>
          <div className="eyebrow theme-fs" style={{ marginBottom:8 }}>Cambia tu plan</div>
          <h2 className="disp" style={{ fontSize:22, fontWeight:700, color:'var(--txt-hi)' }}>Elige lo que mejor encaje con tu misión</h2>
          <div style={{ marginTop:10, display:'inline-flex', alignItems:'center', gap:9, flexWrap:'wrap' }}>
            <span className="badge" style={{ color:'var(--fs)', borderColor:'color-mix(in srgb,var(--fs) 35%,transparent)', background:'var(--fs-soft)' }}><span className="dot pulse" style={{ background:'currentColor' }} />PLAN ACTUAL · {(plan?plan.name():'Pentester').toUpperCase()}</span>
            {enabled && <Btn variant="ghost" size="sm" icon="card" onClick={openPortal}>{action==='portal'?'Abriendo…':'Gestionar facturación'}</Btn>}
          </div>
        </div>
        {/* monthly / yearly toggle */}
        <div style={{ display:'inline-flex', background:'var(--bg-void)', border:'1px solid var(--line-bright)', borderRadius:99, padding:4 }}>
          <button onClick={()=>setYearly(false)} className="bill" style={{ background: !yearly?'var(--bg-elevated)':'transparent', color: !yearly?'var(--txt-hi)':'var(--txt-dim)' }}>Mensual</button>
          <button onClick={()=>setYearly(true)} className="bill" style={{ background: yearly?'var(--bg-elevated)':'transparent', color: yearly?'var(--txt-hi)':'var(--txt-dim)' }}>Anual <span style={{ color:'var(--ok)', fontSize:10 }}>−2 meses</span></button>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16, marginBottom:22 }}>
        {PLANS.map(p => (
          <div key={p.id} className={'tool-card theme-'+p.theme} style={{ flexDirection:'column', cursor:'default', padding:22, borderColor: (current===p.id||p.popular)?'var(--acc)':'var(--line)', boxShadow: (current===p.id||p.popular)?'0 0 0 1px var(--acc),0 16px 50px -26px var(--acc-glow)':'none' }}>
            <span className="bracket tl" /><span className="bracket tr" /><span className="bracket bl" /><span className="bracket br" />
            <div style={{ display:'flex', justifyContent:'space-between', width:'100%', alignItems:'center' }}>
              <div className="disp" style={{ fontSize:19, fontWeight:700, color:'var(--txt-hi)' }}>{p.name}</div>
              {current===p.id ? <span className="badge" style={{ color:'var(--ok)', borderColor:'color-mix(in srgb,var(--ok) 40%,transparent)', background:'color-mix(in srgb,var(--ok) 12%,transparent)' }}>PLAN ACTUAL</span>
               : p.popular && <span className="badge" style={{ color:'var(--acc)', borderColor:'color-mix(in srgb,var(--acc) 40%,transparent)', background:'var(--acc-soft)' }}>POPULAR</span>}
            </div>
            <div style={{ fontSize:12, color:'var(--txt-dim)', lineHeight:1.5, marginTop:8, minHeight:52, position:'relative', zIndex:1 }}>{p.tag}</div>
            <div style={{ display:'flex', alignItems:'baseline', gap:6, marginTop:14 }}>
              <span className="disp" style={{ fontSize:34, fontWeight:700, color:'var(--acc)' }}>{yearly?p.y:p.m} €</span>
              <span className="mono" style={{ fontSize:11, color:'var(--txt-mute)' }}>/mes</span>
            </div>
            <div className="mono" style={{ fontSize:10.5, color:'var(--txt-mute)', marginTop:4 }}>{p.sub}{yearly?' · facturado anual':''}</div>
            <button className="plan-btn" style={{ marginTop:16, opacity: (current===p.id||action)?0.6:1, cursor: current===p.id?'default':'pointer' }}
              disabled={!!action || current===p.id}
              onClick={()=> pick(p.id)}>
              {btnLabel(p)}</button>
            <div style={{ width:'100%', height:1, background:'var(--line)', margin:'18px 0 14px' }} />
            {p.plus && <div className="mono" style={{ fontSize:10.5, color:'var(--acc)', marginBottom:10 }}>Todo en {p.plus}, más:</div>}
            <div style={{ display:'grid', gap:9, width:'100%', position:'relative', zIndex:1 }}>
              {p.feats.map((f,i)=>(
                <div key={i} style={{ display:'flex', gap:9, alignItems:'flex-start' }}>
                  <Icon name="check" size={14} style={{ color:'var(--acc)', flexShrink:0, marginTop:2 }} />
                  <span style={{ fontSize:12.5, color:'var(--txt)' }}>{f}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
        <div className="panel" style={{ padding:22 }}>
          <div className="eyebrow theme-fs">Incluido en todos los planes</div>
          <div style={{ display:'grid', gap:10 }}>
            {['Acceso a la API real','Re-escaneos ilimitados','Histórico de escaneos','Biblioteca de informes PDF','Exporta evidencias y resultados'].map((f,i)=>(
              <div key={i} style={{ display:'flex', gap:9, alignItems:'center' }}><Icon name="check" size={14} style={{ color:'var(--fs)' }} /><span style={{ fontSize:12.5, color:'var(--txt)' }}>{f}</span></div>
            ))}
          </div>
        </div>
        <div className="panel" style={{ padding:22 }}>
          <div className="eyebrow theme-fs">Complementos opcionales</div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:10 }}>
            {['Escaneo de red interno','Informes y correos con tu marca','Bolsa extra de activos','Soporte prioritario 24/7'].map((f,i)=>(
              <span key={i} className="addon">{f}</span>
            ))}
          </div>
          <div style={{ marginTop:18, padding:'14px 16px', background:'var(--bg-void)', border:'1px dashed var(--line-bright)', borderRadius:10 }}>
            <div className="disp" style={{ fontSize:14, color:'var(--txt-hi)', marginBottom:4 }}>¿Necesitas un plan a medida?</div>
            <div style={{ fontSize:12, color:'var(--txt-dim)', marginBottom:12 }}>Volumen, on-premise o requisitos específicos de cumplimiento.</div>
            <Btn variant="ghost" size="sm" iconR="chevron" onClick={()=>{ window.location.href='mailto:ventas@flowia.es?subject='+encodeURIComponent('Plan a medida FlowShield'); }}>Contactar con ventas</Btn>
          </div>
        </div>
      </div>

      <style>{`
        .bill{font-family:var(--font-display);font-weight:600;font-size:12.5px;border:none;border-radius:99px;padding:8px 16px;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:6px}
        .plan-btn{position:relative;width:100%;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.03em;color:#04110D;background:var(--acc);border:none;border-radius:8px;padding:12px;cursor:pointer;overflow:hidden;box-shadow:0 6px 22px -8px var(--acc-glow);transition:transform .15s,box-shadow .2s;z-index:1}
        .plan-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--acc-glow),0 0 22px -4px var(--acc-glow)}
        .plan-btn::before{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .55s}
        .plan-btn:hover::before{left:150%}
        .addon{font-family:var(--font-body);font-size:12px;color:var(--txt);padding:7px 13px;border:1px solid var(--line-bright);border-radius:99px;background:var(--bg-void)}
      `}</style>
    </div>
  );
}

function SetRow({ k, v, ok }) {
  return <div style={{ display:'flex', justifyContent:'space-between', padding:'11px 0', borderBottom:'1px solid var(--line)' }}><span style={{ fontSize:13, color:'var(--txt-dim)' }}>{k}</span><span className="mono" style={{ fontSize:12.5, color: ok?'var(--ok)':'var(--txt-hi)' }}>{v}</span></div>;
}
function TokensMeter() {
  const [u, setU] = useStateL(null);   // {used, limit, period} | 'na' | null
  useEffectL(() => {
    let alive = true;
    window.fsApi('/api/assistant/usage', { method:'GET' })
      .then(d => { if(alive) setU(d); })
      .catch(() => { if(alive) setU('na'); });
    return () => { alive = false; };
  }, []);
  if (u === null) return null;
  if (u === 'na' || !u.limit) {
    return (
      <div style={{ marginTop:18 }}>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
          <span style={{ fontSize:13, color:'var(--txt-dim)' }}>Tokens IA</span>
          <span className="mono" style={{ fontSize:11.5, color:'var(--txt-mute)' }}>No incluido en tu plan</span>
        </div>
        <div className="bar"><span style={{ width:'0%' }} /></div>
      </div>
    );
  }
  const pct = Math.min(100, Math.round((u.used / u.limit) * 100));
  const full = u.used >= u.limit;
  const fmt = (n) => n.toLocaleString('es-ES');
  return (
    <div style={{ marginTop:18 }}>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
        <span style={{ fontSize:13, color:'var(--txt-dim)' }}>Tokens IA <span className="mono" style={{ fontSize:10.5, color:'var(--txt-mute)' }}>· {u.period}</span></span>
        <span className="mono" style={{ fontSize:11.5, color: full ? 'var(--red)' : 'var(--txt-hi)' }}>{fmt(u.used)} / {fmt(u.limit)}</span>
      </div>
      <div className="bar"><span style={{ width:pct+'%', background: full ? 'var(--red)' : undefined }} /></div>
    </div>
  );
}
function LimitMeter({ label, v, max }) {
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}><span style={{ fontSize:12, color:'var(--txt-dim)' }}>{label}</span><span className="mono" style={{ fontSize:11.5, color:'var(--txt-hi)' }}>{v}/{max}</span></div>
      <div className="bar"><span style={{ width:(v/max*100)+'%' }} /></div>
    </div>
  );
}
function ChipCSS(){ return <style>{`.chip{font-family:var(--font-body);font-weight:500;font-size:12.5px;padding:7px 14px;border:1px solid;border-radius:99px;cursor:pointer;transition:all .18s}`}</style>; }

Object.assign(window, { Findings, Scans, Reports, Surface, Handlers, Integrations, Settings });