/* ============================================================
   FLOWSHIELD — Active Directory dashboard
   Consolida todo lo lanzado desde las herramientas AD (scans/findings
   con prefijo `ad-`). Reutiliza componentes y estilos existentes.
   ============================================================ */
function AdCatCard({ cat, onClick }) {
  const sev = cat.severity || 'info';
  const active = cat.count > 0;
  return (
    <div onClick={() => active && onClick(cat)}
         className="panel"
         style={{ padding:16, display:'flex', flexDirection:'column', gap:8,
                  cursor: active ? 'pointer' : 'default', opacity: active ? 1 : 0.55,
                  borderLeft:`3px solid var(--sev-${sev})` }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <span className="dot" style={{ background:`var(--sev-${sev})`, boxShadow:`0 0 6px var(--sev-${sev})` }} />
        {active && <Icon name="chevron" size={14} style={{ color:'var(--txt-mute)' }} />}
      </div>
      <div className="disp" style={{ fontSize:26, fontWeight:700, color: active ? `var(--sev-${sev})` : 'var(--txt-mute)' }}>{cat.count}</div>
      <div style={{ fontSize:12, color:'var(--txt-dim)', lineHeight:1.35 }}>{cat.label}</div>
    </div>
  );
}

function AdDashboard({ onNav, onRelaunch, embedded, onNewScan, adSession, onClearSession }) {
  const [ov, setOv] = useStateL(null);     // null = cargando
  const [drawer, setDrawer] = useStateL(null);
  const Drawer = window.RtFindingDrawer;

  const load = () => {
    window.fsApi('/api/results/ad-overview', { method:'GET' })
      .then(d => setOv(d)).catch(() => setOv({ __error:true }));
  };
  useEffectL(() => { load(); }, []);

  const openList = (filter, label) => setDrawer({ mode:'list', filter, label });
  const fmtDate = (d) => window.rptDate ? window.rptDate(d) : d;

  const t = (ov && ov.totals) || { scans:0, domains:0, open:0, by_severity:{} };
  const bySev = t.by_severity || {};
  const cats = (ov && ov.categories) || [];
  const targets = (ov && ov.by_target) || [];
  const recent = (ov && ov.recent) || [];
  const bh = (ov && ov.bloodhound) || {};
  const empty = ov && !ov.__error && t.scans === 0;

  return (
    <div className="enter theme-red">
      {embedded ? (
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:12, marginBottom:22 }}>
          <div style={{ display:'flex', alignItems:'center', gap:12, flexWrap:'wrap' }}>
            <div className="eyebrow theme-red" style={{ margin:0 }}>Active Directory · postura del dominio</div>
            {adSession && (adSession.domain || adSession.host || adSession.username) && (
              <span className="badge" style={{ borderColor:'color-mix(in srgb,var(--red) 35%,transparent)', color:'var(--txt-dim)', display:'inline-flex', alignItems:'center', gap:7 }}>
                <Icon name="lock" size={12} />
                {(adSession.domain || adSession.host || '—')}{adSession.username ? ' · ' + adSession.username : ''}
                {onClearSession && <button onClick={onClearSession} title="Limpiar sesión AD" style={{ background:'none', border:'none', color:'var(--txt-mute)', cursor:'pointer', padding:0, marginLeft:4, fontSize:12 }}>✕</button>}
              </span>
            )}
          </div>
          <div style={{ display:'flex', gap:8 }}>
            <Btn variant="ghost" icon="reload" onClick={load}>Actualizar</Btn>
            <Btn variant="primary" icon="bolt" className="theme-red" onClick={()=>onNewScan ? onNewScan() : (onNav && onNav('redteam'))}>Nuevo escaneo AD</Btn>
          </div>
        </div>
      ) : (
        <PageHeader title="Active Directory" crumb="OPERACIONES / ACTIVE DIRECTORY"
          sub="Postura consolidada del dominio: todo lo lanzado desde las herramientas AD (enumeración, kerberoasting, AD CS, volcado de credenciales)."
          right={<><Btn variant="ghost" icon="reload" onClick={load}>Actualizar</Btn>
                   <Btn variant="primary" icon="bolt" className="theme-red" onClick={()=>onNav && onNav('redteam')}>Nuevo escaneo AD</Btn></>} />
      )}

      {ov === null && <div className="mono" style={{ color:'var(--txt-mute)', fontSize:12.5, padding:'20px 4px' }}>Cargando…</div>}

      {empty && (
        <div className="panel" style={{ padding:'34px 26px', textAlign:'center' }}>
          <div style={{ display:'grid', placeItems:'center', marginBottom:14 }}>
            <Icon name="windows" size={34} style={{ color:'var(--red)' }} />
          </div>
          <div className="disp" style={{ fontSize:18, fontWeight:700, color:'var(--txt-hi)', marginBottom:8 }}>Aún no hay datos de Active Directory</div>
          <p style={{ fontSize:13, color:'var(--txt-dim)', lineHeight:1.6, maxWidth:480, margin:'0 auto 18px' }}>
            Lanza alguna herramienta de la pestaña <strong style={{ color:'var(--txt-hi)' }}>Active Directory</strong> en Red Team
            (enum, NetExec, kerbrute, kerberoast, BloodHound, Certipy, secretsdump) y aquí verás la postura del dominio.
          </p>
          <Btn variant="primary" icon="bolt" className="theme-red" onClick={()=>onNewScan ? onNewScan() : (onNav && onNav('redteam'))}>Ir a las herramientas AD</Btn>
        </div>
      )}

      {ov && !ov.__error && !empty && (
        <>
          {/* KPIs */}
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:26 }}>
            <Stat label="Escaneos AD" value={t.scans} icon="windows" accent="var(--red)" />
            <Stat label="Dominios / hosts" value={t.domains} icon="network" accent="var(--fs)" />
            <div onClick={()=>openList({ status:'open', source_prefix:'ad-' }, 'Hallazgos AD abiertos')} style={{ cursor:'pointer', display:'grid' }}>
              <Stat label="Hallazgos abiertos" value={t.open} icon="findings" accent="var(--sev-high)" /></div>
            <div onClick={()=>openList({ sev:'crit', source_prefix:'ad-' }, 'Críticos · Active Directory')} style={{ cursor:'pointer', display:'grid' }}>
              <Stat label="Críticos" value={bySev.critical||0} icon="alert" accent="var(--sev-crit)" /></div>
          </div>

          {/* Postura del dominio (categorías) */}
          <div className="eyebrow theme-red">Postura del dominio</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(170px,1fr))', gap:14, marginBottom:30 }}>
            {cats.map(c => <AdCatCard key={c.key} cat={c} onClick={(cc)=>openList({ ad_category:cc.key }, cc.label)} />)}
          </div>

          {/* BloodHound */}
          {bh.download_id && (
            <div className="panel" style={{ padding:'14px 18px', marginBottom:30, display:'flex', alignItems:'center', justifyContent:'space-between', gap:12 }}>
              <div style={{ display:'flex', alignItems:'center', gap:12 }}>
                <Icon name="network" size={20} style={{ color:'var(--red)' }} />
                <div>
                  <div style={{ fontSize:13, color:'var(--txt-hi)', fontWeight:600 }}>Grafo BloodHound disponible</div>
                  <div className="mono" style={{ fontSize:11, color:'var(--txt-mute)' }}>Importa el .zip en la GUI de BloodHound para explorar rutas de ataque.</div>
                </div>
              </div>
              <a href={'/api/redteam/ad/bloodhound/' + bh.download_id + '/download'} target="_blank" rel="noreferrer"
                 className="mono" style={{ color:'var(--red)', fontSize:12, textDecoration:'none', border:'1px solid var(--line-bright)', borderRadius:7, padding:'7px 12px' }}>Descargar grafo (.zip) ↗</a>
            </div>
          )}

          {/* Dominios / hosts */}
          <div className="panel" style={{ overflow:'hidden', marginBottom:30 }}>
            <div style={{ padding:'14px 20px', borderBottom:'1px solid var(--line)' }}>
              <div className="eyebrow theme-red" style={{ margin:0 }}>Dominios y hosts</div>
            </div>
            <table className="tbl">
              <thead><tr><th>Objetivo</th><th>Escaneos</th><th>Hallazgos</th><th>Severidad máx.</th></tr></thead>
              <tbody>
                {targets.length === 0 && <tr><td colSpan={4} style={{ color:'var(--txt-mute)', fontSize:12.5, padding:'14px 20px' }}>Sin objetivos AD todavía.</td></tr>}
                {targets.map((g,i) => (
                  <tr key={i}>
                    <td className="mono" style={{ color:'var(--txt-hi)', whiteSpace:'nowrap' }}>{g.target}</td>
                    <td className="mono" style={{ color:'var(--txt-dim)' }}>{g.scans}</td>
                    <td className="mono" style={{ color:'var(--txt-dim)' }}>{g.findings}</td>
                    <td><Sev level={g.max_severity} pulse={g.max_severity==='crit'} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Escaneos AD recientes */}
          <div className="panel" style={{ overflow:'hidden', marginBottom:30 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 20px', borderBottom:'1px solid var(--line)' }}>
              <div className="eyebrow theme-red" style={{ margin:0 }}>Escaneos AD recientes</div>
              <button onClick={()=>onNav && onNav('scans')} style={{ background:'none', border:'none', color:'var(--red)', fontSize:12, cursor:'pointer', fontFamily:'var(--font-mono)' }}>ver todos →</button>
            </div>
            <table className="tbl">
              <thead><tr><th>ID</th><th>Herramienta</th><th>Objetivo</th><th>Estado</th><th>Hallazgos</th><th>Fecha</th><th></th></tr></thead>
              <tbody>
                {recent.length === 0 && <tr><td colSpan={7} style={{ color:'var(--txt-mute)', fontSize:12.5, padding:'14px 20px' }}>Sin escaneos AD.</td></tr>}
                {recent.map(s => (
                  <tr key={s.id}>
                    <td className="mono" style={{ color:'var(--red)', whiteSpace:'nowrap' }}>{s.code || s.id}</td>
                    <td style={{ color:'var(--txt-hi)', fontWeight:500 }}>{s.tool}</td>
                    <td className="mono" style={{ color:'var(--txt-dim)', fontSize:12 }}>{s.target}</td>
                    <td><StatusBadge status={s.status} /></td>
                    <td className="mono" style={{ color:'var(--txt-dim)' }}>{s.findings}</td>
                    <td className="mono" style={{ fontSize:11.5, color:'var(--txt-mute)' }}>{fmtDate(s.date)}</td>
                    <td style={{ textAlign:'right', whiteSpace:'nowrap' }}>
                      <Btn variant="ghost" size="sm" icon="eye" onClick={()=>setDrawer({ mode:'scan', id:s.id, label:s.tool })} title="Ver el escaneo y sus hallazgos">Ver</Btn>
                      {onRelaunch && <Btn variant="ghost" size="sm" icon="play" onClick={()=>onRelaunch(s)} title="Re-escanear con los mismos parámetros">Re-escanear</Btn>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}

      {ov && ov.__error && <div className="mono" style={{ color:'var(--red)', fontSize:12.5, padding:'20px 4px' }}>No se pudo cargar la vista de Active Directory.</div>}

      {drawer && Drawer && <Drawer view={drawer} onClose={()=>{ setDrawer(null); load(); }} />}
    </div>
  );
}

Object.assign(window, { AdDashboard, AdCatCard });