Epicure/apps/web/components/recipe/translate-button.tsx

"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { Languages, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

const LANGUAGE_CODES = [
  "French", "Spanish", "German", "Italian", "Portuguese", "English",
  "Japanese", "Chinese", "Arabic", "Dutch", "Polish", "Russian",
] as const;

export function TranslateButton({ recipeId }: { recipeId: string }) {
  const t = useTranslations("ai.translate");
  const tRecipe = useTranslations("recipe");
  const tCommon = useTranslations("common");
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [targetLanguage, setTargetLanguage] = useState("French");
  const [translating, setTranslating] = useState(false);

  async function handleTranslate() {
    setTranslating(true);
    try {
      const res = await fetch(`/api/v1/ai/translate/${recipeId}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ targetLanguage }),
      });

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

      const { id } = await res.json() as { id: string };
      toast.success(t("success"));
      setOpen(false);
      router.push(`/recipes/${id}/edit`);
    } finally {
      setTranslating(false);
    }
  }

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

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Languages className="h-5 w-5 text-primary" />
              {t("title")}
            </DialogTitle>
            <DialogDescription>{t("description")}</DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div className="space-y-2">
              <Label>{t("targetLanguage")}</Label>
              <Select value={targetLanguage} onValueChange={(v) => v && setTargetLanguage(v)} disabled={translating}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {LANGUAGE_CODES.map((code) => (
                    <SelectItem key={code} value={code}>{t(`languages.${code}`)}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {translating && (
              <p className="text-sm text-muted-foreground">{t("wait")}</p>
            )}

            <div className="flex gap-2 justify-end">
              <Button variant="outline" onClick={() => setOpen(false)} disabled={translating}>
                {tCommon("cancel")}
              </Button>
              <Button onClick={handleTranslate} disabled={translating}>
                {translating ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    {t("translating")}
                  </>
                ) : (
                  <>
                    <Languages className="h-4 w-4" />
                    {t("button")}
                  </>
                )}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}