import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, collection, doc, setDoc, getDoc, 
  onSnapshot, addDoc, updateDoc, query, orderBy 
} from 'firebase/firestore';
import { 
  getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken 
} from 'firebase/auth';
import { 
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  BarChart, Bar
} from 'recharts';
import { 
  CheckCircle, Circle, Utensils, Calendar, TrendingUp, Lock,
  User, Droplets, ShoppingCart, MessageCircle, ChevronRight, 
  ChevronLeft, PlayCircle, ClipboardList, Sparkles, Brain, Search, Send, Info, XCircle, RefreshCw, Settings2, Wrench, RotateCcw, Edit3, ArrowLeft, Rocket, Check
} from 'lucide-react';

// --- CONFIGURACIÓN FIREBASE ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'programa-21d-v2';
const apiKey = ""; 

// --- LISTA VERDE (SEGÚN PDF) ---
const GREEN_LIST = {
  proteinas: ["Res", "Cerdo", "Cordero", "Chivo", "Hígado", "Corazón", "Riñones", "Pollo", "Gallina", "Pavo", "Pato", "Salmón", "Caballa", "Arenque", "Sardinas", "Anchoas", "Mariscos", "Huevos"],
  grasas: ["Ghee", "Mantequilla", "Crema de leche", "Aceite de coco", "Quesos curados", "Manteca de cerdo", "Sebo de res", "Aceitunas", "Aceite de oliva", "Aguacate", "Semillas de Chía", "Semillas de Lino", "Cáñamo"],
  vegetales: ["Espinaca", "Lechuga", "Acelga", "Rúcula", "Brócoli", "Coliflor", "Repollo", "Espárragos", "Pepino", "Champiñones", "Chucrut"],
  condimentos: ["Sal de mar", "Pimienta", "Ajo", "Cebolla en polvo", "Comino", "Cúrcuma", "Romero", "Tomillo", "Albahaca", "Vinagre de sidra", "Limón"]
};

const WEEKLY_DATA = [
  { week: 1, title: "Primera Semana 1/3", schedule: { breakfast: Array(7).fill("Desayuno"), lunch: Array(7).fill("Almuerzo"), dinner: ["Cena", "Caldo de Huesos", "Cena", "Cena", "Caldo de Huesos", "Cena", "Cena"] } },
  { week: 2, title: "Segunda Semana 2/3", schedule: { breakfast: Array(7).fill("Desayuno"), lunch: Array(7).fill("Almuerzo"), dinner: ["Cena", "Caldo de Huesos", "Caldo de Huesos", "Cena", "Caldo de Huesos", "Caldo de Huesos", "Caldo de Huesos"] } },
  { week: 3, title: "Tercera Semana 3/3", schedule: { breakfast: Array(7).fill("3 Opciones"), lunch: Array(7).fill("Almuerzo"), dinner: Array(7).fill("2 Opciones") } }
];

const PROGRAM_DAYS = Array.from({ length: 21 }, (_, i) => ({
  day: i + 1,
  title: `Día ${i + 1}: ${i < 7 ? 'Adaptación' : i < 14 ? 'Cetosis Profunda' : 'Consolidación'}`,
  tasks: ["Agua con sal y limón", "15 min caminata", "Ayuno 14h"]
}));

const callGemini = async (prompt, systemInstruction = "") => {
  const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
  const payload = {
    contents: [{ parts: [{ text: prompt }] }],
    systemInstruction: systemInstruction ? { parts: [{ text: systemInstruction }] } : undefined,
    generationConfig: { responseMimeType: "application/json" }
  };
  const fetchWithRetry = async (retries = 5, delay = 1000) => {
    try {
      const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
      const result = await response.json();
      return result.candidates?.[0]?.content?.parts?.[0]?.text;
    } catch (error) {
      if (retries > 0) {
        await new Promise(res => setTimeout(res, delay));
        return fetchWithRetry(retries - 1, delay * 2);
      }
      throw error;
    }
  };
  return await fetchWithRetry();
};

export default function App() {
  const [user, setUser] = useState(null);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [profile, setProfile] = useState({ startDate: null, demoDay: 0 });
  const [progress, setProgress] = useState({});
  const [measurements, setMeasurements] = useState([]);
  const [personalizedPlan, setPersonalizedPlan] = useState(null); // Ahora será { week1: {...}, week2: {...}, week3: {...} }
  const [shoppingLists, setShoppingLists] = useState({}); // { week1: {...}, week2: {...} }
  const [mealHistory, setMealHistory] = useState({});
  const [excludedFoods, setExcludedFoods] = useState([]);
  const [loading, setLoading] = useState(true);

  const currentDay = useMemo(() => {
    if (profile.demoDay > 0) return profile.demoDay;
    if (!profile.startDate) return 0;
    const start = new Date(profile.startDate);
    const today = new Date();
    const diffTime = Math.abs(today - start);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays > 21 ? 21 : diffDays;
  }, [profile]);

  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else { await signInAnonymously(auth); }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      if (u) setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;
    
    const profileRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'profile');
    const unsubProfile = onSnapshot(profileRef, (snap) => {
      if (snap.exists()) setProfile(snap.data());
    });

    const planRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'plan');
    const unsubPlan = onSnapshot(planRef, (snap) => {
      if (snap.exists()) {
        const data = snap.data();
        setPersonalizedPlan(data.meals || null);
        setExcludedFoods(data.excluded || []);
        setMealHistory(data.history || {});
        setShoppingLists(data.shoppingLists || {});
      }
    });

    const progressRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'progress');
    const unsubProgress = onSnapshot(progressRef, (snap) => {
      if (snap.exists()) setProgress(snap.data());
    });

    const measurementsRef = collection(db, 'artifacts', appId, 'users', user.uid, 'measurements');
    const unsubMeasurements = onSnapshot(measurementsRef, (snap) => {
      const data = snap.docs.map(d => ({ id: d.id, ...d.data() }));
      setMeasurements(data.sort((a, b) => new Date(a.date) - new Date(b.date)));
    });

    return () => { unsubProfile(); unsubPlan(); unsubProgress(); unsubMeasurements(); };
  }, [user]);

  const startProgram = async () => {
    if (!user) return;
    const profileRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'profile');
    await setDoc(profileRef, { startDate: new Date().toISOString(), demoDay: 0 });
  };

  const setDemoDay = async (day) => {
    const profileRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'profile');
    await setDoc(profileRef, { ...profile, demoDay: day }, { merge: true });
  };

  const toggleDailyTask = async (day, taskIndex) => {
    if (!user) return;
    const currentDayData = progress[day] || { completedTasks: [] };
    let newTasks = [...currentDayData.completedTasks];
    if (newTasks.includes(taskIndex)) newTasks = newTasks.filter(i => i !== taskIndex);
    else newTasks.push(taskIndex);
    const progressRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'progress');
    await setDoc(progressRef, { ...progress, [day]: { ...currentDayData, completedTasks: newTasks } }, { merge: true });
  };

  const savePlanData = async (meals, excluded, history = mealHistory, sLists = shoppingLists) => {
    if (!user) return;
    const planRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'plan');
    await setDoc(planRef, { meals, excluded, history, shoppingLists: sLists, updatedAt: new Date().toISOString() });
  };

  if (loading) return <div className="flex h-screen items-center justify-center bg-zinc-950 text-white italic tracking-widest uppercase">Estandarizando Glucosa...</div>;

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col md:flex-row font-sans text-gray-900 overflow-hidden">
      {/* Sidebar */}
      <nav className="w-full md:w-72 bg-zinc-950 text-white p-8 flex flex-col gap-6 shadow-2xl z-40 border-r border-zinc-800">
        <div className="flex items-center gap-3 mb-8">
          <div className="bg-indigo-600 p-2.5 rounded-xl shadow-lg shadow-indigo-600/40"><TrendingUp size={24} strokeWidth={3} /></div>
          <h1 className="text-2xl font-black tracking-tighter italic uppercase leading-none">Programa<br/>21D</h1>
        </div>
        
        <div className="flex flex-col gap-2">
          <NavItem icon={<ClipboardList />} label="Mi Progreso" active={activeTab === 'dashboard'} onClick={() => setActiveTab('dashboard')} />
          <NavItem icon={<Calendar />} label="Estrategia Semanal" active={activeTab === 'strategy'} onClick={() => setActiveTab('strategy')} />
          <NavItem icon={<Utensils />} label="Mi Plan Personal ✨" active={activeTab === 'my-plan'} onClick={() => setActiveTab('my-plan')} />
          <NavItem icon={<Brain />} label="Coach Personal IA" active={activeTab === 'journal'} onClick={() => setActiveTab('journal')} />
          <NavItem icon={<TrendingUp />} label="Estadísticas" active={activeTab === 'stats'} onClick={() => setActiveTab('stats')} />
        </div>
        
        <div className="mt-auto p-5 bg-zinc-900/50 rounded-3xl border border-zinc-800">
          <p className="text-[10px] uppercase font-black text-zinc-600 mb-2 tracking-widest">Día Actual</p>
          <div className="flex items-center justify-between">
            <span className="text-2xl font-black italic">{currentDay > 0 ? `DÍA ${currentDay}` : 'SIN INICIAR'}</span>
            {currentDay > 0 && <span className="bg-indigo-600/20 text-indigo-400 px-2 py-1 rounded text-[10px] font-black uppercase">Semana {Math.ceil(currentDay/7)}</span>}
          </div>
          <div className="mt-4 pt-4 border-t border-zinc-800 flex flex-wrap gap-2">
            {[1, 8, 15].map(d => (
              <button key={d} onClick={() => setDemoDay(d)} className="text-[8px] font-bold bg-zinc-800 px-2 py-1 rounded hover:bg-indigo-600 transition-colors">TEST SEM {Math.ceil(d/7)}</button>
            ))}
            <button onClick={() => setDemoDay(0)} className="text-[8px] font-bold bg-zinc-800 px-2 py-1 rounded hover:bg-red-900 transition-colors">RESET</button>
          </div>
        </div>
      </nav>

      <main className="flex-1 overflow-y-auto p-6 md:p-12 pb-32">
        {currentDay === 0 ? (
          <div className="h-full flex flex-col items-center justify-center text-center animate-in fade-in zoom-in duration-700">
            <div className="bg-indigo-600 p-8 rounded-[3rem] shadow-2xl mb-8 group hover:scale-105 transition-transform cursor-pointer" onClick={startProgram}>
              <Rocket size={80} className="text-white group-hover:rotate-12 transition-transform" />
            </div>
            <h2 className="text-5xl font-black italic uppercase tracking-tighter mb-4 leading-tight">Transforma tu<br/>metabolismo hoy</h2>
            <p className="text-zinc-500 font-bold max-w-lg mb-8 italic">Inicia tu conteo de 21 días y accede a tu plan inteligente basado en la zona verde.</p>
            <button onClick={startProgram} className="bg-zinc-950 text-white px-12 py-6 rounded-3xl font-black uppercase italic tracking-[0.2em] shadow-2xl hover:bg-indigo-600 transition-all">COMENZAR PROGRAMA</button>
          </div>
        ) : (
          <>
            <header className="mb-12 flex justify-between items-end">
              <div>
                <h2 className="text-5xl font-black text-zinc-900 uppercase italic tracking-tighter leading-none mb-3">
                  {activeTab === 'dashboard' && "Panel de Control"}
                  {activeTab === 'strategy' && "Estrategia de Ayunos"}
                  {activeTab === 'my-plan' && "Plan Personalizado"}
                  {activeTab === 'journal' && "Coach Mental IA"}
                  {activeTab === 'stats' && "Resultados"}
                </h2>
                <div className="h-2 w-32 bg-indigo-600 rounded-full"></div>
              </div>
            </header>

            <section className="animate-in slide-in-from-bottom-8 duration-700">
              {activeTab === 'dashboard' && <DashboardView progress={progress} toggleTask={toggleDailyTask} currentDay={currentDay} />}
              {activeTab === 'strategy' && <StrategyView currentMaxDay={currentDay} />}
              {activeTab === 'my-plan' && <PersonalizedPlanView 
                plan={personalizedPlan} 
                excluded={excludedFoods} 
                history={mealHistory}
                shoppingLists={shoppingLists}
                onSave={savePlanData}
                currentDay={currentDay}
              />}
              {activeTab === 'journal' && <JournalView />}
              {activeTab === 'stats' && <StatsView measurements={measurements} onAdd={e => {
                e.preventDefault();
                const weight = e.target.weight.value;
                const waist = e.target.waist.value;
                addDoc(collection(db, 'artifacts', appId, 'users', user.uid, 'measurements'), {
                  date: new Date().toISOString().split('T')[0], weight: parseFloat(weight), waist: parseFloat(waist)
                });
                e.target.reset();
              }} />}
            </section>
          </>
        )}
      </main>
    </div>
  );
}

function NavItem({ icon, label, active, onClick }) {
  return (
    <button onClick={onClick} className={`flex items-center gap-4 px-6 py-4 rounded-2xl transition-all duration-500 group ${active ? 'bg-indigo-600 text-white shadow-2xl shadow-indigo-600/40 translate-x-2' : 'text-zinc-500 hover:text-white hover:bg-zinc-900'}`}>
      <div className={`${active ? 'scale-110' : 'group-hover:scale-110'} transition-transform duration-300`}>
        {React.cloneElement(icon, { size: 20, strokeWidth: 2.5 })}
      </div>
      <span className="font-black text-xs uppercase tracking-widest italic">{label}</span>
    </button>
  );
}

// --- PLAN PERSONALIZADO ---
function PersonalizedPlanView({ plan, excluded, history, shoppingLists, onSave, currentDay }) {
  const currentWeekNum = Math.ceil(currentDay / 7);
  const [selectedWeek, setSelectedWeek] = useState(currentWeekNum > 3 ? 3 : currentWeekNum);
  const [step, setStep] = useState(plan?.[`week${selectedWeek}`] ? 'view' : 'setup');
  const [tempExcluded, setTempExcluded] = useState(excluded);
  const [isGenerating, setIsGenerating] = useState(false);
  const [isSyncingList, setIsSyncingList] = useState(false);
  const [activeCellMenu, setActiveCellMenu] = useState(null); 
  const [manualEdit, setManualEdit] = useState('');

  const weekKey = `week${selectedWeek}`;
  const currentPlan = plan?.[weekKey] || null;
  const currentSList = shoppingLists?.[weekKey] || null;

  // Actualizar vista al cambiar de semana
  useEffect(() => {
    if (plan?.[weekKey]) setStep('view');
    else setStep('setup');
  }, [selectedWeek, plan]);

  const generateFullPlan = async () => {
    setIsGenerating(true);
    try {
      const systemPrompt = `Chef experto. Usa SOLO Zona Verde: ${JSON.stringify(GREEN_LIST)}. EXCLUYE: ${tempExcluded.join(', ')}. Genera platos coherentes para la semana ${selectedWeek}. JSON: { "meals": { "D1": { "breakfast": "Plato", "lunch": "Plato", "dinner": "Plato" }, ... } }. Responde SOLO JSON.`;
      const res = await callGemini(`Plan para semana ${selectedWeek}.`, systemPrompt);
      const cleaned = res.replace(/```json|```/g, '').trim();
      const data = JSON.parse(cleaned);
      
      const newHistory = { ...history };
      Object.keys(data.meals).forEach(day => {
        ['breakfast', 'lunch', 'dinner'].forEach(type => {
          newHistory[`${weekKey}-${day}-${type}`] = [data.meals[day][type]];
        });
      });

      const updatedMeals = { ...plan, [weekKey]: data.meals };
      await onSave(updatedMeals, tempExcluded, newHistory, shoppingLists);
    } catch (e) { console.error(e); }
    setIsGenerating(false);
  };

  const syncShoppingList = async () => {
    if (!currentPlan) return;
    setIsSyncingList(true);
    try {
      const mealsStr = Object.keys(currentPlan).map(d => `${d}: ${currentPlan[d].breakfast}, ${currentPlan[d].lunch}, ${currentPlan[d].dinner}`).join(' | ');
      const res = await callGemini(`Lista compras categorizada semana ${selectedWeek}: ${mealsStr}. JSON: { "categories": { "Proteínas": [], "Vegetales": [], "Grasas": [], "Otros": [] } }. SOLO JSON.`, "Logística.");
      const cleaned = res.replace(/```json|```/g, '').trim();
      const data = JSON.parse(cleaned);
      await onSave(plan, excluded, history, { ...shoppingLists, [weekKey]: data.categories });
    } catch (e) { console.error(e); }
    setIsSyncingList(false);
  };

  const regenerateMeal = async (day, type) => {
    setActiveCellMenu(null);
    setIsGenerating(true);
    try {
      const res = await callGemini(`Sustituye "${currentPlan[day][type]}". Zona Verde. JSON: { "newMeal": "" }.`, "Chef Keto.");
      const data = JSON.parse(res.replace(/```json|```/g, '').trim());
      const key = `${weekKey}-${day}-${type}`;
      const newHistory = { ...history, [key]: [...(history[key] || []), data.newMeal] };
      const updatedWeek = { ...currentPlan, [day]: { ...currentPlan[day], [type]: data.newMeal } };
      await onSave({ ...plan, [weekKey]: updatedWeek }, excluded, newHistory, shoppingLists);
    } catch (e) { console.error(e); }
    setIsGenerating(false);
  };

  if (step === 'setup') {
    return (
      <div className="max-w-5xl mx-auto space-y-8 animate-in fade-in zoom-in-95">
        <div className="flex bg-zinc-200/50 p-2 rounded-3xl w-fit mx-auto shadow-inner border border-zinc-100 backdrop-blur-sm mb-4">
          {[1, 2, 3].map(w => {
             const isLocked = w > currentWeekNum;
             return <button key={w} disabled={isLocked} onClick={() => setSelectedWeek(w)} className={`flex items-center gap-3 px-8 py-4 rounded-2xl font-black text-xs uppercase italic tracking-widest transition-all ${selectedWeek === w ? 'bg-white text-indigo-900 shadow-xl scale-105' : isLocked ? 'text-zinc-400 opacity-30' : 'text-zinc-600'}`}>Semana {w} {isLocked && <Lock size={14} />}</button>;
          })}
        </div>
        <div className="bg-white p-12 rounded-[4rem] shadow-2xl border border-gray-100 relative">
          <div className="flex items-center gap-5 mb-8">
             <div className="w-5 h-16 bg-indigo-600 rounded-full shadow-lg"></div>
             <div>
               <h3 className="text-4xl font-black italic uppercase tracking-tighter text-zinc-900">Semana {selectedWeek}</h3>
               <p className="text-zinc-400 font-bold text-sm uppercase tracking-widest mt-1">Configura tus gustos para esta etapa</p>
             </div>
          </div>
          <div className="space-y-12">
            <IngredientSection title="Proteínas Animales" list={GREEN_LIST.proteinas} tempExcluded={tempExcluded} toggleExclude={i => setTempExcluded(p => p.includes(i) ? p.filter(x => x !== i) : [...p, i])} color="indigo" />
            <IngredientSection title="Grasas" list={GREEN_LIST.grasas} tempExcluded={tempExcluded} toggleExclude={i => setTempExcluded(p => p.includes(i) ? p.filter(x => x !== i) : [...p, i])} color="amber" />
          </div>
          <button onClick={generateFullPlan} disabled={isGenerating} className="w-full mt-16 bg-zinc-950 text-white py-8 rounded-[2.5rem] font-black uppercase italic tracking-widest hover:bg-indigo-600 transition-all flex items-center justify-center gap-5 shadow-2xl">
            {isGenerating ? <RefreshCw className="animate-spin" size={28} /> : <Sparkles size={28} />}
            GENERAR MENÚ SEMANA {selectedWeek} ✨
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-12 animate-in fade-in duration-500">
      <div className="flex flex-col md:flex-row justify-between items-center gap-6">
        <div className="flex bg-zinc-200/50 p-2 rounded-3xl w-fit shadow-inner border border-zinc-100 backdrop-blur-sm">
          {[1, 2, 3].map(w => {
             const isLocked = w > currentWeekNum;
             const isCompleted = w < currentWeekNum;
             return (
               <button key={w} disabled={isLocked} onClick={() => setSelectedWeek(w)} className={`flex items-center gap-3 px-8 py-4 rounded-2xl font-black text-xs uppercase italic tracking-widest transition-all ${selectedWeek === w ? 'bg-white text-indigo-900 shadow-xl scale-105' : isLocked ? 'text-zinc-400 opacity-30' : 'text-zinc-600 hover:text-indigo-600'}`}>
                 Semana {w} 
                 {isLocked && <Lock size={14} />}
                 {isCompleted && <CheckCircle size={14} className="text-green-500" />}
               </button>
             );
          })}
        </div>
        <div className="flex items-center gap-4 bg-white p-4 rounded-[2rem] shadow-sm border border-zinc-100">
           {selectedWeek < currentWeekNum ? (
             <span className="flex items-center gap-2 text-green-600 font-black uppercase italic text-[10px] tracking-widest px-4"><Check size={16} /> Semana Completada</span>
           ) : selectedWeek === currentWeekNum ? (
             <span className="flex items-center gap-2 text-indigo-600 font-black uppercase italic text-[10px] tracking-widest px-4"><TrendingUp size={16} /> Semana en Curso</span>
           ) : (
             <span className="flex items-center gap-2 text-zinc-400 font-black uppercase italic text-[10px] tracking-widest px-4"><Lock size={16} /> Próxima Etapa</span>
           )}
           <button onClick={() => setStep('setup')} className="bg-zinc-100 text-zinc-900 px-6 py-3 rounded-2xl font-black uppercase italic text-[10px] hover:bg-zinc-950 hover:text-white transition-all">Ajustar Gustos</button>
        </div>
      </div>

      <div className="bg-white rounded-[3.5rem] shadow-2xl border border-zinc-100 overflow-hidden overflow-x-auto relative">
        <table className="w-full text-center border-collapse min-w-[1000px]">
          <thead>
            <tr className="bg-zinc-950 text-white border-b border-zinc-800">
              <th className="p-10 text-[11px] font-black uppercase italic tracking-[0.3em] opacity-30 w-40">MOMENTO</th>
              {Object.keys(currentPlan).map(day => <th key={day} className="p-10 text-base font-black uppercase italic tracking-tighter">{day.replace('D', 'Día ')}</th>)}
            </tr>
          </thead>
          <tbody>
            {['breakfast', 'lunch', 'dinner'].map((type, rowIndex) => (
              <tr key={type} className="group">
                <td className="p-12 bg-zinc-50 border-b border-zinc-100 text-[11px] font-black uppercase text-zinc-400 italic">
                  {type === 'breakfast' ? 'MAÑANA' : type === 'lunch' ? 'TARDE' : 'NOCHE'}
                </td>
                {Object.keys(currentPlan).map(day => {
                  const key = `${weekKey}-${day}-${type}`;
                  const isMenuOpen = activeCellMenu === key;
                  const canGoBack = history[key]?.length > 1;
                  return (
                    <td key={day} className="p-8 border-b border-r border-zinc-50 relative group/cell">
                      <div className="flex flex-col items-center gap-3">
                        <p className="text-[13px] font-black uppercase text-zinc-800 leading-tight tracking-tight px-2">{currentPlan[day][type]}</p>
                        <button onClick={() => setActiveCellMenu(isMenuOpen ? null : key)} className={`p-2 rounded-lg transition-all ${isMenuOpen ? 'bg-indigo-600 text-white rotate-90 shadow-lg' : 'bg-zinc-100 text-zinc-400 hover:text-indigo-600 opacity-0 group-hover/cell:opacity-100'}`}><Wrench size={16} /></button>
                      </div>
                      {isMenuOpen && (
                        <div className={`absolute left-1/2 -translate-x-1/2 w-48 bg-white shadow-2xl rounded-3xl p-3 z-30 border border-zinc-100 animate-in zoom-in-95 duration-200 ${rowIndex === 2 ? 'bottom-[100%] mb-2' : 'top-[80%]'}`}>
                           <button onClick={() => regenerateMeal(day, type)} className="w-full flex items-center gap-3 p-3 text-left hover:bg-indigo-50 rounded-2xl transition-colors text-indigo-600">
                             <Sparkles size={16} /> <span className="text-[10px] font-black uppercase italic">Generar nueva</span>
                           </button>
                           {canGoBack && <button onClick={() => {
                             const newList = [...history[key]]; newList.pop();
                             const prev = newList[newList.length - 1];
                             onSave({ ...plan, [weekKey]: { ...currentPlan, [day]: { ...currentPlan[day], [type]: prev } } }, excluded, { ...history, [key]: newList }, shoppingLists);
                             setActiveCellMenu(null);
                           }} className="w-full flex items-center gap-3 p-3 text-left hover:bg-zinc-100 rounded-2xl transition-colors text-zinc-600"><RotateCcw size={16} /> <span className="text-[10px] font-black uppercase italic">Anterior</span></button>}
                           <div className="my-2 border-t border-zinc-100 pt-2 px-2">
                             <input className="w-full bg-zinc-50 border-none p-2 rounded-xl text-[10px] font-bold outline-none" placeholder="Editar..." value={manualEdit} onChange={(e) => setManualEdit(e.target.value)} onKeyDown={(e) => {
                               if (e.key === 'Enter' && manualEdit) {
                                 onSave({ ...plan, [weekKey]: { ...currentPlan, [day]: { ...currentPlan[day], [type]: manualEdit } } }, excluded, { ...history, [key]: [...(history[key] || []), manualEdit] }, shoppingLists);
                                 setManualEdit(''); setActiveCellMenu(null);
                               }
                             }} />
                           </div>
                        </div>
                      )}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* CARRITO SEMANAL */}
      <div className="bg-white p-12 rounded-[4rem] shadow-xl border border-zinc-100">
        <div className="flex justify-between items-center mb-10">
          <div className="flex items-center gap-4">
            <div className="bg-amber-100 p-4 rounded-3xl text-amber-600"><ShoppingCart size={28} /></div>
            <div>
              <h4 className="text-3xl font-black uppercase italic tracking-tighter text-zinc-900 leading-none">Mi Carrito Semana {selectedWeek}</h4>
              <p className="text-zinc-400 font-bold uppercase text-[10px] mt-1 italic">Sincronizado con tus platos actuales</p>
            </div>
          </div>
          <button onClick={syncShoppingList} disabled={isSyncingList} className="flex items-center gap-2 bg-zinc-900 text-white px-6 py-3 rounded-2xl font-black uppercase italic text-[10px] tracking-widest hover:bg-indigo-600 transition-all shadow-lg">{isSyncingList ? <RefreshCw className="animate-spin" size={14} /> : <RefreshCw size={14} />} Sincronizar ✨</button>
        </div>
        {currentSList ? <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {Object.keys(currentSList).map(cat => <div key={cat} className="bg-zinc-50 p-6 rounded-[2.5rem] border border-zinc-100">
            <p className="text-[10px] font-black uppercase italic tracking-widest text-zinc-400 mb-4 ml-2">{cat}</p>
            <div className="space-y-2">{currentSList[cat].map((item, i) => <div key={i} className="flex items-center gap-3 bg-white p-3 rounded-2xl border border-zinc-100 shadow-sm"><div className="w-1.5 h-1.5 rounded-full bg-indigo-500"></div><span className="text-[11px] font-bold text-zinc-700">{item}</span></div>)}</div>
          </div>)}
        </div> : <div className="text-center py-20 bg-zinc-50 rounded-[3rem] border-2 border-dashed border-zinc-200"><p className="text-zinc-500 font-bold italic">Presiona sincronizar para generar tu lista de la semana {selectedWeek}.</p></div>}
      </div>
      
      <div className="bg-zinc-950 p-12 rounded-[4rem] text-white flex flex-col md:flex-row items-center justify-between gap-8 shadow-2xl relative overflow-hidden group">
        <div className="z-10">
          <h4 className="text-4xl font-black uppercase italic tracking-tighter mb-1 leading-none">Mi Carrito 21D</h4>
          <p className="text-zinc-500 font-bold uppercase text-xs tracking-widest">Enviar directamente a tu WhatsApp</p>
        </div>
        <button onClick={() => {
          let text = `🛒 *Lista de Compras Semana ${selectedWeek}*\n\n`;
          Object.keys(currentSList).forEach(cat => { text += `*${cat.toUpperCase()}*\n`; currentSList[cat].forEach(item => text += `- ${item}\n`); text += "\n"; });
          window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
        }} disabled={!currentSList} className={`bg-white text-zinc-950 px-14 py-6 rounded-[2rem] font-black uppercase italic tracking-[0.2em] hover:bg-green-500 hover:text-white transition-all shadow-xl z-10 flex items-center gap-4 ${!currentSList ? 'opacity-30' : ''}`}><MessageCircle size={24} /> ENVIAR LISTA WSP 🛒</button>
      </div>
    </div>
  );
}

function IngredientSection({ title, list, tempExcluded, toggleExclude, color }) {
  const colorMap = { indigo: "border-indigo-100 bg-indigo-50/20 text-indigo-950 hover:border-indigo-300 shadow-indigo-50/50", amber: "border-amber-100 bg-amber-50/20 text-amber-950 hover:border-amber-300 shadow-amber-50/50", green: "border-green-100 bg-green-50/20 text-green-950 hover:border-green-300 shadow-green-50/50" };
  return (
    <div>
      <h4 className="text-[11px] font-black uppercase text-zinc-400 tracking-[0.4em] mb-6 ml-3">{title}</h4>
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
        {list.map(item => {
          const isEx = tempExcluded.includes(item);
          return <button key={item} onClick={() => toggleExclude(item)} className={`p-5 rounded-3xl border-2 transition-all font-black text-[10px] uppercase italic flex flex-col items-center justify-center gap-3 text-center h-28 shadow-sm ${isEx ? 'border-red-100 bg-red-50/50 text-red-300 opacity-50' : colorMap[color]}`}>{isEx ? <XCircle size={16} /> : <CheckCircle size={16} className="opacity-40" />}{item}</button>;
        })}
      </div>
    </div>
  );
}

function DashboardView({ progress, toggleTask, currentDay }) {
  const dayData = PROGRAM_DAYS[currentDay - 1] || PROGRAM_DAYS[0];
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
      <div className="bg-white p-12 rounded-[4rem] shadow-xl border border-zinc-100">
        <h3 className="text-3xl font-black italic uppercase tracking-tighter mb-10 flex items-center gap-4 text-zinc-900"><Droplets className="text-blue-500" strokeWidth={3} /> Tareas Día <span className="text-indigo-600">#{currentDay}</span></h3>
        <div className="space-y-4">
          {dayData.tasks.map((t, i) => {
            const isComp = progress[currentDay]?.completedTasks?.includes(i);
            return <button key={i} onClick={() => toggleTask(currentDay, i)} className={`w-full p-7 rounded-[2rem] border-2 transition-all duration-300 flex items-center justify-between group ${isComp ? 'bg-green-50 border-green-100 text-green-700' : 'bg-zinc-50 border-zinc-50 text-zinc-500 hover:border-indigo-200'}`}><span className="font-black italic uppercase text-xs tracking-widest text-left">{t}</span>{isComp ? <CheckCircle className="text-green-500" /> : <Circle className="text-zinc-200 group-hover:text-indigo-200" />}</button>;
          })}
        </div>
      </div>
      <div className="bg-zinc-950 text-white p-12 rounded-[4rem] flex flex-col justify-between relative overflow-hidden group shadow-2xl">
         <div className="z-10"><p className="text-indigo-400 font-black uppercase italic tracking-widest text-xs mb-6">MOTOR METABÓLICO ACTIVADO</p><h3 className="text-7xl font-black italic tracking-tighter leading-none mb-6 uppercase text-wrap">ADAPTACIÓN<br/>CELULAR</h3></div>
         <div className="mt-8 flex items-baseline gap-3 z-10"><span className="text-8xl font-black italic tracking-tighter text-indigo-600">{21 - currentDay}</span><span className="text-2xl font-black uppercase italic opacity-20 tracking-tighter">Días Restantes</span></div>
         <Sparkles className="absolute -bottom-20 -right-20 opacity-5 group-hover:scale-125 transition-transform duration-1000" size={500} />
      </div>
    </div>
  );
}

function StrategyView({ currentMaxDay }) {
  const currentWeek = Math.ceil(currentMaxDay / 7);
  const [selectedWeek, setSelectedWeek] = useState(currentWeek > 3 ? 3 : currentWeek);
  const daysLabels = ["D1 - L", "D2 - M", "D3 - M", "D4 - J", "D5 - V", "D6 - S", "D7 - D"];
  return (
    <div className="space-y-10 animate-in fade-in duration-700">
      <div className="flex bg-zinc-200/50 p-2 rounded-3xl w-fit mx-auto shadow-inner border border-zinc-100 backdrop-blur-sm">
        {[1, 2, 3].map(w => {
          const isLocked = w > currentWeek;
          return <button key={w} disabled={isLocked} onClick={() => setSelectedWeek(w)} className={`flex items-center gap-3 px-8 py-4 rounded-2xl font-black text-xs uppercase italic tracking-widest transition-all ${selectedWeek === w ? 'bg-white text-indigo-900 shadow-xl scale-105' : isLocked ? 'text-zinc-400 opacity-30 cursor-not-allowed' : 'text-zinc-600 hover:text-indigo-600'}`}>Semana {w} {isLocked && <Lock size={14} />}</button>;
        })}
      </div>
      <div className="bg-white rounded-[4rem] shadow-2xl border border-zinc-100 overflow-hidden overflow-x-auto">
        <div className="min-w-[900px]">
          <div className="bg-zinc-950 text-white p-10 flex justify-between items-center relative overflow-hidden"><div className="z-10"><h3 className="text-3xl font-black uppercase italic tracking-tighter leading-none">MATRIZ ESTRATÉGICA</h3><p className="text-indigo-400 font-black uppercase italic text-xs tracking-widest mt-2">{WEEKLY_DATA[selectedWeek-1].title}</p></div><Calendar className="absolute -right-10 -top-10 opacity-10" size={200} /></div>
          <table className="w-full text-center border-collapse">
            <thead><tr className="bg-zinc-50 border-b border-zinc-100"><th className="p-6 text-[11px] font-black uppercase text-zinc-400 bg-zinc-50/50 w-40 italic tracking-widest">PERIODO SOLAR</th>{daysLabels.map((l, i) => <th key={i} className="p-6 text-sm font-black uppercase italic text-zinc-900 tracking-tighter">{l}</th>)}</tr></thead>
            <tbody>
              <tr><td className="p-10 border-b border-zinc-100 bg-zinc-50/30 flex flex-col items-center justify-center"><span className="text-[11px] font-black uppercase text-zinc-400 italic">Mañana</span><span className="text-[9px] font-black uppercase text-indigo-600 leading-none mt-1">7 AM</span></td>{WEEKLY_DATA[selectedWeek-1].schedule.breakfast.map((item, idx) => <td key={idx} className={`p-8 border-b border-zinc-100 text-[11px] font-black uppercase italic ${item === '3 Opciones' ? 'bg-indigo-600 text-white shadow-inner' : 'text-zinc-600'}`}>{item}</td>)}</tr>
              <tr><td className="p-10 border-b border-zinc-100 bg-zinc-50/30 flex flex-col items-center justify-center"><span className="text-[11px] font-black uppercase text-zinc-400 italic">Tarde</span><span className="text-[9px] font-black uppercase text-indigo-600 leading-none mt-1">12 - 3 PM</span></td>{WEEKLY_DATA[selectedWeek-1].schedule.lunch.map((item, idx) => <td key={idx} className="p-8 border-b border-zinc-100 text-[11px] font-black uppercase italic text-zinc-600">{item}</td>)}</tr>
              <tr><td className="p-10 bg-zinc-50/30 flex flex-col items-center justify-center"><span className="text-[11px] font-black uppercase text-zinc-400 italic">Noche</span><span className="text-[9px] font-black uppercase text-indigo-600 leading-none mt-1">6 PM</span></td>{WEEKLY_DATA[selectedWeek-1].schedule.dinner.map((item, idx) => <td key={idx} className={`p-8 text-[11px] font-black uppercase italic transition-all ${item === 'Caldo de Huesos' ? 'bg-zinc-300 text-white scale-95 shadow-inner' : item === '2 Opciones' ? 'bg-amber-800 text-white shadow-xl' : 'text-zinc-900'}`}>{item}</td>)}</tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function JournalView() { return <div className="bg-gradient-to-br from-indigo-900 to-black p-20 rounded-[5rem] text-white text-center shadow-3xl relative overflow-hidden"><Brain className="mx-auto mb-10 text-indigo-400 opacity-40" size={80} /><h3 className="text-5xl font-black uppercase italic mb-6 tracking-tighter z-10 relative">SOPORTE COGNITIVO</h3><p className="text-indigo-200 text-xl italic max-w-xl mx-auto z-10 relative leading-relaxed font-bold">"Tu cuerpo no pide comida, pide nutrientes. Aprende a distinguir el hambre real de la emocional."</p></div>; }
function StatsView({ measurements, onAdd }) { return <div className="space-y-12"><div className="bg-white p-14 rounded-[4rem] shadow-2xl border border-zinc-100"><h3 className="text-3xl font-black uppercase italic mb-10 tracking-tighter text-zinc-900">Métricas</h3><form onSubmit={onAdd} className="grid grid-cols-1 md:grid-cols-3 gap-8 items-end"><div className="space-y-4"><label className="text-[11px] font-black uppercase text-zinc-400 ml-5 tracking-[0.3em]">Masa Corporal (kg)</label><input name="weight" type="number" step="0.1" required className="w-full bg-zinc-50 border-none p-7 rounded-[2rem] outline-none font-black text-2xl italic text-zinc-800" placeholder="00.0" /></div><div className="space-y-4"><label className="text-[11px] font-black uppercase text-zinc-400 ml-5 tracking-[0.3em]">Cintura (cm)</label><input name="waist" type="number" step="0.1" required className="w-full bg-zinc-50 border-none p-7 rounded-[2rem] outline-none font-black text-2xl italic text-zinc-800" placeholder="00" /></div><button type="submit" className="bg-indigo-600 text-white py-8 rounded-[2.5rem] font-black uppercase italic hover:bg-zinc-950 transition-all shadow-2xl">Registrar</button></form></div><div className="h-[450px] bg-white p-12 rounded-[4rem] shadow-2xl border border-zinc-50"><ResponsiveContainer width="100%" height="100%"><LineChart data={measurements}><CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" /><XAxis dataKey="date" hide /><YAxis domain={['auto', 'auto']} hide /><Tooltip /><Line type="monotone" dataKey="weight" stroke="#6366f1" strokeWidth={8} dot={{ r: 10, fill: '#6366f1', strokeWidth: 5, stroke: '#fff' }} activeDot={{ r: 14 }} /></LineChart></ResponsiveContainer></div></div>; }