Speisekarte/components/SuggestionReview.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import { formatMessage } from "@/lib/i18n/shared";
import { useDict } from "@/components/i18n/LocaleProvider";
import type { DishSuggestion } from "@/lib/types";

export default function SuggestionReview() {
  const dict = useDict();
  const [items, setItems] = useState<DishSuggestion[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [info, setInfo] = useState<string | null>(null);
  const [busyId, setBusyId] = useState<string | null>(null);

  const load = useCallback(async () => {
    const res = await fetch("/api/dish-suggestions");
    if (!res.ok)
      setError(formatMessage(dict.suggestions.loadError, { message: String(res.status) }));
    else setItems(await res.json());
    setLoading(false);
  }, [dict]);

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

  async function accept(item: DishSuggestion) {
    setBusyId(item.id);
    setError(null);
    setInfo(null);
    const res = await fetch(`/api/dish-suggestions/${item.id}/accept`, { method: "POST" });
    if (!res.ok) {
      setError(formatMessage(dict.suggestions.actionError, { message: String(res.status) }));
      setBusyId(null);
      return;
    }
    setInfo(dict.suggestions.accepted);
    setBusyId(null);
    await load();
  }

  async function reject(item: DishSuggestion) {
    if (!window.confirm(formatMessage(dict.suggestions.confirmReject, { name: item.name })))
      return;
    setBusyId(item.id);
    setError(null);
    setInfo(null);
    const res = await fetch(`/api/dish-suggestions/${item.id}`, { method: "DELETE" });
    if (!res.ok) {
      setError(formatMessage(dict.suggestions.actionError, { message: String(res.status) }));
    } else {
      setInfo(dict.suggestions.rejected);
    }
    setBusyId(null);
    await load();
  }

  return (
    <div className="max-w-3xl">
      <h1 className="text-xl font-bold text-[var(--c-primary)] mb-4">
        {dict.suggestions.reviewTitle}
      </h1>

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

      {loading ? (
        <p className="text-gray-500">{dict.common.loading}</p>
      ) : (
        <ul className="divide-y divide-gray-200 border border-gray-200 rounded-md bg-white">
          {items.map((item) => (
            <li key={item.id} className="flex flex-wrap items-center gap-3 px-4 py-3">
              <span className="mr-auto">
                <span className="font-semibold">{item.name}</span>
                {item.description && (
                  <span className="block text-sm text-gray-600 mt-0.5">
                    {item.description}
                  </span>
                )}
                <span className="block text-xs text-gray-400 mt-0.5">
                  {formatMessage(dict.suggestions.submittedOn, {
                    date: new Date(item.created_at).toLocaleDateString(dict.dateLocale),
                  })}
                </span>
              </span>
              <button
                type="button"
                className="btn btn-add"
                onClick={() => accept(item)}
                disabled={busyId === item.id}
              >
                {dict.suggestions.accept}
              </button>
              <button
                type="button"
                className="btn btn-del"
                onClick={() => reject(item)}
                disabled={busyId === item.id}
              >
                {dict.suggestions.reject}
              </button>
            </li>
          ))}
          {items.length === 0 && (
            <li className="px-4 py-3 text-gray-500">{dict.suggestions.reviewEmpty}</li>
          )}
        </ul>
      )}
    </div>
  );
}