"use client";

import Link from "next/link";
import { useMemo } from "react";
import { useFilters } from "@/components/shell/filter-context";
import { Badge, Panel, StatusDot } from "@/components/ui/primitives";
import { filterVehicles } from "@/lib/fleet/client";
import { useFleet } from "@/lib/fleet/use-fleet";
import { formatPercent, GROUP_LABELS } from "@/lib/fleet/labels";
import { READINESS_THRESHOLDS } from "@/lib/fleet/readiness";
import type { VehicleMaster } from "@/lib/fleet/types";

type ChargePriority = "critical" | "attention" | "ok";

function prioritize(v: VehicleMaster): ChargePriority {
  const b = v.battery;
  if (!b) return "ok";
  if (
    b.chargingStatus === "ERROR" ||
    b.chargerConnectionStatus === "FAULT" ||
    b.batteryChargeLevelPercentage < 20
  ) {
    return "critical";
  }
  if (
    b.batteryChargeLevelPercentage < READINESS_THRESHOLDS.minBatteryPct ||
    (b.chargerConnectionStatus === "CONNECTED" && b.chargingStatus === "IDLE")
  ) {
    return "attention";
  }
  return "ok";
}

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

  const rows = useMemo(() => {
    if (!snapshot) return [];
    return filterVehicles(snapshot.vehicles, { siteId, group })
      .filter((v) => v.battery)
      .map((vehicle) => ({ vehicle, priority: prioritize(vehicle) }))
      .sort((a, b) => {
        const order = { critical: 0, attention: 1, ok: 2 };
        return order[a.priority] - order[b.priority];
      });
  }, [snapshot, siteId, group]);

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

  const critical = rows.filter((r) => r.priority === "critical").length;
  const attention = rows.filter((r) => r.priority === "attention").length;

  return (
    <div className="space-y-6">
      <div>
        <h1 className="font-[family-name:var(--font-display)] text-3xl">
          EV-Ladebereitschaft
        </h1>
        <p className="mt-1 max-w-2xl text-sm text-[var(--muted)]">
          Priorisiert Elektro- und Plug-in-Hybridfahrzeuge mit niedrigem SoC,
          Ladefehlern oder angeschlossenem, aber inaktivem Ladevorgang.
        </p>
        <div className="mt-2 flex flex-wrap gap-2">
          <Badge tone="danger">{critical} kritisch</Badge>
          <Badge tone="warn">{attention} Aufmerksamkeit</Badge>
          <Badge tone="ok">{rows.length - critical - attention} ok</Badge>
        </div>
      </div>

      <Panel title={`${rows.length} elektrifizierte Fahrzeuge`}>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[720px] 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">Priorität</th>
                <th className="pb-2 pr-3 font-medium">Fahrzeug</th>
                <th className="pb-2 pr-3 font-medium">SoC</th>
                <th className="pb-2 pr-3 font-medium">Reichweite</th>
                <th className="pb-2 pr-3 font-medium">Kabel</th>
                <th className="pb-2 pr-3 font-medium">Laden</th>
                <th className="pb-2 font-medium">Zeit bis voll</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(({ vehicle, priority }) => {
                const b = vehicle.battery!;
                return (
                  <tr
                    key={vehicle.vin}
                    className="border-b border-[var(--line)]/70 last:border-0"
                  >
                    <td className="py-3 pr-3">
                      <span className="inline-flex items-center gap-2">
                        <StatusDot
                          tone={
                            priority === "critical"
                              ? "danger"
                              : priority === "attention"
                                ? "warn"
                                : "ok"
                          }
                        />
                        {priority === "critical"
                          ? "Kritisch"
                          : priority === "attention"
                            ? "Achtung"
                            : "OK"}
                      </span>
                    </td>
                    <td className="py-3 pr-3">
                      <Link
                        href={`/fahrzeuge/${vehicle.vin}`}
                        className="font-medium text-[var(--navy)] hover:underline"
                      >
                        {vehicle.licensePlate}
                      </Link>
                      <div className="text-xs text-[var(--muted)]">
                        {vehicle.model} · {GROUP_LABELS[vehicle.group]}
                      </div>
                    </td>
                    <td className="py-3 pr-3">
                      {formatPercent(b.batteryChargeLevelPercentage)}
                    </td>
                    <td className="py-3 pr-3">
                      {b.estimatedDistanceToEmptyKm} km
                    </td>
                    <td className="py-3 pr-3">{b.chargerConnectionStatus}</td>
                    <td className="py-3 pr-3">{b.chargingStatus}</td>
                    <td className="py-3">
                      {b.estimatedChargingTimeToFullMinutes} Min.
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          {!rows.length ? (
            <p className="py-8 text-center text-sm text-[var(--muted)]">
              Keine BEV/PHEV in der aktuellen Filterung.
            </p>
          ) : null}
        </div>
      </Panel>
    </div>
  );
}