"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 { allradCode } from "@/lib/admin/codes";
import { addAlias, removeAlias } from "../../../_actions/templates";

export interface AliasRow {
  id: string;
  alias: string;
  bestaetigt: boolean;
}

/**
 * Editor der Such-/Anzeige-Aliasse einer Vorlage. Zeigt zusätzlich den
 * kanonischen Allrad-Hinweis (`allradCode(code)`), da Allrad eine Laufzeitregel
 * ist und NICHT als Alias gespeichert wird.
 */
export function AliasEditor({
  templateId,
  code,
  aliasse,
}: {
  templateId: string;
  code: string;
  aliasse: AliasRow[];
}) {
  const router = useRouter();
  const [neu, setNeu] = React.useState("");
  const [bestaetigt, setBestaetigt] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [pending, startTransition] = React.useTransition();

  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();
    });
  }

  return (
    <section className="space-y-3">
      <h2 className="font-display text-lg text-navy">{de.admin.aliasse}</h2>
      <p className="text-sm text-anthrazit/70">
        {de.admin.allradHinweis}:{" "}
        <span className="font-medium text-anthrazit">{allradCode(code)}</span>{" "}
        <span className="text-anthrazit/50">
          (Laufzeitregel, kein gespeicherter Alias)
        </span>
      </p>
      {error && <p className="text-sm text-signal">{error}</p>}

      {aliasse.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">
          {aliasse.map((a) => (
            <li
              key={a.id}
              className="flex items-center justify-between gap-3 rounded border border-rand bg-white px-4 py-2"
            >
              <span className="text-anthrazit">
                {a.alias}
                {a.bestaetigt && (
                  <span className="ml-2 rounded-sm bg-bereit/10 px-1.5 py-0.5 text-xs text-bereit">
                    {de.admin.bestaetigt}
                  </span>
                )}
              </span>
              <Button
                variant="ghost"
                size="sm"
                disabled={pending}
                onClick={() => run(() => removeAlias(a.id))}
              >
                {de.admin.loeschen}
              </Button>
            </li>
          ))}
        </ul>
      )}

      <div className="flex flex-wrap items-end gap-2 rounded border border-rand/70 bg-white p-3">
        <label className="text-sm">
          <span className="mb-1 block font-medium text-anthrazit/70">
            {de.admin.alias}
          </span>
          <Input value={neu} onChange={(e) => setNeu(e.target.value)} />
        </label>
        <label className="flex items-center gap-2 pb-2 text-sm text-anthrazit/70">
          <input
            type="checkbox"
            checked={bestaetigt}
            onChange={(e) => setBestaetigt(e.target.checked)}
          />
          {de.admin.bestaetigt}
        </label>
        <Button
          size="sm"
          disabled={pending || !neu.trim()}
          onClick={() => {
            run(() => addAlias({ templateId, alias: neu, bestaetigt }));
            setNeu("");
            setBestaetigt(false);
          }}
        >
          {de.admin.anlegen}
        </Button>
      </div>
    </section>
  );
}
