"use client";

import { useFilters } from "@/components/shell/filter-context";
import { FleetMapLazy } from "@/components/map/fleet-map-lazy";
import { VehicleTable } from "@/components/vehicle/vehicle-table";
import { Badge, KpiCard, Panel } from "@/components/ui/primitives";
import {
  computeKpis,
  filterVehicles,
  withReadiness,
} from "@/lib/fleet/client";
import { useFleet } from "@/lib/fleet/use-fleet";
import Link from "next/link";

export default function DashboardPage() {
  const { snapshot, loading, error, simulate, reset } = useFleet();
  const { siteId, group } = useFilters();

  if (loading) {
    return <p className="text-sm text-[var(--muted)]">Lade Fleet-Daten…</p>;
  }
  if (error || !snapshot) {
    return <p className="text-sm text-[var(--danger)]">{error ?? "Keine Daten"}</p>;
  }

  const filtered = filterVehicles(snapshot.vehicles, { siteId, group });
  const kpis = computeKpis(
    { ...snapshot, vehicles: filterVehicles(snapshot.vehicles, { siteId }) },
    siteId,
  );
  const rows = withReadiness(snapshot, filtered).slice(0, 8);

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h1 className="font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
            Überblick
          </h1>
          <p className="mt-1 text-sm text-[var(--muted)]">
            {snapshot.fleetName} · {kpis.totalVehicles} Fahrzeuge in Filter
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <button
            type="button"
            onClick={() => void simulate({ kind: "random" })}
            className="rounded-sm bg-[var(--navy)] px-3 py-1.5 text-sm text-white hover:opacity-90"
          >
            Event simulieren
          </button>
          <button
            type="button"
            onClick={() => void reset()}
            className="rounded-sm border border-[var(--line)] bg-white px-3 py-1.5 text-sm text-[var(--muted)] hover:text-[var(--ink)]"
          >
            Mock zurücksetzen
          </button>
        </div>
      </div>

      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
        <KpiCard label="Fahrzeuge" value={kpis.totalVehicles} />
        <KpiCard
          label="Übergabebereit"
          value={kpis.readyForHandover}
          tone="ok"
          hint="Energie · Exterior · Health"
        />
        <KpiCard
          label="Ladeprobleme"
          value={kpis.chargingIssues}
          tone={kpis.chargingIssues ? "warn" : "default"}
        />
        <KpiCard
          label="Health-Alerts"
          value={kpis.healthAlerts}
          tone={kpis.healthAlerts ? "danger" : "default"}
        />
        <KpiCard
          label="Zonenabweichung"
          value={kpis.zoneMismatches}
          tone={kpis.zoneMismatches ? "warn" : "default"}
        />
        <KpiCard
          label="Veraltete Daten"
          value={kpis.staleData}
          tone={kpis.staleData ? "warn" : "default"}
        />
      </div>

      <div className="grid gap-4 lg:grid-cols-5">
        <div className="lg:col-span-3">
          <Panel
            title="Standorte & Fahrzeuge"
            action={<Badge tone="neutral">Ohne veraltete Positionen</Badge>}
          >
            <FleetMapLazy vehicles={filtered} sites={snapshot.sites} />
          </Panel>
        </div>
        <div className="space-y-4 lg:col-span-2">
          <Panel title="Schnellzugriff">
            <ul className="space-y-2 text-sm">
              <li>
                <Link className="text-[var(--navy)] hover:underline" href="/fahrzeuge">
                  Standortübergreifende Suche →
                </Link>
              </li>
              <li>
                <Link className="text-[var(--navy)] hover:underline" href="/uebergabe">
                  Übergabe-Check →
                </Link>
              </li>
              <li>
                <Link className="text-[var(--navy)] hover:underline" href="/laden">
                  EV-Ladebereitschaft →
                </Link>
              </li>
              <li>
                <Link className="text-[var(--navy)] hover:underline" href="/abend-check">
                  Abend-Check / Ausnahmen →
                </Link>
              </li>
            </ul>
          </Panel>
          <Panel title="Hinweise">
            <p className="text-sm leading-relaxed text-[var(--muted)]">
              Veraltete Standortdaten werden bewusst nicht als aktuelle Position
              dargestellt. Remote-Befehle (Invocation) sind in dieser Stufe nicht
              freigeschaltet.
            </p>
          </Panel>
        </div>
      </div>

      <Panel
        title="Fahrzeuge im Fokus"
        action={
          <Link href="/fahrzeuge" className="text-sm text-[var(--navy)] hover:underline">
            Alle anzeigen
          </Link>
        }
      >
        <VehicleTable rows={rows} sites={snapshot.sites} />
      </Panel>
    </div>
  );
}