Epicure/apps/web/components/recipe/url-import-dialog.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { Link2, 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 { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

type ImportedRecipe = {
  title: string;
  ingredients: Array<{ rawName: string; quantity?: string; unit?: string }>;
  steps: Array<{ instruction: string }>;
};

export function UrlImportDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const t = useTranslations("recipe");
  const tCommon = useTranslations("common");
  const router = useRouter();
  const [url, setUrl] = useState("");
  const [importing, setImporting] = useState(false);

  async function handleImport() {
    if (!url.trim()) return;
    setImporting(true);
    try {
      const res = await fetch("/api/v1/ai/import-url", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url: url.trim() }),
      });

      if (!res.ok) {
        const err = await res.json() as { error?: string };
        toast.error(err.error ?? t("urlImportFetchFailed"));
        return;
      }

      const imported = await res.json() as ImportedRecipe;

      const saveRes = await fetch("/api/v1/recipes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...imported,
          visibility: "private",
          sourceUrl: url.trim(),
        }),
      });

      if (!saveRes.ok) {
        toast.error(t("urlImportSaveFailed"));
        return;
      }

      const saved = await saveRes.json() as { id: string };
      toast.success(t("urlImportSuccess"));
      onOpenChange(false);
      router.push(`/recipes/${saved.id}/edit`);
    } finally {
      setImporting(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Link2 className="h-5 w-5 text-primary" />
            {t("urlImportTitle")}
          </DialogTitle>
          <DialogDescription>
            {t("urlImportDescription")}
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="import-url">{t("urlImportLabel")}</Label>
            <Input
              id="import-url"
              type="url"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              placeholder="https://..."
              disabled={importing}
              onKeyDown={(e) => e.key === "Enter" && handleImport()}
            />
          </div>
          <div className="flex gap-2 justify-end">
            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={importing}>
              {tCommon("cancel")}
            </Button>
            <Button onClick={handleImport} disabled={!url.trim() || importing}>
              {importing ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  {t("urlImportingButton")}
                </>
              ) : (
                <>
                  <Link2 className="h-4 w-4" />
                  {t("urlImportButton")}
                </>
              )}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}