Epicure/apps/web/components/recipe/nutrition-panel.tsx

"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { UpgradeDialog } from "@/components/premium/upgrade-dialog";
import { ProBadge } from "@/components/premium/pro-badge";

type NutritionData = {
  perServing: {
    calories: number;
    proteinG: number;
    carbsG: number;
    fatG: number;
    fiberG: number;
    sodiumMg: number;
  };
};

interface NutritionPanelProps {
  recipeId: string;
  initialData?: NutritionData | null;
  initialManual?: boolean;
  /** AI/USDA estimation disabled for every tier — hides the (re-)estimate
   * action entirely. Previously-stored data (manual or a past estimate)
   * still displays; there's just no button to refresh it. */
  estimateAvailable?: boolean;
  /** Estimation is available on some tier but not the viewer's — the
   * action still shows (with a "Pro" upsell) instead of hiding. */
  estimateLocked?: boolean;
}

export function NutritionPanel({ recipeId, initialData, initialManual, estimateAvailable = true, estimateLocked = false }: NutritionPanelProps) {
  const t = useTranslations("nutritionPanel");
  const [nutrition, setNutrition] = useState<NutritionData | null>(initialData ?? null);
  const [manual, setManual] = useState(!!initialManual);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [upgradeOpen, setUpgradeOpen] = useState(false);

  async function handleEstimate() {
    if (estimateLocked) {
      setUpgradeOpen(true);
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`/api/v1/recipes/${recipeId}/nutrition`, {
        method: "POST",
      });
      if (!res.ok) {
        throw new Error(t("estimateFailed"));
      }
      const data = await res.json() as { nutrition: NutritionData };
      setNutrition(data.nutrition);
      setManual(false);
    } catch (err) {
      setError(err instanceof Error ? err.message : t("error"));
    } finally {
      setLoading(false);
    }
  }

  if (!nutrition && !loading) {
    if (!estimateAvailable) return null;
    return (
      <div className="flex flex-col gap-2">
        {error && <p className="text-sm text-destructive">{error}</p>}
        <Button variant="outline" onClick={handleEstimate} disabled={loading} className="self-start gap-1.5">
          {t("estimateButton")}
          {estimateLocked && <ProBadge />}
        </Button>
        <UpgradeDialog
          open={upgradeOpen}
          onOpenChange={setUpgradeOpen}
          featureKey="nutrition_estimation"
          featureLabel="Nutrition estimation"
        />
      </div>
    );
  }

  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-base">{t("title")}</CardTitle>
          {estimateAvailable && (
            <>
              <Button
                variant="ghost"
                size="sm"
                onClick={handleEstimate}
                disabled={loading}
                className="text-xs text-muted-foreground gap-1.5"
              >
                {loading ? t("estimating") : manual ? t("estimateInsteadButton") : t("reEstimateButton")}
                {estimateLocked && <ProBadge />}
              </Button>
            </>
          )}
        </div>
        {manual && !loading && (
          <p className="text-xs text-muted-foreground">{t("manualBadge")}</p>
        )}
        {error && <p className="text-sm text-destructive">{error}</p>}
      </CardHeader>
      {nutrition && (
        <CardContent>
          <div className="grid grid-cols-3 gap-3 sm:grid-cols-6">
            <div className="col-span-3 sm:col-span-6 flex items-baseline gap-1">
              <span className="text-4xl font-bold tabular-nums">
                {Math.round(nutrition.perServing.calories)}
              </span>
              <span className="text-sm text-muted-foreground">kcal</span>
            </div>

            <MacroCell
              label={t("protein")}
              value={nutrition.perServing.proteinG}
              unit="g"
            />
            <MacroCell
              label={t("carbs")}
              value={nutrition.perServing.carbsG}
              unit="g"
            />
            <MacroCell
              label={t("fat")}
              value={nutrition.perServing.fatG}
              unit="g"
            />
            <MacroCell
              label={t("fiber")}
              value={nutrition.perServing.fiberG}
              unit="g"
            />
            <MacroCell
              label={t("sodium")}
              value={nutrition.perServing.sodiumMg}
              unit="mg"
            />
          </div>
        </CardContent>
      )}
      {loading && !nutrition && (
        <CardContent>
          <p className="text-sm text-muted-foreground animate-pulse">
            {t("estimatingNutrition")}
          </p>
        </CardContent>
      )}
      <UpgradeDialog
        open={upgradeOpen}
        onOpenChange={setUpgradeOpen}
        featureKey="nutrition_estimation"
        featureLabel="Nutrition estimation"
      />
    </Card>
  );
}

function MacroCell({
  label,
  value,
  unit,
}: {
  label: string;
  value: number;
  unit: string;
}) {
  return (
    <div className="flex flex-col gap-0.5 rounded-md bg-muted p-2">
      <span className="text-xs text-muted-foreground">{label}</span>
      <span className="font-semibold tabular-nums">
        {Math.round(value)}
        <span className="text-xs font-normal text-muted-foreground ml-0.5">
          {unit}
        </span>
      </span>
    </div>
  );
}