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

"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

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

interface NutritionPanelProps {
  recipeId: string;
  initialData?: NutritionData | null;
}

export function NutritionPanel({ recipeId, initialData }: NutritionPanelProps) {
  const [nutrition, setNutrition] = useState<NutritionData | null>(initialData ?? null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleEstimate() {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`/api/v1/recipes/${recipeId}/nutrition`, {
        method: "POST",
      });
      if (!res.ok) {
        const body = await res.json() as { error?: string };
        throw new Error(body.error ?? "Failed to estimate nutrition");
      }
      const data = await res.json() as { nutrition: NutritionData };
      setNutrition(data.nutrition);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong");
    } finally {
      setLoading(false);
    }
  }

  if (!nutrition && !loading) {
    return (
      <div className="flex flex-col gap-2">
        {error && <p className="text-sm text-destructive">{error}</p>}
        <Button variant="outline" onClick={handleEstimate} disabled={loading}>
          Estimate nutrition
        </Button>
      </div>
    );
  }

  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-base">Nutrition per serving</CardTitle>
          <Button
            variant="ghost"
            size="sm"
            onClick={handleEstimate}
            disabled={loading}
            className="text-xs text-muted-foreground"
          >
            {loading ? "Estimating…" : "Re-estimate"}
          </Button>
        </div>
        {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="Protein"
              value={nutrition.perServing.proteinG}
              unit="g"
            />
            <MacroCell
              label="Carbs"
              value={nutrition.perServing.carbsG}
              unit="g"
            />
            <MacroCell
              label="Fat"
              value={nutrition.perServing.fatG}
              unit="g"
            />
            <MacroCell
              label="Fiber"
              value={nutrition.perServing.fiberG}
              unit="g"
            />
            <MacroCell
              label="Sodium"
              value={nutrition.perServing.sodiumMg}
              unit="mg"
            />
          </div>
        </CardContent>
      )}
      {loading && !nutrition && (
        <CardContent>
          <p className="text-sm text-muted-foreground animate-pulse">
            Estimating nutrition…
          </p>
        </CardContent>
      )}
    </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>
  );
}