import React, { useState, useEffect } from 'react';
import { Play, Check, ChevronRight, Save, History, Trophy, Flame, Brain, Heart, Target, Sparkles, RefreshCcw, Loader2, Moon, Sun, Volume2, Droplets, BarChart3, HelpCircle, X, Cloud, LogIn, LogOut } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged, signOut, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { getFirestore, doc, setDoc, onSnapshot } from 'firebase/firestore';

const MorningRitualApp = () => {
  // CONFIGURACIÓN API GEMINI
  const apiKey = ""; // La clave se inyecta en tiempo de ejecución
  
  // --- FIREBASE SETUP ---
  const [user, setUser] = useState(null);
  const [authObj, setAuthObj] = useState(null); // Guardamos la instancia de auth
  const [db, setDb] = useState(null);
  const [appId, setAppId] = useState(null);
  const [isSyncing, setIsSyncing] = useState(true);
  const [authError, setAuthError] = useState(null);

  useEffect(() => {
    // 1. Inicializar Firebase
    const firebaseConfig = JSON.parse(__firebase_config);
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    const database = getFirestore(app);
    const currentAppId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

    setAuthObj(auth);
    setDb(database);
    setAppId(currentAppId);

    // 2. Autenticación (MANDATORY PATTERN)
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          // Intentamos inicio anónimo si no hay usuario, onAuthStateChanged lo manejará
        }
      } catch (error) {
        console.error("Auth Error:", error);
        setAuthError("Error de conexión");
      }
    };

    initAuth();

    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
      if (currentUser) {
        setUser(currentUser);
      } else {
        // Si no hay usuario, iniciamos anónimo por defecto para permitir que la app funcione
        try {
          await signInAnonymously(auth);
        } catch (anonError) {
           console.error("Anonymous auth error", anonError);
        }
      }
    });

    return () => unsubscribe();
  }, []);

  // --- ESTADOS DE LA APP ---
  const [step, setStep] = useState(0); 
  const [history, setHistory] = useState([]);
  const [streak, setStreak] = useState(0);
  const [showHistory, setShowHistory] = useState(false);
  const [timerActive, setTimerActive] = useState(false);
  const [timeLeft, setTimeLeft] = useState(120); 
  const [darkMode, setDarkMode] = useState(true);
  const [hydrated, setHydrated] = useState(false);
  
  // Estado para Ayuda/Ejemplos
  const [activeHelp, setActiveHelp] = useState(null);
  const [currentExamples, setCurrentExamples] = useState([]);
  
  // Estados para IA
  const [isLoadingAI, setIsLoadingAI] = useState(false);
  const [visualizationScript, setVisualizationScript] = useState('');
  const [isSpeaking, setIsSpeaking] = useState(false);

  // Lista de Frases Motivacionales
  const welcomeQuotes = [
    "No reacciones al mundo. Diséñalo.",
    "Tu mañana es el timón de tu vida.",
    "La disciplina pesa onzas, el arrepentimiento toneladas.",
    "Gana la mañana, gana el día.",
    "Hoy es una nueva oportunidad para ser tu mejor versión.",
    "Donde va tu atención, va tu energía.",
    "El éxito es una serie de pequeñas victorias.",
    "Primero creas tus hábitos, luego tus hábitos te crean a ti.",
    "La calidad de tu vida depende de la calidad de tus hábitos.",
    "Actúa hoy como la persona que quieres ser mañana.",
    "El dolor de la disciplina es temporal, la gloria es para siempre.",
    "Tu futuro se crea con lo que haces hoy, no mañana."
  ];

  const [currentQuote, setCurrentQuote] = useState(() => welcomeQuotes[Math.floor(Math.random() * welcomeQuotes.length)]);

  // Formulario
  const [formData, setFormData] = useState({
    identity: '',
    feeling: '',
    energy: 5,
    gratitude1: '',
    gratitude2: '',
    gratitude3: '',
    visualized: false,
    action1: '',
    action2: '',
    action3: '',
    affirmation: 'Hoy elijo ser imparable. Soy disciplinado y nada me detendrá.'
  });

  // --- SINCRONIZACIÓN DE DATOS (Firestore) ---
  useEffect(() => {
    if (!user || !db || !appId) return;

    // Referencia al documento único del usuario que contiene todo su diario
    // Estructura: artifacts/{appId}/users/{userId}/data/journal
    const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'journal');

    const unsubscribeSnapshot = onSnapshot(docRef, (docSnap) => {
      setIsSyncing(false);
      if (docSnap.exists()) {
        const data = docSnap.data();
        if (data.history) setHistory(data.history);
        if (data.streak !== undefined) setStreak(data.streak);
        // Verificar fechas para resetear racha si es necesario
        if (data.lastDate) {
           const today = new Date().toDateString();
           const yesterday = new Date(Date.now() - 86400000).toDateString();
           if (data.lastDate !== today && data.lastDate !== yesterday) {
             // Racha perdida (solo visualmente, se actualiza al guardar)
             setStreak(0);
           }
        }
        if (data.preferences) {
          if (data.preferences.darkMode !== undefined) setDarkMode(data.preferences.darkMode);
        }
      } else {
        // Usuario nuevo en la nube
      }
    }, (error) => {
      console.error("Error sincronizando datos:", error);
      setIsSyncing(false);
    });

    return () => unsubscribeSnapshot();
  }, [user, db, appId]);

  // Función para guardar en Firestore
  const saveToCloud = async (newHistory, newStreak, lastDate) => {
    if (!user || !db) return;
    try {
      const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'journal');
      await setDoc(docRef, {
        history: newHistory,
        streak: newStreak,
        lastDate: lastDate,
        preferences: { darkMode }
      }, { merge: true });
    } catch (e) {
      console.error("Error guardando:", e);
      // Fallback silencioso en UI para no interrumpir flujo
    }
  };

  // Guardar preferencia modo oscuro
  useEffect(() => {
    if (user && db && !isSyncing) {
       // Guardar solo preferencia sin tocar historial
       const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'data', 'journal');
       setDoc(docRef, { preferences: { darkMode } }, { merge: true });
    }
  }, [darkMode]);


  // --- FUNCIONES DE AUTH ---
  const handleGoogleLogin = async () => {
    if (!authObj) return;
    try {
      const provider = new GoogleAuthProvider();
      await signInWithPopup(authObj, provider);
      // El onAuthStateChanged manejará el cambio de usuario y recargará los datos de ese usuario
    } catch (error) {
      console.error("Login Error:", error);
      if (error.code === 'auth/unauthorized-domain') {
        alert("⚠️ Dominio no autorizado: El inicio de sesión con Google no está disponible en este entorno de vista previa. Por favor, continúa usando el modo invitado (tus datos se guardan en esta sesión).");
      } else if (error.code === 'auth/popup-closed-by-user') {
        // Usuario cerró el popup, no hacemos nada
      } else {
        alert("No se pudo iniciar sesión: " + error.message);
      }
    }
  };

  const handleLogout = async () => {
    if (!authObj) return;
    try {
      await signOut(authObj);
      window.location.reload(); // Recargar para limpiar estado
    } catch (error) {
      console.error("Logout Error:", error);
    }
  };

  // --- DATOS Y LÓGICA DE LA APP ---
  const baseExamplesData = {
    identity: [
      "Un líder estoico y calmado ante el caos",
      "Un ejecutor implacable enfocado en resultados",
      "Un padre/madre presente, amoroso y paciente",
      "Un creador visionario y audaz",
      "Un guerrero pacífico que domina su ego",
      "Un aprendiz curioso y humilde",
      "Una fuerza de la naturaleza imparable",
      "Alguien que escucha más de lo que habla",
      "Un solucionador de problemas creativo",
      "La persona más disciplinada que conozco"
    ],
    feeling: [
      "Profundamente satisfecho con mi esfuerzo",
      "Orgulloso de haber superado la pereza",
      "En paz absoluta y sin ansiedad",
      "Energético, vibrante y vivo",
      "Realizado por haber ayudado a otros",
      "Invencible ante los problemas pequeños",
      "Con una claridad mental cristalina",
      "Agradecido por estar vivo un día más",
      "Confiado en mi capacidad de resolver",
      "Sereno como el agua en calma"
    ],
    gratitude: [
      "El sabor del primer café de esta mañana",
      "Haber dormido en una cama caliente",
      "La sonrisa de mi hijo/pareja ayer",
      "Tener salud para levantarme sin dolor",
      "La lección que aprendí de mi error ayer",
      "Tener agua potable y comida en la nevera",
      "El sol entrando por la ventana",
      "Un mensaje inesperado de un amigo",
      "La oportunidad de trabajar en lo que quiero",
      "Mis piernas que me permiten caminar"
    ],
    action: [
      "Escribir las primeras 500 palabras del informe",
      "Llamar a ese cliente difícil (El Sapo)",
      "Hacer 45 minutos de pesas sin mirar el celular",
      "Revisar y pagar las facturas pendientes",
      "Tener esa conversación incómoda que evito",
      "Limpiar y organizar mi escritorio por 20 min",
      "Leer 10 páginas de un libro formativo",
      "Planificar el menú saludable de la semana",
      "Responder todos los emails pendientes en 1 hora",
      "Meditar 15 minutos sin interrupciones"
    ]
  };

  // Mezclar ejemplos
  useEffect(() => {
    if (activeHelp) {
      const allExamples = [...baseExamplesData[activeHelp]];
      for (let i = allExamples.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [allExamples[i], allExamples[j]] = [allExamples[j], allExamples[i]];
      }
      setCurrentExamples(allExamples.slice(0, 6)); 
    }
  }, [activeHelp]);

  // API Calls
  const callGemini = async (prompt, type) => {
    setIsLoadingAI(true);
    try {
      const response = await fetch(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] }),
        }
      );
      if (!response.ok) throw new Error('Error en la llamada a Gemini');
      const data = await response.json();
      const generatedText = data.candidates?.[0]?.content?.parts?.[0]?.text || "No se pudo generar el contenido.";

      if (type === 'visualization') setVisualizationScript(generatedText);
      else if (type === 'affirmation') setFormData(prev => ({ ...prev, affirmation: generatedText }));
      else if (type === 'refine_goal') setFormData(prev => ({ ...prev, action1: generatedText.replace(/"/g, '') }));

    } catch (error) {
      console.error("Error AI:", error);
      alert("Error conectando con IA.");
    } finally {
      setIsLoadingAI(false);
    }
  };

  const generateVisualization = () => {
    if (!formData.identity) return alert("Completa tu identidad primero.");
    const prompt = `Actúa como un coach. Usuario: "${formData.identity}", Sentimiento: "${formData.feeling}". Guion visualización corto (max 60 palabras), segunda persona, sensorial, éxito hoy. Español neutro.`;
    callGemini(prompt, 'visualization');
  };

  const generateMantra = () => {
    if (!formData.action1 && !formData.identity) return alert("Completa metas e identidad.");
    const prompt = `Mantra personal (max 2 frases). Identidad: "${formData.identity}", Meta: "${formData.action1}". Presente, afirmativo. Español neutro.`;
    callGemini(prompt, 'affirmation');
  };

  const refineGoal = () => {
    if (!formData.action1) return alert("Escribe tu meta principal.");
    const prompt = `Haz esta meta SMART y breve: "${formData.action1}". Devuelve solo la frase.`;
    callGemini(prompt, 'refine_goal');
  }

  const speakText = (text) => {
    if ('speechSynthesis' in window) {
      if (isSpeaking) { window.speechSynthesis.cancel(); setIsSpeaking(false); return; }
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = 'es-ES';
      utterance.onend = () => setIsSpeaking(false);
      setIsSpeaking(true);
      window.speechSynthesis.speak(utterance);
    }
  };

  // Timer
  useEffect(() => {
    let interval = null;
    if (timerActive && timeLeft > 0) interval = setInterval(() => setTimeLeft((prev) => prev - 1), 1000);
    else if (timeLeft === 0) { setTimerActive(false); setFormData({...formData, visualized: true}); }
    return () => clearInterval(interval);
  }, [timerActive, timeLeft]);

  const handleChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });
  
  const handleSelectExample = (text) => {
    const newData = { ...formData };
    if (activeHelp === 'identity') newData.identity = text;
    else if (activeHelp === 'feeling') newData.feeling = text;
    else if (activeHelp === 'gratitude') {
      if (!newData.gratitude1) newData.gratitude1 = text;
      else if (!newData.gratitude2) newData.gratitude2 = text;
      else if (!newData.gratitude3) newData.gratitude3 = text;
      else newData.gratitude1 = text;
    } else if (activeHelp === 'action') {
      if (!newData.action1) newData.action1 = text;
      else if (!newData.action2) newData.action2 = text;
      else if (!newData.action3) newData.action3 = text;
      else newData.action1 = text;
    }
    setFormData(newData);
    setActiveHelp(null);
  };

  const completeRitual = () => {
    const today = new Date().toDateString();
    const newEntry = {
      date: new Date().toLocaleDateString('es-ES', { weekday: 'short', day: 'numeric', month: 'short' }),
      fullDate: new Date().toISOString(),
      data: formData
    };
    
    // Calcular nueva racha
    let newStreak = streak;
    if (streak === 0 || (history.length > 0 && history[0].date !== newEntry.date)) { 
        newStreak = streak + 1;
    }

    const newHistory = [newEntry, ...history];
    setHistory(newHistory);
    setStreak(newStreak);
    
    // GUARDAR EN NUBE
    saveToCloud(newHistory, newStreak, today);

    setStep(6);
  };

  const resetForm = () => {
    setFormData({ identity: '', feeling: '', energy: 5, gratitude1: '', gratitude2: '', gratitude3: '', visualized: false, action1: '', action2: '', action3: '', affirmation: 'Hoy elijo ser imparable. Soy disciplinado y nada me detendrá.' });
    setVisualizationScript('');
    // Cambiar frase al reiniciar
    setCurrentQuote(welcomeQuotes[Math.floor(Math.random() * welcomeQuotes.length)]);
    setStep(0);
    setTimeLeft(120);
    setHydrated(false);
  };

  // --- UI HELPERS ---
  const bgClass = darkMode ? 'bg-slate-900 text-white' : 'bg-gray-50 text-gray-800';
  const cardClass = darkMode ? 'bg-slate-800 border-slate-700 text-white' : 'bg-white border-gray-100 text-gray-800';
  const inputClass = darkMode ? 'bg-slate-700 border-slate-600 text-white placeholder-slate-400 focus:ring-blue-400' : 'bg-white border-gray-300 text-gray-900 focus:ring-blue-500';
  const subtitleClass = darkMode ? 'text-slate-400' : 'text-gray-500';
  const modalClass = darkMode ? 'bg-slate-800 text-white border-slate-700' : 'bg-white text-gray-800 border-gray-200';

  const HelpModal = () => {
    if (!activeHelp) return null;
    return (
      <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 animate-fadeIn" onClick={() => setActiveHelp(null)}>
        <div className={`w-full max-w-sm rounded-xl p-6 shadow-2xl border ${modalClass}`} onClick={(e) => e.stopPropagation()}>
          <div className="flex justify-between items-center mb-4">
            <h4 className="font-bold text-lg flex items-center gap-2"><Sparkles size={18} className="text-yellow-500"/> Inspiración</h4>
            <button onClick={() => setActiveHelp(null)} className="opacity-60 hover:opacity-100"><X size={20}/></button>
          </div>
          <ul className="space-y-3">
            {currentExamples.map((ex, idx) => (
              <li key={idx} className={`text-sm p-3 rounded-lg cursor-pointer transition ${darkMode ? 'bg-slate-700 hover:bg-slate-600' : 'bg-gray-50 hover:bg-blue-50'}`} onClick={() => handleSelectExample(ex)}>{ex}</li>
            ))}
          </ul>
        </div>
      </div>
    );
  };

  const HelpBtn = ({ type }) => (
    <button onClick={() => setActiveHelp(type)} className="text-gray-400 hover:text-blue-500 transition ml-2"><HelpCircle size={16} /></button>
  );

  if (isSyncing && !user) {
    return <div className={`min-h-screen flex items-center justify-center ${bgClass}`}><Loader2 className="animate-spin text-blue-500" size={48}/><span className="ml-3">Conectando con la nube...</span></div>;
  }

  if (showHistory) {
    return (
      <div className={`min-h-screen ${bgClass} p-6 transition-colors duration-300`}>
        <div className="max-w-md mx-auto">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold">Historial</h2>
            <button onClick={() => setShowHistory(false)} className="text-blue-500 font-medium">Cerrar</button>
          </div>
          {history.length > 0 && (
            <div className={`p-4 rounded-xl mb-6 ${darkMode ? 'bg-slate-800' : 'bg-white'} shadow-sm`}>
               <h3 className="text-sm font-bold mb-4 flex items-center"><BarChart3 size={16} className="mr-2"/> Energía</h3>
               <div className="flex items-end space-x-2 h-32">
                  {history.slice(0, 7).reverse().map((entry, idx) => (
                    <div key={idx} className="flex-1 flex flex-col items-center group">
                      <div className={`w-full rounded-t ${entry.data.energy >= 8 ? 'bg-green-500' : entry.data.energy >= 5 ? 'bg-yellow-500' : 'bg-red-500'}`} style={{ height: `${entry.data.energy * 10}%` }}></div>
                      <span className="text-[10px] mt-1 opacity-60">{entry.date.split(' ')[0]}</span>
                    </div>
                  ))}
               </div>
            </div>
          )}
          <div className="space-y-4">
            {history.map((entry, idx) => (
              <div key={idx} className={`border rounded-lg p-4 shadow-sm ${darkMode ? 'border-slate-700 bg-slate-800' : 'border-gray-200 bg-white'}`}>
                <div className="flex justify-between items-center mb-2">
                  <span className="font-bold opacity-80">{entry.date}</span>
                  <span className={`text-xs px-2 py-1 rounded-full ${entry.data.energy >= 7 ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>⚡ {entry.data.energy}/10</span>
                </div>
                <div className={`text-sm space-y-1 ${darkMode ? 'text-slate-300' : 'text-gray-600'}`}>
                  <p><span className="font-medium text-blue-500">Identidad:</span> {entry.data.identity}</p>
                  <p><span className="font-medium text-red-500">Sapo:</span> {entry.data.action1}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className={`min-h-screen ${bgClass} flex justify-center transition-colors duration-300`}>
      <HelpModal />
      <div className={`w-full max-w-md min-h-screen shadow-xl flex flex-col ${darkMode ? 'bg-slate-900' : 'bg-white'}`}>
        
        {/* Header */}
        <div className={`border-b p-4 flex justify-between items-center sticky top-0 z-10 ${darkMode ? 'border-slate-800 bg-slate-900' : 'border-gray-100 bg-white'}`}>
          <h1 className="font-bold tracking-tight flex items-center gap-2">
            <Brain size={20} className="text-blue-500"/> ENFOQUE VIVA ACADEMY
          </h1>
          <div className="flex items-center gap-3">
            <div className="flex items-center space-x-1 text-orange-500">
              <Flame size={18} fill="currentColor" />
              <span className="font-bold">{streak}</span>
            </div>
            {/* Indicador de Usuario / Login */}
            {user && !user.isAnonymous ? (
               <div className="relative group">
                 <img src={user.photoURL || "https://ui-avatars.com/api/?name=User"} alt="User" className="w-8 h-8 rounded-full border border-gray-300 cursor-pointer"/>
                 <button onClick={handleLogout} className="absolute right-0 top-10 hidden group-hover:flex items-center gap-2 bg-red-600 text-white text-xs p-2 rounded shadow-lg whitespace-nowrap"><LogOut size={12}/> Salir</button>
               </div>
            ) : (
               <button onClick={handleGoogleLogin} className="p-1 text-blue-500 hover:text-blue-400" title="Guardar en Google"><LogIn size={20} /></button>
            )}
            
            <button onClick={() => setDarkMode(!darkMode)} className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-slate-700 transition">
              {darkMode ? <Sun size={18} /> : <Moon size={18} />}
            </button>
          </div>
        </div>

        {/* Sync Status Banner */}
        {!isSyncing && user && user.isAnonymous && (
           <div className="bg-yellow-100 text-yellow-800 text-xs p-2 text-center flex justify-center items-center gap-2">
              <span>⚠️ Estás en modo invitado. Tus datos no se sincronizarán si cambias de dispositivo.</span>
              <button onClick={handleGoogleLogin} className="underline font-bold">Conectar Google</button>
           </div>
        )}

        {step > 0 && step < 6 && (
          <div className={`w-full h-1 ${darkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
            <div className="bg-blue-600 h-1 transition-all duration-300" style={{ width: `${(step / 5) * 100}%` }}></div>
          </div>
        )}

        <div className="flex-1 p-6 flex flex-col">
          {step === 0 && (
            <div className="flex flex-col items-center justify-center h-full text-center space-y-8 animate-fadeIn">
              <div>
                <h2 className="text-3xl font-bold mb-2">Bienvenido</h2>
                <p className={subtitleClass}>"{currentQuote}"</p>
                {user && (
                  <p className="text-xs text-green-500 flex items-center justify-center gap-1 mt-2">
                    <Cloud size={12}/> {user.isAnonymous ? 'Guardado localmente' : `Sincronizado como ${user.displayName}`}
                  </p>
                )}
              </div>

              <div className={`w-full max-w-xs p-4 rounded-xl border-2 cursor-pointer transition-all ${hydrated ? 'border-blue-500 bg-blue-50 dark:bg-slate-800' : 'border-gray-200 hover:border-blue-300 dark:border-slate-700'}`} onClick={() => setHydrated(!hydrated)}>
                <div className="flex items-center gap-3">
                   <div className={`p-2 rounded-full ${hydrated ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-400 dark:bg-slate-700'}`}><Droplets size={24} /></div>
                   <div className="text-left">
                     <p className={`font-bold ${hydrated ? 'text-blue-600' : 'text-gray-500 dark:text-gray-400'}`}>Activación Biológica</p>
                     <p className="text-xs text-gray-400">Bebe 500ml de agua.</p>
                   </div>
                   {hydrated && <Check className="ml-auto text-blue-500" size={20}/>}
                </div>
              </div>

              <button onClick={() => setStep(1)} disabled={!hydrated} className={`w-full max-w-xs font-bold py-4 px-6 rounded-xl shadow-lg transition transform active:scale-95 flex items-center justify-center space-x-2 ${hydrated ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-gray-300 text-gray-500 cursor-not-allowed dark:bg-slate-700'}`}>
                <Play size={20} /><span>Iniciar Ritual</span>
              </button>
              <button onClick={() => setShowHistory(true)} className="text-sm opacity-60 hover:opacity-100 flex items-center gap-1"><History size={14} /> Ver Historial</button>
            </div>
          )}

          {step === 1 && (
            <div className="space-y-6 animate-slideIn">
              <div className="flex items-center space-x-2 text-blue-500 mb-2"><Brain size={24} /><h3 className="text-xl font-bold">1. Despertar Consciente</h3></div>
              <p className={`text-sm italic ${subtitleClass}`}>Define tu identidad antes de que el día la defina por ti.</p>
              <div className="space-y-4">
                <div>
                  <label className="block font-medium mb-2">Nivel de Energía (1-10)</label>
                  <input type="range" min="1" max="10" name="energy" value={formData.energy} onChange={handleChange} className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"/>
                  <div className="flex justify-between text-xs opacity-60 mt-1"><span>Zombi 🧟</span><span>Máquina ⚡</span></div>
                  <p className="text-center font-bold text-blue-500">{formData.energy}</p>
                </div>
                <div><label className="flex items-center font-medium mb-2">¿Quién elijo ser hoy? <HelpBtn type="identity"/></label><input type="text" name="identity" placeholder="Ej: Un líder paciente..." value={formData.identity} onChange={handleChange} className={`w-full p-4 rounded-lg border focus:outline-none focus:ring-2 ${inputClass}`}/></div>
                <div><label className="flex items-center font-medium mb-2">¿Sentimiento deseado? <HelpBtn type="feeling"/></label><input type="text" name="feeling" placeholder="Ej: Satisfecho..." value={formData.feeling} onChange={handleChange} className={`w-full p-4 rounded-lg border focus:outline-none focus:ring-2 ${inputClass}`}/></div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="space-y-6 animate-slideIn">
              <div className="flex items-center space-x-2 text-green-500 mb-2"><Heart size={24} /><h3 className="text-xl font-bold">2. Gratitud Profunda</h3><HelpBtn type="gratitude"/></div>
              <p className={`text-sm italic ${subtitleClass}`}>3 cosas específicas de las últimas 24h.</p>
              <div className="space-y-3">
                {[1, 2, 3].map((num) => (<input key={num} type="text" name={`gratitude${num}`} placeholder={`Gratitud #${num}`} value={formData[`gratitude${num}`]} onChange={handleChange} className={`w-full p-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-green-500 ${inputClass}`}/>))}
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="space-y-6 animate-slideIn text-center">
              <div className="flex items-center justify-center space-x-2 text-purple-500 mb-2"><Sparkles size={24} /><h3 className="text-xl font-bold">3. Visualización</h3></div>
              <div className="mb-4 space-y-3">
                {!visualizationScript ? (
                  <button onClick={generateVisualization} disabled={isLoadingAI} className={`text-xs px-4 py-2 rounded-full font-bold flex items-center justify-center mx-auto transition ${darkMode ? 'bg-purple-900 text-purple-200 hover:bg-purple-800' : 'bg-purple-100 text-purple-700 hover:bg-purple-200'}`}>
                    {isLoadingAI ? <Loader2 className="animate-spin mr-1" size={14}/> : <Sparkles size={14} className="mr-1"/>} {isLoadingAI ? "Creando..." : "✨ Generar Escena con IA"}
                  </button>
                ) : (
                  <div className={`p-4 rounded-lg border text-left animate-fadeIn relative ${darkMode ? 'bg-slate-800 border-slate-700' : 'bg-purple-50 border-purple-100'}`}>
                    <p className={`text-sm italic pr-8 ${darkMode ? 'text-purple-300' : 'text-purple-800'}`}>"{visualizationScript}"</p>
                    <button onClick={() => speakText(visualizationScript)} className="absolute top-2 right-2 p-2 rounded-full hover:bg-black/10 transition">{isSpeaking ? <Volume2 size={16} className="text-red-500 animate-pulse"/> : <Play size={16} className="text-purple-500"/>}</button>
                  </div>
                )}
              </div>
              <div className={`p-8 rounded-2xl mb-4 ${darkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
                <div className="text-5xl font-mono mb-4">{Math.floor(timeLeft / 60)}:{(timeLeft % 60).toString().padStart(2, '0')}</div>
                {!formData.visualized ? (
                  <button onClick={() => setTimerActive(!timerActive)} className={`w-full py-3 rounded-lg font-bold text-white transition ${timerActive ? 'bg-red-500' : 'bg-purple-600'}`}>{timerActive ? 'Pausar' : 'Comenzar (Cierra los ojos)'}</button>
                ) : ( <div className="flex items-center justify-center space-x-2 text-green-500 font-bold bg-green-100/10 p-3 rounded-lg"><Check size={20} /><span>¡Completado!</span></div> )}
              </div>
              {!formData.visualized && <button onClick={() => setFormData({...formData, visualized: true})} className="text-sm opacity-50 underline">Saltar timer</button>}
            </div>
          )}

          {step === 4 && (
            <div className="space-y-6 animate-slideIn">
              <div className="flex items-center space-x-2 text-red-500 mb-2"><Target size={24} /><h3 className="text-xl font-bold">4. Acción Masiva</h3><HelpBtn type="action"/></div>
              <p className={`text-sm italic ${subtitleClass}`}>"Cómete ese sapo": Haz lo difícil primero.</p>
              <div className="space-y-4">
                <div className="relative">
                  <div className="flex justify-between items-center mb-1">
                    <label className="text-red-500 font-bold text-sm flex items-center gap-1">🐸 EL SAPO (Tarea más difícil)</label>
                    <button onClick={refineGoal} className="text-[10px] bg-blue-100 text-blue-600 px-2 py-1 rounded hover:bg-blue-200 transition flex items-center">{isLoadingAI ? <Loader2 size={10} className="animate-spin"/> : <Sparkles size={10} className="mr-1"/>} Hacer SMART</button>
                  </div>
                  <input type="text" name="action1" placeholder="Ej: Terminar el informe..." value={formData.action1} onChange={handleChange} className={`w-full p-4 border-l-4 border-l-red-500 rounded-r-lg shadow-sm focus:outline-none ${inputClass} ${darkMode ? 'border-slate-600' : 'border-gray-300'}`}/>
                </div>
                <div><label className="block font-medium mb-1 text-sm opacity-80">Acción #2</label><input type="text" name="action2" value={formData.action2} onChange={handleChange} className={`w-full p-3 rounded-lg border focus:outline-none ${inputClass}`}/></div>
                <div><label className="block font-medium mb-1 text-sm opacity-80">Acción #3</label><input type="text" name="action3" value={formData.action3} onChange={handleChange} className={`w-full p-3 rounded-lg border focus:outline-none ${inputClass}`}/></div>
              </div>
            </div>
          )}

          {step === 5 && (
            <div className="space-y-6 animate-slideIn">
              <div className="flex items-center space-x-2 text-indigo-500 mb-2"><Trophy size={24} /><h3 className="text-xl font-bold">5. Identidad</h3></div>
              <div className={`p-6 rounded-xl border relative ${darkMode ? 'bg-slate-800 border-slate-700' : 'bg-indigo-50 border-indigo-100'}`}>
                <div className="flex justify-between items-center mb-3">
                   <label className={`font-bold ${darkMode ? 'text-indigo-300' : 'text-indigo-900'}`}>Mantra de Hoy:</label>
                   <button onClick={generateMantra} disabled={isLoadingAI} className={`text-xs px-3 py-1 rounded-full font-bold flex items-center transition shadow-sm ${darkMode ? 'bg-slate-700 text-indigo-300' : 'bg-white text-indigo-600'}`}>{isLoadingAI ? <Loader2 className="animate-spin mr-1" size={12}/> : <Sparkles size={12} className="mr-1"/>} {isLoadingAI ? "..." : "Generar Mantra"}</button>
                </div>
                <textarea name="affirmation" value={formData.affirmation} onChange={handleChange} className={`w-full p-4 rounded-lg focus:outline-none text-lg font-medium h-32 ${inputClass}`}/>
              </div>
              <button onClick={completeRitual} className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-6 rounded-xl shadow-lg transition transform active:scale-95 flex items-center justify-center space-x-2 mt-4"><Save size={20} /><span>Guardar y Conquistar</span></button>
            </div>
          )}

          {step === 6 && (
            <div className="flex flex-col items-center justify-center h-full text-center space-y-6 animate-fadeIn">
              <div className="bg-green-100 p-6 rounded-full dark:bg-green-900"><Check size={64} className="text-green-600 dark:text-green-400" /></div>
              <h2 className="text-3xl font-bold">¡Mentalidad Activada!</h2>
              <div className={`p-6 rounded-xl w-full text-left space-y-4 border ${cardClass}`}>
                <div className="flex justify-between items-center border-b pb-2 border-gray-200 dark:border-gray-700">
                  <span className="text-xs uppercase font-bold opacity-60">Misión Prioritaria (El Sapo)</span>
                  <span className="text-xs bg-red-100 text-red-800 px-2 py-0.5 rounded-full dark:bg-red-900 dark:text-red-200">Hacer YA</span>
                </div>
                <p className="text-lg font-medium flex items-start gap-2"><Target className="text-red-500 mt-1 flex-shrink-0" size={18}/> {formData.action1}</p>
                <div className="pt-2">
                  <p className="text-sm opacity-70">Otras misiones:</p>
                  <ul className="list-disc list-inside text-sm mt-1 opacity-90">
                    <li>{formData.action2}</li>
                    <li>{formData.action3}</li>
                  </ul>
                </div>
              </div>
              <button onClick={resetForm} className="mt-8 text-blue-500 font-medium flex items-center space-x-1 hover:text-blue-400"><RefreshCcw size={16} /><span>Reiniciar</span></button>
            </div>
          )}
        </div>

        {step > 0 && step < 6 && (
          <div className={`p-6 border-t flex justify-between items-center sticky bottom-0 ${darkMode ? 'border-slate-800 bg-slate-900' : 'border-gray-100 bg-white'}`}>
            <button onClick={() => setStep(step - 1)} className="text-gray-400 hover:text-gray-500 px-4 py-2">Atrás</button>
            <button onClick={() => setStep(step + 1)} className={`text-white rounded-full p-4 shadow-lg transition transform active:scale-95 flex items-center ${darkMode ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-900 hover:bg-black'}`}><ChevronRight size={24} /></button>
          </div>
        )}
      </div>
    </div>
  );
};

export default MorningRitualApp;