Speisekarte/components/DesignEditor.tsx

"use client";

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

type AssetKind = "logo" | "favicon";

const ASSET_COLUMN: Record<AssetKind, "logo_path" | "favicon_path"> = {
  logo: "logo_path",
  favicon: "favicon_path",
};

export default function DesignEditor() {
  const supabase = useMemo(() => createClient(), []);
  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 { data, error } = await supabase
      .from("settings")
      .select("colors, logo_path, favicon_path")
      .eq("id", 1)
      .maybeSingle();
    if (error) {
      setError(formatMessage(dict.designEditor.loadError, { message: error.message }));
      return;
    }
    setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) });
    setLogoPath(data?.logo_path ?? null);
    setFaviconPath(data?.favicon_path ?? null);
  }, [supabase, dict]);

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

  async function saveColors() {
    setBusy(true);
    setError(null);
    setInfo(null);
    const { error } = await supabase
      .from("settings")
      .update({ colors })
      .eq("id", 1);
    if (error)
      setError(formatMessage(dict.designEditor.saveError, { message: error.message }));
    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 oldPath = kind === "logo" ? logoPath : faviconPath;
    const ext = file.name.split(".").pop()?.toLowerCase() ?? "png";
    const path = `${kind}-${Date.now()}.${ext}`;
    const { error: uploadError } = await supabase.storage
      .from("branding")
      .upload(path, file, { contentType: file.type });
    if (uploadError) {
      setError(formatMessage(dict.designEditor.uploadError, { message: uploadError.message }));
      setBusy(false);
      return;
    }

    const { error: settingsError } = await supabase
      .from("settings")
      .update({ [ASSET_COLUMN[kind]]: path })
      .eq("id", 1);
    if (settingsError) {
      setError(formatMessage(dict.designEditor.saveError, { message: settingsError.message }));
      setBusy(false);
      return;
    }
    if (oldPath) await supabase.storage.from("branding").remove([oldPath]);

    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 { error } = await supabase
      .from("settings")
      .update({ [ASSET_COLUMN[kind]]: null })
      .eq("id", 1);
    if (error) {
      setError(formatMessage(dict.designEditor.saveError, { message: error.message }));
    } else {
      await supabase.storage.from("branding").remove([path]);
      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/*"
              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/*"
              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>
  );
}