Epicure/apps/web/components/recipe/batch-cook-generate-dialog.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { ChefHat, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
import { BatchCookFields, type BatchCookFieldsState } from "./batch-cook-fields";

export function BatchCookGenerateDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const t = useTranslations("batchCooking");
  const tCommon = useTranslations("common");
  const router = useRouter();

  const [fields, setFields] = useState<BatchCookFieldsState>({
    dinners: 4,
    lunches: 0,
    servings: 4,
    difficulty: "",
    dietaryPrefs: "",
    description: "",
  });
  const [busy, setBusy] = useState(false);

  function handleClose() {
    if (busy) return;
    onOpenChange(false);
  }

  async function handleGenerate() {
    setBusy(true);
    try {
      const res = await fetch("/api/v1/ai/batch-cook/generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          dinners: fields.dinners,
          lunches: fields.lunches,
          servings: fields.servings,
          dietaryPrefs: fields.dietaryPrefs.trim() || undefined,
          difficulty: fields.difficulty || undefined,
          description: fields.description.trim() || undefined,
        }),
      });
      if (!res.ok) {
        const err = await res.json() as { error?: string };
        toast.error(err.error ?? t("generateFailed"));
        return;
      }
      const { id } = await res.json() as { id: string };
      toast.success(t("generateSuccess"));
      onOpenChange(false);
      router.push(`/recipes/${id}`);
    } finally {
      setBusy(false);
    }
  }

  const canSubmit = fields.dinners + fields.lunches > 0;

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="max-w-md max-h-[85vh] flex flex-col gap-0 p-0">
        <div className="overflow-y-auto p-4 space-y-4 min-h-0">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <ChefHat className="h-5 w-5 text-primary" />
              {t("wizardTitle")}
            </DialogTitle>
            <DialogDescription>{t("wizardDescription")}</DialogDescription>
          </DialogHeader>

          <BatchCookFields state={fields} onChange={setFields} disabled={busy} />

          <div className="min-h-[26px]">
            <FakeProgressBar active={busy} durationMs={20000} label={busy ? t("generating") : undefined} />
          </div>
        </div>

        <div className="flex gap-2 justify-end p-4 border-t shrink-0">
          <Button variant="ghost" onClick={handleClose} disabled={busy}>
            {tCommon("cancel")}
          </Button>
          <Button onClick={() => { void handleGenerate(); }} disabled={!canSubmit || busy}>
            {busy ? (
              <><Loader2 className="h-4 w-4 animate-spin" />{t("generating")}</>
            ) : (
              <><ChefHat className="h-4 w-4" />{t("generate")}</>
            )}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}