"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { de } from "@/lib/i18n/de";
import { updateBrigadeProfile } from "@/server/actions/brigade";

export interface BrigadeProfileInitial {
  strasse: string;
  plz: string;
  ort: string;
  telefon: string;
  email: string;
  wehrfuehrer: string;
  funkrufnameSchema: string;
}

/**
 * Profilformular der eigenen Wehr. Speichert Stamm-/Kontaktdaten; die Server-
 * Action geokodiert die Adresse inline. Schlägt das Geocoding fehl, werden die
 * Daten dennoch gespeichert und ein Warnhinweis angezeigt.
 */
export function BrigadeProfileForm({
  initial,
}: {
  initial: BrigadeProfileInitial;
}) {
  const router = useRouter();
  const [error, setError] = React.useState<string | null>(null);
  const [info, setInfo] = React.useState<{ warnung: boolean } | null>(null);
  const [pending, startTransition] = React.useTransition();

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setInfo(null);
    const fd = new FormData(e.currentTarget);
    const payload = {
      strasse: String(fd.get("strasse") ?? ""),
      plz: String(fd.get("plz") ?? ""),
      ort: String(fd.get("ort") ?? ""),
      telefon: String(fd.get("telefon") ?? ""),
      email: String(fd.get("email") ?? ""),
      wehrfuehrer: String(fd.get("wehrfuehrer") ?? ""),
      funkrufnameSchema: String(fd.get("funkrufnameSchema") ?? ""),
    };
    startTransition(async () => {
      const res = await updateBrigadeProfile(payload);
      if (!res.ok) {
        setError(res.error);
        return;
      }
      setInfo({ warnung: res.geocodeWarnung });
      router.refresh();
    });
  }

  return (
    <form onSubmit={onSubmit} className="max-w-2xl space-y-5">
      <div className="grid gap-1.5 sm:grid-cols-2 sm:gap-4">
        <div className="grid gap-1.5 sm:col-span-2">
          <Label htmlFor="strasse">{de.verwaltung.strasse}</Label>
          <Input id="strasse" name="strasse" required defaultValue={initial.strasse} />
        </div>
        <div className="grid gap-1.5">
          <Label htmlFor="plz">{de.verwaltung.plz}</Label>
          <Input id="plz" name="plz" required defaultValue={initial.plz} />
        </div>
        <div className="grid gap-1.5">
          <Label htmlFor="ort">{de.verwaltung.ort}</Label>
          <Input id="ort" name="ort" required defaultValue={initial.ort} />
        </div>
        <div className="grid gap-1.5">
          <Label htmlFor="telefon">{de.verwaltung.telefon}</Label>
          <Input id="telefon" name="telefon" defaultValue={initial.telefon} />
        </div>
        <div className="grid gap-1.5">
          <Label htmlFor="email">{de.verwaltung.email}</Label>
          <Input id="email" name="email" type="email" defaultValue={initial.email} />
        </div>
        <div className="grid gap-1.5">
          <Label htmlFor="wehrfuehrer">{de.verwaltung.wehrfuehrer}</Label>
          <Input id="wehrfuehrer" name="wehrfuehrer" defaultValue={initial.wehrfuehrer} />
        </div>
        <div className="grid gap-1.5">
          <Label htmlFor="funkrufnameSchema">
            {de.verwaltung.funkrufnameSchema}
          </Label>
          <Input
            id="funkrufnameSchema"
            name="funkrufnameSchema"
            defaultValue={initial.funkrufnameSchema}
          />
        </div>
      </div>

      {error ? (
        <p role="alert" className="text-sm text-signal">
          {error}
        </p>
      ) : null}
      {info ? (
        <p
          className={
            info.warnung
              ? "rounded border border-wartung/40 bg-wartung/5 px-3 py-2 text-sm text-wartung"
              : "rounded border border-bereit/40 bg-bereit/5 px-3 py-2 text-sm text-anthrazit"
          }
        >
          {info.warnung
            ? de.verwaltung.geocodeWarnung
            : `${de.verwaltung.profilGespeichert} ${de.verwaltung.geocodeOk}`}
        </p>
      ) : null}

      <Button type="submit" disabled={pending}>
        {de.verwaltung.speichern}
      </Button>
    </form>
  );
}
