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 { COLOR_LABELS, DEFAULT_COLORS, logoUrl } from "@/lib/types";

export default function DesignEditor() {
  const supabase = useMemo(() => createClient(), []);
  const router = useRouter();
  const [colors, setColors] = useState<Record<string, string>>(DEFAULT_COLORS);
  const [logoPath, setLogoPath] = 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")
      .eq("id", 1)
      .maybeSingle();
    if (error) {
      setError(`Laden fehlgeschlagen: ${error.message}`);
      return;
    }
    setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) });
    setLogoPath(data?.logo_path ?? null);
  }, [supabase]);

  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(`Speichern fehlgeschlagen: ${error.message}`);
    else {
      setInfo("Farben gespeichert.");
      router.refresh();
    }
    setBusy(false);
  }

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

  async function uploadLogo(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file) return;
    if (!/^image\//.test(file.type)) {
      setError("Bitte eine Bilddatei auswählen (PNG, JPG, SVG, WebP).");
      return;
    }
    setBusy(true);
    setError(null);
    setInfo(null);

    const ext = file.name.split(".").pop()?.toLowerCase() ?? "png";
    const path = `logo-${Date.now()}.${ext}`;
    const { error: uploadError } = await supabase.storage
      .from("branding")
      .upload(path, file, { contentType: file.type });
    if (uploadError) {
      setError(`Upload fehlgeschlagen: ${uploadError.message}`);
      setBusy(false);
      return;
    }

    const oldPath = logoPath;
    const { error: settingsError } = await supabase
      .from("settings")
      .update({ logo_path: path })
      .eq("id", 1);
    if (settingsError) {
      setError(`Speichern fehlgeschlagen: ${settingsError.message}`);
      setBusy(false);
      return;
    }
    if (oldPath) {
      await supabase.storage.from("branding").remove([oldPath]);
    }
    setLogoPath(path);
    setInfo("Logo aktualisiert.");
    router.refresh();
    setBusy(false);
  }

  async function removeLogo() {
    if (!logoPath) return;
    if (!window.confirm("Logo wirklich entfernen?")) return;
    setBusy(true);
    setError(null);
    const { error } = await supabase
      .from("settings")
      .update({ logo_path: null })
      .eq("id", 1);
    if (error) {
      setError(`Speichern fehlgeschlagen: ${error.message}`);
    } else {
      await supabase.storage.from("branding").remove([logoPath]);
      setLogoPath(null);
      setInfo("Logo entfernt.");
      router.refresh();
    }
    setBusy(false);
  }

  const currentLogo = logoUrl(logoPath);

  return (
    <div className="max-w-3xl space-y-6">
      <h1 className="text-xl font-bold text-[var(--c-primary)]">Design</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">Logo</h2>
        <p className="text-sm text-gray-600 mb-3">
          Das Logo wird zentriert über der Speisekarte angezeigt.
        </p>
        {currentLogo ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={currentLogo}
            alt="Aktuelles Logo"
            className="h-20 object-contain mb-3 border border-gray-200 rounded p-2"
          />
        ) : (
          <p className="text-sm text-gray-400 mb-3">Kein Logo hinterlegt.</p>
        )}
        <div className="flex gap-2 items-center">
          <label className="btn btn-primary cursor-pointer">
            Logo hochladen
            <input
              type="file"
              accept="image/*"
              className="hidden"
              onChange={uploadLogo}
              disabled={busy}
            />
          </label>
          {currentLogo && (
            <button
              type="button"
              className="btn btn-del"
              onClick={removeLogo}
              disabled={busy}
            >
              Logo entfernen
            </button>
          )}
        </div>
      </section>

      <section className="card">
        <h2 className="font-semibold mb-3">Farbgebung</h2>
        <div className="grid gap-3 sm:grid-cols-2">
          {Object.entries(COLOR_LABELS).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}
          >
            Farben speichern
          </button>
          <button
            type="button"
            className="btn btn-neutral"
            onClick={resetColors}
            disabled={busy}
          >
            Auf Standard zurücksetzen
          </button>
        </div>
      </section>
    </div>
  );
}