Epicure/apps/web/components/recipe/serving-scaler.tsx

"use client";

import { useState } from "react";
import { Minus, Plus, Sparkles, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { scaleQuantity } from "@/lib/fractions";
import { SubstituteIngredientPopover } from "@/components/recipe/substitute-ingredient-popover";

type Ingredient = {
  id: string;
  rawName: string;
  quantity: string | null;
  unit: string | null;
  note: string | null;
  order: number;
};

export type ScaledIngredient = {
  rawName: string;
  quantity: string;
  unit: string | null;
  note?: string;
};

export function ServingScaler({
  baseServings,
  ingredients,
  recipeTitle,
  recipeId,
  onAiScale,
}: {
  baseServings: number;
  ingredients: Ingredient[];
  recipeTitle?: string;
  recipeId?: string;
  onAiScale?: (ingredients: ScaledIngredient[] | null) => void;
}) {
  const [servings, setServings] = useState(baseServings);
  const [aiScaledIngredients, setAiScaledIngredients] = useState<ScaledIngredient[] | null>(null);
  const [aiScaling, setAiScaling] = useState(false);
  const min = 1;
  const max = 100;

  async function handleAiScale() {
    if (!recipeId) return;
    setAiScaling(true);
    try {
      const res = await fetch("/api/v1/ai/scale", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ recipeId, targetServings: servings }),
      });
      if (!res.ok) return;
      const data = await res.json() as { ingredients: ScaledIngredient[] };
      setAiScaledIngredients(data.ingredients);
      onAiScale?.(data.ingredients);
    } finally {
      setAiScaling(false);
    }
  }

  function dismissAiScale() {
    setAiScaledIngredients(null);
    onAiScale?.(null);
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3 flex-wrap">
        <span className="text-sm font-medium text-muted-foreground">Servings</span>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            className="h-7 w-7 p-0"
            onClick={() => setServings((s) => Math.max(min, s - 1))}
            disabled={servings <= min}
          >
            <Minus className="h-3 w-3" />
          </Button>
          <span className="w-8 text-center font-semibold tabular-nums">{servings}</span>
          <Button
            variant="outline"
            size="sm"
            className="h-7 w-7 p-0"
            onClick={() => setServings((s) => Math.min(max, s + 1))}
            disabled={servings >= max}
          >
            <Plus className="h-3 w-3" />
          </Button>
        </div>
        {servings !== baseServings && (
          <button
            className="text-xs text-muted-foreground hover:text-foreground underline"
            onClick={() => setServings(baseServings)}
          >
            reset
          </button>
        )}
        {recipeId && servings !== baseServings && (
          <Button
            variant="outline"
            size="sm"
            className="h-7 gap-1 text-xs"
            onClick={handleAiScale}
            disabled={aiScaling}
          >
            <Sparkles className="h-3 w-3" />
            {aiScaling ? "Scaling…" : "AI Scale"}
          </Button>
        )}
      </div>

      {aiScaledIngredients && (
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <Sparkles className="h-3 w-3 shrink-0" />
          <span>AI-scaled quantities shown below</span>
          <button
            className="ml-auto hover:text-foreground"
            onClick={dismissAiScale}
            aria-label="Dismiss AI scaling"
          >
            <X className="h-3 w-3" />
          </button>
        </div>
      )}

      <ul className="space-y-2">
        {ingredients
          .sort((a, b) => a.order - b.order)
          .map((ing) => {
            const aiIng = aiScaledIngredients?.find((s) => s.rawName === ing.rawName);
            const scaled = scaleQuantity(ing.quantity, baseServings, servings);
            return (
              <li key={ing.id} className="flex gap-2 text-sm group">
                <span className="font-medium tabular-nums min-w-[3rem] text-right">
                  {aiIng
                    ? `${aiIng.quantity}${aiIng.unit ? ` ${aiIng.unit}` : ""}`
                    : scaled
                      ? `${scaled}${ing.unit ? ` ${ing.unit}` : ""}`
                      : ing.unit ?? ""}
                </span>
                <span className="flex items-center gap-1">
                  {ing.rawName}
                  {(aiIng?.note ?? ing.note) && (
                    <span className="text-muted-foreground">, {aiIng?.note ?? ing.note}</span>
                  )}
                  {recipeTitle && <SubstituteIngredientPopover ingredient={ing.rawName} recipeTitle={recipeTitle} />}
                </span>
              </li>
            );
          })}
      </ul>
    </div>
  );
}