Epicure/apps/web/components/recipe/drink-pairing-button.tsx

"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { Wine, Sparkles, Loader2, Coffee, Beer, GlassWater, Leaf } from "lucide-react";
import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
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 { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";

type Drink = {
  name: string;
  type: "wine" | "beer" | "cocktail" | "spirit" | "non-alcoholic" | "hot";
  alcoholic: boolean;
  description: string;
  examples: string[];
  whyItPairs: string;
  servingTip?: string;
};

const TYPE_ICON: Record<Drink["type"], React.ElementType> = {
  wine: Wine,
  beer: Beer,
  cocktail: Wine,
  spirit: Wine,
  "non-alcoholic": GlassWater,
  hot: Coffee,
};

const TYPE_LABEL: Record<Drink["type"], string> = {
  wine: "Wine",
  beer: "Beer",
  cocktail: "Cocktail",
  spirit: "Spirit",
  "non-alcoholic": "Sans alcool",
  hot: "Chaud",
};

export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
  const t = useTranslations("recipe");
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [drinks, setDrinks] = useState<Drink[]>([]);

  async function suggest() {
    setLoading(true);
    setDrinks([]);
    try {
      const res = await fetch(`/api/v1/ai/drinks/${recipeId}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ count: 4 }),
      });
      if (!res.ok) {
        toast.error("Failed to suggest drinks");
        return;
      }
      const data = await res.json() as { drinks: Drink[] };
      setDrinks(data.drinks);
    } finally {
      setLoading(false);
    }
  }

  function handleOpen() {
    setOpen(true);
    if (drinks.length === 0) suggest();
  }

  return (
    <>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={
            <Button variant="ghost" size="icon" onClick={handleOpen}>
              <Wine className="h-4 w-4" />
            </Button>
          } />
          <TooltipContent>{t("drinksTooltip")}</TooltipContent>
        </Tooltip>
      </TooltipProvider>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Wine className="h-5 w-5 text-primary" />
              Drink pairings
            </DialogTitle>
            <DialogDescription>
              AI-suggested drinks that complement this recipe.
            </DialogDescription>
          </DialogHeader>

          {loading ? (
            <div className="py-6 space-y-3">
              <FakeProgressBar active={loading} durationMs={8000} label="Finding perfect pairings…" />
            </div>
          ) : drinks.length === 0 ? (
            <div className="flex flex-col items-center gap-4 py-8">
              <Button onClick={suggest} size="lg">
                <Sparkles className="h-4 w-4" />
                Suggest drinks
              </Button>
            </div>
          ) : (
            <div className="space-y-3">
              {drinks.map((drink, i) => {
                const Icon = TYPE_ICON[drink.type];
                return (
                  <div key={i} className="rounded-lg border p-4">
                    <div className="flex items-start gap-3">
                      <div className="mt-0.5 shrink-0 h-8 w-8 rounded-full bg-muted flex items-center justify-center">
                        <Icon className="h-4 w-4 text-muted-foreground" />
                      </div>
                      <div className="flex-1 min-w-0 space-y-1.5">
                        <div className="flex items-center gap-2 flex-wrap">
                          <span className="font-semibold">{drink.name}</span>
                          <Badge variant="outline" className="text-xs">{TYPE_LABEL[drink.type]}</Badge>
                          {!drink.alcoholic && (
                            <Badge variant="secondary" className="text-xs flex items-center gap-1">
                              <Leaf className="h-2.5 w-2.5" />
                              Sans alcool
                            </Badge>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground">{drink.description}</p>
                        {drink.examples.length > 0 && (
                          <p className="text-xs text-muted-foreground">
                            <span className="font-medium">e.g. </span>
                            {drink.examples.join(" · ")}
                          </p>
                        )}
                        <p className="text-xs text-muted-foreground italic">&ldquo;{drink.whyItPairs}&rdquo;</p>
                        {drink.servingTip && (
                          <p className="text-xs text-muted-foreground border-l-2 border-muted pl-2">{drink.servingTip}</p>
                        )}
                      </div>
                    </div>
                    {i < drinks.length - 1 && <Separator className="mt-3" />}
                  </div>
                );
              })}

              <Button variant="ghost" className="w-full" onClick={suggest} disabled={loading}>
                <Sparkles className="h-4 w-4" />
                Regenerate
              </Button>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  );
}