"use client";

import { useEffect, useState } from "react";

import { api } from "@/lib/api";

export default function Enrichment() {

  const [enrichers, setEnrichers] = useState<{ name: string; kind: string }[]>([]);

  const [enricher, setEnricher] = useState("dns");

  const [target, setTarget] = useState("example.com");

  const [result, setResult] = useState<any | null>(null);

  const [err, setErr] = useState<string | null>(null);

  const [loading, setLoading] = useState(false);

  useEffect(() => {

    api.enrichers().then((e) => { setEnrichers(e); if (e[0]) setEnricher(e[0].name); })

      .catch((e) => setErr(e.status === 401 ? "Sign in to run enrichment." : String(e)));

  }, []);

  async function run() {

    setErr(null); setResult(null); setLoading(true);

    try { setResult((await api.runEnrichment(enricher, target)).result); }

    catch (e: any) { setErr(e.status === 401 ? "Sign in to run enrichment." : "Enrichment failed."); }

    finally { setLoading(false); }

  }

  return (

    <div>

      <h1>OSINT Enrichment</h1>

      <p className="muted">Passive, public-source enrichment for investigations that cross into the digital domain. Secondary to the ALPR core.</p>

      <div className="row" style={{ margin: "12px 0" }}>

        <select value={enricher} onChange={(e) => setEnricher(e.target.value)}>

          {enrichers.map((e) => <option key={e.name} value={e.name}>{e.name} ({e.kind})</option>)}

        </select>

        <input value={target} onChange={(e) => setTarget(e.target.value)} placeholder="example.com" />

        <button className="primary" onClick={run} disabled={loading}>{loading ? "Running…" : "Run"}</button>

      </div>

      {err && <div className="badge danger">{err}</div>}

      {result && (

        <div className="card">

          <div className="row" style={{ justifyContent: "space-between" }}>

            <strong>{result.enricher} → {result.target}</strong>

            <span className="badge">confidence {result.confidence}</span>

          </div>

          {result.error && <div className="badge danger" style={{ marginTop: 8 }}>{result.error}</div>}

          <h2>Entities</h2>

          <table>

            <thead><tr><th>Kind</th><th>Value</th></tr></thead>

            <tbody>{(result.entities || []).map((e: any, i: number) => (

              <tr key={i}><td><span className="badge">{e.kind}</span></td><td>{e.value}</td></tr>

            ))}</tbody>

          </table>

          {result.relationships?.length > 0 && (

            <>

              <h2>Relationships</h2>

              <ul>{result.relationships.map((r: any, i: number) => (

                <li key={i} className="muted">{r.src_value} -{r.relation}→ {r.dst_value}</li>

              ))}</ul>

            </>

          )}

        </div>

      )}

    </div>

  );

}