import React, { useState, useEffect } from 'react';
import { Home, Dumbbell, Plus, Minus, Droplet, Check, Camera, ArrowRight, Flame, TrendingUp, Utensils, Download, Trash2, X, Ruler, LogOut, User, Save, Settings, Coffee, Image as ImageIcon, FileText, ChevronDown, Calendar as CalendarIcon, RefreshCw, Edit3, PlusCircle, ToggleLeft, ToggleRight, Edit, Eye, EyeOff } from 'lucide-react';
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, Legend } from 'recharts';
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, onAuthStateChanged, setPersistence, browserLocalPersistence } from 'firebase/auth';
import { getFirestore, collection, doc, getDoc, setDoc, addDoc, deleteDoc, updateDoc, onSnapshot, query, orderBy, limit, serverTimestamp, getDocs, writeBatch, where } from 'firebase/firestore';

// --- CONFIGURAÇÃO FIREBASE ---
const firebaseConfig = {
  apiKey: "AIzaSyA0TP1Hh3VFm_eDWWtXuyDGcj0W5Be8K3M",
  authDomain: "fittrack-pessoal.firebaseapp.com",
  projectId: "fittrack-pessoal",
  storageBucket: "fittrack-pessoal.firebasestorage.app",
  messagingSenderId: "703616634790",
  appId: "1:703616634790:web:33120b9c817ed862618967"
};

// Inicialização segura
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
setPersistence(auth, browserLocalPersistence).catch(console.error);
const db = getFirestore(app);
const appId = 'personal-fitness-app';

// --- UTILS ---
const compressImage = (file) => {
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) => {
            const img = new Image();
            img.src = event.target.result;
            img.onload = () => {
                const canvas = document.createElement('canvas');
                const MAX_WIDTH = 600;
                const scaleSize = MAX_WIDTH / img.width;
                canvas.width = MAX_WIDTH;
                canvas.height = img.height * scaleSize;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                resolve(canvas.toDataURL('image/jpeg', 0.6));
            };
        };
    });
};

const WEEKDAYS = ['domingo', 'segunda', 'terca', 'quarta', 'quinta', 'sexta', 'sabado'];
const WORKOUT_TYPES = ['A', 'B', 'C', 'D', 'E', 'F'];

// Função segura para formatar data (evita bug de -1 dia)
const formatDate = (dateString) => {
    if (!dateString) return '---';
    const parts = dateString.split('-'); 
    if (parts.length !== 3) return dateString;
    const [year, month, day] = parts;
    return `${day}/${month}/${year}`;
};

const getLocalToday = () => {
    const d = new Date();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};

// --- COMPONENTES AUXILIARES ---
const Modal = ({ isOpen, onClose, title, children }) => {
    if (!isOpen) return null;
    return (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 animate-fade-in">
            <div className="bg-white w-full max-w-sm rounded-2xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
                <div className="flex justify-between items-center mb-4">
                    <h3 className="text-xl font-bold text-gray-800">{title}</h3>
                    <button onClick={onClose} className="p-2 bg-gray-100 rounded-full hover:bg-gray-200"><X className="w-5 h-5" /></button>
                </div>
                {children}
            </div>
        </div>
    );
};

// --- TELA DE LOGIN ---
const AuthScreen = ({ onLogin }) => {
    const [isRegistering, setIsRegistering] = useState(false);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    const handleAuth = async (e) => {
        e.preventDefault();
        setError('');
        setLoading(true);
        try {
            if (isRegistering) {
                await createUserWithEmailAndPassword(auth, email, password);
            } else {
                await signInWithEmailAndPassword(auth, email, password);
            }
        } catch (err) {
            let msg = "Erro ao entrar.";
            if (err.code === 'auth/invalid-email') msg = "E-mail inválido.";
            if (err.code === 'auth/wrong-password') msg = "Senha incorreta.";
            if (err.code === 'auth/user-not-found') msg = "Usuário não encontrado.";
            if (err.code === 'auth/email-already-in-use') msg = "E-mail já cadastrado.";
            if (err.code === 'auth/weak-password') msg = "Senha muito fraca.";
            setError(msg);
        }
        setLoading(false);
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-100 p-4 font-sans">
            <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-xl">
                <div className="text-center mb-8">
                    <div className="bg-blue-600 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-200">
                        <Dumbbell className="text-white w-8 h-8" />
                    </div>
                    <h1 className="text-2xl font-bold text-gray-800">FitTrack Casal</h1>
                    <p className="text-gray-400 text-sm">Painel do Atleta</p>
                </div>

                <form onSubmit={handleAuth} className="space-y-4">
                    {error && <div className="bg-red-50 text-red-500 p-3 rounded-lg text-sm text-center font-medium">{error}</div>}
                    <div>
                        <label className="text-xs font-bold text-gray-500 uppercase ml-1">E-mail</label>
                        <input type="email" required className="w-full p-4 bg-gray-50 rounded-xl border border-gray-100 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none" placeholder="ex: Romulo@fit.com" value={email} onChange={e => setEmail(e.target.value)} />
                    </div>
                    <div>
                        <label className="text-xs font-bold text-gray-500 uppercase ml-1">Senha</label>
                        <input type="password" required className="w-full p-4 bg-gray-50 rounded-xl border border-gray-100 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none" placeholder="******" value={password} onChange={e => setPassword(e.target.value)} />
                    </div>
                    <button type="submit" disabled={loading} className="w-full bg-blue-600 text-white py-4 rounded-xl font-bold shadow-lg shadow-blue-200 hover:bg-blue-700 transition-colors disabled:opacity-70">{loading ? 'Carregando...' : (isRegistering ? 'Criar Conta' : 'Entrar')}</button>
                </form>
                <div className="mt-6 text-center"><button onClick={() => { setIsRegistering(!isRegistering); setError(''); }} className="text-sm text-gray-500 font-medium hover:text-blue-600">{isRegistering ? 'Já tem conta? Entrar' : 'Primeiro acesso? Criar Conta'}</button></div>
            </div>
        </div>
    );
};

// --- COMPONENTES DA UI ---
const TabButton = ({ active, onClick, icon: Icon, label, isMain }) => (
    <button onClick={onClick} className={`flex flex-col items-center justify-center p-1 w-full transition-all relative ${active ? 'text-blue-600' : 'text-gray-400'}`}>
        {isMain ? (
            <div className={`absolute -top-8 p-3 rounded-full shadow-lg border-4 border-[#f8fafc] transition-transform ${active ? 'bg-blue-600 text-white scale-110' : 'bg-blue-500 text-white hover:scale-105'}`}><Icon className="w-5 h-5" /></div>
        ) : (
            <Icon className="w-5 h-5 mb-1" />
        )}
        <span className={`text-[10px] font-medium ${isMain ? 'mt-6' : 'mt-0'}`}>{label}</span>
    </button>
);

const Card = ({ children, title, className = "" }) => (
    <div className={`bg-white rounded-2xl p-5 shadow-sm border border-gray-100 mb-4 ${className}`}>
        {title && <h3 className="text-lg font-bold text-gray-800 mb-4">{title}</h3>}
        {children}
    </div>
);

// --- TELAS PRINCIPAIS ---

// 1. DASHBOARD
const Dashboard = ({ user, currentDate, setCurrentDate }) => {
    const [data, setData] = useState({ habits: { cardio: false, creatine: false, water: 0 }, meals: [] });
    const [loading, setLoading] = useState(true);
    const [showWaterInput, setShowWaterInput] = useState(false);
    const [customWater, setCustomWater] = useState('');
    const dateKey = currentDate.toISOString().split('T')[0];

    useEffect(() => {
        if(!user) return;
        const unsub = onSnapshot(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), (doc) => {
            if (doc.exists()) setData({ habits: { cardio: false, creatine: false, water: 0, ...(doc.data().habits || {}) }, meals: doc.data().meals || [] });
            else setData({ habits: { cardio: false, creatine: false, water: 0 }, meals: [] });
            setLoading(false);
        });
        return () => unsub();
    }, [user, dateKey]);

    const saveData = async (newData) => {
        if(!user) return;
        try { await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), { ...newData, date: dateKey }, { merge: true }); } catch (e) { console.error(e); }
    };

    const toggleHabit = (id) => saveData({ ...data, habits: { ...data.habits, [id]: !data.habits[id] } });
    const updateWater = (v) => saveData({ ...data, habits: { ...data.habits, water: Math.max(0, (data.habits.water || 0) + v) } });
    const handleCustomWater = () => { const val = parseInt(customWater); if (val > 0) { updateWater(val); setCustomWater(''); setShowWaterInput(false); }};
    
    const totals = (data.meals || []).reduce((acc, m) => ({ p: acc.p + (parseInt(m.p)||0), c: acc.c + (parseInt(m.c)||0), f: acc.f + (parseInt(m.f)||0) }), { p: 0, c: 0, f: 0 });
    const totalCals = (totals.p * 4) + (totals.c * 4) + (totals.f * 9);
    const changeDate = (d) => { const n = new Date(currentDate); n.setDate(n.getDate() + d); setCurrentDate(n); };

    if (loading) return <div className="p-8 text-center text-gray-500">Carregando...</div>;

    return (
        <div className="pb-24 animate-fade-in">
             <div className="flex items-center justify-between mb-6 bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
                <div className="flex items-center gap-3">
                    <button onClick={() => changeDate(-1)} className="p-2 bg-gray-50 rounded-full hover:bg-gray-100"><ArrowRight className="w-5 h-5 rotate-180" /></button>
                    <div className="text-center"><span className="text-xs text-gray-400 uppercase font-bold tracking-wider">{dateKey === new Date().toISOString().split('T')[0] ? "HOJE" : "DATA"}</span><h2 className="text-xl font-bold text-gray-800">{new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'short' }).format(currentDate)}</h2></div>
                    <button onClick={() => changeDate(1)} className="p-2 bg-gray-50 rounded-full hover:bg-gray-100"><ArrowRight className="w-5 h-5" /></button>
                </div>
                <button onClick={() => auth.signOut()} className="p-2 bg-red-50 text-red-500 rounded-lg hover:bg-red-100"><LogOut className="w-5 h-5" /></button>
            </div>

            <Card className="bg-gradient-to-br from-blue-600 to-blue-800 text-white border-none">
                <div className="flex justify-between items-start"><div><p className="text-blue-200 text-sm font-medium mb-1">Calorias</p><h1 className="text-5xl font-bold mb-2">{totalCals} <span className="text-xl font-normal text-blue-200">kcal</span></h1></div><div className="bg-white/10 p-2 rounded-lg"><Flame className="w-5 h-5" /></div></div>
                <div className="grid grid-cols-3 gap-2 mt-4 text-center">
                    <div className="bg-white/20 rounded-xl p-3"><span className="block text-xs text-blue-100">Prot</span><span className="text-xl font-bold">{totals.p}g</span></div>
                    <div className="bg-white/20 rounded-xl p-3"><span className="block text-xs text-blue-100">Carb</span><span className="text-xl font-bold">{totals.c}g</span></div>
                    <div className="bg-white/20 rounded-xl p-3"><span className="block text-xs text-blue-100">Gord</span><span className="text-xl font-bold">{totals.f}g</span></div>
                </div>
            </Card>

            <Card title="Hábitos">
                <div className="space-y-3">
                    {[{ id: 'cardio', label: 'Cardio', icon: '🏃' }, { id: 'creatine', label: 'Creatina', icon: '💊' }].map(h => (
                        <button key={h.id} onClick={() => toggleHabit(h.id)} className={`w-full p-4 rounded-xl flex items-center justify-between border-2 transition-all ${data.habits[h.id] ? 'border-green-500 bg-green-50' : 'border-gray-100 hover:border-gray-200'}`}>
                            <div className="flex items-center gap-3"><span className="text-2xl">{h.icon}</span><span className={`font-semibold ${data.habits[h.id] ? 'text-green-700' : 'text-gray-600'}`}>{h.label}</span></div>
                            <div className={`w-6 h-6 rounded-full flex items-center justify-center ${data.habits[h.id] ? 'bg-green-500 text-white' : 'bg-gray-200'}`}>{data.habits[h.id] && <Check className="w-4 h-4" />}</div>
                        </button>
                    ))}
                </div>
            </Card>

            <Card>
                <div className="flex justify-between items-center mb-4"><h3 className="text-lg font-bold text-gray-800 flex items-center gap-2"><span className="text-blue-500"><Droplet className="w-5 h-5" /></span> Hidratação</h3><span className="text-2xl font-bold text-blue-600">{(data.habits.water || 0) / 1000}L</span></div>
                <div className="h-4 bg-gray-100 rounded-full overflow-hidden mb-4"><div className="h-full bg-blue-500 transition-all" style={{ width: `${Math.min(((data.habits.water || 0) / 4000) * 100, 100)}%` }}></div></div>
                {showWaterInput ? (
                    <div className="flex gap-2 mb-2 animate-fade-in">
                        <input type="number" placeholder="ml" className="w-full p-3 bg-gray-50 rounded-xl font-bold focus:outline-blue-500" value={customWater} onChange={(e) => setCustomWater(e.target.value)} autoFocus />
                        <button onClick={handleCustomWater} className="bg-blue-600 text-white px-4 rounded-xl font-bold">OK</button>
                        <button onClick={() => setShowWaterInput(false)} className="bg-gray-200 text-gray-500 px-3 rounded-xl"><X className="w-5 h-5" /></button>
                    </div>
                ) : (
                    <div className="flex gap-3">
                        <button onClick={() => updateWater(-250)} className="p-3 bg-red-50 text-red-500 rounded-xl hover:bg-red-100"><Minus className="w-5 h-5" /></button>
                        <button onClick={() => updateWater(250)} className="flex-1 py-3 bg-blue-50 text-blue-600 font-bold rounded-xl hover:bg-blue-100 flex items-center justify-center gap-2"><Plus className="w-5 h-5" /> 250ml</button>
                        <button onClick={() => setShowWaterInput(true)} className="px-4 py-3 bg-gray-100 text-gray-600 font-bold rounded-xl hover:bg-gray-200">Outro</button>
                    </div>
                )}
            </Card>
        </div>
    );
};

// 2. TREINO (SISTEMA FLEXÍVEL ABCD + ATIVAR/DESATIVAR)
const WorkoutView = ({ user, currentDate, setCurrentDate }) => {
    const [template, setTemplate] = useState(null);
    const [dailyLog, setDailyLog] = useState(null); 
    const [logs, setLogs] = useState({});
    const [loading, setLoading] = useState(true);
    const [currentWorkoutType, setCurrentWorkoutType] = useState(null); // 'A', 'B', 'C', 'D', 'Rest'
    const [availableWorkouts, setAvailableWorkouts] = useState({}); // { A: {isActive: true, description: ''}, ... }
    
    // Estados para o Gerenciador de Treinos
    const [showManager, setShowManager] = useState(false);
    const [editType, setEditType] = useState('A');
    const [editExercises, setEditExercises] = useState([]);
    const [editMeta, setEditMeta] = useState({ isActive: true, description: '' }); // Metadados em edição
    const [savingTemplate, setSavingTemplate] = useState(false);

    const dateKey = currentDate.toISOString().split('T')[0];

    // Carregar configurações de treino do usuário
    useEffect(() => {
        if (!user) return;
        const fetchWorkoutsMeta = async () => {
            // Busca todos os treinos para saber quais estão ativos e suas descrições
            const q = query(collection(db, 'artifacts', appId, 'users', user.uid, 'workouts'));
            const snap = await getDocs(q);
            const meta = {};
            snap.forEach(doc => {
                const d = doc.data();
                meta[doc.id] = { 
                    isActive: d.isActive !== false, // Padrão true se não existir
                    description: d.description || ''
                };
            });
            
            // Se não tiver nenhum (primeiro acesso), cria padrão na memória para UI
            if (Object.keys(meta).length === 0) {
                WORKOUT_TYPES.forEach(t => meta[t] = { isActive: true, description: '' });
            }
            setAvailableWorkouts(meta);
        };
        fetchWorkoutsMeta();
    }, [user, showManager]); // Recarrega ao fechar o manager

    useEffect(() => {
        if (!user) return;
        setLoading(true);

        const fetchDailyLog = onSnapshot(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), async (docSnap) => {
            if (docSnap.exists()) {
                const d = docSnap.data();
                setDailyLog(d);
                setLogs(d.workout_data || {});
                if (d.workout_type) {
                    setCurrentWorkoutType(d.workout_type);
                    if (d.exercises_snapshot) {
                        setTemplate({ exercises: d.exercises_snapshot });
                    } else if (d.workout_type !== 'Rest') {
                        const tplRef = doc(db, 'artifacts', appId, 'users', user.uid, 'workouts', d.workout_type);
                        const tplSnap = await getDoc(tplRef);
                        if (tplSnap.exists()) setTemplate(tplSnap.data());
                    } else {
                        setTemplate({ isRestDay: true });
                    }
                } else {
                    setCurrentWorkoutType(null);
                    setTemplate(null);
                }
            } else {
                setDailyLog(null);
                setLogs({});
                setCurrentWorkoutType(null);
                setTemplate(null);
            }
            setLoading(false);
        });

        return () => fetchDailyLog();
    }, [user, dateKey]);

    // Carregar template para edição no modal
    useEffect(() => {
        if (!showManager || !user) return;
        const loadEditTemplate = async () => {
            const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'workouts', editType);
            const snap = await getDoc(docRef);
            if (snap.exists()) {
                const d = snap.data();
                setEditExercises(d.exercises || []);
                setEditMeta({ 
                    isActive: d.isActive !== false, 
                    description: d.description || '' 
                });
            } else {
                setEditExercises([]);
                setEditMeta({ isActive: true, description: '' });
            }
        };
        loadEditTemplate();
    }, [showManager, editType, user]);

    const selectWorkoutForToday = async (type) => {
        setCurrentWorkoutType(type);
        setLoading(true);
        
        if (type === 'Rest') {
            const payload = { workout_type: 'Rest', exercises_snapshot: null, workout_data: {} };
            await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), payload, { merge: true });
            setTemplate({ isRestDay: true });
        } else {
            const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'workouts', type);
            const snap = await getDoc(docRef);
            let exercises = [];
            
            if (snap.exists()) {
                exercises = snap.data().exercises || [];
            } else {
                exercises = Array.from({ length: 6 }, (_, i) => ({ name: `Exercício ${i+1}`, sets: "3x12" }));
                await setDoc(docRef, { exercises, isActive: true, description: '' });
            }

            const payload = { 
                workout_type: type, 
                exercises_snapshot: exercises,
                workout_data: {} 
            };
            await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), payload, { merge: true });
            setTemplate({ exercises });
        }
        setLoading(false);
    };

    // --- FUNÇÕES DO GERENCIADOR DE TREINOS ---
    const addEditExercise = () => setEditExercises([...editExercises, { name: "", sets: "" }]);
    const removeEditExercise = (idx) => setEditExercises(editExercises.filter((_, i) => i !== idx));
    const updateEditExercise = (idx, field, val) => {
        const newEx = [...editExercises];
        newEx[idx][field] = val;
        setEditExercises(newEx);
    };
    const saveEditTemplate = async () => {
        setSavingTemplate(true);
        try {
            await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'workouts', editType), { 
                exercises: editExercises,
                isActive: editMeta.isActive,
                description: editMeta.description
            });
            alert(`Configurações do Treino ${editType} salvas!`);
        } catch (e) { alert("Erro ao salvar: " + e.message); }
        setSavingTemplate(false);
    };

    // --- FUNÇÕES DE LOG ---
    const handleCheck = async (exerciseName) => {
        const newData = { ...logs, [exerciseName]: { ...logs[exerciseName], done: !logs[exerciseName]?.done } };
        setLogs(newData);
        const payload = { workout_data: newData };
        if (!dailyLog?.exercises_snapshot && template?.exercises) {
            payload.exercises_snapshot = template.exercises;
        }
        await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), payload, { merge: true });
    };

    const handleWeightChange = async (exerciseName, weight) => {
        const newData = { ...logs, [exerciseName]: { ...logs[exerciseName], weight: weight } };
        setLogs(newData);
        const payload = { workout_data: newData };
        if (!dailyLog?.exercises_snapshot && template?.exercises) {
            payload.exercises_snapshot = template.exercises;
        }
        await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), payload, { merge: true });
    };

    const changeDate = (d) => { const n = new Date(currentDate); n.setDate(n.getDate() + d); setCurrentDate(n); };

    // Filtra quais treinos estão ativos para mostrar na seleção
    const activeWorkoutsList = WORKOUT_TYPES.filter(t => availableWorkouts[t]?.isActive !== false);

    return (
        <div className="pb-24 animate-fade-in">
            {/* Modal de Gerenciamento */}
            <Modal isOpen={showManager} onClose={() => setShowManager(false)} title="Gerenciar Treinos">
                <div className="flex justify-between mb-4 bg-gray-100 p-1 rounded-lg overflow-x-auto">
                    {WORKOUT_TYPES.map(t => (
                        <button 
                            key={t} 
                            onClick={() => setEditType(t)}
                            className={`px-4 py-2 rounded-md font-bold text-sm transition-all whitespace-nowrap ${editType === t ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500'}`}
                        >
                            {t}
                        </button>
                    ))}
                </div>

                <div className="bg-gray-50 p-3 rounded-xl mb-4 border border-gray-200">
                    <div className="flex justify-between items-center mb-3">
                        <span className="text-sm font-bold text-gray-700">Ativar este treino?</span>
                        <button 
                            onClick={() => setEditMeta({...editMeta, isActive: !editMeta.isActive})}
                            className={`w-12 h-6 rounded-full p-1 transition-colors ${editMeta.isActive ? 'bg-green-500' : 'bg-gray-300'}`}
                        >
                            <div className={`w-4 h-4 bg-white rounded-full shadow-sm transition-transform ${editMeta.isActive ? 'translate-x-6' : ''}`} />
                        </button>
                    </div>
                    <div>
                        <label className="text-xs font-bold text-gray-400 uppercase">Rótulo (ex: Peito/Tríceps)</label>
                        <input 
                            value={editMeta.description} 
                            onChange={e => setEditMeta({...editMeta, description: e.target.value})}
                            className="w-full p-2 mt-1 border rounded-lg text-sm" 
                            placeholder="Sem descrição" 
                        />
                    </div>
                </div>
                
                <div className="max-h-64 overflow-y-auto space-y-3 mb-4 pr-1">
                    {editExercises.map((ex, idx) => (
                        <div key={idx} className="flex gap-2 items-center">
                            <div className="flex-1 space-y-1">
                                <input 
                                    placeholder="Nome do Exercício" 
                                    className="w-full p-2 border rounded-md text-sm font-bold"
                                    value={ex.name}
                                    onChange={e => updateEditExercise(idx, 'name', e.target.value)}
                                />
                                <input 
                                    placeholder="Séries/Reps (ex: 4x10)" 
                                    className="w-full p-2 border rounded-md text-xs text-gray-600"
                                    value={ex.sets}
                                    onChange={e => updateEditExercise(idx, 'sets', e.target.value)}
                                />
                            </div>
                            <button onClick={() => removeEditExercise(idx)} className="text-red-400 p-2 hover:bg-red-50 rounded-full"><Trash2 className="w-4 h-4" /></button>
                        </div>
                    ))}
                    {editExercises.length === 0 && <div className="text-center text-gray-400 text-sm py-4">Nenhum exercício cadastrado.</div>}
                </div>

                <div className="flex gap-2">
                    <button onClick={addEditExercise} className="flex-1 py-2 border-2 border-dashed border-gray-300 text-gray-500 rounded-xl font-bold text-sm hover:bg-gray-50 flex justify-center items-center gap-2"><PlusCircle className="w-4 h-4" /> Adicionar</button>
                    <button onClick={saveEditTemplate} disabled={savingTemplate} className="flex-1 py-2 bg-blue-600 text-white rounded-xl font-bold text-sm shadow-lg">{savingTemplate ? 'Salvando...' : 'Salvar Alterações'}</button>
                </div>
            </Modal>

             <div className="flex items-center justify-between mb-6 bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
                <div className="flex items-center gap-2">
                    <button onClick={() => changeDate(-1)} className="p-2 bg-gray-50 rounded-full hover:bg-gray-100"><ArrowRight className="w-5 h-5 rotate-180" /></button>
                    <div className="text-center w-24">
                        <span className="text-xs text-gray-400 uppercase font-bold tracking-wider block">{currentWorkoutType ? (currentWorkoutType === 'Rest' ? 'Descanso' : `Treino ${currentWorkoutType}`) : '---'}</span>
                        <span className="text-sm font-bold text-gray-800">{new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'numeric' }).format(currentDate)}</span>
                    </div>
                    <button onClick={() => changeDate(1)} className="p-2 bg-gray-50 rounded-full hover:bg-gray-100"><ArrowRight className="w-5 h-5" /></button>
                </div>
                
                <button onClick={() => setShowManager(true)} className="p-2 bg-gray-50 text-gray-500 rounded-lg hover:bg-gray-200 transition-colors">
                    <Settings className="w-5 h-5" />
                </button>
            </div>

            {!currentWorkoutType ? (
                <div className="text-center py-8">
                    <h3 className="text-lg font-bold text-gray-700 mb-4">Qual o treino de hoje?</h3>
                    <div className={`grid gap-3 mb-4 ${activeWorkoutsList.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}`}>
                        {activeWorkoutsList.map(t => (
                            <button 
                                key={t} 
                                onClick={() => selectWorkoutForToday(t)}
                                className="bg-white p-4 rounded-xl border border-gray-200 shadow-sm hover:border-blue-500 hover:text-blue-600 transition-all flex flex-col items-center justify-center min-h-[100px]"
                            >
                                <span className="font-bold text-3xl">{t}</span>
                                {availableWorkouts[t]?.description && (
                                    <span className="text-xs text-gray-500 mt-1 font-medium bg-gray-100 px-2 py-1 rounded-full">{availableWorkouts[t].description}</span>
                                )}
                            </button>
                        ))}
                    </div>
                    <button 
                        onClick={() => selectWorkoutForToday('Rest')}
                        className="w-full bg-green-50 text-green-600 p-3 rounded-xl font-bold border border-green-200"
                    >
                        Dia de Descanso
                    </button>
                </div>
            ) : currentWorkoutType === 'Rest' ? (
                <div className="text-center py-12 bg-green-50 rounded-2xl border border-green-200">
                    <Coffee className="w-16 h-16 mx-auto mb-4 text-green-500" />
                    <h3 className="text-xl font-bold text-green-800 mb-2">Dia de Descanso</h3>
                    <p className="text-green-600 mb-4">Aproveite para recuperar!</p>
                    <button onClick={() => setCurrentWorkoutType(null)} className="text-xs text-green-700 underline">Mudei de ideia, quero treinar</button>
                </div>
            ) : (
                <>
                    <div className="flex justify-between items-center mb-4 px-2">
                        <div>
                            <span className="text-sm font-bold text-gray-500 block">Executando Treino {currentWorkoutType}</span>
                            {availableWorkouts[currentWorkoutType]?.description && <span className="text-xs text-blue-600 font-bold">{availableWorkouts[currentWorkoutType].description}</span>}
                        </div>
                        <button onClick={() => setCurrentWorkoutType(null)} className="text-xs text-blue-500 font-bold bg-blue-50 px-3 py-1 rounded-lg">Trocar</button>
                    </div>
                    <div className="space-y-3">
                        {(template?.exercises || []).map((ex, idx) => {
                            const log = logs[ex.name] || {};
                            return (
                                <div key={idx} className={`bg-white p-4 rounded-xl border-l-4 shadow-sm transition-all ${log.done ? 'border-green-500 bg-green-50' : 'border-blue-500'}`}>
                                    <div className="flex justify-between items-start mb-3">
                                        <div><h4 className="font-bold text-gray-800 text-lg leading-tight">{ex.name}</h4><p className="text-sm text-gray-500 mt-1">{ex.sets}</p></div>
                                        <button onClick={() => handleCheck(ex.name)} className={`w-8 h-8 rounded-full border-2 flex items-center justify-center transition-colors ${log.done ? 'bg-green-500 border-green-500 text-white' : 'border-gray-300 text-transparent'}`}><Check className="w-5 h-5" /></button>
                                    </div>
                                    <div className="flex items-center gap-2"><span className="text-xs font-bold text-gray-400 uppercase">Carga (kg):</span><input type="number" placeholder="0" className="w-20 p-2 bg-white border border-gray-200 rounded-lg text-center font-bold text-gray-800 focus:border-blue-500 outline-none" value={log.weight || ''} onChange={(e) => handleWeightChange(ex.name, e.target.value)} onBlur={(e) => handleWeightChange(ex.name, e.target.value)} /></div>
                                </div>
                            );
                        })}
                        {(template?.exercises || []).length === 0 && <div className="text-center text-gray-400 py-8">Treino vazio.<br/>Use a engrenagem para adicionar exercícios.</div>}
                    </div>
                </>
            )}
        </div>
    );
};

// 3. REFEIÇÕES
const MealsView = ({ user, currentDate, setCurrentDate }) => {
    const [data, setData] = useState({ meals: [] });
    const [showForm, setShowForm] = useState(false);
    const [newMeal, setNewMeal] = useState({ name: '', p: '', c: '', f: '' });
    const dateKey = currentDate.toISOString().split('T')[0];

    useEffect(() => {
        if(!user) return;
        const unsub = onSnapshot(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), (doc) => { if (doc.exists()) setData({ meals: [], ...doc.data() }); else setData({ meals: [] }); });
        return () => unsub();
    }, [user, dateKey]);

    const addMeal = async () => {
        if (!newMeal.name) return;
        const mealToAdd = { id: Date.now().toString(), name: newMeal.name, p: parseInt(newMeal.p)||0, c: parseInt(newMeal.c)||0, f: parseInt(newMeal.f)||0 };
        try { await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), { ...data, meals: [...(data.meals||[]), mealToAdd], date: dateKey }, { merge: true }); setNewMeal({ name: '', p: '', c: '', f: '' }); setShowForm(false); } catch (e) { console.error(e); }
    };
    const removeMeal = async (id) => { try { await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'daily_logs', dateKey), { ...data, meals: data.meals.filter(m => m.id !== id) }, { merge: true }); } catch (e) { console.error(e); }};
    const changeDate = (d) => { const n = new Date(currentDate); n.setDate(n.getDate() + d); setCurrentDate(n); };
    const getCals = (m) => (m.p*4 + m.c*4 + m.f*9);

    return (
        <div className="pb-24 animate-fade-in">
             <div className="flex items-center justify-between mb-4 bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
                <button onClick={() => changeDate(-1)} className="p-2 bg-gray-50 rounded-full"><ArrowRight className="w-5 h-5 rotate-180" /></button>
                <div className="text-center"><span className="text-xs text-gray-400 uppercase font-bold tracking-wider">REFEIÇÕES</span><h2 className="text-lg font-bold text-gray-800">{new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'short' }).format(currentDate)}</h2></div>
                <button onClick={() => changeDate(1)} className="p-2 bg-gray-50 rounded-full"><ArrowRight className="w-5 h-5" /></button>
            </div>
            <div className="space-y-3">
                {(data.meals || []).map(m => (
                    <div key={m.id} className="bg-white p-4 rounded-xl border border-gray-100 shadow-sm flex justify-between items-center">
                        <div><h4 className="font-bold text-gray-800 text-lg">{m.name}</h4><div className="text-xs text-gray-500 space-x-2"><span>P: {m.p}g</span><span>C: {m.c}g</span><span>G: {m.f}g</span></div></div>
                        <div className="flex items-center gap-3"><span className="font-bold text-gray-700">{getCals(m)} kcal</span><button onClick={() => removeMeal(m.id)} className="text-red-300"><Trash2 className="w-4 h-4" /></button></div>
                    </div>
                ))}
            </div>
            {showForm && <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"><div className="bg-white w-full max-w-sm rounded-2xl p-6"><input placeholder="Nome" className="w-full p-3 bg-gray-50 rounded-xl mb-3" value={newMeal.name} onChange={e => setNewMeal({...newMeal, name: e.target.value})} /><div className="grid grid-cols-3 gap-2 mb-4"><input type="number" placeholder="Prot" className="p-3 bg-gray-50 rounded-xl" value={newMeal.p} onChange={e => setNewMeal({...newMeal, p: e.target.value})} /><input type="number" placeholder="Carb" className="p-3 bg-gray-50 rounded-xl" value={newMeal.c} onChange={e => setNewMeal({...newMeal, c: e.target.value})} /><input type="number" placeholder="Gord" className="p-3 bg-gray-50 rounded-xl" value={newMeal.f} onChange={e => setNewMeal({...newMeal, f: e.target.value})} /></div><button onClick={addMeal} className="w-full bg-blue-600 text-white py-4 rounded-xl font-bold">Adicionar</button><button onClick={() => setShowForm(false)} className="w-full mt-2 text-gray-500">Cancelar</button></div></div>}
            <button onClick={() => setShowForm(true)} className="hidden sm:flex w-full mt-4 bg-blue-50 text-blue-600 py-3 rounded-xl font-bold items-center justify-center gap-2"><Plus className="w-5 h-5" /> Adicionar Refeição</button>
            {!showForm && <div className="fixed bottom-24 right-5 sm:hidden"><button onClick={() => setShowForm(true)} className="bg-blue-600 text-white p-4 rounded-full shadow-lg"><Plus className="w-6 h-6" /></button></div>}
        </div>
    );
};

// 4. MEDIDAS
const Measurements = ({ user, setView }) => {
    const [newCheckin, setNewCheckin] = useState({ weight: '', waist: '', chest: '', arm: '', photos: { front: null, side: null, back: null } });
    const [saving, setSaving] = useState(false);
    const [date, setDate] = useState(getLocalToday()); // Usa data local agora
    const labels = { weight: 'Peso (kg)', waist: 'Cintura (cm)', chest: 'Tórax (cm)', arm: 'Braço (cm)' };

    const handlePhotoUpload = async (e, type) => {
        const file = e.target.files[0]; if (!file) return; const compressed = await compressImage(file);
        setNewCheckin(prev => ({ ...prev, photos: { ...prev.photos, [type]: compressed } }));
    };

    const saveCheckin = async () => {
        if(!user) return; setSaving(true);
        try {
            await addDoc(collection(db, 'artifacts', appId, 'users', user.uid, 'checkins'), {
                date: date,
                weight: parseFloat(newCheckin.weight)||0, waist: parseFloat(newCheckin.waist)||0, chest: parseFloat(newCheckin.chest)||0, arm: parseFloat(newCheckin.arm)||0, 
                photos: newCheckin.photos, 
                createdAt: serverTimestamp()
            });
            alert('Salvo!'); setView('evolution');
        } catch (e) { alert(e.message); }
        setSaving(false);
    };

    return (
        <div className="pb-24 animate-fade-in">
            <h2 className="text-2xl font-bold text-gray-800 mb-6">Medidas</h2>
            
            <Card>
                <label className="text-xs text-gray-400 uppercase font-bold">Data da Medição</label>
                <input 
                    type="date" 
                    className="w-full p-3 bg-gray-50 rounded-lg mt-1 font-bold text-gray-800"
                    value={date}
                    onChange={e => setDate(e.target.value)}
                />
            </Card>

            <Card title="Corporal">
                <div className="grid grid-cols-2 gap-4">
                    {['weight', 'waist', 'chest', 'arm'].map(f => (<div key={f}><label className="text-xs text-gray-400 uppercase font-bold">{labels[f]}</label><input type="number" className="w-full p-3 bg-gray-50 rounded-lg mt-1" value={newCheckin[f]} onChange={e => setNewCheckin({...newCheckin, [f]: e.target.value})} /></div>))}
                </div>
            </Card>
            <Card title="Fotos">
                <div className="grid grid-cols-3 gap-2">
                    {['front', 'side', 'back'].map(p => (
                        <div key={p} className="flex flex-col items-center">
                            <span className="text-[10px] uppercase font-bold mb-1 text-gray-500">{p === 'front' ? 'Frente' : p === 'side' ? 'Lado' : 'Costas'}</span>
                            <label className="w-full aspect-[3/4] bg-gray-100 rounded-lg flex flex-col items-center justify-center cursor-pointer overflow-hidden relative border border-gray-200 hover:bg-gray-200 transition-colors">
                                {newCheckin.photos[p] ? <img src={newCheckin.photos[p]} className="absolute inset-0 w-full h-full object-cover" /> : <Camera className="w-6 h-6 text-gray-400" />}
                                <input type="file" className="hidden" accept="image/*" onChange={(e) => handlePhotoUpload(e, p)} />
                            </label>
                        </div>
                    ))}
                </div>
            </Card>
            <button onClick={saveCheckin} disabled={saving} className="w-full bg-blue-600 text-white py-4 rounded-xl font-bold mt-4">{saving ? '...' : 'Salvar'}</button>
        </div>
    );
};

// 5. EVOLUÇÃO
const Evolution = ({ user }) => {
    const [subView, setSubView] = useState('stats'); 
    const [checkins, setCheckins] = useState([]);
    const [logs, setLogs] = useState([]);
    const [dateA, setDateA] = useState('');
    const [dateB, setDateB] = useState('');
    const [deleteId, setDeleteId] = useState(null); 
    const [reportPeriod, setReportPeriod] = useState('daily');
    const [editingCheckin, setEditingCheckin] = useState(null); // ID do checkin em edição
    const [editForm, setEditForm] = useState({});
    const [privacyMode, setPrivacyMode] = useState(true);

    useEffect(() => {
        if(!user) return;
        const q1 = query(collection(db, 'artifacts', appId, 'users', user.uid, 'checkins'), orderBy('date', 'asc'));
        const unsub1 = onSnapshot(q1, (snap) => setCheckins(snap.docs.map(d => ({ id: d.id, ...d.data() }))));
        const q2 = query(collection(db, 'artifacts', appId, 'users', user.uid, 'daily_logs'), orderBy('date', 'desc'), limit(50));
        const unsub2 = onSnapshot(q2, (snap) => setLogs(snap.docs.map(d => d.data())));
        return () => { unsub1(); unsub2(); };
    }, [user]);

    const confirmDelete = async () => {
        if (deleteId) {
            try { await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'checkins', deleteId)); setDeleteId(null); } catch (e) { alert("Erro: " + e.message); }
        }
    };

    const handleEditClick = (c) => {
        setEditForm({
            date: c.date,
            weight: c.weight,
            waist: c.waist,
            chest: c.chest,
            arm: c.arm
        });
        setEditingCheckin(c.id);
    };

    const saveEditCheckin = async () => {
        if (!editingCheckin) return;
        try {
            await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'checkins', editingCheckin), {
                date: editForm.date,
                weight: parseFloat(editForm.weight) || 0,
                waist: parseFloat(editForm.waist) || 0,
                chest: parseFloat(editForm.chest) || 0,
                arm: parseFloat(editForm.arm) || 0
            });
            setEditingCheckin(null);
        } catch (e) {
            alert("Erro ao salvar edição: " + e.message);
        }
    };

    const generateReport = () => {
        let text = `=== RELATÓRIO FITTRACK (${reportPeriod.toUpperCase()}) ===\n\n`;
        
        const now = new Date();
        const todayStr = getLocalToday(); // Usa data local para filtro
        let filteredLogs = logs;
        let filteredCheckins = checkins;

        // Filter Logic applied to BOTH logs and checkins
        if (reportPeriod === 'daily') {
            filteredLogs = logs.filter(l => l.date === todayStr);
            filteredCheckins = checkins.filter(c => c.date === todayStr);
        } else if (reportPeriod === 'weekly') {
            const oneWeekAgo = new Date();
            oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
            const weekStr = oneWeekAgo.toISOString().split('T')[0];
            filteredLogs = logs.filter(l => l.date >= weekStr);
            filteredCheckins = checkins.filter(c => c.date >= weekStr);
        } else if (reportPeriod === 'monthly') {
            const oneMonthAgo = new Date();
            oneMonthAgo.setDate(oneMonthAgo.getDate() - 30);
            const monthStr = oneMonthAgo.toISOString().split('T')[0];
            filteredLogs = logs.filter(l => l.date >= monthStr);
            filteredCheckins = checkins.filter(c => c.date >= monthStr);
        }

        if (filteredLogs.length === 0 && filteredCheckins.length === 0) {
            alert("Nenhum dado encontrado para este período.");
            return;
        }

        text += "=== MEDIDAS ===\n";
        if (filteredCheckins.length > 0) {
            filteredCheckins.forEach(c => {
                // Formatação manual no relatório também
                text += `Data: ${formatDate(c.date)} | Peso: ${c.weight}kg | Cintura: ${c.waist}cm | Tórax: ${c.chest}cm | Braço: ${c.arm}cm\n`;
            });
        } else {
            text += "Nenhuma medição neste período.\n";
        }

        text += "\n=== DIÁRIO DE TREINO E DIETA ===\n";
        
        filteredLogs.forEach(l => {
            // Formatação segura
            text += `\n--------------------------------------------------\n`;
            text += `DATA: ${formatDate(l.date)}\n`;
            
            // HÁBITOS
            text += `\n[HÁBITOS]\n`;
            text += `Água: ${l.habits?.water || 0}ml\n`;
            text += `Creatina: ${l.habits?.creatine ? 'SIM' : 'NÃO'}\n`;
            text += `Cardio: ${l.habits?.cardio ? 'SIM' : 'NÃO'}\n`;

            // ALIMENTAÇÃO
            const meals = l.meals || [];
            const totals = meals.reduce((acc, m) => ({ 
                p: acc.p + (parseInt(m.p)||0), 
                c: acc.c + (parseInt(m.c)||0), 
                f: acc.f + (parseInt(m.f)||0) 
            }), { p: 0, c: 0, f: 0 });
            const totalCals = (totals.p * 4) + (totals.c * 4) + (totals.f * 9);

            text += `\n[ALIMENTAÇÃO]\n`;
            if (meals.length > 0) {
                meals.forEach(m => {
                    text += ` - ${m.name}: ${m.p}g P / ${m.c}g C / ${m.f}g G\n`;
                });
                text += ` TOTAL: ${totalCals} kcal (P:${totals.p}g C:${totals.c}g G:${totals.f}g)\n`;
            } else {
                text += ` Sem registros de refeição.\n`;
            }

            // TREINO
            text += `\n[TREINO]\n`;
            const workoutData = l.workout_data || {};
            text += ` Tipo: ${l.workout_type === 'Rest' ? 'Descanso' : ('Treino ' + (l.workout_type || '?'))}\n`;

            const exercisesDone = Object.entries(workoutData).filter(([_, data]) => data.done);
            
            if (l.isRestDayOverride === true) {
                text += ` Dia de Descanso (Registrado).\n`;
            } else if (exercisesDone.length > 0) {
                exercisesDone.forEach(([name, data]) => {
                    text += ` - ${name}: Carga ${data.weight || 0}kg\n`;
                });
            } else {
                text += ` Não registrou cargas/conclusão.\n`;
            }
        });

        const blob = new Blob([text], { type: 'text/plain' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a'); a.href = url; a.download = `Relatorio_${reportPeriod}_${todayStr}.txt`; a.click();
    };

    // Calculate diffs vs First Checkin
    const firstCheckin = checkins.length > 0 ? checkins[0] : null;
    const getDiff = (val, field) => {
        if (!firstCheckin || !val) return null;
        const diff = (val - firstCheckin[field]).toFixed(1);
        const sign = diff > 0 ? '+' : '';
        return `${sign}${diff}`;
    };

    const checkinsReverse = [...checkins].reverse();

    return (
        <div className="pb-24 animate-fade-in">
            {/* Modal de Exclusão */}
            <Modal isOpen={!!deleteId} onClose={() => setDeleteId(null)} title="Excluir Medição?">
                <p className="text-gray-600 mb-4">Tem certeza? Essa ação não pode ser desfeita.</p>
                <div className="flex gap-2">
                    <button onClick={() => setDeleteId(null)} className="flex-1 py-2 bg-gray-100 rounded-lg font-bold">Cancelar</button>
                    <button onClick={confirmDelete} className="flex-1 py-2 bg-red-600 text-white rounded-lg font-bold">Excluir</button>
                </div>
            </Modal>

            {/* Modal de Edição */}
            <Modal isOpen={!!editingCheckin} onClose={() => setEditingCheckin(null)} title="Editar Medição">
                <div className="space-y-3">
                    <div>
                        <label className="text-xs font-bold text-gray-400">Data</label>
                        <input type="date" value={editForm.date} onChange={e => setEditForm({...editForm, date: e.target.value})} className="w-full p-2 border rounded-lg" />
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                        <div><label className="text-xs font-bold text-gray-400">Peso (kg)</label><input type="number" value={editForm.weight} onChange={e => setEditForm({...editForm, weight: e.target.value})} className="w-full p-2 border rounded-lg" /></div>
                        <div><label className="text-xs font-bold text-gray-400">Cintura (cm)</label><input type="number" value={editForm.waist} onChange={e => setEditForm({...editForm, waist: e.target.value})} className="w-full p-2 border rounded-lg" /></div>
                        <div><label className="text-xs font-bold text-gray-400">Tórax (cm)</label><input type="number" value={editForm.chest} onChange={e => setEditForm({...editForm, chest: e.target.value})} className="w-full p-2 border rounded-lg" /></div>
                        <div><label className="text-xs font-bold text-gray-400">Braço (cm)</label><input type="number" value={editForm.arm} onChange={e => setEditForm({...editForm, arm: e.target.value})} className="w-full p-2 border rounded-lg" /></div>
                    </div>
                    <button onClick={saveEditCheckin} className="w-full bg-blue-600 text-white py-3 rounded-xl font-bold mt-2">Salvar Alterações</button>
                </div>
            </Modal>

            {/* Header com Navegação */}
            <div className="bg-white p-2 rounded-2xl shadow-sm border border-gray-100 mb-4 flex justify-between">
                {[
                    { id: 'stats', label: 'Gráfico', icon: TrendingUp },
                    { id: 'photos', label: 'Fotos', icon: ImageIcon },
                    { id: 'logs', label: 'Diário', icon: FileText }
                ].map(tab => (
                    <button 
                        key={tab.id}
                        onClick={() => setSubView(tab.id)}
                        className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-xl text-sm font-bold transition-all ${subView === tab.id ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-50'}`}
                    >
                        <tab.icon className="w-4 h-4" /> {tab.label}
                    </button>
                ))}
            </div>

            <div className="flex justify-between items-center mb-6">
                <h2 className="text-2xl font-bold text-gray-800">Evolução</h2>
                <div className="flex gap-2">
                    <button onClick={() => setPrivacyMode(!privacyMode)} className="bg-gray-100 text-gray-600 p-2 rounded-lg hover:bg-gray-200">
                        {privacyMode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                    </button>
                </div>
            </div>

            {/* SUB-ABA: GRÁFICO E LISTA */}
            {subView === 'stats' && (
                <div className="animate-fade-in">
                    {checkins.length > 1 ? (
                        <div className="mb-6 h-64 bg-white p-2 rounded-xl border border-gray-100 shadow-sm relative">
                            <ResponsiveContainer width="100%" height="90%">
                                <LineChart data={checkins}>
                                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
                                    {/* Usa formatação manual na lista também */}
                                    <XAxis dataKey="date" tickFormatter={(d) => formatDate(d).substring(0,5)} fontSize={10} axisLine={false} tickLine={false} />
                                    <YAxis hide domain={['auto', 'auto']} />
                                    <Tooltip contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 4px 20px rgba(0,0,0,0.1)' }} />
                                    <Legend verticalAlign="top" height={36} iconType="circle" />
                                    <Line name="Peso" type="monotone" dataKey="weight" stroke="#2563eb" strokeWidth={3} dot={{r:3}} />
                                    <Line name="Cintura" type="monotone" dataKey="waist" stroke="#16a34a" strokeWidth={2} dot={{r:3}} />
                                    <Line name="Tórax" type="monotone" dataKey="chest" stroke="#ea580c" strokeWidth={2} dot={false} />
                                    <Line name="Braço" type="monotone" dataKey="arm" stroke="#9333ea" strokeWidth={2} dot={false} />
                                </LineChart>
                            </ResponsiveContainer>
                        </div>
                    ) : (
                        <div className="p-8 text-center text-gray-400 bg-white rounded-xl mb-4 border border-dashed border-gray-300">Adicione mais medições para ver o gráfico.</div>
                    )}

                    <div className="flex justify-between items-center mb-3 bg-white p-2 rounded-xl border border-gray-100">
                        <select 
                            value={reportPeriod} 
                            onChange={(e) => setReportPeriod(e.target.value)}
                            className="bg-transparent text-sm font-bold text-gray-700 outline-none"
                        >
                            <option value="daily">Relatório: Hoje</option>
                            <option value="weekly">Relatório: 7 Dias</option>
                            <option value="monthly">Relatório: 30 Dias</option>
                        </select>
                        <button onClick={generateReport} className="text-blue-600 text-xs font-bold flex items-center gap-1 bg-blue-50 px-3 py-1 rounded-lg hover:bg-blue-100"><Download className="w-3 h-3" /> Baixar</button>
                    </div>

                    <div className="space-y-4">
                        {checkinsReverse.map(c => (
                            <div key={c.id} className="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm">
                                <div className="p-3 bg-gray-50 flex justify-between items-center border-b border-gray-100">
                                    {/* Usa formatação manual na lista também */}
                                    <span className="font-bold text-gray-700">{formatDate(c.date)}</span>
                                    <div className="flex gap-2">
                                        <button onClick={() => handleEditClick(c)} className="text-gray-400 hover:text-blue-500"><Edit className="w-4 h-4" /></button>
                                        <button onClick={() => setDeleteId(c.id)} className="text-gray-400 hover:text-red-500"><Trash2 className="w-4 h-4" /></button>
                                    </div>
                                </div>
                                <div className="p-4 flex gap-4">
                                    <div className="w-20 h-24 bg-gray-100 rounded-lg flex-shrink-0 overflow-hidden relative group">
                                        {c.photos?.front ? (
                                            <>
                                                <img src={c.photos.front} className={`w-full h-full object-cover transition-all duration-300 ${privacyMode ? 'blur-md scale-110' : ''}`} />
                                                <div className="absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-transparent transition-all pointer-events-none">
                                                    <ImageIcon className={`w-4 h-4 text-white/70 ${!privacyMode ? 'opacity-0' : ''}`} />
                                                </div>
                                            </>
                                        ) : (
                                            <div className="w-full h-full flex items-center justify-center text-gray-300"><User /></div>
                                        )}
                                    </div>
                                    <div className="flex-1 grid grid-cols-2 gap-y-3 gap-x-2">
                                        {[{l:'Peso', k:'weight', u:'kg'}, {l:'Cintura', k:'waist', u:'cm'}, {l:'Tórax', k:'chest', u:'cm'}, {l:'Braço', k:'arm', u:'cm'}].map(m => (
                                            <div key={m.k} className="flex flex-col">
                                                <span className="text-[10px] text-gray-400 uppercase font-bold">{m.l}</span>
                                                <div className="flex items-end gap-1">
                                                    <span className="text-sm font-bold text-gray-800">{c[m.k]}{m.u}</span>
                                                    {firstCheckin && c.id !== firstCheckin.id && (
                                                        <span className={`text-[10px] px-1 rounded ${c[m.k] < firstCheckin[m.k] ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}>
                                                            {getDiff(c[m.k], m.k)}
                                                        </span>
                                                    )}
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* SUB-ABA: COMPARADOR DE FOTOS */}
            {subView === 'photos' && (
                <div className="animate-fade-in">
                    <div className="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <label className="text-xs font-bold text-gray-400 block mb-1">DATA 1</label>
                            <div className="relative">
                                <select className="w-full p-2 bg-white border border-gray-200 rounded-lg appearance-none text-sm font-bold" onChange={e => setDateA(e.target.value)} value={dateA}>
                                    <option value="">Selecione...</option>
                                    {checkins.map(c => <option key={c.id} value={c.id}>{formatDate(c.date)}</option>)}
                                </select>
                                <ChevronDown className="w-4 h-4 absolute right-2 top-3 text-gray-400 pointer-events-none" />
                            </div>
                        </div>
                        <div>
                            <label className="text-xs font-bold text-gray-400 block mb-1">DATA 2</label>
                            <div className="relative">
                                <select className="w-full p-2 bg-white border border-gray-200 rounded-lg appearance-none text-sm font-bold" onChange={e => setDateB(e.target.value)} value={dateB}>
                                    <option value="">Selecione...</option>
                                    {checkins.map(c => <option key={c.id} value={c.id}>{formatDate(c.date)}</option>)}
                                </select>
                                <ChevronDown className="w-4 h-4 absolute right-2 top-3 text-gray-400 pointer-events-none" />
                            </div>
                        </div>
                    </div>

                    {dateA && dateB ? (
                        <div className="space-y-6">
                            {['front', 'side', 'back'].map(pos => {
                                const c1 = checkins.find(c => c.id === dateA);
                                const c2 = checkins.find(c => c.id === dateB);
                                if(!c1 || !c2) return null;
                                return (
                                    <div key={pos}>
                                        <h4 className="text-center text-xs font-bold text-gray-400 uppercase mb-2">{pos === 'front' ? 'Frente' : pos === 'side' ? 'Lado' : 'Costas'}</h4>
                                        <div className="grid grid-cols-2 gap-2">
                                            <div className="rounded-lg overflow-hidden border border-gray-200 bg-gray-50 aspect-[3/4]">
                                                <img src={c1.photos?.[pos]} className={`w-full h-full object-cover transition-all duration-300 ${privacyMode ? 'blur-md scale-110' : ''}`} />
                                            </div>
                                            <div className="rounded-lg overflow-hidden border-2 border-blue-500 bg-gray-50 relative aspect-[3/4]">
                                                <div className="absolute top-2 right-2 bg-blue-500 text-white text-[10px] font-bold px-2 py-1 rounded z-10">DEPOIS</div>
                                                <img src={c2.photos?.[pos]} className={`w-full h-full object-cover transition-all duration-300 ${privacyMode ? 'blur-md scale-110' : ''}`} />
                                            </div>
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                    ) : (
                        <div className="text-center py-12 text-gray-400 bg-white rounded-xl border border-dashed border-gray-300">
                            <ImageIcon className="w-12 h-12 mx-auto mb-2 opacity-50" />
                            <p>Selecione duas datas acima<br/>para comparar.</p>
                        </div>
                    )}
                </div>
            )}

            {/* SUB-ABA: DIÁRIO */}
            {subView === 'logs' && (
                <div className="animate-fade-in space-y-3">
                    {logs.map(log => {
                        const cals = log.meals ? log.meals.reduce((acc, m) => acc + (m.p*4 + m.c*4 + m.f*9), 0) : 0;
                        const trained = log.workout_data && Object.values(log.workout_data).some(x => x.done);
                        return (
                            <div key={log.date} className="bg-white p-4 rounded-xl border border-gray-100 flex justify-between items-center">
                                 <div>
                                    <p className="font-bold text-gray-800">{formatDate(log.date)}</p>
                                    <p className="text-xs text-gray-500">{cals} kcal</p>
                                </div>
                                <div className="flex gap-2 flex-wrap justify-end max-w-[70%]">
                                    {log.workout_type && log.workout_type !== 'Rest' && (
                                        <span className="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs font-bold">
                                            Treino {log.workout_type}
                                        </span>
                                    )}
                                    
                                    {trained && !log.workout_type && <span className="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-bold">Treinou</span>}
                                    
                                    {log.habits?.cardio && <span className="bg-orange-100 text-orange-700 px-2 py-1 rounded text-xs font-bold">Cardio</span>}
                                    {log.habits?.creatine && <span className="bg-purple-100 text-purple-700 px-2 py-1 rounded text-xs font-bold">Creatina</span>}
                                    
                                    {log.habits?.water > 0 && (
                                        <span className="bg-cyan-100 text-cyan-700 px-2 py-1 rounded text-xs font-bold flex items-center gap-1">
                                            <Droplet className="w-3 h-3 fill-current" /> {(log.habits.water / 1000)}L
                                        </span>
                                    )}
                                </div>
                            </div>
                        )
                    })}
                    {logs.length === 0 && <div className="text-center py-8 text-gray-400">Nenhum registro de diário.</div>}
                </div>
            )}
        </div>
    );
};

// --- APP PRINCIPAL ---
export default function App() {
    const [user, setUser] = useState(null);
    const [view, setView] = useState('dashboard');
    const [currentDate, setCurrentDate] = useState(new Date());

    useEffect(() => { const unsub = onAuthStateChanged(auth, setUser); return () => unsub(); }, []);

    if (!user) return <AuthScreen onLogin={setUser} />;

    return (
        <div className="max-w-md mx-auto min-h-screen bg-[#f8fafc] relative shadow-2xl overflow-hidden font-sans">
            <main className="p-5 h-screen overflow-y-auto no-scrollbar">
                {view === 'dashboard' && <Dashboard user={user} currentDate={currentDate} setCurrentDate={setCurrentDate} />}
                {view === 'workout' && <WorkoutView user={user} currentDate={currentDate} setCurrentDate={setCurrentDate} />}
                {view === 'meals' && <MealsView user={user} currentDate={currentDate} setCurrentDate={setCurrentDate} />}
                {view === 'measurements' && <Measurements user={user} setView={setView} />}
                {view === 'evolution' && <Evolution user={user} />}
            </main>

            <div className="absolute bottom-0 left-0 w-full bg-white border-t border-gray-200 px-2 py-2 flex justify-between items-end z-10 pb-4">
                <TabButton active={view === 'dashboard'} onClick={() => setView('dashboard')} icon={Home} label="Hoje" />
                <TabButton active={view === 'workout'} onClick={() => setView('workout')} icon={Dumbbell} label="Treino" />
                <div className="w-16 relative flex justify-center"><TabButton active={view === 'meals'} onClick={() => setView('meals')} icon={Utensils} label="Refeição" isMain={true} /></div>
                <TabButton active={view === 'measurements'} onClick={() => setView('measurements')} icon={Ruler} label="Medidas" />
                <TabButton active={view === 'evolution'} onClick={() => setView('evolution')} icon={TrendingUp} label="Evolução" />
            </div>
        </div>
    );
}