"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

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

export default function Command() {

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

  const [sats, setSats] = useState(0);

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

  useEffect(() => {

    api.cameraStats().then(setStats)

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

    api.satellites().then((r) => setSats(r.count)).catch(() => {});

  }, []);

  const maxOp = Math.max(1, ...(stats?.by_operator || []).map((o) => o.count));

  const maxSt = Math.max(1, ...(stats?.by_state || []).map((s) => s.count));

  return (

    <div>

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

        <div>

          <h1>Command</h1>

          <p className="sub">Real public camera &amp; satellite aggregation - nationwide.</p>

        </div>

        <Link href="/map"><button className="primary">Open Live Map →</button></Link>

      </div>

      {err && <div className="card" style={{ borderColor: "var(--danger)", marginTop: 12 }}>{err} <Link href="/login">Sign in →</Link></div>}

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

        <div className="kpi-card"><div className="lbl">Ground cameras</div><div className="val accent">{stats?.total?.toLocaleString() ?? "-"}</div></div>

        <div className="kpi-card"><div className="lbl">Satellite cameras</div><div className="val">{sats || stats?.satellite_cameras || "-"}</div></div>

        <div className="kpi-card"><div className="lbl">States covered</div><div className="val">{stats?.by_state.length ?? "-"}</div></div>

        <div className="kpi-card"><div className="lbl">Operators</div><div className="val">{stats?.by_operator.length ?? "-"}</div></div>

        <div className="kpi-card"><div className="lbl">Flock cameras</div><div className="val accent">{stats?.by_operator.find((o) => o.operator.toLowerCase().includes("flock"))?.count.toLocaleString() ?? "-"}</div></div>

      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 8 }}>

        <div>

          <h2>Cameras by operator</h2>

          <div className="card">

            {(stats?.by_operator || []).slice(0, 10).map((o) => (

              <div key={o.operator} style={{ marginBottom: 8 }}>

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

                  <span>{o.operator}</span><span className="mono muted">{o.count.toLocaleString()}</span>

                </div>

                <div style={{ height: 6, borderRadius: 3, marginTop: 3, background: "var(--panel-3)" }}>

                  <div style={{ height: 6, borderRadius: 3, width: `${(o.count / maxOp) * 100}%`,

                                background: o.operator.toLowerCase().includes("flock") ? "var(--accent)" : "var(--accent-2)" }} />

                </div>

              </div>

            ))}

            {!stats && <div className="muted">Loading…</div>}

          </div>

        </div>

        <div>

          <h2>Top states by coverage</h2>

          <div className="card scroll" style={{ maxHeight: 360 }}>

            <table>

              <thead><tr><th>State</th><th>Cameras</th><th></th></tr></thead>

              <tbody>

                {(stats?.by_state || []).slice(0, 18).map((s) => (

                  <tr key={s.state}>

                    <td><Link href={`/states`}>{s.state}</Link></td>

                    <td className="mono">{s.count.toLocaleString()}</td>

                    <td style={{ width: "55%" }}>

                      <div style={{ height: 5, borderRadius: 3, width: `${(s.count / maxSt) * 100}%`, background: "var(--accent)" }} />

                    </td>

                  </tr>

                ))}

              </tbody>

            </table>

          </div>

        </div>

      </div>

      <h2>Data provenance</h2>

      <div className="card muted" style={{ fontSize: 12.5 }}>

        Ground cameras: <b className="dimtext">OpenStreetMap / DeFlock</b> (man_made=surveillance, surveillance:type=ALPR) -

        real public camera locations & operators. Satellite cameras: <b className="dimtext">CelesTrak</b> orbital elements,

        positions propagated live via SGP4. All sources public; provenance retained per record.

      </div>

    </div>

  );

}