import React, { useState, useEffect, useRef, useMemo } from 'react';
import { 
  Home, Target, BookOpen, User, PlusCircle, CheckCircle2, Circle, 
  Flame, Award, Settings, Brain, Heart, Moon, Sun, Droplets, 
  Dumbbell, Book, Cross, ChevronRight, Activity, Smile, Frown,
  MessageSquare, Zap, BarChart3, ShieldCheck, Users, Trophy, Flag,
  LogOut, Mail, Lock, AlertCircle, Loader2
} from 'lucide-react';
import { 
  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer 
} from 'recharts';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged,
  createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, updateProfile
} from 'firebase/auth';
import { 
  getFirestore, doc, getDoc, setDoc, updateDoc, onSnapshot, 
  collection, query, addDoc, getDocs, deleteDoc, serverTimestamp, arrayUnion 
} from 'firebase/firestore';

// --- CONFIGURAÇÃO FIREBASE ---
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'transforma-app-v1';

const LEVELS = [
  { name: 'Bronze', minXp: 0, color: 'text-orange-400', border: 'border-orange-400/50', bg: 'bg-orange-500/10' },
  { name: 'Prata', minXp: 1000, color: 'text-slate-300', border: 'border-slate-300/50', bg: 'bg-slate-400/10' },
  { name: 'Ouro', minXp: 2500, color: 'text-yellow-400', border: 'border-yellow-400/50', bg: 'bg-yellow-400/10' },
  { name: 'Platina', minXp: 5000, color: 'text-cyan-400', border: 'border-cyan-400/50', bg: 'bg-cyan-400/10' },
  { name: 'Diamante', minXp: 10000, color: 'text-purple-400', border: 'border-purple-400/50', bg: 'bg-purple-400/10' },
  { name: 'Mestre', minXp: 20000, color: 'text-rose-500', border: 'border-rose-500/50', bg: 'bg-rose-500/10' },
  { name: 'Lenda', minXp: 50000, color: 'text-amber-500', border: 'border-amber-500/50', bg: 'bg-amber-500/10' },
];

const ICONS_MAP = {
  Sun, Cross, BookOpen, Droplets, Dumbbell, Book, ShieldCheck, Moon, Heart, Flame
};

const INITIAL_HABITS = [
  { id: 'h1', title: 'Check-in Matinal', xp: 20, iconName: 'Sun', category: 'mental', done: false },
  { id: 'h2', title: 'Orar (10 min)', xp: 50, iconName: 'Cross', category: 'spiritual', done: false },
  { id: 'h3', title: 'Ler Versículo do Dia', xp: 30, iconName: 'BookOpen', category: 'spiritual', done: false },
  { id: 'h4', title: 'Beber 2L de Água', xp: 40, iconName: 'Droplets', category: 'physical', done: false },
  { id: 'h5', title: 'Treino Fisico', xp: 100, iconName: 'Dumbbell', category: 'physical', done: false },
  { id: 'h6', title: 'Leitura (20 pág)', xp: 30, iconName: 'Book', category: 'mental', done: false },
  { id: 'h7', title: 'Zero Pornografia/Álcool', xp: 100, iconName: 'ShieldCheck', category: 'discipline', done: false },
  { id: 'h8', title: 'Dormir antes das 23h', xp: 50, iconName: 'Moon', category: 'physical', done: false },
];

const WEEKLY_CHART_DATA = [
  { name: 'Seg', score: 65 }, { name: 'Ter', score: 72 }, { name: 'Qua', score: 68 },
  { name: 'Qui', score: 85 }, { name: 'Sex', score: 90 }, { name: 'Sáb', score: 88 }, { name: 'Dom', score: 95 },
];

export default function App() {
  // Navigation & UI State
  const [activeTab, setActiveTab] = useState('home');
  const [showCheckIn, setShowCheckIn] = useState(false);
  const [showLevelUp, setShowLevelUp] = useState(false);
  const [loading, setLoading] = useState(true);
  const [authError, setAuthError] = useState('');
  
  // Auth State
  const [user, setUser] = useState(null);
  const [isAuthScreen, setIsAuthScreen] = useState(false);
  const [authMode, setAuthMode] = useState('login'); // 'login' | 'register'
  
  // App Data State
  const [userData, setUserData] = useState(null);
  const [habits, setHabits] = useState([]);
  const [journalEntries, setJournalEntries] = useState([]);
  
  // Community State
  const [leaderboard, setLeaderboard] = useState([]);
  const [challenges, setChallenges] = useState([]);
  
  // Temp State
  const [journalText, setJournalText] = useState('');
  const [aiFeedback, setAiFeedback] = useState(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);

  // Forms
  const emailRef = useRef(null);
  const passRef = useRef(null);
  const nameRef = useRef(null);
  const challengeTitleRef = useRef(null);
  const challengeRewardRef = useRef(null);

  useEffect(() => {
    // 1. Mandatory Auth Initialization
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          // Fallback to anonymous so we satisfy rules, but we'll show login UI if anonymous
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth Init Error", err);
      }
    };
    initAuth();

    // 2. Auth State Listener
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      if (currentUser) {
        // If user is anonymous, we force them to the Auth screen for a premium experience
        if (currentUser.isAnonymous) {
          setIsAuthScreen(true);
          setLoading(false);
        } else {
          setIsAuthScreen(false);
          // Initial check-in logic
          const lastCheckIn = localStorage.getItem(`checkin_${currentUser.uid}`);
          const today = new Date().toDateString();
          if (lastCheckIn !== today) setShowCheckIn(true);
        }
      } else {
        setIsAuthScreen(true);
        setLoading(false);
      }
    });

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

  useEffect(() => {
    if (!user || user.isAnonymous) return;

    setLoading(true);

    // 1. Listen to Private User Profile
    const profileRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile');
    const unsubProfile = onSnapshot(profileRef, (docSnap) => {
      if (docSnap.exists()) {
        const data = docSnap.data();
        
        // Handle Level Up Notification
        if (userData && data.levelIndex > userData.levelIndex) {
          setShowLevelUp(true);
          setTimeout(() => setShowLevelUp(false), 4000);
        }
        
        setUserData(data);
      } else {
        // Create initial profile
        const newProfile = {
          uid: user.uid,
          name: user.displayName || 'Guerreiro(a)',
          xp: 0,
          streak: 1,
          levelIndex: 0,
          lifeScore: 50,
          createdAt: serverTimestamp()
        };
        setDoc(profileRef, newProfile);
        
        // Also add user to Public Leaderboard
        const publicUserRef = doc(db, 'artifacts', appId, 'public', 'data', 'users', user.uid);
        setDoc(publicUserRef, {
          uid: user.uid,
          name: newProfile.name,
          xp: newProfile.xp,
          levelIndex: newProfile.levelIndex,
          streak: newProfile.streak
        });
      }
      setLoading(false);
    }, (err) => console.error(err));

    // 2. Listen to Private Habits
    const habitsRef = collection(db, 'artifacts', appId, 'users', user.uid, 'habits');
    const unsubHabits = onSnapshot(habitsRef, (snapshot) => {
      if (snapshot.empty && habits.length === 0) {
        // Initialize habits
        INITIAL_HABITS.forEach(h => {
          setDoc(doc(habitsRef, h.id), h);
        });
      } else {
        const loadedHabits = [];
        snapshot.forEach(d => loadedHabits.push({ id: d.id, ...d.data() }));
        // Reset habits daily (simple client-side check for demo)
        const today = new Date().toDateString();
        const storedDate = localStorage.getItem(`habits_date_${user.uid}`);
        
        if (storedDate !== today) {
          loadedHabits.forEach(h => {
            if (h.done) {
              updateDoc(doc(habitsRef, h.id), { done: false });
              h.done = false;
            }
          });
          localStorage.setItem(`habits_date_${user.uid}`, today);
        }
        
        setHabits(loadedHabits.sort((a,b) => a.id.localeCompare(b.id)));
      }
    }, (err) => console.error(err));

    // 3. Listen to Public Community (Users & Challenges)
    const publicUsersRef = collection(db, 'artifacts', appId, 'public', 'data', 'users');
    const unsubUsers = onSnapshot(publicUsersRef, (snapshot) => {
      const usersList = [];
      snapshot.forEach(d => usersList.push(d.data()));
      // Sort in memory (Rule 2)
      setLeaderboard(usersList.sort((a, b) => b.xp - a.xp));
    });

    const publicChallengesRef = collection(db, 'artifacts', appId, 'public', 'data', 'challenges');
    const unsubChallenges = onSnapshot(publicChallengesRef, (snapshot) => {
      const chalList = [];
      snapshot.forEach(d => chalList.push({ id: d.id, ...d.data() }));
      setChallenges(chalList);
    });

    return () => {
      unsubProfile();
      unsubHabits();
      unsubUsers();
      unsubChallenges();
    };
  }, [user]);

  const updateXP = async (amount) => {
    if (!user || !userData) return;
    
    let newXp = userData.xp + amount;
    let newLifeScore = userData.lifeScore;
    
    // Simplistic Life Score math
    if (amount > 0) newLifeScore = Math.min(100, newLifeScore + 1);
    if (amount < 0) newLifeScore = Math.max(0, newLifeScore - 1);

    // Calculate level
    let newLevelIndex = userData.levelIndex;
    while (LEVELS[newLevelIndex + 1] && newXp >= LEVELS[newLevelIndex + 1].minXp) {
      newLevelIndex++;
    }

    const updates = {
      xp: newXp,
      levelIndex: newLevelIndex,
      lifeScore: newLifeScore
    };

    // Update Private Profile
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'profile'), updates);
    // Update Public Leaderboard Profile
    await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'users', user.uid), {
      xp: newXp,
      levelIndex: newLevelIndex
    });
  };

  const handleAuth = async (e) => {
    e.preventDefault();
    setAuthError('');
    setLoading(true);
    const email = emailRef.current?.value;
    const pass = passRef.current?.value;
    const name = nameRef.current?.value;

    try {
      if (authMode === 'register') {
        const cred = await createUserWithEmailAndPassword(auth, email, pass);
        await updateProfile(cred.user, { displayName: name });
      } else {
        await signInWithEmailAndPassword(auth, email, pass);
      }
    } catch (err) {
      setAuthError(err.message);
      setLoading(false);
    }
  };

  const handleLogout = async () => {
    await signOut(auth);
    // When signed out, the mandatory listener will sign them back in anonymously
    // but our UI catches isAnonymous and shows the auth screen.
  };

  const toggleHabit = async (habit) => {
    if (!user) return;
    const isNowDone = !habit.done;
    
    // Optimistic UI Update
    setHabits(prev => prev.map(h => h.id === habit.id ? { ...h, done: isNowDone } : h));
    
    // Backend Update
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'habits', habit.id), {
      done: isNowDone
    });
    
    // Update XP
    await updateXP(isNowDone ? habit.xp : -habit.xp);
  };

  const completeCheckIn = async () => {
    setShowCheckIn(false);
    localStorage.setItem(`checkin_${user.uid}`, new Date().toDateString());
    await updateXP(50);
    
    // Find check-in habit and mark done
    const checkinHabit = habits.find(h => h.title.includes('Check-in'));
    if (checkinHabit && !checkinHabit.done) {
      await toggleHabit(checkinHabit);
    }
  };

  const analyzeJournal = async () => {
    if (journalText.trim().length < 10 || !user) return;
    
    setIsAnalyzing(true);
    // Simulate AI delay
    setTimeout(async () => {
      const text = journalText.toLowerCase();
      let feedback = {
        sentiment: 'Neutro',
        message: 'Continue firme no seu propósito. Deus está no controle e cada dia é uma página em branco.',
        verse: '"Tudo posso naquele que me fortalece." - Filipenses 4:13'
      };

      if (text.includes('triste') || text.includes('ansioso') || text.includes('medo') || text.includes('difícil')) {
        feedback = {
          sentiment: 'Acolhimento',
          message: 'Percebo que hoje foi desafiador. Não se cobre tanto. A dor faz parte da jornada de restauração. Respire fundo, entregue essa ansiedade a Deus. Você não está sozinho.',
          verse: '"Lançando sobre ele toda a vossa ansiedade, porque ele tem cuidado de vós." - 1 Pedro 5:7'
        };
      } else if (text.includes('grato') || text.includes('feliz') || text.includes('consegui') || text.includes('venci')) {
        feedback = {
          sentiment: 'Motivacional',
          message: 'Que alegria ler isso! Você está construindo uma mentalidade de vencedor. Cada pequena vitória gera dopamina e reforça seu novo eu.',
          verse: '"Este é o dia que o Senhor fez; regozijemo-nos e alegremo-nos nele." - Salmos 118:24'
        };
      }

      setAiFeedback(feedback);
      setIsAnalyzing(false);
      await updateXP(50); 
      
      // Save entry
      await addDoc(collection(db, 'artifacts', appId, 'users', user.uid, 'journal'), {
        text: journalText,
        feedback: feedback,
        createdAt: serverTimestamp()
      });
      setJournalText('');
    }, 1500);
  };

  const handleCreateChallenge = async (e) => {
    e.preventDefault();
    if (!user || !userData) return;
    const title = challengeTitleRef.current.value;
    const reward = parseInt(challengeRewardRef.current.value);
    
    if (!title || !reward) return;

    await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'challenges'), {
      title,
      reward,
      creatorId: user.uid,
      creatorName: userData.name,
      participants: [user.uid],
      createdAt: serverTimestamp()
    });
    
    challengeTitleRef.current.value = '';
    challengeRewardRef.current.value = '';
  };

  const joinChallenge = async (challengeId, currentParticipants) => {
    if (!user) return;
    if (currentParticipants.includes(user.uid)) return; // Already joined

    await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'challenges', challengeId), {
      participants: [...currentParticipants, user.uid]
    });
    
    // Give immediate tiny reward for joining
    await updateXP(10);
  };

  if (loading && !isAuthScreen) {
    return (
      <div className="min-h-screen bg-slate-950 flex flex-col items-center justify-center text-white">
        <Target className="w-12 h-12 text-indigo-500 animate-pulse mb-4" />
        <h1 className="text-2xl font-bold tracking-widest">TRANSFORMA</h1>
        <Loader2 className="w-6 h-6 text-slate-500 animate-spin mt-4" />
      </div>
    );
  }

  if (isAuthScreen) {
    return (
      <div className="min-h-screen bg-slate-950 flex flex-col items-center justify-center p-6 text-white selection:bg-indigo-500/30">
        <div className="w-full max-w-md bg-slate-900 border border-slate-800 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 rounded-full blur-3xl"></div>
          
          <div className="flex flex-col items-center mb-8 relative z-10">
            <div className="w-16 h-16 rounded-2xl bg-indigo-600 flex items-center justify-center transform rotate-12 mb-4 shadow-lg shadow-indigo-500/30">
              <Target className="w-8 h-8 text-white -rotate-12" />
            </div>
            <h1 className="text-3xl font-bold tracking-tight">Transforma</h1>
            <p className="text-slate-400 text-sm mt-2 text-center">Seu mentor, psicólogo e treinador em um só lugar.</p>
          </div>

          <form onSubmit={handleAuth} className="space-y-4 relative z-10">
            {authError && (
              <div className="bg-rose-500/10 border border-rose-500/50 text-rose-400 text-sm p-3 rounded-xl flex items-center gap-2">
                <AlertCircle className="w-4 h-4 flex-shrink-0" />
                <span>{authError}</span>
              </div>
            )}

            {authMode === 'register' && (
              <div>
                <label className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1 block">Nome</label>
                <div className="relative">
                  <User className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
                  <input ref={nameRef} type="text" required placeholder="Como quer ser chamado?" className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 pl-10 pr-4 text-white focus:outline-none focus:border-indigo-500 transition-colors" />
                </div>
              </div>
            )}
            
            <div>
              <label className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1 block">E-mail</label>
              <div className="relative">
                <Mail className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
                <input ref={emailRef} type="email" required placeholder="seu@email.com" className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 pl-10 pr-4 text-white focus:outline-none focus:border-indigo-500 transition-colors" />
              </div>
            </div>

            <div>
              <label className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1 block">Senha</label>
              <div className="relative">
                <Lock className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
                <input ref={passRef} type="password" required placeholder="••••••••" minLength="6" className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 pl-10 pr-4 text-white focus:outline-none focus:border-indigo-500 transition-colors" />
              </div>
            </div>

            <button type="submit" disabled={loading} className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold py-3.5 rounded-xl shadow-lg shadow-indigo-500/25 active:scale-95 transition-all flex items-center justify-center gap-2 mt-6">
              {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : (authMode === 'login' ? 'Entrar na Arena' : 'Começar Minha Jornada')}
            </button>
          </form>

          <div className="mt-6 text-center">
            <button onClick={() => setAuthMode(m => m === 'login' ? 'register' : 'login')} className="text-slate-400 text-sm hover:text-white transition-colors">
              {authMode === 'login' ? 'Não tem conta? Cadastre-se' : 'Já tem conta? Entrar'}
            </button>
          </div>
        </div>
      </div>
    );
  }

  // Ensure userData exists before rendering main app
  if (!userData) return null;

  const currentLevelInfo = LEVELS[userData.levelIndex] || LEVELS[LEVELS.length - 1];
  const nextLevelInfo = LEVELS[userData.levelIndex + 1] || currentLevelInfo;
  const xpProgress = nextLevelInfo.minXp > currentLevelInfo.minXp 
    ? ((userData.xp - currentLevelInfo.minXp) / (nextLevelInfo.minXp - currentLevelInfo.minXp)) * 100 
    : 100;

  const ProgressBar = ({ progress, color = 'bg-indigo-500' }) => (
    <div className="w-full bg-slate-800 rounded-full h-2.5 overflow-hidden">
      <div className={`${color} h-2.5 rounded-full transition-all duration-500 ease-out`} style={{ width: `${progress}%` }}></div>
    </div>
  );

  const ScoreRing = ({ score }) => {
    const radius = 38;
    const circumference = 2 * Math.PI * radius;
    const strokeDashoffset = circumference - (score / 100) * circumference;
    const color = score > 80 ? 'text-emerald-400' : score > 50 ? 'text-indigo-400' : 'text-rose-400';

    return (
      <div className="relative inline-flex items-center justify-center">
        <svg className="w-28 h-28 transform -rotate-90">
          <circle cx="56" cy="56" r={radius} stroke="currentColor" strokeWidth="8" fill="transparent" className="text-slate-800" />
          <circle cx="56" cy="56" r={radius} stroke="currentColor" strokeWidth="8" fill="transparent" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} className={`${color} transition-all duration-1000 ease-out`} strokeLinecap="round" />
        </svg>
        <div className="absolute flex flex-col items-center justify-center">
          <span className="text-3xl font-bold text-white">{score}%</span>
          <span className="text-[10px] uppercase tracking-wider text-slate-400 font-medium mt-0.5">Vida</span>
        </div>
      </div>
    );
  };

  const MorningCheckInModal = () => {
    if (!showCheckIn) return null;
    return (
      <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
        <div className="bg-slate-900 border border-slate-800 rounded-3xl p-6 w-full max-w-sm shadow-2xl animate-in fade-in zoom-in duration-300">
          <div className="text-center mb-6">
            <Sun className="w-12 h-12 text-amber-400 mx-auto mb-3" />
            <h2 className="text-2xl font-bold text-white mb-1">Bom dia, {userData.name}!</h2>
            <p className="text-slate-400 text-sm">Hoje Deus lhe deu mais uma oportunidade. Como você está começando o dia?</p>
          </div>

          <div className="space-y-5">
            <div>
              <label className="text-sm font-medium text-slate-300 mb-2 block">Qualidade do Sono</label>
              <div className="flex justify-between gap-2">
                {['Péssimo', 'Ruim', 'Médio', 'Bom', 'Ótimo'].map((opt) => (
                  <button key={opt} className="flex-1 py-2 bg-slate-800 hover:bg-indigo-600/30 border border-slate-700 rounded-xl text-[10px] font-bold uppercase text-slate-300 transition-colors">
                    {opt}
                  </button>
                ))}
              </div>
            </div>
            
            <div>
              <label className="text-sm font-medium text-slate-300 mb-2 block">Humor / Ansiedade</label>
              <div className="flex justify-between gap-3 px-2">
                <button className="text-3xl hover:scale-110 transition-transform">😫</button>
                <button className="text-3xl hover:scale-110 transition-transform">😔</button>
                <button className="text-3xl hover:scale-110 transition-transform">😐</button>
                <button className="text-3xl hover:scale-110 transition-transform">🙂</button>
                <button className="text-3xl hover:scale-110 transition-transform">🤩</button>
              </div>
            </div>

            <div>
              <label className="text-sm font-medium text-slate-300 mb-2 block">Fé e Esperança hoje</label>
              <input type="range" min="1" max="10" defaultValue="7" className="w-full accent-indigo-500 h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer" />
              <div className="flex justify-between text-xs text-slate-500 mt-1">
                <span>Fraca</span>
                <span>Inabalável</span>
              </div>
            </div>

            <button onClick={completeCheckIn} className="w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-bold py-3.5 rounded-xl mt-4 shadow-lg shadow-indigo-500/20 active:scale-95 transition-all">
              Iniciar meu Dia (+50 XP)
            </button>
          </div>
        </div>
      </div>
    );
  };

  const renderDashboard = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500 pb-24">
      {/* Header Info */}
      <div className="flex justify-between items-start">
        <div>
          <h1 className="text-2xl font-bold text-white mb-1">Olá, {userData.name.split(' ')[0]} 👋</h1>
          <p className="text-slate-400 text-sm">Pronto para evoluir hoje?</p>
        </div>
        <div className="flex items-center gap-2 bg-slate-800/80 px-3 py-1.5 rounded-full border border-slate-700 shadow-inner">
          <Flame className="w-4 h-4 text-orange-500" />
          <span className="text-white font-bold text-sm">{userData.streak} dias</span>
        </div>
      </div>

      {/* Main Score Card */}
      <div className="bg-gradient-to-br from-slate-900 to-slate-800 rounded-3xl p-6 border border-slate-700/50 shadow-xl relative overflow-hidden group cursor-pointer hover:border-indigo-500/30 transition-colors">
        <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 rounded-full blur-3xl group-hover:bg-indigo-500/20 transition-colors"></div>
        <div className="flex items-center justify-between relative z-10">
          <div>
            <h2 className="text-lg font-semibold text-white mb-1">Score Geral da Vida</h2>
            <p className="text-sm text-slate-400 mb-4 max-w-[150px]">Baseado nos seus hábitos e saúde emocional.</p>
            <div className="flex gap-4">
              <div className="text-center">
                <span className="block text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-1">Nível</span>
                <span className={`text-sm font-bold px-2 py-1 rounded-md ${currentLevelInfo.bg} ${currentLevelInfo.color} border ${currentLevelInfo.border}`}>{currentLevelInfo.name}</span>
              </div>
              <div className="text-center">
                <span className="block text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-1">XP Total</span>
                <span className="text-sm font-bold text-white">{userData.xp.toLocaleString()}</span>
              </div>
            </div>
          </div>
          <ScoreRing score={userData.lifeScore} />
        </div>
      </div>

      {/* Verse of the Day */}
      <div className="bg-slate-900 border border-indigo-500/20 rounded-2xl p-5 shadow-lg relative overflow-hidden">
        <div className="absolute left-0 top-0 bottom-0 w-1 bg-indigo-500"></div>
        <div className="flex gap-3 mb-2">
          <Cross className="w-5 h-5 text-indigo-400" />
          <span className="text-xs font-bold tracking-wider text-indigo-400 uppercase">Versículo do Dia</span>
        </div>
        <p className="text-slate-200 font-medium italic text-[15px] leading-relaxed">
          "Pois Deus não nos deu um espírito de covardia, mas de poder, de amor e de equilíbrio."
        </p>
        <p className="text-slate-500 text-sm mt-2 font-medium">2 Timóteo 1:7</p>
      </div>

      {/* Quick Missions Overview */}
      <div>
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-white font-bold">Missões Prioritárias</h3>
          <button className="text-indigo-400 text-sm font-medium hover:text-indigo-300 transition-colors" onClick={() => setActiveTab('missions')}>Ver todas</button>
        </div>
        <div className="space-y-3">
          {habits.filter(h => !h.done).slice(0, 3).map(habit => {
            const Icon = ICONS_MAP[habit.iconName] || Circle;
            return (
              <div key={habit.id} onClick={() => toggleHabit(habit)} className="bg-slate-900 border border-slate-800 rounded-xl p-4 flex items-center justify-between cursor-pointer hover:border-slate-700 active:scale-[0.98] transition-all">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center border border-slate-700 shadow-sm">
                    <Icon className="w-5 h-5 text-slate-300" />
                  </div>
                  <div>
                    <p className="text-white font-medium text-sm">{habit.title}</p>
                    <span className="text-xs font-bold text-amber-400">+{habit.xp} XP</span>
                  </div>
                </div>
                <Circle className="w-6 h-6 text-slate-600" />
              </div>
            );
          })}
          {habits.filter(h => !h.done).length === 0 && (
             <div className="bg-emerald-900/20 border border-emerald-500/30 rounded-xl p-6 text-center">
               <Trophy className="w-8 h-8 text-emerald-400 mx-auto mb-2" />
               <p className="text-emerald-300 font-medium">Todas missões concluídas hoje!</p>
             </div>
          )}
        </div>
      </div>
    </div>
  );

  const renderMissions = () => {
    const doneCount = habits.filter(h => h.done).length;
    const progress = habits.length > 0 ? (doneCount / habits.length) * 100 : 0;

    return (
      <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500 pb-24">
        <div className="text-center mb-6">
          <h2 className="text-2xl font-bold text-white mb-2">Hábitos Diários</h2>
          <p className="text-slate-400 text-sm">Construa disciplina, ganhe recompensas.</p>
        </div>

        <div className="bg-slate-900 rounded-2xl p-5 border border-slate-800 shadow-lg relative overflow-hidden">
          <div className="absolute top-0 right-0 p-4 opacity-5">
             <Target className="w-24 h-24 text-white" />
          </div>
          <div className="flex justify-between items-end mb-3 relative z-10">
            <div>
              <span className="text-[10px] font-bold tracking-wider text-slate-500 uppercase block mb-1">Progresso Diário</span>
              <span className="text-3xl font-bold text-white">{doneCount}<span className="text-lg text-slate-500">/{habits.length}</span></span>
            </div>
            <div className="text-right">
              <span className="text-sm font-bold text-indigo-400">{Math.round(progress)}% Concluído</span>
            </div>
          </div>
          <ProgressBar progress={progress} />
        </div>

        <div className="space-y-3">
          {habits.map(habit => {
            const Icon = ICONS_MAP[habit.iconName] || Circle;
            return (
              <div 
                key={habit.id} 
                onClick={() => toggleHabit(habit)}
                className={`rounded-2xl p-4 flex items-center justify-between cursor-pointer transition-all duration-300 ${habit.done ? 'bg-indigo-900/20 border border-indigo-500/30 shadow-[0_0_15px_rgba(99,102,241,0.1)]' : 'bg-slate-900 border border-slate-800 hover:border-slate-700'}`}
              >
                <div className="flex items-center gap-4">
                  <div className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors shadow-inner ${habit.done ? 'bg-indigo-500 text-white' : 'bg-slate-800 text-slate-400 border border-slate-700'}`}>
                    <Icon className="w-6 h-6" />
                  </div>
                  <div>
                    <p className={`font-semibold text-sm transition-colors ${habit.done ? 'text-indigo-200 line-through' : 'text-white'}`}>{habit.title}</p>
                    <span className={`text-xs font-bold ${habit.done ? 'text-indigo-400/50' : 'text-amber-400'}`}>
                      {habit.done ? 'Concluído' : `+${habit.xp} XP`}
                    </span>
                  </div>
                </div>
                <div>
                  {habit.done ? (
                    <CheckCircle2 className="w-7 h-7 text-indigo-500 animate-in zoom-in" />
                  ) : (
                    <Circle className="w-7 h-7 text-slate-600" />
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  const renderCommunity = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500 pb-24">
      <div className="text-center mb-6">
        <h2 className="text-2xl font-bold text-white mb-2">Arena</h2>
        <p className="text-slate-400 text-sm">Cresça em comunidade, participe de desafios.</p>
      </div>

      {/* Leaderboard */}
      <div className="bg-slate-900 rounded-3xl border border-slate-800 overflow-hidden shadow-xl">
        <div className="bg-slate-800/50 p-4 border-b border-slate-700 flex items-center gap-2">
          <Trophy className="w-5 h-5 text-yellow-500" />
          <h3 className="text-white font-bold">Ranking Global</h3>
        </div>
        <div className="divide-y divide-slate-800/50">
          {leaderboard.slice(0, 5).map((u, i) => {
            const isMe = u.uid === user.uid;
            const lvl = LEVELS[u.levelIndex] || LEVELS[0];
            return (
              <div key={u.uid} className={`p-4 flex items-center justify-between ${isMe ? 'bg-indigo-900/10' : ''}`}>
                <div className="flex items-center gap-4">
                  <span className={`font-bold text-lg w-6 text-center ${i === 0 ? 'text-yellow-500' : i === 1 ? 'text-slate-300' : i === 2 ? 'text-orange-400' : 'text-slate-500'}`}>#{i + 1}</span>
                  <div>
                    <p className={`font-medium text-sm ${isMe ? 'text-indigo-300' : 'text-white'}`}>{u.name} {isMe && '(Você)'}</p>
                    <span className={`text-[10px] font-bold uppercase tracking-wider ${lvl.color}`}>{lvl.name}</span>
                  </div>
                </div>
                <div className="text-right">
                  <span className="block text-sm font-bold text-white">{u.xp} XP</span>
                  <span className="text-[10px] text-slate-500 font-medium">🔥 {u.streak} dias</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Challenges */}
      <div>
        <div className="flex justify-between items-center mb-4 mt-8">
          <h3 className="text-white font-bold flex items-center gap-2"><Flag className="w-5 h-5 text-rose-500" /> Desafios Ativos</h3>
        </div>
        
        {/* Create Challenge Form */}
        <form onSubmit={handleCreateChallenge} className="bg-slate-900 rounded-2xl p-4 border border-slate-800 shadow-md mb-6 flex flex-col gap-3">
          <p className="text-xs font-bold text-slate-400 uppercase">Criar Novo Desafio</p>
          <div className="flex gap-2">
             <input ref={challengeTitleRef} type="text" placeholder="Ex: 7 Dias de Leitura" required className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500" />
             <input ref={challengeRewardRef} type="number" placeholder="XP" required min="10" max="1000" className="w-24 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500" />
          </div>
          <button type="submit" className="w-full bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold py-2.5 rounded-xl transition-colors">Lançar Desafio</button>
        </form>

        <div className="space-y-3">
          {challenges.map(chal => {
            const isParticipating = chal.participants.includes(user.uid);
            return (
              <div key={chal.id} className="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm">
                <div className="flex justify-between items-start mb-4">
                  <div>
                    <h4 className="text-white font-bold text-sm mb-1">{chal.title}</h4>
                    <p className="text-xs text-slate-400">Criado por {chal.creatorName}</p>
                  </div>
                  <span className="bg-amber-500/10 text-amber-400 border border-amber-500/20 px-2 py-1 rounded-md text-xs font-bold">+{chal.reward} XP</span>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
                    <Users className="w-4 h-4" /> {chal.participants.length} Guerreiros
                  </div>
                  <button 
                    onClick={() => joinChallenge(chal.id, chal.participants)}
                    disabled={isParticipating}
                    className={`px-4 py-1.5 rounded-full text-xs font-bold transition-all ${isParticipating ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30' : 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/20'}`}
                  >
                    {isParticipating ? 'Participando' : 'Entrar na Guerra'}
                  </button>
                </div>
              </div>
            );
          })}
          {challenges.length === 0 && <p className="text-center text-slate-500 text-sm">Nenhum desafio ativo. Crie o primeiro!</p>}
        </div>
      </div>
    </div>
  );

  const renderJournal = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500 flex flex-col h-full pb-24">
      <div className="text-center mb-2">
        <h2 className="text-2xl font-bold text-white mb-2">Santuário</h2>
        <p className="text-slate-400 text-sm">Mentoria guiada por IA. Desabafe e evolua.</p>
      </div>

      <div className="flex-1 flex flex-col gap-4">
        <div className="bg-slate-900 rounded-3xl p-1 flex-1 flex flex-col border border-slate-800 shadow-inner relative focus-within:border-indigo-500/50 transition-colors group">
          <div className="absolute inset-0 bg-gradient-to-b from-indigo-500/5 to-transparent rounded-3xl pointer-events-none opacity-0 group-focus-within:opacity-100 transition-opacity"></div>
          <textarea 
            value={journalText}
            onChange={(e) => setJournalText(e.target.value)}
            placeholder="Como você está hoje? O que te machucou? Pelo que é grato? Onde Deus falou com você?"
            className="w-full h-48 bg-transparent text-slate-200 placeholder-slate-600 p-5 resize-none focus:outline-none text-[15px] leading-relaxed relative z-10"
          />
          <div className="p-3 border-t border-slate-800/50 flex justify-between items-center bg-slate-900 rounded-b-3xl relative z-10">
            <div className="flex gap-2 text-slate-500">
              <button className="p-2 hover:bg-slate-800 rounded-full transition-colors"><Smile className="w-5 h-5" /></button>
              <button className="p-2 hover:bg-slate-800 rounded-full transition-colors"><MessageSquare className="w-5 h-5" /></button>
            </div>
            <button 
              onClick={analyzeJournal}
              disabled={journalText.length < 10 || isAnalyzing}
              className={`px-5 py-2 rounded-full font-bold text-sm flex items-center gap-2 transition-all ${journalText.length >= 10 ? 'bg-indigo-600 text-white hover:bg-indigo-500 shadow-lg shadow-indigo-500/20' : 'bg-slate-800 text-slate-500 cursor-not-allowed'}`}
            >
              {isAnalyzing ? (
                <><Loader2 className="w-4 h-4 animate-spin" /> Analisando...</>
              ) : (
                <><Brain className="w-4 h-4" /> Mentor IA</>
              )}
            </button>
          </div>
        </div>

        {aiFeedback && (
          <div className="bg-gradient-to-br from-indigo-900/40 to-slate-900 border border-indigo-500/30 rounded-3xl p-6 shadow-xl shadow-indigo-500/10 animate-in slide-in-from-bottom-4 fade-in relative overflow-hidden">
             <div className="absolute -right-4 -top-4 w-24 h-24 bg-indigo-500/10 rounded-full blur-2xl"></div>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-xl bg-indigo-500/20 flex items-center justify-center border border-indigo-500/30 shadow-inner">
                <Brain className="w-5 h-5 text-indigo-400" />
              </div>
              <div>
                <span className="text-sm font-bold text-indigo-300 block">Conselheiro IA</span>
                <span className="text-xs text-slate-400 block">Análise de Sentimento: {aiFeedback.sentiment}</span>
              </div>
            </div>
            <p className="text-slate-200 text-sm leading-relaxed mb-5 relative z-10">
              {aiFeedback.message}
            </p>
            <div className="bg-slate-950/80 rounded-2xl p-4 border border-slate-800/80 shadow-inner relative z-10">
              <p className="text-emerald-400 italic font-medium text-sm text-center leading-relaxed">
                {aiFeedback.verse}
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );

  const renderProfile = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500 pb-24">
      {/* Profile Header */}
      <div className="flex flex-col items-center pt-4">
        <div className="w-24 h-24 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-500 p-1 mb-4 shadow-xl shadow-indigo-500/20 relative">
          <div className="w-full h-full bg-slate-900 rounded-full flex items-center justify-center overflow-hidden border-2 border-slate-900">
            <User className="w-10 h-10 text-slate-400" />
          </div>
        </div>
        <h2 className="text-2xl font-bold text-white mb-1">{userData.name}</h2>
        <span className={`text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-md border mt-2 shadow-sm ${currentLevelInfo.bg} ${currentLevelInfo.color} ${currentLevelInfo.border}`}>
          Nível {currentLevelInfo.name}
        </span>
      </div>

      {/* XP Bar */}
      <div className="bg-slate-900 rounded-3xl p-5 border border-slate-800 shadow-md">
        <div className="flex justify-between items-center mb-3">
          <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Próximo Nível</span>
          <span className="text-xs font-bold text-white">{userData.xp} / {nextLevelInfo.minXp} XP</span>
        </div>
        <ProgressBar progress={xpProgress} color="bg-gradient-to-r from-indigo-500 to-purple-500" />
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-2 gap-4">
        <div className="bg-slate-900 rounded-3xl p-5 border border-slate-800 text-center shadow-md">
          <div className="w-12 h-12 rounded-full bg-orange-500/10 flex items-center justify-center mx-auto mb-3">
             <Flame className="w-6 h-6 text-orange-500" />
          </div>
          <p className="text-3xl font-black text-white mb-1">{userData.streak}</p>
          <p className="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Dias Focados</p>
        </div>
        <div className="bg-slate-900 rounded-3xl p-5 border border-slate-800 text-center shadow-md">
          <div className="w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center mx-auto mb-3">
             <Award className="w-6 h-6 text-yellow-500" />
          </div>
          <p className="text-3xl font-black text-white mb-1">{Math.floor(userData.xp / 1000)}</p>
          <p className="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Conquistas</p>
        </div>
      </div>

      {/* Settings / Logout */}
      <div className="pt-6">
        <button onClick={handleLogout} className="w-full bg-slate-900 border border-slate-800 hover:bg-slate-800 text-rose-400 text-sm font-bold py-4 rounded-2xl transition-colors flex items-center justify-center gap-2 shadow-sm">
          <LogOut className="w-4 h-4" /> Sair da Conta
        </button>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-indigo-500/30 flex justify-center">
      <div className="w-full max-w-md bg-slate-950 min-h-screen flex flex-col relative overflow-hidden shadow-2xl border-x border-slate-900/50">
        
        <MorningCheckInModal />
        
        {showLevelUp && (
          <div className="fixed top-10 left-1/2 -translate-x-1/2 w-max max-w-[90vw] bg-gradient-to-r from-slate-900 to-slate-800 border border-indigo-500/50 text-white p-4 rounded-2xl shadow-2xl shadow-indigo-500/20 flex items-center gap-4 z-50 animate-in slide-in-from-top-10 fade-in zoom-in duration-500">
            <div className="w-12 h-12 rounded-full bg-indigo-500/20 flex items-center justify-center animate-pulse">
               <Award className="w-6 h-6 text-indigo-400" />
            </div>
            <div>
              <p className="text-[10px] font-bold uppercase tracking-widest text-indigo-400">Evolução Concluída</p>
              <p className="font-bold text-lg">Nível {currentLevelInfo.name} Alcançado!</p>
            </div>
          </div>
        )}

        <header className="px-6 pt-10 pb-4 bg-slate-950/90 backdrop-blur-md sticky top-0 z-30 border-b border-slate-900/80 shadow-sm">
          <div className="flex justify-between items-center">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center transform rotate-12 shadow-lg shadow-indigo-500/20">
                <Target className="w-6 h-6 text-white -rotate-12" />
              </div>
              <span className="text-xl font-black tracking-tight text-white">Transforma</span>
            </div>
            <button onClick={() => setActiveTab('profile')} className="w-10 h-10 rounded-full bg-slate-900 border border-slate-800 flex items-center justify-center relative hover:bg-slate-800 transition-colors">
              <User className="w-5 h-5 text-slate-400" />
            </button>
          </div>
        </header>

        <main className="flex-1 overflow-y-auto px-6 pt-6 scrollbar-hide bg-slate-950">
          {activeTab === 'home' && renderDashboard()}
          {activeTab === 'missions' && renderMissions()}
          {activeTab === 'journal' && renderJournal()}
          {activeTab === 'community' && renderCommunity()}
          {activeTab === 'profile' && renderProfile()}
        </main>

        <nav className="absolute bottom-0 left-0 right-0 bg-slate-950/95 backdrop-blur-xl border-t border-slate-800 pb-safe pt-2 px-4 z-40">
          <div className="flex justify-between items-center pb-4 pt-1 max-w-sm mx-auto">
            {[
              { id: 'home', icon: Home, label: 'Início' },
              { id: 'missions', icon: CheckCircle2, label: 'Hábitos' },
              { id: 'community', icon: Users, label: 'Arena' },
              { id: 'journal', icon: BookOpen, label: 'Santuário' },
            ].map((tab) => {
              const isActive = activeTab === tab.id;
              return (
                <button 
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className="flex flex-col items-center gap-1.5 p-2 w-16 relative"
                >
                  <div className={`relative transition-all duration-300 ${isActive ? 'text-indigo-400 transform -translate-y-1' : 'text-slate-500 hover:text-slate-400'}`}>
                    <tab.icon className="w-6 h-6" />
                    {isActive && (
                      <span className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-1.5 h-1.5 bg-indigo-400 rounded-full shadow-[0_0_10px_rgba(99,102,241,1)]"></span>
                    )}
                  </div>
                  <span className={`text-[9px] font-bold uppercase tracking-wider transition-colors ${isActive ? 'text-indigo-400' : 'text-slate-600'}`}>
                    {tab.label}
                  </span>
                </button>
              );
            })}
          </div>
        </nav>
      </div>
    </div>
  );
}