Speisekarte/components/DishManager.tsx

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { createClient } from "@/lib/supabase/client";
import { formatPrice } from "@/lib/menu";
import type { Dish } from "@/lib/types";

interface DishForm {
  id: string | null; // null = neues Gericht
  name: string;
  price: string;
}

const EMPTY_FORM: DishForm = { id: null, name: "", price: "" };

export default function DishManager() {
  const supabase = useMemo(() => createClient(), []);
  const [dishes, setDishes] = useState<Dish[]>([]);
  const [form, setForm] = useState<DishForm | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [bulkBusy, setBulkBusy] = useState(false);

  const load = useCallback(async () => {
    const { data, error } = await supabase
      .from("dishes")
      .select("*")
      .order("name");
    if (error) setError(`Laden fehlgeschlagen: ${error.message}`);
    else setDishes(data as Dish[]);
    setLoading(false);
  }, [supabase]);

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

  async function save(e: React.FormEvent) {
    e.preventDefault();
    if (!form) return;
    setError(null);
    const price = Number.parseFloat(form.price.replace(",", "."));
    if (Number.isNaN(price) || price < 0) {
      setError("Bitte einen gültigen Preis angeben, z. B. 3,50");
      return;
    }
    const payload = { name: form.name.trim(), price };
    const { error } = form.id
      ? await supabase.from("dishes").update(payload).eq("id", form.id)
      : await supabase.from("dishes").insert(payload);
    if (error) {
      setError(`Speichern fehlgeschlagen: ${error.message}`);
      return;
    }
    setForm(null);
    await load();
  }

  async function remove(dish: Dish) {
    if (
      !window.confirm(
        `„${dish.name}“ wirklich löschen? Das Gericht wird auch aus allen Wochenplänen entfernt.`
      )
    )
      return;
    const { error } = await supabase.from("dishes").delete().eq("id", dish.id);
    if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
    setSelected((prev) => {
      const next = new Set(prev);
      next.delete(dish.id);
      return next;
    });
    await load();
  }

  function toggleOne(id: string) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function toggleAll() {
    setSelected((prev) =>
      prev.size === dishes.length ? new Set() : new Set(dishes.map((d) => d.id))
    );
  }

  async function removeSelected() {
    if (selected.size === 0) return;
    if (
      !window.confirm(
        `${selected.size} Gericht(e) wirklich löschen? Sie werden auch aus allen Wochenplänen entfernt.`
      )
    )
      return;
    setBulkBusy(true);
    setError(null);
    const { error } = await supabase
      .from("dishes")
      .delete()
      .in("id", Array.from(selected));
    if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
    setSelected(new Set());
    setBulkBusy(false);
    await load();
  }

  const allSelected = dishes.length > 0 && selected.size === dishes.length;

  return (
    <div className="max-w-3xl">
      <div className="flex items-center gap-3 mb-4">
        <h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
          Gerichte
        </h1>
        <button
          type="button"
          className="btn btn-add"
          onClick={() => setForm(EMPTY_FORM)}
        >
          Neues Gericht
        </button>
      </div>

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

      {form && (
        <form onSubmit={save} className="card mb-4 space-y-3">
          <h2 className="font-semibold">
            {form.id ? "Gericht bearbeiten" : "Neues Gericht"}
          </h2>
          <div>
            <label className="label" htmlFor="dish-name">
              Bezeichnung
            </label>
            <input
              id="dish-name"
              className="input"
              value={form.name}
              onChange={(e) => setForm({ ...form, name: e.target.value })}
              required
            />
          </div>
          <div className="max-w-40">
            <label className="label" htmlFor="dish-price">
              Preis in €
            </label>
            <input
              id="dish-price"
              className="input"
              inputMode="decimal"
              placeholder="3,50"
              value={form.price}
              onChange={(e) => setForm({ ...form, price: e.target.value })}
              required
            />
          </div>
          <div className="flex gap-2">
            <button type="submit" className="btn btn-add">
              Speichern
            </button>
            <button
              type="button"
              className="btn btn-neutral"
              onClick={() => setForm(null)}
            >
              Abbrechen
            </button>
          </div>
        </form>
      )}

      {loading ? (
        <p className="text-gray-500">Lade Gerichte…</p>
      ) : (
        <>
          {dishes.length > 0 && (
            <div className="flex items-center gap-3 mb-2 text-sm">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={allSelected}
                  onChange={toggleAll}
                />
                Alle auswählen
              </label>
              <span className="text-gray-500">
                {selected.size} ausgewählt
              </span>
              <button
                type="button"
                className="btn btn-del ml-auto"
                onClick={removeSelected}
                disabled={selected.size === 0 || bulkBusy}
              >
                Ausgewählte löschen{selected.size > 0 ? ` (${selected.size})` : ""}
              </button>
            </div>
          )}
          <ul className="divide-y divide-gray-200 border border-gray-200 rounded-md bg-white">
            {dishes.map((dish) => (
              <li key={dish.id} className="flex items-center gap-3 px-4 py-2">
                <input
                  type="checkbox"
                  checked={selected.has(dish.id)}
                  onChange={() => toggleOne(dish.id)}
                  aria-label={`${dish.name} auswählen`}
                />
                <span className="mr-auto">
                  <span className="font-semibold">{dish.name}</span>{" "}
                  <span className="text-gray-500">– {formatPrice(dish.price)}</span>
                </span>
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() =>
                    setForm({
                      id: dish.id,
                      name: dish.name,
                      price: String(dish.price).replace(".", ","),
                    })
                  }
                >
                  Bearbeiten
                </button>
                <button
                  type="button"
                  className="btn btn-del"
                  onClick={() => remove(dish)}
                >
                  Löschen
                </button>
              </li>
            ))}
            {dishes.length === 0 && (
              <li className="px-4 py-3 text-gray-500">
                Noch keine Gerichte angelegt.
              </li>
            )}
          </ul>
        </>
      )}
    </div>
  );
}