"use client";

import { useMemo, useState } from "react";
import { useFilters } from "@/components/shell/filter-context";
import { FleetMapLazy } from "@/components/map/fleet-map-lazy";
import { VehicleTable } from "@/components/vehicle/vehicle-table";
import { Panel } from "@/components/ui/primitives";
import { filterVehicles, withReadiness } from "@/lib/fleet/client";
import { useFleet } from "@/lib/fleet/use-fleet";

export default function FahrzeugePage() {
  const { snapshot, loading, error } = useFleet();
  const { siteId, group } = useFilters();
  const [query, setQuery] = useState("");

  const rows = useMemo(() => {
    if (!snapshot) return [];
    const filtered = filterVehicles(snapshot.vehicles, { siteId, group, query });
    return withReadiness(snapshot, filtered);
  }, [snapshot, siteId, group, query]);

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

  return (
    <div className="space-y-6">
      <div>
        <h1 className="font-[family-name:var(--font-display)] text-3xl">
          Fahrzeuge
        </h1>
        <p className="mt-1 text-sm text-[var(--muted)]">
          Suche nach VIN, Kennzeichen oder Modell – standortübergreifend.
        </p>
      </div>

      <label className="block max-w-xl text-xs text-[var(--muted)]">
        Suche
        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="z. B. M-VN 101, EX30, YV1…"
          className="mt-1 w-full rounded-sm border border-[var(--line)] bg-white px-3 py-2 text-sm text-[var(--ink)]"
        />
      </label>

      <Panel title={`Karte (${rows.length})`}>
        <FleetMapLazy
          vehicles={rows.map((r) => r.vehicle)}
          sites={snapshot.sites}
        />
      </Panel>

      <Panel title="Trefferliste">
        <VehicleTable rows={rows} sites={snapshot.sites} />
      </Panel>
    </div>
  );
}