"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { GitBranch, Lock } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { VariationsDialog } from "./variations-dialog";
import { UpgradeDialog } from "@/components/premium/upgrade-dialog";

export function VariationsButton({
  recipeId,
  baseServings,
  difficulty,
  prepMins,
  cookMins,
  ingredients,
  steps,
  locked = false,
}: {
  recipeId: string;
  baseServings: number;
  difficulty?: string | null;
  prepMins?: number | null;
  cookMins?: number | null;
  ingredients: Array<{ rawName: string; quantity?: string | number | null; unit?: string | null; note?: string | null; order: number }>;
  steps: Array<{ instruction: string; timerSeconds?: number | null; order: number }>;
  locked?: boolean;
}) {
  const t = useTranslations("recipe");
  const [open, setOpen] = useState(false);
  const [upgradeOpen, setUpgradeOpen] = useState(false);

  return (
    <>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={
            <Button
              variant="ghost"
              size="icon"
              onClick={() => (locked ? setUpgradeOpen(true) : setOpen(true))}
              aria-label={t("variationsTooltip")}
              className="relative"
            >
              <GitBranch className="h-4 w-4" />
              {locked && <Lock className="h-2.5 w-2.5 absolute bottom-1 right-1 text-muted-foreground" />}
            </Button>
          } />
          <TooltipContent>{t("variationsTooltip")}</TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <VariationsDialog
        recipeId={recipeId}
        baseServings={baseServings}
        difficulty={difficulty}
        prepMins={prepMins}
        cookMins={cookMins}
        ingredients={ingredients}
        steps={steps}
        open={open}
        onOpenChange={setOpen}
      />
      <UpgradeDialog
        open={upgradeOpen}
        onOpenChange={setUpgradeOpen}
        featureKey="recipe_variations"
        featureLabel="Recipe variations"
      />
    </>
  );
}