/* ============================================================
   FLOWSHIELD — Wiki de herramientas
   Índice navegable de las fichas "¿Qué hace?" (data.js → eng.help),
   agrupadas por categoría de REDTEAM_TABS/DEVSECOPS_TABS. Reutiliza
   ToolCard (ui.jsx) y HelpDrawer (redteam.jsx) tal cual: sin duplicar
   render.
   ============================================================ */
const WIKI_CATEGORY_TABS = ['recon', 'vuln', 'exploit', 'utils', 'ad'];
const WIKI_DEVSECOPS_TABS = ['code', 'deps', 'iac', 'containers', 'cloud'];

function wikiToolList() {
  const seen = {};
  const list = [];
  const addFromTabs = (tabs, ids) => {
    ids.forEach(tabId => {
      const tab = (tabs || []).find(t => t.id === tabId);
      if (!tab) return;
      (tab.sections || []).forEach(sec => (sec.tools || []).forEach(t => {
        if (seen[t.id]) return;
        const eng = window.redteamEngine(t.id);
        if (!eng.help) return;
        seen[t.id] = true;
        list.push(Object.assign({}, t, { category: tab.label, help: eng.help }));
      }));
    });
  };
  addFromTabs(window.REDTEAM_TABS, WIKI_CATEGORY_TABS);
  addFromTabs(window.DEVSECOPS_TABS, WIKI_DEVSECOPS_TABS);
  return list;
}

function Wiki() {
  const [q, setQ] = useStateL('');
  const [cat, setCat] = useStateL('all');
  const [active, setActive] = useStateL(null);

  const tools = wikiToolList();
  const categories = [];
  tools.forEach(t => { if (categories.indexOf(t.category) === -1) categories.push(t.category); });

  const ql = q.trim().toLowerCase();
  const filtered = tools.filter(t =>
    (cat === 'all' || t.category === cat) &&
    (!ql || (t.name + ' ' + (t.help.what || '')).toLowerCase().includes(ql))
  );

  return (
    <div className="enter">
      <PageHeader title="Wiki de herramientas" crumb="REFERENCIA / WIKI"
        sub="Qué es, cuándo usarla y qué esperar de cada herramienta de Red Team — consúltalo sin abrir su formulario de lanzamiento." />

      <div style={{ display:'flex', gap:8, marginBottom:16, flexWrap:'wrap', alignItems:'center' }}>
        <RtChip val="all" cur={cat} set={setCat} label="Todas" />
        {categories.map(c => <RtChip key={c} val={c} cur={cat} set={setCat} label={c} />)}
      </div>
      <div className="field" style={{ marginBottom:22 }}>
        <Icon name="search" size={16} style={{ position:'absolute', left:14, top:13, color:'var(--txt-mute)' }} />
        <input className="input input-prefix" placeholder="Buscar herramienta…" value={q} onChange={e=>setQ(e.target.value)} style={{ padding:'12px 14px 12px 40px', background:'var(--bg-panel)' }} />
      </div>

      {filtered.length === 0 && (
        <div className="mono" style={{ color:'var(--txt-mute)', fontSize:12.5, padding:'20px 4px' }}>Sin resultados.</div>
      )}

      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(290px, 1fr))', gap:14 }}>
        {filtered.map(t => <ToolCard key={t.id} tool={t} onClick={()=>setActive(t)} ignoreTierLock />)}
      </div>

      {active && <HelpDrawer help={active.help} tool={active} onClose={()=>setActive(null)} />}
    </div>
  );
}

Object.assign(window, { Wiki });