"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 { de } from "@/lib/i18n/de";
import { createMerkmal, updateMerkmal } from "../../_actions/merkmale";

export type MerkmalTyp = "number" | "enum" | "boolean" | "text";
export type Geltung = "vehicle" | "equipment" | "both";

export interface MerkmalOption {
  wert: string;
  label: string;
}

export interface MerkmalEditorValue {
  id?: string;
  name: string;
  typ: MerkmalTyp;
  einheit?: string;
  geltungsbereich: Geltung;
  optionen: MerkmalOption[];
}

const TYP_LABELS: Record<MerkmalTyp, string> = {
  number: "Zahl",
  enum: "Auswahl",
  boolean: "Ja/Nein",
  text: "Text",
};
const GELTUNG_LABELS: Record<Geltung, string> = {
  vehicle: "Fahrzeug",
  equipment: "Gerät",
  both: "beide",
};

const selectCls =
  "flex h-10 w-full rounded border border-rand bg-white px-3 py-2 text-sm text-anthrazit focus:outline-none focus:ring-2 focus:ring-navy";

/**
 * Client-Editor für ein Merkmal. Validiert clientseitig minimal (Enum braucht
 * Optionen) und ruft die serverseitige (guarded + Zod-validierte) Action. Die
 * autoritative Validierung passiert serverseitig.
 */
export function MerkmalEditor({
  initial,
  onDone,
}: {
  initial?: MerkmalEditorValue;
  onDone?: () => void;
}) {
  const router = useRouter();
  const [name, setName] = React.useState(initial?.name ?? "");
  const [typ, setTyp] = React.useState<MerkmalTyp>(initial?.typ ?? "number");
  const [einheit, setEinheit] = React.useState(initial?.einheit ?? "");
  const [geltung, setGeltung] = React.useState<Geltung>(
    initial?.geltungsbereich ?? "vehicle",
  );
  const [optionen, setOptionen] = React.useState<MerkmalOption[]>(
    initial?.optionen ?? [],
  );
  const [error, setError] = React.useState<string | null>(null);
  const [pending, startTransition] = React.useTransition();

  function setOption(i: number, patch: Partial<MerkmalOption>) {
    setOptionen((prev) =>
      prev.map((o, idx) => (idx === i ? { ...o, ...patch } : o)),
    );
  }

  function submit() {
    setError(null);
    if (typ === "enum" && optionen.filter((o) => o.wert.trim()).length === 0) {
      setError(de.admin.optionen + ": " + "mindestens eine erforderlich.");
      return;
    }
    const payload = {
      ...(initial?.id ? { id: initial.id } : {}),
      name,
      typ,
      einheit: einheit || undefined,
      geltungsbereich: geltung,
      optionen: typ === "enum" ? optionen.filter((o) => o.wert.trim()) : [],
    };
    startTransition(async () => {
      const res = initial?.id
        ? await updateMerkmal(payload)
        : await createMerkmal(payload);
      if (!res.ok) {
        setError(res.error);
        return;
      }
      router.refresh();
      onDone?.();
    });
  }

  return (
    <div className="space-y-3 rounded border border-rand bg-white p-4">
      <div className="grid gap-3 sm:grid-cols-2">
        <label className="text-sm">
          <span className="mb-1 block font-medium text-anthrazit/70">
            {de.admin.name}
          </span>
          <Input value={name} onChange={(e) => setName(e.target.value)} />
        </label>
        <label className="text-sm">
          <span className="mb-1 block font-medium text-anthrazit/70">
            {de.admin.typ}
          </span>
          <select
            className={selectCls}
            value={typ}
            onChange={(e) => setTyp(e.target.value as MerkmalTyp)}
          >
            {(Object.keys(TYP_LABELS) as MerkmalTyp[]).map((k) => (
              <option key={k} value={k}>
                {TYP_LABELS[k]}
              </option>
            ))}
          </select>
        </label>
        <label className="text-sm">
          <span className="mb-1 block font-medium text-anthrazit/70">
            {de.admin.einheit}
          </span>
          <Input
            value={einheit}
            onChange={(e) => setEinheit(e.target.value)}
            placeholder="z. B. l, kg"
          />
        </label>
        <label className="text-sm">
          <span className="mb-1 block font-medium text-anthrazit/70">
            {de.admin.geltungsbereich}
          </span>
          <select
            className={selectCls}
            value={geltung}
            onChange={(e) => setGeltung(e.target.value as Geltung)}
          >
            {(Object.keys(GELTUNG_LABELS) as Geltung[]).map((k) => (
              <option key={k} value={k}>
                {GELTUNG_LABELS[k]}
              </option>
            ))}
          </select>
        </label>
      </div>

      {typ === "enum" && (
        <fieldset className="space-y-2 rounded border border-rand/70 p-3">
          <legend className="px-1 text-sm font-medium text-anthrazit/70">
            {de.admin.optionen}
          </legend>
          {optionen.map((o, i) => (
            <div key={i} className="flex gap-2">
              <Input
                value={o.wert}
                onChange={(e) => setOption(i, { wert: e.target.value })}
                placeholder="wert"
              />
              <Input
                value={o.label}
                onChange={(e) => setOption(i, { label: e.target.value })}
                placeholder="Bezeichnung"
              />
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={() =>
                  setOptionen((prev) => prev.filter((_, idx) => idx !== i))
                }
              >
                ×
              </Button>
            </div>
          ))}
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={() =>
              setOptionen((prev) => [...prev, { wert: "", label: "" }])
            }
          >
            {de.admin.optionHinzufuegen}
          </Button>
        </fieldset>
      )}

      {error && <p className="text-sm text-signal">{error}</p>}

      <div className="flex gap-2">
        <Button type="button" onClick={submit} disabled={pending}>
          {de.admin.speichern}
        </Button>
        {onDone && (
          <Button type="button" variant="ghost" onClick={onDone}>
            {de.admin.abbrechen}
          </Button>
        )}
      </div>
    </div>
  );
}
