Epicure/apps/web/components/collections/generate-meal-dialog.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { ChefHat, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { MEAL_COURSES, type MealCourse } from "@/lib/ai/features/generate-meal";

type CreatedRecipe = { id: string; title: string; course: string };

export function GenerateMealDialog({ collectionId }: { collectionId: string }) {
  const router = useRouter();
  const t = useTranslations("collections");
  const [open, setOpen] = useState(false);
  const [theme, setTheme] = useState("");
  const [courses, setCourses] = useState<MealCourse[]>(["main", "dessert"]);
  const [servings, setServings] = useState("4");
  const [dietaryPrefs, setDietaryPrefs] = useState("");
  const [generating, setGenerating] = useState(false);

  function toggleCourse(course: MealCourse) {
    setCourses((prev) => (prev.includes(course) ? prev.filter((c) => c !== course) : [...prev, course]));
  }

  async function handleGenerate() {
    if (!theme.trim() || courses.length < 2) return;
    setGenerating(true);
    try {
      const res = await fetch("/api/v1/ai/generate-meal", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          collectionId,
          theme: theme.trim(),
          courses,
          servings: parseInt(servings) || 4,
          dietaryPrefs: dietaryPrefs.trim() || undefined,
        }),
      });
      if (!res.ok) {
        const data = (await res.json()) as { error?: string };
        throw new Error(data.error ?? t("generateMealFailed"));
      }
      const data = (await res.json()) as { recipes: CreatedRecipe[] };
      toast.success(t("generateMealSuccess", { count: data.recipes.length }));
      setOpen(false);
      setTheme("");
      router.refresh();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : t("generateMealFailed"));
    } finally {
      setGenerating(false);
    }
  }

  return (
    <>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={
            <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label={t("generateMeal")}>
              <ChefHat className="h-4 w-4" />
            </Button>
          } />
          <TooltipContent>{t("generateMeal")}</TooltipContent>
        </Tooltip>
      </TooltipProvider>

      <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>{t("generateMealTitle")}</DialogTitle>
          <DialogDescription>{t("generateMealDescription")}</DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="meal-theme">{t("themeLabel")}</Label>
            <Input
              id="meal-theme"
              value={theme}
              onChange={(e) => setTheme(e.target.value)}
              placeholder={t("themePlaceholder")}
              maxLength={200}
            />
          </div>

          <div className="space-y-2">
            <Label>{t("coursesLabel")}</Label>
            <div className="flex flex-wrap gap-2">
              {MEAL_COURSES.map((course) => (
                <button
                  key={course}
                  type="button"
                  onClick={() => toggleCourse(course)}
                  aria-pressed={courses.includes(course)}
                  className={`rounded-full border px-3 py-1 text-sm transition-colors ${
                    courses.includes(course)
                      ? "border-foreground bg-accent"
                      : "border-input text-muted-foreground hover:bg-accent/50"
                  }`}
                >
                  {t(`course.${course}`)}
                </button>
              ))}
            </div>
            {courses.length < 2 && <p className="text-xs text-muted-foreground">{t("minCoursesHint")}</p>}
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="meal-servings">{t("servingsLabel")}</Label>
              <Input
                id="meal-servings"
                type="number"
                min={1}
                max={20}
                value={servings}
                onChange={(e) => setServings(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="meal-dietary">{t("dietaryLabel")}</Label>
              <Input
                id="meal-dietary"
                value={dietaryPrefs}
                onChange={(e) => setDietaryPrefs(e.target.value)}
                placeholder={t("dietaryPlaceholder")}
                maxLength={200}
              />
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button
            onClick={() => { void handleGenerate(); }}
            disabled={generating || !theme.trim() || courses.length < 2}
            className="gap-1.5"
          >
            <Sparkles className="h-4 w-4" />
            {generating ? t("generatingMeal") : t("generateMealButton")}
          </Button>
        </DialogFooter>
      </DialogContent>
      </Dialog>
    </>
  );
}