Speisekarte/components/DesignEditor.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { formatMessage } from "@/lib/i18n/shared";
import { DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types";
import { useDict } from "@/components/i18n/LocaleProvider";

type AssetKind = "logo" | "favicon";

export default function DesignEditor() {
  const router = useRouter();
  const dict = useDict();
  const colorLabels: Record<string, string> = {
    primary: dict.designEditor.colorPrimary,
    primaryDark: dict.designEditor.colorPrimaryDark,
    accent: dict.designEditor.colorAccent,
    headerText: dict.designEditor.colorHeaderText,
    rowBg: dict.designEditor.colorRowBg,
    rowBgAlt: dict.designEditor.colorRowBgAlt,
    addBtn: dict.designEditor.colorAddBtn,
    deleteBtn: dict.designEditor.colorDeleteBtn,
  };
  const [colors, setColors] = useState<Record<string, string>>(DEFAULT_COLORS);
  const [logoPath, setLogoPath] = useState<string | null>(null);
  const [faviconPath, setFaviconPath] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [info, setInfo] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    const res = await fetch("/api/settings");
    if (!res.ok) {
      setError(formatMessage(dict.designEditor.loadError, { message: String(res.status) }));
      return;
    }
    const data = await res.json();
    setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) });
    setLogoPath(data?.logo_path ?? null);
    setFaviconPath(data?.favicon_path ?? null);
  }, [dict]);

  useEffect(() => {
    load();
  }, [load]);

  async function saveColors() {
    setBusy(true);
    setError(null);
    setInfo(null);
    const res = await fetch("/api/settings", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ colors }),
    });
    if (!res.ok)
      setError(formatMessage(dict.designEditor.saveError, { message: String(res.status) }));
    else {
      setInfo(dict.designEditor.colorsSaved);
      router.refresh();
    }
    setBusy(false);
  }

  async function resetColors() {
    setColors(DEFAULT_COLORS);
  }

  async function uploadAsset(kind: AssetKind, e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file) return;
    if (!/^image\//.test(file.type)) {
      setError(dict.designEditor.invalidImage);
      return;
    }
    setBusy(true);
    setError(null);
    setInfo(null);

    const formData = new FormData();
    formData.append("kind", kind);
    formData.append("file", file);
    const res = await fetch("/api/admin/branding", { method: "POST", body: formData });
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setError(
        formatMessage(dict.designEditor.uploadError, {
          message: data.error ?? String(res.status),
        })
      );
      setBusy(false);
      return;
    }
    const { path } = await res.json();

    if (kind === "logo") setLogoPath(path);
    else setFaviconPath(path);
    setInfo(kind === "logo" ? dict.designEditor.logoUpdated : dict.designEditor.faviconUpdated);
    router.refresh();
    setBusy(false);
  }

  async function removeAsset(kind: AssetKind) {
    const path = kind === "logo" ? logoPath : faviconPath;
    if (!path) return;
    if (
      !window.confirm(
        kind === "logo"
          ? dict.designEditor.confirmRemoveLogo
          : dict.designEditor.confirmRemoveFavicon
      )
    )
      return;
    setBusy(true);
    setError(null);
    const res = await fetch("/api/admin/branding", {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ kind }),
    });
    if (!res.ok) {
      setError(formatMessage(dict.designEditor.saveError, { message: String(res.status) }));
    } else {
      if (kind === "logo") setLogoPath(null);
      else setFaviconPath(null);
      setInfo(kind === "logo" ? dict.designEditor.logoRemoved : dict.designEditor.faviconRemoved);
      router.refresh();
    }
    setBusy(false);
  }

  const currentLogo = logoUrl(logoPath);
  const currentFavicon = faviconUrl(faviconPath);

  return (
    <div className="max-w-3xl space-y-6">
      <h1 className="text-xl font-bold text-[var(--c-primary)]">
        {dict.designEditor.title}
      </h1>

      {error && (
        <p className="text-sm text-[var(--c-del)]" role="alert">
          {error}
        </p>
      )}
      {info && <p className="text-sm text-green-700">{info}</p>}

      <section className="card">
        <h2 className="font-semibold mb-3">{dict.designEditor.logoTitle}</h2>
        <p className="text-sm text-gray-600 mb-3">{dict.designEditor.logoHint}</p>
        {currentLogo ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={currentLogo}
            alt="Logo"
            className="h-20 object-contain mb-3 border border-gray-200 rounded p-2"
          />
        ) : (
          <p className="text-sm text-gray-400 mb-3">{dict.designEditor.logoNone}</p>
        )}
        <div className="flex gap-2 items-center">
          <label className="btn btn-primary cursor-pointer">
            {dict.designEditor.logoUpload}
            <input
              type="file"
              accept="image/png,image/jpeg,image/webp,image/gif,image/x-icon"
              className="hidden"
              onChange={(e) => uploadAsset("logo", e)}
              disabled={busy}
            />
          </label>
          {currentLogo && (
            <button
              type="button"
              className="btn btn-del"
              onClick={() => removeAsset("logo")}
              disabled={busy}
            >
              {dict.designEditor.logoRemove}
            </button>
          )}
        </div>
      </section>

      <section className="card">
        <h2 className="font-semibold mb-3">{dict.designEditor.faviconTitle}</h2>
        <p className="text-sm text-gray-600 mb-3">{dict.designEditor.faviconHint}</p>
        {currentFavicon ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={currentFavicon}
            alt="Favicon"
            className="h-10 w-10 object-contain mb-3 border border-gray-200 rounded p-1"
          />
        ) : (
          <p className="text-sm text-gray-400 mb-3">{dict.designEditor.faviconNone}</p>
        )}
        <div className="flex gap-2 items-center">
          <label className="btn btn-primary cursor-pointer">
            {dict.designEditor.faviconUpload}
            <input
              type="file"
              accept="image/png,image/jpeg,image/webp,image/gif,image/x-icon"
              className="hidden"
              onChange={(e) => uploadAsset("favicon", e)}
              disabled={busy}
            />
          </label>
          {currentFavicon && (
            <button
              type="button"
              className="btn btn-del"
              onClick={() => removeAsset("favicon")}
              disabled={busy}
            >
              {dict.designEditor.faviconRemove}
            </button>
          )}
        </div>
      </section>

      <section className="card">
        <h2 className="font-semibold mb-3">{dict.designEditor.colorsTitle}</h2>
        <div className="grid gap-3 sm:grid-cols-2">
          {Object.entries(colorLabels).map(([key, label]) => (
            <label key={key} className="flex items-center gap-3 text-sm">
              <input
                type="color"
                value={colors[key] ?? "#000000"}
                onChange={(e) =>
                  setColors({ ...colors, [key]: e.target.value })
                }
                className="h-9 w-14 cursor-pointer border border-gray-300 rounded"
              />
              {label}
            </label>
          ))}
        </div>
        <div className="flex gap-2 mt-4">
          <button
            type="button"
            className="btn btn-add"
            onClick={saveColors}
            disabled={busy}
          >
            {dict.designEditor.colorsSave}
          </button>
          <button
            type="button"
            className="btn btn-neutral"
            onClick={resetColors}
            disabled={busy}
          >
            {dict.designEditor.colorsReset}
          </button>
        </div>
      </section>
    </div>
  );
}