import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from
"recharts";
export default function FatLossTracker() {
const [weightEntries, setWeightEntries] = useState([]);
const [calories, setCalories] = useState("");
const [protein, setProtein] = useState("");
const [date, setDate] = useState("");
const [weight, setWeight] = useState("");
const [suggestion, setSuggestion] = useState("");
const [userQuestion, setUserQuestion] = useState("");
const [aiAnswer, setAiAnswer] = useState("");
const addEntry = () => {
if (weight && date) {
setWeightEntries([
...weightEntries,
{
date,
weight: parseFloat(weight),
calories: parseInt(calories) || 0,
protein: parseFloat(protein) || 0,
},
]);
setWeight("");
setDate("");
setCalories("");
setProtein("");
}
};
const generateSuggestion = () => {
if (!weightEntries.length) return;
const latest = weightEntries[weightEntries.length - 1];
let message = "";
if (latest.protein < 100) {
message += "⬆️ Increase your protein intake to at least 100g/day. ";
}
if (latest.calories > 2000) {
message += "📉 Consider reducing calorie intake below 2000 for fat loss. ";
}
if (latest.weight > 90) {
message += "🏃 Add more cardio exercises like walking or cycling. ";
} else {
message += "💪 Maintain your current activity and monitor progress. ";
}
setSuggestion(message);
};
const askAI = () => {
if (userQuestion.trim() === "") return;
// Simulate AI answer (replace this with actual API integration if needed)
const q = userQuestion.toLowerCase();
let answer = "🤖 Sorry, I don't know that yet.";
if (q.includes("protein")) answer = "You should aim for 1.6–2.2g of protein per
kg of body weight for fat loss.";
else if (q.includes("cardio")) answer = "Try 30 minutes of brisk walking,
cycling, or running 5x/week.";
else if (q.includes("calories")) answer = "For fat loss, a 500 kcal daily
deficit is generally effective.";
else if (q.includes("meal")) answer = "Focus on meals with lean protein, fiber-
rich carbs, and healthy fats.";
setAiAnswer(answer);
};
return (
<div className="p-4 max-w-4xl mx-auto">
<h1 className="text-2xl font-bold mb-4">Fat Loss Tracker & AI Coach</h1>
<Tabs defaultValue="tracker">
<TabsList className="mb-4">
<TabsTrigger value="tracker">Tracker</TabsTrigger>
<TabsTrigger value="chart">Progress Chart</TabsTrigger>
<TabsTrigger value="suggestions">AI Suggestions</TabsTrigger>
<TabsTrigger value="ask">Ask AI</TabsTrigger>
</TabsList>
<TabsContent value="tracker">
<Card>
<CardContent className="space-y-4 pt-4">
<Input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
placeholder="Date"
/>
<Input
type="number"
value={weight}
onChange={(e) => setWeight(e.target.value)}
placeholder="Weight (kg)"
/>
<Input
type="number"
value={calories}
onChange={(e) => setCalories(e.target.value)}
placeholder="Calories (kcal)"
/>
<Input
type="number"
value={protein}
onChange={(e) => setProtein(e.target.value)}
placeholder="Protein (g)"
/>
<Button onClick={addEntry}>Add Entry</Button>
<div>
<h2 className="text-xl font-semibold mt-4">Entries</h2>
<ul className="list-disc list-inside">
{weightEntries.map((entry, index) => (
<li key={index}>
{entry.date}: {entry.weight} kg, {entry.calories} kcal,
{entry.protein} g protein
</li>
))}
</ul>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="chart">
<Card>
<CardContent className="h-[300px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={weightEntries}>
<XAxis dataKey="date" />
<YAxis domain={["auto", "auto"]} />
<Tooltip />
<Bar dataKey="weight" fill="#8884d8" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="suggestions">
<Card>
<CardContent className="space-y-4 pt-4">
<Button onClick={generateSuggestion}>Get AI Suggestions</Button>
{suggestion && <p className="text-lg mt-2">💡 {suggestion}</p>}
</CardContent>
</Card>
</TabsContent>
<TabsContent value="ask">
<Card>
<CardContent className="space-y-4 pt-4">
<Input
value={userQuestion}
onChange={(e) => setUserQuestion(e.target.value)}
placeholder="Ask the AI about fat loss, food, or training..."
/>
<Button onClick={askAI}>Ask</Button>
{aiAnswer && <p className="text-lg mt-2">🤖 {aiAnswer}</p>}
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
);
}
