"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { de } from "@/lib/i18n/de";
import {
  setTemplateMerkmal,
  removeTemplateMerkmal,
} from "../../../_actions/templates";

export interface MerkmalOptionLite {
  wert: string;
  label: string;
}
export interface MerkmalLite {
  id: string;
  name: string;
  typ: "number" | "enum" | "boolean" | "text";
  einheit: string | null;
  optionen: MerkmalOptionLite[];
}
export interface TemplateMerkmalRow {
  merkmalId: string;
  name: string;
  typ: MerkmalLite["typ"];
  einheit: string | null;
  vorgabewertNum: number | null;
  vorgabewertText: string | null;
  vorgabewertBool: boolean | null;
  pflicht: boolean;
  optionen: MerkmalOptionLite[];
}

const selectCls =
  "h-9 rounded border border-rand bg-white px-2 text-sm text-anthrazit focus:outline-none focus:ring-2 focus:ring-navy";

function vorgabewertLabel(r: TemplateMerkmalRow): string {
  if (r.typ === "number") return r.vorgabewertNum?.toString() ?? "–";
  if (r.typ === "boolean")
    return r.vorgabewertBool == null
      ? "–"
      : r.vorgabewertBool
        ? de.search.ja
        : de.search.nein;
  if (r.typ === "enum") {
    const opt = r.optionen.find((o) => o.wert === r.vorgabewertText);
    return opt?.label ?? r.vorgabewertText ?? "–";
  }
  return r.vorgabewertText ?? "–";
}

/**
 * Editor der Vorgabe-Merkmale einer Vorlage: zuordnen, Vorgabewert je Typ
 * (vorgabewert_num/_text/_bool) erfassen, Pflicht-Flag, entfernen. Alle Aktionen
 * über guarded + Zod-validierte Server-Actions.
 */
export function TemplateMerkmaleEditor({
  templateId,
  rows,
  alleMerkmale,
}: {
  templateId: string;
  rows: TemplateMerkmalRow[];
  alleMerkmale: MerkmalLite[];
}) {
  const router = useRouter();
  const [error, setError] = React.useState<string | null>(null);
  const [pending, startTransition] = React.useTransition();
  const [addId, setAddId] = React.useState("");

  const zugeordnet = new Set(rows.map((r) => r.merkmalId));
  const verfuegbar = alleMerkmale.filter((m) => !zugeordnet.has(m.id));

  function run(fn: () => Promise<{ ok: boolean; error?: string }>) {
    setError(null);
    startTransition(async () => {
      const res = await fn();
      if (!res.ok) {
        setError(res.error ?? de.fehler.allgemein);
        return;
      }
      router.refresh();
    });
  }

  function saveVorgabe(
    m: MerkmalLite,
    value: { num?: number | null; text?: string | null; bool?: boolean | null },
    pflicht: boolean,
  ) {
    run(() =>
      setTemplateMerkmal({
        templateId,
        merkmal: {
          merkmalId: m.id,
          vorgabewertNum: value.num ?? null,
          vorgabewertText: value.text ?? undefined,
          vorgabewertBool: value.bool ?? null,
          pflicht,
        },
      }),
    );
  }

  return (
    <section className="space-y-3">
      <h2 className="font-display text-lg text-navy">{de.admin.navMerkmale}</h2>
      {error && <p className="text-sm text-signal">{error}</p>}

      {rows.length === 0 ? (
        <p className="rounded border border-rand bg-white px-4 py-4 text-sm text-anthrazit/60">
          {de.admin.keineEintraege}
        </p>
      ) : (
        <ul className="space-y-2">
          {rows.map((r) => (
            <li
              key={r.merkmalId}
              className="flex flex-wrap items-center justify-between gap-3 rounded border border-rand bg-white px-4 py-3"
            >
              <div>
                <span className="font-medium text-anthrazit">{r.name}</span>
                {r.einheit && (
                  <span className="ml-1 text-anthrazit/60">({r.einheit})</span>
                )}
                <span className="ml-3 text-sm text-anthrazit/60">
                  {de.admin.vorgabewert}: {vorgabewertLabel(r)}
                  {r.pflicht ? ` · ${de.admin.pflicht}` : ""}
                </span>
              </div>
              <Button
                variant="ghost"
                size="sm"
                disabled={pending}
                onClick={() =>
                  run(() =>
                    removeTemplateMerkmal({
                      templateId,
                      merkmalId: r.merkmalId,
                    }),
                  )
                }
              >
                {de.admin.loeschen}
              </Button>
            </li>
          ))}
        </ul>
      )}

      {verfuegbar.length > 0 && (
        <div className="flex flex-wrap items-end gap-2 rounded border border-rand/70 bg-white p-3">
          <select
            className={selectCls}
            value={addId}
            onChange={(e) => setAddId(e.target.value)}
          >
            <option value="">{de.admin.navMerkmale} …</option>
            {verfuegbar.map((m) => (
              <option key={m.id} value={m.id}>
                {m.name}
              </option>
            ))}
          </select>
          <Button
            size="sm"
            disabled={pending || !addId}
            onClick={() => {
              const m = alleMerkmale.find((x) => x.id === addId);
              if (!m) return;
              saveVorgabe(m, {}, false);
              setAddId("");
            }}
          >
            {de.admin.anlegen}
          </Button>
          <span className="text-xs text-anthrazit/50">
            Vorgabewerte nach dem Hinzufügen über erneutes Speichern setzen.
          </span>
        </div>
      )}

      <VorgabewertHinweis />
    </section>
  );
}

/** Begleittext zu den drei typisierten Vorgabewert-Spalten. */
function VorgabewertHinweis() {
  return (
    <p className="text-xs text-anthrazit/50">
      Vorgabewerte werden je Typ in eine der Spalten vorgabewert_num /
      vorgabewert_text / vorgabewert_bool geschrieben.
    </p>
  );
}
