"use client";

import { useRef, useState } from "react";

import Link from "next/link";

import { api, PlateDetection, VideoPlate, VideoResult } from "@/lib/api";

type Mode = "image" | "video" | "rtsp";

export default function RecognizePage() {

  const [mode, setMode] = useState<Mode>("image");

  const [busy, setBusy] = useState(false);

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

  const [ingest, setIngest] = useState(false);

  const [preview, setPreview] = useState<string | null>(null);

  const [dims, setDims] = useState({ w: 0, h: 0 });

  const [plates, setPlates] = useState<PlateDetection[]>([]);

  const imgRef = useRef<HTMLInputElement>(null);

  const [vres, setVres] = useState<VideoResult | null>(null);

  const vidRef = useRef<HTMLInputElement>(null);

  const [rtspUrl, setRtspUrl] = useState("");

  const [probe, setProbe] = useState<string | null>(null);

  async function runImage(file: File) {

    setErr(null); setPlates([]); setBusy(true);

    const url = URL.createObjectURL(file); setPreview(url);

    const im = new Image(); im.onload = () => setDims({ w: im.naturalWidth, h: im.naturalHeight }); im.src = url;

    try {

      const r = ingest ? await api.alprIngest(file, { min_conf: 0.35 }) : await api.alprRecognize(file, 0.35);

      setPlates(r.plates);

    } catch (e: any) { setErr(msg(e)); } finally { setBusy(false); }

  }

  async function runVideo(file: File) {

    setErr(null); setVres(null); setBusy(true);

    try { setVres(await api.alprVideo(file, { sample_fps: 3, min_conf: 0.35, ingest })); }

    catch (e: any) { setErr(msg(e)); } finally { setBusy(false); }

  }

  async function doProbe() {

    setProbe(null); setErr(null);

    try { const p = await api.rtspProbe(rtspUrl); setProbe(p.decoded ? `reachable · ${p.width}×${p.height}` : "reachable but no frame decoded"); }

    catch { setProbe("unreachable"); }

  }

  async function runRtsp() {

    setErr(null); setVres(null); setBusy(true);

    try { setVres(await api.rtspCapture({ url: rtspUrl, seconds: 15, sample_fps: 2, min_conf: 0.4, ingest })); }

    catch (e: any) { setErr(msg(e)); } finally { setBusy(false); }

  }

  function msg(e: any) { return e.status === 401 ? "Sign in." : e.status === 403 ? "Ingest needs analyst role." : e.status === 502 ? "Stream/fetch failed." : "Recognition failed."; }

  return (

    <div>

      <h1>ALPR Recognition Engine</h1>

      <p className="sub">Plate detection (YOLO/ONNX) + OCR over images, video clips, and RTSP/HTTP streams.

        Recognized plates flow through the same pipeline as everything else.</p>

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

        {(["image", "video", "rtsp"] as Mode[]).map((m) => (

          <span key={m} className={"chip " + (mode === m ? "on" : "")} onClick={() => { setMode(m); setVres(null); setPlates([]); }}>

            {m === "image" ? "Image" : m === "video" ? "Video clip" : "RTSP / stream"}

          </span>

        ))}

        <div style={{ flex: 1 }} />

        <label className="row" style={{ gap: 6, fontSize: 12 }}>

          <input type="checkbox" checked={ingest} onChange={(e) => setIngest(e.target.checked)} style={{ width: 14 }} />

          create real reads

        </label>

      </div>

      {err && <div className="badge danger" style={{ marginBottom: 10 }}>{err}</div>}

      {mode === "image" && (

        <>

          <div className="card" onClick={() => imgRef.current?.click()} onDragOver={(e) => e.preventDefault()}

               onDrop={(e) => { e.preventDefault(); if (e.dataTransfer.files[0]) runImage(e.dataTransfer.files[0]); }}

               style={{ textAlign: "center", padding: 28, borderStyle: "dashed", cursor: "pointer" }}>

            <input ref={imgRef} type="file" accept="image/*" hidden onChange={(e) => e.target.files?.[0] && runImage(e.target.files[0])} />

            {busy ? "Recognizing…" : "Drop a vehicle/plate image, or click to browse"}

          </div>

          {preview && (

            <div className="card" style={{ marginTop: 14, display: "inline-block" }}>

              <div style={{ position: "relative", display: "inline-block", maxWidth: "100%" }}>

                <img src={preview} alt="" style={{ maxWidth: "100%", borderRadius: 8, display: "block" }} />

                <svg viewBox={`0 0 ${dims.w} ${dims.h}`} preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>

                  {plates.map((p, i) => p.bbox.length === 4 && (

                    <g key={i}>

                      <rect x={p.bbox[0]} y={p.bbox[1]} width={p.bbox[2] - p.bbox[0]} height={p.bbox[3] - p.bbox[1]} fill="none" stroke="#2dd4bf" strokeWidth={Math.max(2, dims.w / 300)} />

                      <text x={p.bbox[0]} y={p.bbox[1] - 6} fill="#2dd4bf" fontSize={Math.max(14, dims.w / 28)} fontWeight="700" fontFamily="monospace">{p.plate_norm}</text>

                    </g>

                  ))}

                </svg>

              </div>

            </div>

          )}

          <PlateTable rows={plates.map((p) => ({ plate_norm: p.plate_norm, ocr: p.ocr_confidence, extra: `${(p.detection_confidence * 100).toFixed(0)}% det` }))} ingest={ingest} />

        </>

      )}

      {mode === "video" && (

        <>

          <div className="card" onClick={() => vidRef.current?.click()} onDragOver={(e) => e.preventDefault()}

               onDrop={(e) => { e.preventDefault(); if (e.dataTransfer.files[0]) runVideo(e.dataTransfer.files[0]); }}

               style={{ textAlign: "center", padding: 28, borderStyle: "dashed", cursor: "pointer" }}>

            <input ref={vidRef} type="file" accept="video/*" hidden onChange={(e) => e.target.files?.[0] && runVideo(e.target.files[0])} />

            {busy ? "Processing frames…" : "Drop an .mp4 clip, or click to browse (samples ~3 frames/sec)"}

          </div>

          <VideoOut res={vres} ingest={ingest} />

        </>

      )}

      {mode === "rtsp" && (

        <>

          <div className="card">

            <div className="row">

              <input style={{ flex: 1, minWidth: 280 }} placeholder="rtsp://user:pass@host:554/stream  (or http(s) MJPEG/HLS)"

                     value={rtspUrl} onChange={(e) => setRtspUrl(e.target.value)} />

              <button onClick={doProbe} disabled={!rtspUrl}>Probe</button>

              <button className="primary" onClick={runRtsp} disabled={!rtspUrl || busy}>{busy ? "Capturing…" : "Capture 15s"}</button>

            </div>

            {probe && <div className="badge" style={{ marginTop: 10 }}>{probe}</div>}

            <p className="muted" style={{ fontSize: 12, marginTop: 10, marginBottom: 0 }}>

              Captures a bounded 15s window. For always-on ingest, run <code>rtsp_worker.py &lt;url&gt; &lt;camera&gt;</code> on the server.

            </p>

          </div>

          <VideoOut res={vres} ingest={ingest} />

        </>

      )}

      <p className="muted" style={{ fontSize: 12, marginTop: 14 }}>

        Best on plate-quality footage. Each distinct plate aggregates to one read (best OCR across

        the frames it appears in), not one per frame.

      </p>

    </div>

  );

}

function PlateTable({ rows, ingest }: { rows: { plate_norm: string; ocr: number; extra: string }[]; ingest: boolean }) {

  return (

    <div style={{ marginTop: 14 }}>

      <h2>Detected plates</h2>

      <div className="card">

        <table>

          <thead><tr><th>Plate</th><th>OCR</th><th>Detail</th></tr></thead>

          <tbody>

            {rows.map((r, i) => (

              <tr key={i}><td><Link href={`/vehicles/${r.plate_norm}`} className="mono">{r.plate_norm}</Link></td>

                <td><span className="badge accent">{(r.ocr * 100).toFixed(0)}%</span></td><td className="muted">{r.extra}</td></tr>

            ))}

            {!rows.length && <tr><td colSpan={3} className="muted">No plates.</td></tr>}

          </tbody>

        </table>

        {ingest && rows.length > 0 && <div className="badge ok" style={{ marginTop: 10 }}>Reads created in pipeline.</div>}

      </div>

    </div>

  );

}

function VideoOut({ res, ingest }: { res: VideoResult | null; ingest: boolean }) {

  if (!res) return null;

  return (

    <div style={{ marginTop: 14 }}>

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

        <span className="badge">{res.frames_sampled} frames sampled</span>

        <span className="badge accent">{res.frames_with_detections} with plates</span>

        <span className="badge">{res.plates.length} distinct plates</span>

        {res.ingest && <span className="badge ok">{res.ingest.inserted} reads created</span>}

      </div>

      <div className="card">

        <table>

          <thead><tr><th>Plate</th><th>OCR</th><th>Frames</th><th>Window</th></tr></thead>

          <tbody>

            {res.plates.map((p: VideoPlate, i) => (

              <tr key={i}>

                <td><Link href={`/vehicles/${p.plate_norm}`} className="mono">{p.plate_norm}</Link></td>

                <td><span className="badge accent">{(p.ocr_confidence * 100).toFixed(0)}%</span></td>

                <td className="mono">{p.frames_seen}</td>

                <td className="muted">{p.first_ts.toFixed(1)}s → {p.last_ts.toFixed(1)}s</td>

              </tr>

            ))}

            {!res.plates.length && <tr><td colSpan={4} className="muted">No plates detected in sampled frames.</td></tr>}

          </tbody>

        </table>

      </div>

    </div>

  );

}