feat: complete NutriScan redesign

app/components/NutritionBar.tsx

@@ -1,6 +1,4 @@
 "use client";
-import { useState } from "react";
-import { Info, TrendingUp, TrendingDown, AlertTriangle } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 interface NutritionBarProps {
@@ -12,7 +10,6 @@ interface NutritionBarProps {
   isLow?: boolean;
   recommended?: string;
   className?: string;
-  showTooltip?: boolean;
 }
 
 export function NutritionBar({
@@ -22,132 +19,41 @@ export function NutritionBar({
   percentage = 0,
   isHigh = false,
   isLow = false,
-  recommended,
   className,
-  showTooltip = true,
 }: NutritionBarProps) {
-  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const barWidth = Math.min(Math.max(percentage, 2), 100);
 
-  // Calcular cor baseada no valor e se é alto/baixo
-  const getBarColor = () => {
-    if (isHigh) {
-      return "bg-gradient-to-r from-red-400 to-red-600";
-    }
-    if (isLow) {
-      return "bg-gradient-to-r from-green-400 to-green-600";
-    }
-    if (percentage > 80) {
-      return "bg-gradient-to-r from-orange-400 to-orange-600";
-    }
-    if (percentage > 60) {
-      return "bg-gradient-to-r from-yellow-400 to-yellow-600";
-    }
-    return "bg-gradient-to-r from-blue-400 to-blue-600";
-  };
+  const barColor = isHigh
+    ? "bg-[var(--score-e)]"
+    : isLow
+    ? "bg-[var(--score-a)]"
+    : percentage > 75
+    ? "bg-[var(--score-d)]"
+    : percentage > 50
+    ? "bg-[var(--score-c)]"
+    : "bg-[var(--accent)]";
 
-  // Calcular largura da barra baseada na porcentagem
-  const barWidth = Math.min(Math.max(percentage, 5), 100);
-
-  // Determinar ícone baseado no status
-  const getIcon = () => {
-    if (isHigh) return <TrendingUp className="w-3 h-3" />;
-    if (isLow) return <TrendingDown className="w-3 h-3" />;
-    return null;
-  };
-
-  // Determinar cor do texto baseada no status
-  const getTextColor = () => {
-    if (isHigh) return "text-red-600 dark:text-red-400";
-    if (isLow) return "text-green-600 dark:text-green-400";
-    return "text-gray-900 dark:text-white";
-  };
+  const valueColor = isHigh
+    ? "text-[var(--score-e)]"
+    : isLow
+    ? "text-[var(--score-a)]"
+    : "text-[var(--fg-primary)]";
 
   return (
-    <div className={cn("space-y-3", className)}>
-      {/* Linha principal: Informação nutricional à esquerda, porcentagem à direita */}
-      <div className="flex items-center justify-between">
-        {/* Informação nutricional à esquerda */}
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
-            {label}:
-          </span>
-          <span className={cn("text-sm font-semibold", getTextColor())}>
-            {value} {unit}
-          </span>
-          {getIcon() && (
-            <div className={cn("flex items-center", getTextColor())}>
-              {getIcon()}
-            </div>
-          )}
-          {showTooltip && (
-            <button
-              onMouseEnter={() => setIsTooltipVisible(true)}
-              onMouseLeave={() => setIsTooltipVisible(false)}
-              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
-            >
-              <Info className="w-3 h-3" />
-            </button>
-          )}
-        </div>
-
-        {/* Separador visual */}
-        <div className="flex-1 mx-4 h-px bg-gray-200 dark:bg-gray-600"></div>
-
-        {/* Porcentagem à direita */}
-        {percentage > 0 && (
-          <div className="text-xs text-gray-600 dark:text-gray-300 font-medium bg-white dark:bg-gray-800 px-3 py-1 rounded-full shadow-sm border border-gray-200 dark:border-gray-600 flex-shrink-0">
-            {Math.round(percentage)}%
-          </div>
-        )}
+    <div className={cn("space-y-2", className)}>
+      <div className="flex items-baseline justify-between gap-3">
+        <span className="label text-[var(--fg-muted)] truncate">{label}</span>
+        <span className={cn("label shrink-0 font-medium", valueColor)}>
+          {value} {unit}
+        </span>
       </div>
-
-      {/* Barra de progresso */}
-      <div className="relative">
-        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
-          <div
-            className={cn(
-              "h-full rounded-full transition-all duration-500 ease-out relative",
-              getBarColor()
-            )}
-            style={{ width: `${barWidth}%` }}
-          >
-            {/* Efeito de brilho */}
-            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-30 animate-pulse" />
-          </div>
-        </div>
+      {/* Hairline track */}
+      <div className="w-full h-px bg-[var(--border-subtle)] relative overflow-hidden rounded-full">
+        <div
+          className={cn("h-full rounded-full transition-all duration-700", barColor)}
+          style={{ width: `${barWidth}%` }}
+        />
       </div>
-
-      {/* Tooltip informativo */}
-      {showTooltip && isTooltipVisible && (
-        <div className="absolute bottom-full left-0 mb-2 z-50">
-          <div className="bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-xl max-w-xs">
-            <div className="flex items-center gap-2 mb-1">
-              <span className="font-semibold">{label}</span>
-              {isHigh && <AlertTriangle className="w-3 h-3 text-red-400" />}
-              {isLow && <TrendingDown className="w-3 h-3 text-green-400" />}
-            </div>
-            <p className="text-gray-300">
-              Valor: {value} {unit}
-            </p>
-            {recommended && (
-              <p className="text-gray-300 mt-1">Recomendado: {recommended}</p>
-            )}
-            {isHigh && (
-              <p className="text-red-300 mt-1">
-                ⚠️ Alto valor - consumir com moderação
-              </p>
-            )}
-            {isLow && (
-              <p className="text-green-300 mt-1">✅ Baixo valor - boa opção</p>
-            )}
-
-            {/* Seta do tooltip */}
-            <div className="absolute top-full left-4">
-              <div className="w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900" />
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }
@@ -165,196 +71,62 @@ interface NutritionGridProps {
   className?: string;
 }
 
-export function NutritionGrid({
-  nutritionData,
-  className,
-}: NutritionGridProps) {
-  // Valores de referência para calcular porcentagens (valores diários recomendados)
-  const referenceValues = {
-    energy: 2000, // kcal
-    fat: 65, // g
-    carbohydrates: 300, // g
-    proteins: 50, // g
-    sugars: 50, // g
-    fiber: 25, // g
-    sodium: 2.3, // g
-  };
+const REFERENCE = {
+  energy: 2000, fat: 65, carbohydrates: 300,
+  proteins: 50, sugars: 50, fiber: 25, sodium: 2.3,
+};
 
-  // Extrair valor numérico da string
-  const extractNumericValue = (value: string | undefined): number => {
-    if (!value) return 0;
-    const match = value.match(/(\d+(?:\.\d+)?)/);
-    return match ? parseFloat(match[1]) : 0;
-  };
+function extractNumber(val?: string): number {
+  if (!val) return 0;
+  const m = val.match(/(\d+(?:\.\d+)?)/);
+  return m ? parseFloat(m[1]) : 0;
+}
 
-  // Calcular porcentagem baseada no valor de referência
-  const calculatePercentage = (
-    value: string | undefined,
-    reference: number
-  ): number => {
-    const numericValue = extractNumericValue(value);
-    return (numericValue / reference) * 100;
-  };
+function pct(val: string | undefined, ref: number): number {
+  return (extractNumber(val) / ref) * 100;
+}
 
-  // Determinar se um valor é alto ou baixo
-  const isHighValue = (
-    value: string | undefined,
-    reference: number
-  ): boolean => {
-    const percentage = calculatePercentage(value, reference);
-    return percentage > 80;
-  };
-
-  const isLowValue = (
-    value: string | undefined,
-    reference: number
-  ): boolean => {
-    const percentage = calculatePercentage(value, reference);
-    return percentage < 20;
-  };
-
-  const nutritionItems = [
-    {
-      label: "Energia",
-      value: nutritionData.energy,
-      unit: "kcal",
-      percentage: calculatePercentage(
-        nutritionData.energy,
-        referenceValues.energy
-      ),
-      isHigh: isHighValue(nutritionData.energy, referenceValues.energy),
-      isLow: isLowValue(nutritionData.energy, referenceValues.energy),
-      recommended: "2000 kcal/dia",
-    },
-    {
-      label: "Gorduras",
-      value: nutritionData.fat,
-      unit: "g",
-      percentage: calculatePercentage(nutritionData.fat, referenceValues.fat),
-      isHigh: isHighValue(nutritionData.fat, referenceValues.fat),
-      isLow: isLowValue(nutritionData.fat, referenceValues.fat),
-      recommended: "65g/dia",
-    },
-    {
-      label: "Carboidratos",
-      value: nutritionData.carbohydrates,
-      unit: "g",
-      percentage: calculatePercentage(
-        nutritionData.carbohydrates,
-        referenceValues.carbohydrates
-      ),
-      isHigh: isHighValue(
-        nutritionData.carbohydrates,
-        referenceValues.carbohydrates
-      ),
-      isLow: isLowValue(
-        nutritionData.carbohydrates,
-        referenceValues.carbohydrates
-      ),
-      recommended: "300g/dia",
-    },
-    {
-      label: "Proteínas",
-      value: nutritionData.proteins,
-      unit: "g",
-      percentage: calculatePercentage(
-        nutritionData.proteins,
-        referenceValues.proteins
-      ),
-      isHigh: isHighValue(nutritionData.proteins, referenceValues.proteins),
-      isLow: isLowValue(nutritionData.proteins, referenceValues.proteins),
-      recommended: "50g/dia",
-    },
-    {
-      label: "Açúcares",
-      value: nutritionData.sugars,
-      unit: "g",
-      percentage: calculatePercentage(
-        nutritionData.sugars,
-        referenceValues.sugars
-      ),
-      isHigh: isHighValue(nutritionData.sugars, referenceValues.sugars),
-      isLow: isLowValue(nutritionData.sugars, referenceValues.sugars),
-      recommended: "50g/dia",
-    },
-    {
-      label: "Fibras",
-      value: nutritionData.fiber,
-      unit: "g",
-      percentage: calculatePercentage(
-        nutritionData.fiber,
-        referenceValues.fiber
-      ),
-      isHigh: isHighValue(nutritionData.fiber, referenceValues.fiber),
-      isLow: isLowValue(nutritionData.fiber, referenceValues.fiber),
-      recommended: "25g/dia",
-    },
-    {
-      label: "Sódio",
-      value: nutritionData.sodium,
-      unit: "g",
-      percentage: calculatePercentage(
-        nutritionData.sodium,
-        referenceValues.sodium
-      ),
-      isHigh: isHighValue(nutritionData.sodium, referenceValues.sodium),
-      isLow: isLowValue(nutritionData.sodium, referenceValues.sodium),
-      recommended: "2.3g/dia",
-    },
+export function NutritionGrid({ nutritionData, className }: NutritionGridProps) {
+  const items = [
+    { label: "Energia",      value: nutritionData.energy,        unit: "kcal", ref: REFERENCE.energy },
+    { label: "Gorduras",     value: nutritionData.fat,           unit: "g",    ref: REFERENCE.fat },
+    { label: "Carboidratos", value: nutritionData.carbohydrates, unit: "g",    ref: REFERENCE.carbohydrates },
+    { label: "Proteínas",    value: nutritionData.proteins,      unit: "g",    ref: REFERENCE.proteins },
+    { label: "Açúcares",     value: nutritionData.sugars,        unit: "g",    ref: REFERENCE.sugars },
+    { label: "Fibras",       value: nutritionData.fiber,         unit: "g",    ref: REFERENCE.fiber },
+    { label: "Sódio",        value: nutritionData.sodium,        unit: "g",    ref: REFERENCE.sodium },
   ];
 
   return (
-    <div className={cn("space-y-4", className)}>
-      <div className="flex items-center gap-2 mb-4">
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-          Informação Nutricional
-        </h3>
-        <div className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full">
-          Valores diários de referência
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-        {nutritionItems.map((item) => (
+    <div className={cn("space-y-5", className)}>
+      {items.map((item) => {
+        const p = pct(item.value, item.ref);
+        return (
           <NutritionBar
             key={item.label}
             label={item.label}
-            value={item.value || "N/A"}
+            value={item.value || "—"}
             unit={item.unit}
-            percentage={item.percentage}
-            isHigh={item.isHigh}
-            isLow={item.isLow}
-            recommended={item.recommended}
-            showTooltip={true}
+            percentage={p}
+            isHigh={p > 80}
+            isLow={p < 20 && p > 0}
           />
-        ))}
-      </div>
+        );
+      })}
 
-      {/* Legenda */}
-      <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-        <h4 className="text-sm font-medium text-gray-900 dark:text-white mb-2">
-          Como interpretar os valores:
-        </h4>
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs">
-          <div className="flex items-center gap-2">
-            <div className="w-3 h-3 bg-green-400 rounded-full"></div>
-            <span className="text-gray-600 dark:text-gray-400">
-              Baixo (verde)
-            </span>
+      {/* Legend */}
+      <div className="pt-4 border-t border-[var(--border-subtle)] flex flex-wrap gap-x-6 gap-y-2">
+        {[
+          { color: "bg-[var(--score-a)]", label: "Baixo" },
+          { color: "bg-[var(--accent)]",  label: "Moderado" },
+          { color: "bg-[var(--score-e)]", label: "Alto" },
+        ].map(({ color, label }) => (
+          <div key={label} className="flex items-center gap-2">
+            <div className={cn("w-2 h-2 rounded-full", color)} />
+            <span className="label text-[var(--fg-muted)]">{label}</span>
           </div>
-          <div className="flex items-center gap-2">
-            <div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
-            <span className="text-gray-600 dark:text-gray-400">
-              Moderado (amarelo)
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="w-3 h-3 bg-red-400 rounded-full"></div>
-            <span className="text-gray-600 dark:text-gray-400">
-              Alto (vermelho)
-            </span>
-          </div>
-        </div>
+        ))}
+        <span className="label text-[var(--fg-faint)] ml-auto">% do VDR</span>
       </div>
     </div>
   );