"use client";

import * as React from "react";
import Link from "next/link";
import { Droplets, MapPin, Plus, Search } from "lucide-react";
import { HydrantStatus, HydrantTyp } from "@prisma/client";
import { trpc } from "@/lib/trpc/client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Fehlermeldung } from "@/components/stammdaten/anzeige";
import { Karte, type KartenPunkt } from "@/components/karte/karte";
import { alsSvg } from "@/lib/karte/taktische-zeichen";
import { alsDatum } from "@/lib/utils";

/**
 * Die Karte des Ausrückegebiets.
 *
 * Zwei Ebenen: Hydranten und Objekte. Beide sind ein- und ausschaltbar, denn
 * wer nach Löschwasser sucht, will keine Feuerwehrpläne sehen und umgekehrt.
 *
 * Die Umkreissuche ist der eigentliche Zweck: **was liegt in der Nähe?** Sie
 * geht von einem angetippten Punkt aus — im Einsatz von der Einsatzstelle, am
 * Schreibtisch von dort, wo man gerade hinschaut.
 */

const TYP_TEXT: Record<HydrantTyp, string> = {
  UNTERFLUR: "Unterflur",
  UEBERFLUR: "Überflur",
  SAUGSTELLE: "Saugstelle",
  ZISTERNE: "Zisterne",
  OFFENES_GEWAESSER: "offenes Gewässer",
  SONSTIGES: "sonstige",
};

const STATUS_TEXT: Record<HydrantStatus, string> = {
  EINSATZBEREIT: "einsatzbereit",
  EINGESCHRAENKT: "eingeschränkt",
  DEFEKT: "defekt",
  UNBEKANNT: "ungeprüft",
};

const STATUS_FARBE: Record<HydrantStatus, string> = {
  EINSATZBEREIT: "#15803d",
  EINGESCHRAENKT: "#ca8a04",
  DEFEKT: "#b91c1c",
  UNBEKANNT: "#6b7280",
};

export function KartenAnsicht({
  stilUrl,
  mittelpunkt,
  zoom,
  darfBearbeiten,
}: {
  stilUrl: string | null;
  mittelpunkt: { breitengrad: number; laengengrad: number };
  zoom: number;
  darfBearbeiten: boolean;
}) {
  const [suche, setSuche] = React.useState("");
  const [typ, setTyp] = React.useState<HydrantTyp | "alle">("alle");
  const [status, setStatus] = React.useState<HydrantStatus | "alle">("alle");
  const [zeigeObjekte, setZeigeObjekte] = React.useState(true);
  const [zeigeHydranten, setZeigeHydranten] = React.useState(true);
  const [gewaehlt, setGewaehlt] = React.useState<{ art: "hydrant" | "objekt"; id: string } | null>(
    null,
  );
  const [umkreisPunkt, setUmkreisPunkt] = React.useState<{
    breitengrad: number;
    laengengrad: number;
  } | null>(null);
  const [meldung, setMeldung] = React.useState<string | null>(null);

  const hydranten = trpc.hydrant.liste.useQuery({
    suche: suche || undefined,
    typ: typ === "alle" ? undefined : typ,
    status: status === "alle" ? undefined : status,
  });
  const objekte = trpc.objekt.liste.useQuery({ suche: suche || undefined });
  const kennzahlen = trpc.hydrant.kennzahlen.useQuery();

  const umkreis = trpc.hydrant.umkreis.useQuery(
    umkreisPunkt ? { ...umkreisPunkt, umkreisMeter: 500 } : { breitengrad: 0, laengengrad: 0 },
    { enabled: umkreisPunkt !== null },
  );

  const hydrantSvg = React.useMemo(() => alsSvg("hydrant", 26), []);

  const punkte = React.useMemo<KartenPunkt[]>(() => {
    const liste: KartenPunkt[] = [];

    if (zeigeHydranten) {
      for (const hydrant of hydranten.data ?? []) {
        liste.push({
          id: `h-${hydrant.id}`,
          breitengrad: Number(hydrant.breitengrad),
          laengengrad: Number(hydrant.laengengrad),
          svg: hydrantSvg.replace("color:#1d4ed8", `color:${STATUS_FARBE[hydrant.status]}`),
          titel: `${hydrant.bezeichnung ?? TYP_TEXT[hydrant.typ]} — ${STATUS_TEXT[hydrant.status]}`,
          beiKlick: () => setGewaehlt({ art: "hydrant", id: hydrant.id }),
        });
      }
    }

    if (zeigeObjekte) {
      for (const objekt of objekte.data ?? []) {
        if (objekt.breitengrad === null || objekt.laengengrad === null) continue;
        liste.push({
          id: `o-${objekt.id}`,
          breitengrad: Number(objekt.breitengrad),
          laengengrad: Number(objekt.laengengrad),
          farbe: "#1d4ed8",
          titel: objekt.name,
          beiKlick: () => setGewaehlt({ art: "objekt", id: objekt.id }),
        });
      }
    }

    return liste;
  }, [hydranten.data, objekte.data, zeigeHydranten, zeigeObjekte, hydrantSvg]);

  const gewaehlterHydrant =
    gewaehlt?.art === "hydrant"
      ? hydranten.data?.find((eintrag) => eintrag.id === gewaehlt.id)
      : undefined;
  const gewaehltesObjekt =
    gewaehlt?.art === "objekt"
      ? objekte.data?.find((eintrag) => eintrag.id === gewaehlt.id)
      : undefined;

  return (
    <div className="space-y-4" data-testid="kartenansicht">
      {meldung && <Fehlermeldung meldung={meldung} kennung="kartenfehler" />}

      {/* Filter */}
      <div className="flex flex-wrap items-end gap-3">
        <div className="min-w-52 flex-1 space-y-1">
          <Label htmlFor="kartensuche">Suchen</Label>
          <div className="relative">
            <Search
              className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--muted-foreground)]"
              aria-hidden
            />
            <Input
              id="kartensuche"
              className="pl-9"
              value={suche}
              onChange={(ereignis) => setSuche(ereignis.target.value)}
              placeholder="Straße, Nummer, Objektname, Gefahr …"
            />
          </div>
        </div>

        <div className="space-y-1">
          <Label htmlFor="kartentyp">Art</Label>
          <Select value={typ} onValueChange={(wert) => setTyp(wert as HydrantTyp | "alle")}>
            <SelectTrigger id="kartentyp" className="w-44">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="alle">alle Arten</SelectItem>
              {(Object.keys(TYP_TEXT) as HydrantTyp[]).map((wert) => (
                <SelectItem key={wert} value={wert}>
                  {TYP_TEXT[wert]}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-1">
          <Label htmlFor="kartenstatus">Zustand</Label>
          <Select
            value={status}
            onValueChange={(wert) => setStatus(wert as HydrantStatus | "alle")}
          >
            <SelectTrigger id="kartenstatus" className="w-44">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="alle">alle Zustände</SelectItem>
              {(Object.keys(STATUS_TEXT) as HydrantStatus[]).map((wert) => (
                <SelectItem key={wert} value={wert}>
                  {STATUS_TEXT[wert]}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="flex gap-2">
          <Button
            type="button"
            variant={zeigeHydranten ? "default" : "outline"}
            onClick={() => setZeigeHydranten((wert) => !wert)}
          >
            <Droplets aria-hidden />
            Hydranten ({hydranten.data?.length ?? 0})
          </Button>
          <Button
            type="button"
            variant={zeigeObjekte ? "default" : "outline"}
            onClick={() => setZeigeObjekte((wert) => !wert)}
          >
            <MapPin aria-hidden />
            Objekte ({objekte.data?.length ?? 0})
          </Button>
        </div>

        {darfBearbeiten && (
          <Button variant="outline" asChild>
            <Link href="/karte/hydranten">
              <Plus aria-hidden />
              Hydranten pflegen
            </Link>
          </Button>
        )}
      </div>

      <div className="grid gap-4 lg:grid-cols-[2fr_1fr]">
        <Karte
          stilUrl={stilUrl}
          mittelpunkt={mittelpunkt}
          zoom={zoom}
          punkte={punkte}
          beiKartenklick={(ort) => {
            setUmkreisPunkt(ort);
            setGewaehlt(null);
          }}
          hoehe="68vh"
        />

        <div className="space-y-4">
          {/* Was gerade angetippt wurde. */}
          {gewaehlterHydrant && (
            <Card data-testid="hydrant-details">
              <CardHeader>
                <CardTitle>
                  {gewaehlterHydrant.bezeichnung ?? TYP_TEXT[gewaehlterHydrant.typ]}
                </CardTitle>
                <CardDescription>
                  {TYP_TEXT[gewaehlterHydrant.typ]} · {STATUS_TEXT[gewaehlterHydrant.status]}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-1 text-sm">
                {gewaehlterHydrant.strasse && (
                  <p>
                    {gewaehlterHydrant.strasse} {gewaehlterHydrant.hausnummer ?? ""}
                  </p>
                )}
                <p className="tabellenzahlen">
                  {gewaehlterHydrant.nennweite ? `DN ${gewaehlterHydrant.nennweite}` : "Nennweite unbekannt"}
                  {gewaehlterHydrant.durchfluss
                    ? ` · ${gewaehlterHydrant.durchfluss} l/min`
                    : ""}
                </p>
                <p className="text-[var(--muted-foreground)]">
                  {gewaehlterHydrant.letztePruefung
                    ? `zuletzt geprüft ${alsDatum(gewaehlterHydrant.letztePruefung)}`
                    : "noch nie geprüft"}
                </p>
                {gewaehlterHydrant.hinweis && <p>{gewaehlterHydrant.hinweis}</p>}
              </CardContent>
            </Card>
          )}

          {gewaehltesObjekt && (
            <Card data-testid="objekt-details">
              <CardHeader>
                <CardTitle>{gewaehltesObjekt.name}</CardTitle>
                <CardDescription>
                  {gewaehltesObjekt.strasse} {gewaehltesObjekt.hausnummer}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-2 text-sm">
                {gewaehltesObjekt.gefahren && (
                  <p>
                    <strong>Gefahren:</strong> {gewaehltesObjekt.gefahren}
                  </p>
                )}
                <Button variant="outline" size="sm" asChild>
                  <Link href={`/karte/objekte/${gewaehltesObjekt.id}`}>Feuerwehrplan öffnen</Link>
                </Button>
              </CardContent>
            </Card>
          )}

          {/* Umkreissuche */}
          <Card>
            <CardHeader>
              <CardTitle>In der Nähe</CardTitle>
              <CardDescription>
                {umkreisPunkt
                  ? "Löschwasser im Umkreis von 500 Metern, nach Entfernung."
                  : "In die Karte tippen — dann steht hier, was in 500 Metern erreichbar ist."}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {umkreisPunkt && (umkreis.data?.length ?? 0) === 0 && !umkreis.isPending && (
                <p className="text-sm text-[var(--gesperrt)]">
                  Kein Löschwasser im Umkreis von 500 Metern. Das ist eine Angabe, die man vor
                  dem Einsatz wissen will, nicht währenddessen.
                </p>
              )}

              <ul className="space-y-2 text-sm">
                {umkreis.data?.map((treffer) => (
                  <li key={treffer.id} className="flex items-start justify-between gap-3">
                    <span>
                      <strong>{treffer.bezeichnung ?? TYP_TEXT[treffer.typ]}</strong>
                      <span className="block text-[var(--muted-foreground)]">
                        {treffer.strasse ?? "ohne Straße"}
                        {treffer.nennweite ? ` · DN ${treffer.nennweite}` : ""}
                        {treffer.durchfluss ? ` · ${treffer.durchfluss} l/min` : ""}
                      </span>
                    </span>
                    <span
                      className="tabellenzahlen whitespace-nowrap"
                      style={{ color: STATUS_FARBE[treffer.status] }}
                    >
                      {treffer.entfernung} m
                    </span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Bestand</CardTitle>
            </CardHeader>
            <CardContent className="grid grid-cols-3 gap-3 text-sm">
              <div>
                <p className="text-[var(--muted-foreground)]">gesamt</p>
                <p className="tabellenzahlen text-2xl font-semibold">
                  {kennzahlen.data?.gesamt ?? 0}
                </p>
              </div>
              <div>
                <p className="text-[var(--muted-foreground)]">defekt</p>
                <p className="tabellenzahlen text-2xl font-semibold text-[var(--gesperrt)]">
                  {kennzahlen.data?.defekt ?? 0}
                </p>
              </div>
              <div>
                <p className="text-[var(--muted-foreground)]">ungeprüft</p>
                <p className="tabellenzahlen text-2xl font-semibold text-[var(--pruefung-faellig)]">
                  {kennzahlen.data?.ungeprueft ?? 0}
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}