"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

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

const STATE_NAMES: Record<string, string> = {

  AL: "Alabama", AK: "Alaska", AZ: "Arizona", AR: "Arkansas", CA: "California", CO: "Colorado",

  CT: "Connecticut", DE: "Delaware", FL: "Florida", GA: "Georgia", HI: "Hawaii", ID: "Idaho",

  IL: "Illinois", IN: "Indiana", IA: "Iowa", KS: "Kansas", KY: "Kentucky", LA: "Louisiana",

  ME: "Maine", MD: "Maryland", MA: "Massachusetts", MI: "Michigan", MN: "Minnesota", MS: "Mississippi",

  MO: "Missouri", MT: "Montana", NE: "Nebraska", NV: "Nevada", NH: "New Hampshire", NJ: "New Jersey",

  NM: "New Mexico", NY: "New York", NC: "North Carolina", ND: "North Dakota", OH: "Ohio",

  OK: "Oklahoma", OR: "Oregon", PA: "Pennsylvania", RI: "Rhode Island", SC: "South Carolina",

  SD: "South Dakota", TN: "Tennessee", TX: "Texas", UT: "Utah", VT: "Vermont", VA: "Virginia",

  WA: "Washington", WV: "West Virginia", WI: "Wisconsin", WY: "Wyoming",

};

export default function States() {

  const [rows, setRows] = useState<StateRow[]>([]);

  const [sel, setSel] = useState<string | null>(null);

  const [plates, setPlates] = useState<{ plate_norm: string; reads: number }[]>([]);

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

  useEffect(() => {

    api.states().then(setRows)

      .catch((e) => setErr(e.status === 401 ? "Sign in to view state coverage." : String(e)));

  }, []);

  function open(state: string) {

    setSel(state);

    api.statePlates(state).then((r) => setPlates(r.plates)).catch(() => setPlates([]));

  }

  const maxReads = Math.max(1, ...rows.map((r) => r.reads));

  return (

    <div>

      <h1>Nationwide Coverage</h1>

      <p className="muted">Plate-read volume by registration state across the network. Click any

        state to drill into its vehicles.</p>

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

      <div style={{ display: "grid", gridTemplateColumns: sel ? "1fr 360px" : "1fr", gap: 16 }}>

        <div className="card" style={{ padding: 8 }}>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px,1fr))", gap: 6 }}>

            {rows.map((r) => (

              <div key={r.state} onClick={() => open(r.state)}

                   style={{ padding: "8px 10px", borderRadius: 6, cursor: "pointer",

                            border: "1px solid var(--border)",

                            background: sel === r.state ? "var(--panel-2)" : "transparent" }}>

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

                  <strong>{r.state}</strong><span className="muted">{r.vehicles} veh</span>

                </div>

                <div className="muted" style={{ fontSize: 11 }}>{STATE_NAMES[r.state] || ""}</div>

                <div style={{ height: 4, marginTop: 4, borderRadius: 2,

                              background: "var(--accent)", width: `${(r.reads / maxReads) * 100}%` }} />

                <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{r.reads} reads</div>

              </div>

            ))}

            {!rows.length && !err && <div className="muted">Loading states…</div>}

          </div>

        </div>

        {sel && (

          <div className="card">

            <h2 style={{ marginTop: 0 }}>{STATE_NAMES[sel] || sel} ({sel})</h2>

            <table>

              <thead><tr><th>Plate</th><th>Reads</th></tr></thead>

              <tbody>

                {plates.map((p) => (

                  <tr key={p.plate_norm}>

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

                    <td><span className="badge">{p.reads}</span></td>

                  </tr>

                ))}

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

              </tbody>

            </table>

          </div>

        )}

      </div>

    </div>

  );

}