"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

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

export default function Alerts() {

  const [hits, setHits] = useState<WatchlistHit[]>([]);

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

  useEffect(() => {

    api.watchlistHits().then(setHits)

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

  }, []);

  return (

    <div>

      <h1>Alert Center</h1>

      <p className="muted">Watchlist hits generated during ingest and backfill.</p>

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

      <div className="card" style={{ marginTop: 12 }}>

        <table>

          <thead><tr><th>Plate</th><th>Matched on</th><th>Camera</th><th>When</th></tr></thead>

          <tbody>

            {hits.map((h) => (

              <tr key={h.id}>

                <td><Link href={`/search?q=${h.plate_norm}`}>{h.plate_norm}</Link></td>

                <td><span className="badge danger">{h.matched_on}</span></td>

                <td className="muted">{h.camera_id?.slice(0, 8)}</td>

                <td className="muted">{new Date(h.at).toLocaleString()}</td>

              </tr>

            ))}

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

          </tbody>

        </table>

      </div>

    </div>

  );

}