"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { useFilters } from "@/components/shell/filter-context";
import { Badge, Panel, StatusDot } from "@/components/ui/primitives";
import { filterVehicles, withEvening } from "@/lib/fleet/client";
import { useFleet } from "@/lib/fleet/use-fleet";
import { GROUP_LABELS } from "@/lib/fleet/labels";
import { EVENING_THRESHOLDS } from "@/lib/fleet/evening";
import type { EveningIssueCode } from "@/lib/fleet/types";

const CODE_LABELS: Record<EveningIssueCode, string> = {
  ZONE_MISMATCH: "Zonenabweichung",
  EXTERIOR_OPEN: "Exterior offen",
  UNLOCKED: "Unverriegelt",
  STALE_DATA: "Veraltete Daten",
  CRITICAL_ENERGY: "Energie kritisch",
  CRITICAL_HEALTH: "Health kritisch",
};

export default function AbendCheckPage() {
  const { snapshot, loading, error, simulate, reset, reload } = useFleet(20_000);
  const { siteId, group } = useFilters();
  const [autoTick, setAutoTick] = useState(false);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    if (!autoTick) return;
    const id = setInterval(() => {
      void simulate({ kind: "random" });
    }, 12_000);
    return () => clearInterval(id);
  }, [autoTick, simulate]);

  const rows = useMemo(() => {
    if (!snapshot) return [];
    return withEvening(
      snapshot,
      filterVehicles(snapshot.vehicles, { siteId, group }),
    )
      .filter((r) => r.evening.attentionNeeded)
      .sort(
        (a, b) =>
          b.evening.issues.filter((i) => i.severity === "critical").length -
          a.evening.issues.filter((i) => i.severity === "critical").length,
      );
  }, [snapshot, siteId, group]);

  const quiet =
    snapshot &&
    withEvening(
      snapshot,
      filterVehicles(snapshot.vehicles, { siteId, group }),
    ).filter((r) => !r.evening.attentionNeeded).length;

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

  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">
            Abend-Check
          </h1>
          <p className="mt-1 max-w-2xl text-sm text-[var(--muted)]">
            Ausnahmeüberwachung nach Geschäftsschluss: Zone, Exterior,
            Datenalter, kritische Energie- und Health-Zustände. Schwelle für
            veraltete Daten: {EVENING_THRESHOLDS.staleMinutes} Minuten.
          </p>
          <div className="mt-2 flex flex-wrap gap-2">
            <Badge tone={rows.length ? "danger" : "ok"}>
              {rows.length} Ausnahmen
            </Badge>
            <Badge tone="ok">{quiet ?? 0} ruhig</Badge>
            {autoTick ? <Badge tone="navy">Auto-Tick aktiv</Badge> : null}
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <button
            type="button"
            disabled={busy}
            onClick={async () => {
              setBusy(true);
              try {
                await simulate({ kind: "location" });
              } finally {
                setBusy(false);
              }
            }}
            className="rounded-sm bg-[var(--navy)] px-3 py-1.5 text-sm text-white hover:opacity-90 disabled:opacity-50"
          >
            Location-Event
          </button>
          <button
            type="button"
            disabled={busy}
            onClick={async () => {
              setBusy(true);
              try {
                await simulate({ kind: "exterior" });
              } finally {
                setBusy(false);
              }
            }}
            className="rounded-sm border border-[var(--line)] bg-white px-3 py-1.5 text-sm hover:border-[var(--navy)]/40"
          >
            Exterior-Event
          </button>
          <button
            type="button"
            disabled={busy}
            onClick={async () => {
              setBusy(true);
              try {
                await simulate({ kind: "battery" });
              } finally {
                setBusy(false);
              }
            }}
            className="rounded-sm border border-[var(--line)] bg-white px-3 py-1.5 text-sm hover:border-[var(--navy)]/40"
          >
            Battery-Event
          </button>
          <button
            type="button"
            onClick={() => setAutoTick((v) => !v)}
            className={`rounded-sm px-3 py-1.5 text-sm ${
              autoTick
                ? "bg-[var(--accent)] text-white"
                : "border border-[var(--line)] bg-white"
            }`}
          >
            {autoTick ? "Auto-Tick stoppen" : "Auto-Tick (12s)"}
          </button>
          <button
            type="button"
            onClick={() => void reset().then(() => reload())}
            className="rounded-sm border border-[var(--line)] bg-white px-3 py-1.5 text-sm text-[var(--muted)]"
          >
            Reset
          </button>
        </div>
      </div>

      {!rows.length ? (
        <Panel title="Alles ruhig">
          <p className="text-sm text-[var(--muted)]">
            Keine relevanten Abweichungen für die aktuelle Filterung. Der
            Abend-Check bleibt bewusst still, wenn sich der Zustand nicht ändert.
          </p>
        </Panel>
      ) : (
        <div className="space-y-3">
          {rows.map(({ vehicle, evening }) => (
            <Panel
              key={vehicle.vin}
              title={`${vehicle.licensePlate} · ${vehicle.model}`}
              action={
                <Link
                  href={`/fahrzeuge/${vehicle.vin}`}
                  className="text-sm text-[var(--navy)] hover:underline"
                >
                  Zur Akte →
                </Link>
              }
            >
              <div className="mb-3 flex flex-wrap gap-2">
                <Badge tone="navy">{GROUP_LABELS[vehicle.group]}</Badge>
                {evening.issues.map((issue) => (
                  <Badge
                    key={issue.code + issue.message}
                    tone={issue.severity === "critical" ? "danger" : "warn"}
                  >
                    {CODE_LABELS[issue.code]}
                  </Badge>
                ))}
              </div>
              <ul className="space-y-2">
                {evening.issues.map((issue) => (
                  <li
                    key={issue.code + issue.message}
                    className="flex items-start gap-2 text-sm"
                  >
                    <StatusDot
                      tone={issue.severity === "critical" ? "danger" : "warn"}
                    />
                    <span>{issue.message}</span>
                  </li>
                ))}
              </ul>
            </Panel>
          ))}
        </div>
      )}
    </div>
  );
}