"use client";

import { useEffect, useState } from "react";

import { api, Watchlist, WatchlistEntry } from "@/lib/api";

export default function Watchlists() {

  const [lists, setLists] = useState<Watchlist[]>([]);

  const [selected, setSelected] = useState<Watchlist | null>(null);

  const [entries, setEntries] = useState<WatchlistEntry[]>([]);

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

  const [plate, setPlate] = useState("");

  const [partial, setPartial] = useState("");

  const [reason, setReason] = useState("");

  const [flash, setFlash] = useState<string | null>(null);

  function loadLists() {

    api.watchlists().then(setLists)

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

  }

  useEffect(loadLists, []);

  function open(wl: Watchlist) {

    setSelected(wl); setFlash(null);

    api.watchlistEntries(wl.id).then(setEntries).catch(() => setEntries([]));

  }

  async function createList() {

    const name = prompt("New watchlist name (e.g. 'BOLO - Robbery Suspects')");

    if (!name) return;

    try { const wl = await api.createWatchlist(name); setLists((p) => [wl, ...p]); open(wl); }

    catch { setErr("Could not create (needs manage_watchlist permission)."); }

  }

  async function addEntry(e: React.FormEvent) {

    e.preventDefault();

    if (!selected || (!plate && !partial)) return;

    try {

      const r = await api.addWatchlistEntry(selected.id,

        { plate_norm: plate || undefined, partial_plate: partial || undefined, reason: reason || undefined });

      setFlash(`Entry added - ${r.backfill_hits} historical hit(s) backfilled.`);

      setPlate(""); setPartial(""); setReason("");

      open(selected);

    } catch { setErr("Could not add entry."); }

  }

  return (

    <div>

      <h1>Watchlist Manager</h1>

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

      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 16, marginTop: 12 }}>

        <div className="card">

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

            <strong>Lists</strong><button onClick={createList}>+ New</button>

          </div>

          {lists.map((wl) => (

            <div key={wl.id} onClick={() => open(wl)}

                 style={{ padding: "8px 10px", borderRadius: 6, cursor: "pointer",

                          background: selected?.id === wl.id ? "var(--panel-2)" : "transparent" }}>

              {wl.name} {wl.active && <span className="badge ok" style={{ fontSize: 10 }}>active</span>}

            </div>

          ))}

          {!lists.length && !err && <div className="muted">No watchlists.</div>}

        </div>

        <div>

          {!selected && <div className="card muted">Select a watchlist to view and add entries.</div>}

          {selected && (

            <>

              <h2 style={{ marginTop: 0 }}>{selected.name}</h2>

              <form onSubmit={addEntry} className="card" style={{ marginBottom: 12 }}>

                <div className="row">

                  <input placeholder="exact plate (ABC1234)" value={plate} onChange={(e) => setPlate(e.target.value.toUpperCase())} />

                  <input placeholder="partial (ABC)" value={partial} onChange={(e) => setPartial(e.target.value.toUpperCase())} />

                  <input placeholder="reason" value={reason} onChange={(e) => setReason(e.target.value)} />

                  <button className="primary" type="submit">Add</button>

                </div>

                {flash && <div className="badge ok" style={{ marginTop: 8 }}>{flash}</div>}

              </form>

              <div className="card">

                <table>

                  <thead><tr><th>Plate</th><th>Partial</th><th>Reason</th><th>Expires</th></tr></thead>

                  <tbody>

                    {entries.map((en) => (

                      <tr key={en.id}>

                        <td>{en.plate_norm || "-"}</td>

                        <td>{en.partial_plate || "-"}</td>

                        <td className="muted">{en.reason || "-"}</td>

                        <td className="muted">{en.expires_at ? new Date(en.expires_at).toLocaleDateString() : "never"}</td>

                      </tr>

                    ))}

                    {!entries.length && <tr><td colSpan={4} className="muted">No entries.</td></tr>}

                  </tbody>

                </table>

              </div>

            </>

          )}

        </div>

      </div>

    </div>

  );

}