"use client";

import Link from "next/link";
import { Badge, StatusDot } from "@/components/ui/primitives";
import {
  formatKm,
  formatPercent,
  formatRelative,
  GROUP_LABELS,
  POWERTRAIN_LABELS,
} from "@/lib/fleet/labels";
import { isStale, newestTelematicsTimestamp } from "@/lib/fleet/geo";
import { EVENING_THRESHOLDS } from "@/lib/fleet/evening";
import type { ReadinessResult, Site, VehicleMaster } from "@/lib/fleet/types";
import { findZoneForVehicle } from "@/lib/fleet/geo";
import { ZONE_LABELS } from "@/lib/fleet/geo";

export function energyLabel(v: VehicleMaster): string {
  if (v.battery) return formatPercent(v.battery.batteryChargeLevelPercentage);
  if (v.fuel) return formatPercent(v.fuel.fuelLeftPercentage);
  return "—";
}

export function VehicleTable({
  rows,
  sites,
}: {
  rows: { vehicle: VehicleMaster; readiness?: ReadinessResult }[];
  sites: Site[];
}) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full min-w-[760px] text-left text-sm">
        <thead>
          <tr className="border-b border-[var(--line)] text-xs uppercase tracking-wide text-[var(--muted)]">
            <th className="pb-2 pr-3 font-medium">Fahrzeug</th>
            <th className="pb-2 pr-3 font-medium">Gruppe</th>
            <th className="pb-2 pr-3 font-medium">Standort / Zone</th>
            <th className="pb-2 pr-3 font-medium">Energie</th>
            <th className="pb-2 pr-3 font-medium">Km</th>
            <th className="pb-2 pr-3 font-medium">Daten</th>
            <th className="pb-2 font-medium">Status</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(({ vehicle: v, readiness }) => {
            const stamp = newestTelematicsTimestamp(v);
            const stale = isStale(stamp, EVENING_THRESHOLDS.staleMinutes);
            const zone = findZoneForVehicle(v, sites);
            const siteName =
              sites.find((s) => s.id === (zone?.siteId ?? v.expectedSiteId))
                ?.shortName ?? "—";
            return (
              <tr
                key={v.vin}
                className="border-b border-[var(--line)]/70 last:border-0"
              >
                <td className="py-3 pr-3">
                  <Link
                    href={`/fahrzeuge/${v.vin}`}
                    className="font-medium text-[var(--navy)] hover:underline"
                  >
                    {v.licensePlate}
                  </Link>
                  <div className="text-xs text-[var(--muted)]">
                    {v.model} · {POWERTRAIN_LABELS[v.powertrain]}
                  </div>
                </td>
                <td className="py-3 pr-3">
                  <Badge tone="navy">{GROUP_LABELS[v.group]}</Badge>
                </td>
                <td className="py-3 pr-3">
                  {stale ? (
                    <Badge tone="warn">Daten veraltet</Badge>
                  ) : (
                    <span>
                      {siteName}
                      {zone ? ` / ${ZONE_LABELS[zone.id]}` : " / außerhalb"}
                    </span>
                  )}
                </td>
                <td className="py-3 pr-3">{energyLabel(v)}</td>
                <td className="py-3 pr-3">{formatKm(v.odometer.odometerMeters)}</td>
                <td className="py-3 pr-3 text-[var(--muted)]">
                  {formatRelative(stamp)}
                </td>
                <td className="py-3">
                  {readiness ? (
                    <span className="inline-flex items-center gap-2">
                      <StatusDot
                        tone={
                          readiness.ready
                            ? "ok"
                            : readiness.issues.some((i) => i.severity === "critical")
                              ? "danger"
                              : "warn"
                        }
                      />
                      {readiness.ready ? "Bereit" : "Prüfung"}
                    </span>
                  ) : (
                    <span className="text-[var(--muted)]">—</span>
                  )}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
      {!rows.length ? (
        <p className="py-8 text-center text-sm text-[var(--muted)]">
          Keine Fahrzeuge für die aktuelle Filterung.
        </p>
      ) : null}
    </div>
  );
}