"use client";

import { useEffect, useState } from "react";

import { api, ProfileDossier, ProfileScope, ProfileSubject } from "@/lib/api";

export default function ProfilesPage() {

  const [scope, setScope] = useState<ProfileScope | null>(null);

  const [q, setQ] = useState("");

  const [results, setResults] = useState<ProfileSubject[]>([]);

  const [dossier, setDossier] = useState<ProfileDossier | null>(null);

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

  const loadScope = () => api.profileScope().then(setScope).catch(() => {});

  useEffect(() => { loadScope(); }, []);

  async function toggleScope(mode: "consented" | "all") {

    try { await api.setProfileScope(mode); loadScope(); setResults([]); setDossier(null); }

    catch { setErr("Scope change needs admin (open mode = admin)."); }

  }

  async function search() {

    setErr(null); setDossier(null);

    try { setResults((await api.profileSearch(q)).results); }

    catch (e: any) { setErr("Search failed."); }

  }

  async function open(id: string) {

    setErr(null);

    try { setDossier(await api.buildProfile(id)); }

    catch (e: any) { setErr(e.status === 403 ? "Locked: subject is not a consented subject." : "Build failed."); }

  }

  async function addSubject() {

    const name = prompt("Subject full name (consented)"); if (!name) return;

    const plates = (prompt("Plate(s), comma-separated") || "").split(",").map((s) => s.trim()).filter(Boolean);

    try { await api.createSubject(name, plates, true); search(); }

    catch { setErr("Could not create subject."); }

  }

  return (

    <div>

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

        <div>

          <h1>Profile Engine</h1>

          <p className="sub">Entity-resolution dossier builder - identity, vehicles, cross-state movement, detections.</p>

        </div>

      </div>

      {}

      <div className="card" style={{ borderColor: scope?.mode === "consented" ? "var(--ok)" : "var(--amber)" }}>

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

          <div>

            <div className="row" style={{ gap: 8 }}>

              <strong style={{ fontFamily: "var(--mono)" }}>SCOPE</strong>

              <span className={"badge " + (scope?.mode === "consented" ? "ok" : "amber")}>

                {scope?.mode === "consented" ? "● CONSENTED SUBJECTS ONLY" : "● ALL INGESTED DATA"}

              </span>

            </div>

            <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{scope?.description}</div>

          </div>

          <div className="row">

            <span className={"chip " + (scope?.mode === "consented" ? "on" : "")} onClick={() => toggleScope("consented")}>Me + Brother only</span>

            <span className={"chip " + (scope?.mode === "all" ? "on" : "")} onClick={() => toggleScope("all")}>All data</span>

          </div>

        </div>

        <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>

          {scope?.consented_subjects} consented subject(s) registered. In consented mode the engine

          will refuse to build a profile for anyone not whitelisted.

        </div>

      </div>

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

        <input placeholder="search subject name…" value={q} onChange={(e) => setQ(e.target.value)}

               onKeyDown={(e) => e.key === "Enter" && search()} style={{ minWidth: 260 }} />

        <button className="primary" onClick={search}>Search</button>

        <button onClick={addSubject}>+ Add consented subject</button>

      </div>

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

      {results.length > 0 && !dossier && (

        <div className="card">

          <table>

            <thead><tr><th>Name</th><th>Plates</th><th>Status</th><th></th></tr></thead>

            <tbody>

              {results.map((r) => (

                <tr key={r.id}>

                  <td>{r.full_name}</td>

                  <td className="mono">{r.plates.join(", ") || "-"}</td>

                  <td>{r.consented ? <span className="badge ok">consented</span> : <span className="badge amber">not consented</span>}</td>

                  <td><button onClick={() => open(r.id)}>Build profile →</button></td>

                </tr>

              ))}

            </tbody>

          </table>

        </div>

      )}

      {dossier && (

        <div>

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

            <h2 style={{ margin: 0 }}>{dossier.subject.full_name}</h2>

            <button onClick={() => setDossier(null)}>← Back</button>

          </div>

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

            {dossier.subject.consented && <span className="badge ok">consented subject</span>}

            <span className="badge mono">{dossier.subject.plates.join(", ") || "no plate"}</span>

          </div>

          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill,minmax(170px,1fr))" }}>

            <div className="kpi-card"><div className="lbl">Total reads</div><div className="val accent">{dossier.summary.total_reads}</div></div>

            <div className="kpi-card"><div className="lbl">States visited</div><div className="val">{dossier.summary.states_visited.length}</div></div>

            <div className="kpi-card"><div className="lbl">Cities</div><div className="val">{dossier.summary.cities_visited.length}</div></div>

            <div className="kpi-card"><div className="lbl">Cameras</div><div className="val">{dossier.summary.distinct_cameras}</div></div>

          </div>

          {dossier.summary.states_visited.length > 0 && (

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

              <span className="muted">States:</span>

              {dossier.summary.states_visited.map((s) => <span key={s} className="badge accent">{s}</span>)}

            </div>

          )}

          <h2>Movement timeline</h2>

          <div className="card scroll" style={{ maxHeight: 420 }}>

            <table>

              <thead><tr><th>Time</th><th>Camera</th><th>State</th><th>City</th><th>Plate</th></tr></thead>

              <tbody>

                {dossier.timeline.map((t, i) => (

                  <tr key={i}>

                    <td className="mono">{new Date(t.read_ts).toLocaleString()}</td>

                    <td>{t.camera || "-"}</td>

                    <td><span className="badge">{t.state || "-"}</span></td>

                    <td className="muted">{t.area || "-"}</td>

                    <td className="mono">{t.plate_norm}</td>

                  </tr>

                ))}

                {!dossier.timeline.length && <tr><td colSpan={5} className="muted">

                  No sightings yet. Ingest reads for this subject's plate (run the ALPR engine on

                  your own car/footage, or import from your Flock unit) and they'll appear here.

                </td></tr>}

              </tbody>

            </table>

          </div>

          {dossier.detections.length > 0 && (

            <>

              <h2>Appearance detections</h2>

              <div className="card">

                <table>

                  <thead><tr><th>Time</th><th>Clothing</th><th>Articles</th></tr></thead>

                  <tbody>

                    {dossier.detections.map((d, i) => (

                      <tr key={i}><td className="mono">{new Date(d.read_ts).toLocaleString()}</td>

                        <td>{d.clothing_top}</td><td className="muted">{(d.articles || []).join(", ")}</td></tr>

                    ))}

                  </tbody>

                </table>

              </div>

            </>

          )}

        </div>

      )}

    </div>

  );

}