"use client";

import { useCallback, useEffect, useRef, useState } from "react";

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

const AREAS = ["", "Manhattan", "Brooklyn", "Queens", "Bronx"];

const REFRESH_MS = 18000;

function CamTile({ cam, onOpen }: { cam: LiveCamera; onOpen: (c: LiveCamera) => void }) {

  const imgRef = useRef<HTMLImageElement>(null);

  const visible = useRef(true);

  const url = api.snapshotUrl(cam.id);

  useEffect(() => {

    const el = imgRef.current;

    if (!el) return;

    const io = new IntersectionObserver(([e]) => { visible.current = e.isIntersecting; },

      { rootMargin: "200px" });

    io.observe(el);

    function refresh() {

      if (!visible.current) return;

      const next = new Image();

      next.onload = () => { if (imgRef.current) { imgRef.current.src = next.src; imgRef.current.style.opacity = "1"; } };

      next.onerror = () => { if (imgRef.current) imgRef.current.style.opacity = "0.18"; };

      next.src = `${url}?t=${Date.now()}`;

    }

    refresh();

    const start = setTimeout(() => { refresh(); }, Math.random() * REFRESH_MS);

    const iv = setInterval(refresh, REFRESH_MS);

    return () => { io.disconnect(); clearTimeout(start); clearInterval(iv); };

  }, [url]);

  return (

    <div className="tile" onClick={() => onOpen(cam)}>

      <img ref={imgRef} alt={cam.name} style={{ opacity: 0 }} />

      <div className={"live" + (cam.online ? "" : " off")}><span className="led" />{cam.online ? "LIVE" : "OFFLINE"}</div>

      <div className="vtag">SNAPSHOT</div>

      <div className="meta">

        <div className="nm">{cam.name}</div>

        <div className="ar">{cam.area || cam.state} · {cam.operator}</div>

      </div>

    </div>

  );

}

export default function LiveWall() {

  const [cams, setCams] = useState<LiveCamera[]>([]);

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

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

  const [area, setArea] = useState("");

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

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

  const [dense, setDense] = useState(false);

  const [active, setActive] = useState<LiveCamera | null>(null);

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

  const limit = 48;

  const load = useCallback(() => {

    const query = [area, q].filter(Boolean).join(" ") || undefined;

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

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

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

  }, [state, area, q, page]);

  useEffect(load, [load]);

  const STATES = ["", "NY", "CA", "OR", "FL", "AZ", "VT", "NH", "ME"];

  return (

    <div>

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

        <div>

          <div className="eyebrow">Operations / Live Wall</div>

          <h1 style={{ marginTop: 8 }}>Live Camera Wall</h1>

          <p className="sub">Real public DOT feeds - server-cached &amp; staggered, ~18s refresh, on-screen tiles only.</p>

        </div>

        <span className="feedmark"><span className="led" /> {total.toLocaleString()} live feeds</span>

      </div>

      <div className="wall-bar">

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

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

        </select>

        {state === "NY" && AREAS.map((a) => (

          <span key={a} className={"chip " + (area === a ? "on" : "")} onClick={() => { setArea(a); setPage(0); }}>{a || "All NYC"}</span>

        ))}

        <input placeholder="location…" value={q} onChange={(e) => { setQ(e.target.value); setPage(0); }} style={{ width: 170 }} />

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

        <span className={"chip " + (dense ? "on" : "")} onClick={() => setDense((d) => !d)}>{dense ? "Dense" : "Wide"}</span>

        <span className="muted" style={{ fontSize: 11 }}>{cams.length} / {total.toLocaleString()}</span>

      </div>

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

      <div className={"wall" + (dense ? " dense" : "")}>

        {cams.map((c) => <CamTile key={c.id} cam={c} onOpen={setActive} />)}

        {!cams.length && !err && <div className="muted" style={{ padding: 20 }}>Loading live feeds…</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} / {Math.max(1, Math.ceil(total / limit))}</span>

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

      </div>

      {active && (

        <div className="viewer-backdrop" onClick={() => setActive(null)}>

          <div className="viewer" onClick={(e) => e.stopPropagation()}>

            <div className="vimg"><img src={`${api.snapshotUrl(active.id)}?t=${Date.now()}`} alt={active.name} /></div>

            <div className="vbody">

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

                <div>

                  <div style={{ fontFamily: "var(--display)", fontWeight: 700, textTransform: "uppercase" }}>{active.name}</div>

                  <div className="muted" style={{ fontSize: 11, marginTop: 3 }}>{active.area || active.state} · {active.operator} · {active.lat?.toFixed(4)}, {active.lon?.toFixed(4)}</div>

                </div>

                <div className="row">

                  <span className="feedmark"><span className="led" /> LIVE · SNAPSHOT</span>

                  <button onClick={() => setActive(null)}>Close</button>

                </div>

              </div>

            </div>

          </div>

        </div>

      )}

    </div>

  );

}