"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

import { api, CameraGridItem, CameraStats } from "@/lib/api";

const STATES = ["","AL","AZ","AR","CA","CO","CT","DE","FL","GA","HI","ID","IL","IN","IA","KS","KY",

  "LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK",

  "OR","PA","RI","SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY"];

export default function CamerasPage() {

  const [items, setItems] = useState<CameraGridItem[]>([]);

  const [total, setTotal] = useState(0);

  const [stats, setStats] = useState<CameraStats | null>(null);

  const [state, setState] = useState("");

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

  const [page, setPage] = useState(0);

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

  const limit = 60;

  useEffect(() => { api.cameraStats().then(setStats).catch(() => {}); }, []);

  useEffect(() => {

    api.cameraGrid({ state: state || undefined, q: q || undefined, limit, offset: page * limit })

      .then((r) => { setItems(r.cameras); setTotal(r.total); })

      .catch((e) => setErr(e.status === 401 ? "Sign in to view cameras." : "Load failed."));

  }, [state, q, page]);

  function opColor(op: string | null) {

    const o = (op || "").toLowerCase();

    if (o.includes("flock")) return "accent";

    if (o.includes("motorola")) return "amber";

    if (o.includes("genetec")) return "purple";

    return "";

  }

  return (

    <div>

      <h1>Camera Grid</h1>

      <p className="sub">{stats ? `${stats.total.toLocaleString()} real cameras across ${stats.by_state.length} states · ${stats.satellite_cameras} satellite cameras` : "Loading…"}</p>

      {stats && (

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

          {stats.by_operator.slice(0, 6).map((o) => (

            <span key={o.operator} className={"badge " + opColor(o.operator)}>{o.operator}: {o.count.toLocaleString()}</span>

          ))}

        </div>

      )}

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

        <select value={state} onChange={(e) => { setState(e.target.value); setPage(0); }}>

          {STATES.map((s) => <option key={s} value={s}>{s || "All states"}</option>)}

        </select>

        <input placeholder="filter by name / operator" value={q}

               onChange={(e) => { setQ(e.target.value); setPage(0); }} />

        <span className="muted">{total.toLocaleString()} match</span>

      </div>

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

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

        {items.map((c) => (

          <Link key={c.id} href={c.has_live_feed ? "/wall" : `/cameras/${c.id}`} className="card" style={{ display: "block", padding: 0, overflow: "hidden" }}>

            {c.has_live_feed && c.snapshot_url && (

              <div style={{ position: "relative", aspectRatio: "16/9", background: "#000" }}>

                {}

                <img src={api.snapshotUrl(c.id)} alt={c.name} loading="lazy"

                     style={{ width: "100%", height: "100%", objectFit: "cover" }}

                     onError={(e) => { (e.target as HTMLImageElement).style.opacity = "0.2"; }} />

                <div className="live" style={{ position: "absolute", top: 6, left: 6 }}><span className="led" />LIVE</div>

              </div>

            )}

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

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

                <span className={"badge " + opColor(c.operator)}>{c.operator || "Unknown"}</span>

                <span className="badge">{c.state}</span>

              </div>

              <div style={{ marginTop: 8, fontWeight: 600, fontSize: 12, textTransform: "uppercase", letterSpacing: ".02em" }}>{c.name}</div>

              <div className="muted mono" style={{ fontSize: 10.5, marginTop: 4 }}>

                {c.lat?.toFixed(4)}, {c.lon?.toFixed(4)} {c.direction_facing ? `· ${c.direction_facing}` : ""}

              </div>

              <div className="muted" style={{ fontSize: 10.5, marginTop: 2 }}>

                {c.has_live_feed ? <span className="feedmark"><span className="led" /> LIVE FEED</span> : `${c.zone || "ALPR"} · ${c.reads} reads`}

              </div>

            </div>

          </Link>

        ))}

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

      </div>

      <div className="row" style={{ marginTop: 16, justifyContent: "center" }}>

        <button disabled={page === 0} onClick={() => setPage((p) => Math.max(0, p - 1))}>← Prev</button>

        <span className="muted">page {page + 1} of {Math.max(1, Math.ceil(total / limit))}</span>

        <button disabled={(page + 1) * limit >= total} onClick={() => setPage((p) => p + 1)}>Next →</button>

      </div>

    </div>

  );

}