"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import Link from "next/link";
import { Badge, Panel, StatusDot } from "@/components/ui/primitives";
import { FleetMapLazy } from "@/components/map/fleet-map-lazy";
import { fetchFleet, fetchVehicle } from "@/lib/fleet/client";
import { evaluateReadiness } from "@/lib/fleet/readiness";
import { evaluateEveningCheck } from "@/lib/fleet/evening";
import {
  findZoneForVehicle,
  isStale,
  newestTelematicsTimestamp,
  ZONE_LABELS,
} from "@/lib/fleet/geo";
import { EVENING_THRESHOLDS } from "@/lib/fleet/evening";
import {
  formatKm,
  formatPercent,
  formatRelative,
  GROUP_LABELS,
  POWERTRAIN_LABELS,
} from "@/lib/fleet/labels";
import type { FleetSnapshot, VehicleMaster } from "@/lib/fleet/types";
import { energyLabel } from "@/components/vehicle/vehicle-table";

export default function VehicleDetailPage() {
  const params = useParams<{ vin: string }>();
  const vin = decodeURIComponent(params.vin);
  const [vehicle, setVehicle] = useState<VehicleMaster | null>(null);
  const [snapshot, setSnapshot] = useState<FleetSnapshot | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    void (async () => {
      try {
        const [v, fleet] = await Promise.all([fetchVehicle(vin), fetchFleet()]);
        setVehicle(v);
        setSnapshot(fleet);
      } catch (e) {
        setError(e instanceof Error ? e.message : "Fehler");
      }
    })();
  }, [vin]);

  if (error) {
    return (
      <div className="space-y-3">
        <p className="text-sm text-[var(--danger)]">{error}</p>
        <Link href="/fahrzeuge" className="text-sm text-[var(--navy)] hover:underline">
          Zurück zur Liste
        </Link>
      </div>
    );
  }
  if (!vehicle || !snapshot) {
    return <p className="text-sm text-[var(--muted)]">Lade Fahrzeugakte…</p>;
  }

  const stamp = newestTelematicsTimestamp(vehicle);
  const locationStale = isStale(
    vehicle.location.properties.timestamp,
    EVENING_THRESHOLDS.staleMinutes,
  );
  const readiness = evaluateReadiness(vehicle, snapshot.sites);
  const evening = evaluateEveningCheck(vehicle, snapshot.sites);
  const zone = findZoneForVehicle(vehicle, snapshot.sites);
  const expectedSite = snapshot.sites.find((s) => s.id === vehicle.expectedSiteId);

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <Link
            href="/fahrzeuge"
            className="text-xs text-[var(--muted)] hover:text-[var(--ink)]"
          >
            ← Fahrzeuge
          </Link>
          <h1 className="mt-1 font-[family-name:var(--font-display)] text-3xl">
            {vehicle.licensePlate}
          </h1>
          <p className="mt-1 text-sm text-[var(--muted)]">
            {vehicle.model} ({vehicle.modelYear}) ·{" "}
            {POWERTRAIN_LABELS[vehicle.powertrain]} · {vehicle.color}
          </p>
          <p className="mt-1 font-mono text-xs text-[var(--muted)]">{vehicle.vin}</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Badge tone="navy">{GROUP_LABELS[vehicle.group]}</Badge>
          <Badge tone={readiness.ready ? "ok" : "warn"}>
            {readiness.ready ? "Übergabebereit" : "Nicht bereit"}
          </Badge>
          {locationStale ? <Badge tone="warn">Standort veraltet</Badge> : null}
        </div>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Panel title="Standort">
          {locationStale ? (
            <p className="mb-3 text-sm text-[var(--warn)]">
              Letzter bekannter Standort ist veraltet (
              {formatRelative(vehicle.location.properties.timestamp)}) und wird
              nicht als aktuell angezeigt.
            </p>
          ) : (
            <p className="mb-3 text-sm text-[var(--muted)]">
              Aktuell:{" "}
              {zone
                ? `${snapshot.sites.find((s) => s.id === zone.siteId)?.shortName} / ${ZONE_LABELS[zone.id]}`
                : "außerhalb bekannter Zonen"}
              {" · "}
              Erwartet: {expectedSite?.shortName} /{" "}
              {ZONE_LABELS[vehicle.expectedZoneId]}
            </p>
          )}
          <FleetMapLazy
            vehicles={locationStale ? [] : [vehicle]}
            sites={snapshot.sites}
            height={280}
          />
        </Panel>

        <Panel title="Bewertungen">
          <div className="space-y-4 text-sm">
            <div>
              <div className="mb-2 flex items-center gap-2 font-medium">
                <StatusDot tone={readiness.ready ? "ok" : "warn"} />
                Übergabe-Check (Score {readiness.score})
              </div>
              {readiness.issues.length ? (
                <ul className="space-y-1 text-[var(--muted)]">
                  {readiness.issues.map((i) => (
                    <li key={i.code + i.message}>• {i.message}</li>
                  ))}
                </ul>
              ) : (
                <p className="text-[var(--ok)]">Alle Kriterien erfüllt.</p>
              )}
            </div>
            <div>
              <div className="mb-2 flex items-center gap-2 font-medium">
                <StatusDot
                  tone={evening.attentionNeeded ? "danger" : "ok"}
                />
                Abend-Check
              </div>
              {evening.issues.length ? (
                <ul className="space-y-1 text-[var(--muted)]">
                  {evening.issues.map((i) => (
                    <li key={i.code + i.message}>• {i.message}</li>
                  ))}
                </ul>
              ) : (
                <p className="text-[var(--ok)]">Keine Ausnahmen.</p>
              )}
            </div>
          </div>
        </Panel>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        <Panel title="Inventory">
          <Dl
            items={[
              ["Aktiv", vehicle.inventory.active ? "ja" : "nein"],
              ["Markt", vehicle.inventory.market],
              ["Aktualisiert", formatRelative(vehicle.inventory.updatedAt)],
            ]}
          />
        </Panel>
        <Panel title="Car Information">
          <Dl
            items={[
              [
                "Tankkapazität",
                vehicle.carInformation.fuelTankCapacity != null
                  ? `${vehicle.carInformation.fuelTankCapacity} l`
                  : "—",
              ],
              [
                "HV-Batterie",
                vehicle.carInformation.driveBatteryCapacity != null
                  ? `${vehicle.carInformation.driveBatteryCapacity} kWh`
                  : "—",
              ],
              [
                "Software",
                vehicle.carInformation.currentCarSoftwareVersion,
              ],
              [
                "Neueste Version",
                vehicle.carInformation.latestAvailableCarSoftwareVersion,
              ],
            ]}
          />
        </Panel>
        <Panel title="Eligibility">
          <Dl
            items={[
              ["Region", vehicle.eligibility.region],
              [
                "Telematik",
                vehicle.eligibility.hasTelematics ? "ja" : "nein",
              ],
              [
                "Echtzeitstandort",
                vehicle.eligibility.supportsRealtimeLocation ? "ja" : "nein",
              ],
              [
                "Driver Behavior",
                vehicle.eligibility.supportsDriverBehaviorData ? "ja" : "nein",
              ],
            ]}
          />
        </Panel>
        <Panel title="Odometer">
          <Dl
            items={[
              ["Kilometerstand", formatKm(vehicle.odometer.odometerMeters)],
              [
                "Ø-Geschwindigkeit",
                `${vehicle.odometer.averageSpeedKmPerHour} km/h`,
              ],
              ["Datenalter", formatRelative(vehicle.odometer.timestamp)],
            ]}
          />
        </Panel>
        <Panel title="Energie">
          {vehicle.battery ? (
            <Dl
              items={[
                [
                  "SoC",
                  formatPercent(vehicle.battery.batteryChargeLevelPercentage),
                ],
                [
                  "Reichweite",
                  `${vehicle.battery.estimatedDistanceToEmptyKm} km`,
                ],
                ["Kabel", vehicle.battery.chargerConnectionStatus],
                ["Laden", vehicle.battery.chargingStatus],
                [
                  "Zeit bis voll",
                  `${vehicle.battery.estimatedChargingTimeToFullMinutes} Min.`,
                ],
              ]}
            />
          ) : vehicle.fuel ? (
            <Dl
              items={[
                ["Tank", formatPercent(vehicle.fuel.fuelLeftPercentage)],
                ["Menge", `${vehicle.fuel.fuelAmountLiters} l`],
                ["Reichweite", `${vehicle.fuel.distanceToEmptyKm} km`],
                [
                  "Verbrauch",
                  `${vehicle.fuel.averageFuelConsumptionLitersPer100Km} l/100km`,
                ],
              ]}
            />
          ) : (
            <p className="text-sm text-[var(--muted)]">Keine Energiedaten</p>
          )}
        </Panel>
        <Panel title="Health">
          <Dl
            items={[
              ["Service in", `${vehicle.health.daysToService} Tagen`],
              ["Service km", `${vehicle.health.distanceToServiceKm} km`],
              ["Servicewarnung", vehicle.health.serviceWarning],
              ["12-V", vehicle.health.lowVoltageBatteryWarning],
              ["Bremsflüssigkeit", vehicle.health.brakeFluidLevelWarning],
              ["Kühlmittel", vehicle.health.engineCoolantLevelWarning],
              ["Öl", vehicle.health.oilLevelWarning],
            ]}
          />
        </Panel>
        <Panel title="Exterior">
          <Dl
            items={[
              ["Verriegelung", vehicle.exterior.centralLock],
              ["Fahrertür", vehicle.exterior.frontLeftDoor],
              ["Heckklappe", vehicle.exterior.tailgate],
              ["Haube", vehicle.exterior.hood],
              ["Energie", energyLabel(vehicle)],
            ]}
          />
        </Panel>
        <Panel title="Availability">
          <Dl
            items={[
              ["Status", vehicle.availability.availabilityStatus],
              ["Modus", vehicle.availability.usageMode],
              [
                "Grund",
                vehicle.availability.unavailableReason ?? "—",
              ],
              ["Telematik gesamt", formatRelative(stamp)],
            ]}
          />
        </Panel>
        <Panel title="Hinweis Invocation">
          <p className="text-sm leading-relaxed text-[var(--muted)]">
            Remote-Funktionen (Lock, Unlock, Honk/Flash, Engine/Clima Start)
            sind fachlich vorgesehen, in dieser Mock-Stufe aber nicht aktiv.
            Freigabe erfordert Rollen, Protokollierung und Volvo-Bestätigung.
          </p>
        </Panel>
      </div>
    </div>
  );
}

function Dl({ items }: { items: [string, string][] }) {
  return (
    <dl className="space-y-2 text-sm">
      {items.map(([k, v]) => (
        <div key={k} className="flex justify-between gap-3">
          <dt className="text-[var(--muted)]">{k}</dt>
          <dd className="text-right font-medium text-[var(--ink)]">{v}</dd>
        </div>
      ))}
    </dl>
  );
}