"use client";

import { Suspense, useEffect, useState } from "react";

import { useSearchParams } from "next/navigation";

import { api, MovementSummary, PlateProfile } from "@/lib/api";

function SearchInner() {

  const params = useSearchParams();

  const [q, setQ] = useState(params.get("q") || "");

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

  const [results, setResults] = useState<{ plate_norm: string; state: string }[]>([]);

  const [profile, setProfile] = useState<PlateProfile | null>(null);

  const [movement, setMovement] = useState<MovementSummary | null>(null);

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

  async function run(plate?: string) {

    setErr(null); setProfile(null); setMovement(null);

    const query = plate || q;

    if (!query) return;

    try {

      if (plate) {

        const [p, m] = await Promise.all([api.plateProfile(plate), api.movement(plate)]);

        setProfile(p); setMovement(m); setResults([]);

      } else {

        setResults(await api.plateSearch(query, partial));

      }

    } catch (e: any) {

      setErr(e.status === 401 ? "Sign in to search." : "No results.");

    }

  }

  useEffect(() => { if (params.get("q")) run(params.get("q")!);  }, []);

  return (

    <div>

      <h1>Plate Search</h1>

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

        <input value={q} onChange={(e) => setQ(e.target.value.toUpperCase())} placeholder="ABC1234" />

        <label className="row"><input type="checkbox" checked={partial} onChange={(e) => setPartial(e.target.checked)} style={{ width: 16 }} /> partial</label>

        <button className="primary" onClick={() => run()}>Search</button>

      </div>

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

      {results.length > 0 && (

        <div className="card">

          <table>

            <thead><tr><th>Plate</th><th>State</th></tr></thead>

            <tbody>{results.map((r) => (

              <tr key={r.plate_norm}><td><a onClick={() => run(r.plate_norm)} style={{ cursor: "pointer" }}>{r.plate_norm}</a></td><td>{r.state}</td></tr>

            ))}</tbody>

          </table>

        </div>

      )}

      {profile && (

        <>

          <h2>{profile.plate_norm} <a href={`/vehicles/${profile.plate_norm}`} style={{ fontSize: 13 }}>full vehicle profile →</a></h2>

          <div className="grid">

            <div className="card"><div className="muted">Total reads</div><div className="kpi">{profile.total_reads}</div></div>

            <div className="card"><div className="muted">Distinct cameras</div><div className="kpi">{profile.distinct_cameras}</div></div>

            <div className="card"><div className="muted">First seen</div><div>{fmt(profile.first_seen)}</div></div>

            <div className="card"><div className="muted">Last seen</div><div>{fmt(profile.last_seen)}</div></div>

          </div>

        </>

      )}

      {movement && movement.anomalies.length > 0 && (

        <>

          <h2>⚠ Movement anomalies</h2>

          <div className="card" style={{ borderColor: "var(--danger)" }}>

            {movement.anomalies.map((a, i) => (

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

                <span>{a.reason.replace(/_/g, " ")}</span>

                <span className="badge danger">{Math.round(a.speed_kmh)} km/h</span>

              </div>

            ))}

            <p className="muted" style={{ marginBottom: 0 }}>Implausible transit speed suggests a misread or cloned plate.</p>

          </div>

        </>

      )}

      {movement && (

        <>

          <h2>Route legs</h2>

          <div className="card">

            <table>

              <thead><tr><th>From</th><th>To</th><th>Elapsed</th><th>Distance</th><th>Speed</th></tr></thead>

              <tbody>{movement.route.map((l, i) => (

                <tr key={i}>

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

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

                  <td>{Math.round(l.elapsed_s)}s</td>

                  <td>{l.distance_km ? l.distance_km.toFixed(1) + " km" : "-"}</td>

                  <td>{l.speed_kmh ? <span className={"badge " + (l.implausible ? "danger" : "ok")}>{Math.round(l.speed_kmh)} km/h</span> : "-"}</td>

                </tr>

              ))}</tbody>

            </table>

          </div>

        </>

      )}

    </div>

  );

}

function fmt(s: string | null) { return s ? new Date(s).toLocaleString() : "-"; }

export default function Search() {

  return <Suspense fallback={<div className="muted">Loading…</div>}><SearchInner /></Suspense>;

}