/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect } from 'react';
import { Navbar } from './components/Navbar';
import { AnalysisView } from './components/AnalysisView';
import { AutoTradingView } from './components/AutoTradingView';
import { SignalHistory } from './components/SignalHistory';
import { DashboardStats } from './components/DashboardStats';
import { PlansView } from './components/PlansView';
import { AdminDashboard } from './components/AdminDashboard';
import { LandingPage } from './components/LandingPage';
import { ProfileView } from './components/ProfileView';
import { NotificationManager } from './components/NotificationManager';
import { MaintenancePage } from './components/MaintenancePage';
import { LiveMarketTicker } from './components/LiveMarketTicker';
import { TrendingUp, ShieldAlert, Ghost, Mail, Lock, UserPlus, LogIn, Loader2, ArrowLeft, User as UserIcon, Eye, EyeOff } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword, updateProfile, signOut, sendEmailVerification, sendPasswordResetEmail, User, setPersistence, browserLocalPersistence, browserSessionPersistence } from 'firebase/auth';
import { doc, setDoc, getDoc, updateDoc, onSnapshot } from 'firebase/firestore';
import { auth, db, handleFirestoreError, OperationType } from './lib/firebase';
import { cn } from './lib/utils';

declare global {
  interface Window {
    OneSignalDeferred: any[];
  }
}

export default function App() {
  const [user, setUser] = useState<User | null>(null);
  const [userData, setUserData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('scan');
  const [maintenanceMode, setMaintenanceMode] = useState(false);
  const [maintenanceMessage, setMaintenanceMessage] = useState('');
  
      // Auth & View State
  const [isSecretAdminRoute, setIsSecretAdminRoute] = useState(() => window.location.pathname === '/fxbros-admin' || window.location.hash === '#/fxbros-admin');
  const [showAuth, setShowAuth] = useState(isSecretAdminRoute);
  const [isLogin, setIsLogin] = useState(true);
  const [showVerification, setShowVerification] = useState(false);
  const [showForgotPassword, setShowForgotPassword] = useState(false);
  const [resetEmailSent, setResetEmailSent] = useState(false);
  const [verificationEmail, setVerificationEmail] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [repeatPassword, setRepeatPassword] = useState('');
  const [authError, setAuthError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [rememberMe, setRememberMe] = useState(true);

  const [unauthView, setUnauthView] = useState<'hero' | 'plans'>('hero');

  useEffect(() => {
    // Listen for settings changes
    const settingsRef = doc(db, 'settings', 'app');
    const unsubSettings = onSnapshot(settingsRef, (docSnap) => {
      if (docSnap.exists()) {
        setMaintenanceMode(docSnap.data().maintenanceMode || false);
        setMaintenanceMessage(docSnap.data().maintenanceMessage || '');
      }
    }, (error) => {
      console.warn("Failed to listen to settings:", error);
    });

    // Initialize OneSignal via window object
    if (import.meta.env.VITE_ONESIGNAL_APP_ID) {
      window.OneSignalDeferred = window.OneSignalDeferred || [];
      window.OneSignalDeferred.push(async function(OneSignal: any) {
        await OneSignal.init({
          appId: import.meta.env.VITE_ONESIGNAL_APP_ID,
          allowLocalhostAsSecureOrigin: true,
        });
        OneSignal.Slidedown.promptPush();
      });
    }

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

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
      if (currentUser && currentUser.emailVerified) {
        try {
          const userRef = doc(db, 'users', currentUser.uid);
          const userSnap = await getDoc(userRef).catch(err => {
            handleFirestoreError(err, OperationType.GET, 'users/' + currentUser.uid);
            throw err;
          });
          
          let data = {
             uid: currentUser.uid,
             email: currentUser.email,
             name: currentUser.displayName || 'User',
             isAdmin: currentUser.email === "fxbrosinvestments00@gmail.com",
             isPremium: false,
             plan: 'basic' as const,
             analysisLimit: 8,
             isApproved: currentUser.email === "fxbrosinvestments00@gmail.com"
          };

          if (userSnap.exists()) {
            data = { ...data, ...userSnap.data() };
            
            // Force admin rights for root email
            if (currentUser.email === "fxbrosinvestments00@gmail.com") {
              data.isAdmin = true;
              data.isApproved = true;
              
              if (userSnap.data().isAdmin !== true || userSnap.data().isApproved !== true) {
                try {
                  await updateDoc(userRef, { isAdmin: true, isApproved: true });
                } catch (e) {
                  console.error("Failed to update root admin privileges:", e);
                }
              }
            }

            if (!data.isApproved && !data.isAdmin) {
              await signOut(auth);
              setAuthError('Sua conta foi criada. Aguarde aprovação manual do administrador.');
              setShowAuth(true);
              setIsLogin(true);
              setUser(null);
              setUserData(null);
              setLoading(false);
              return;
            }
            setUserData(data);
          } else {
            await setDoc(userRef, data).catch(err => {
              handleFirestoreError(err, OperationType.WRITE, 'users/' + currentUser.uid);
              throw err;
            });
            if (!data.isApproved && !data.isAdmin) {
              await signOut(auth);
              setAuthError('Sua conta foi criada. Aguarde aprovação manual do administrador.');
              setShowAuth(true);
              setIsLogin(true);
              setUser(null);
              setUserData(null);
              setLoading(false);
              return;
            }
            setUserData(data);
          }
        } catch (err) {
          console.error("Firestore user initialization error:", err);
          // Set minimal data to allow UI to render, but it might be limited due to rules
          setUserData({ isPremium: false, isAdmin: currentUser.email === "fxbrosinvestments00@gmail.com", isApproved: false });
        }

        setUser(currentUser);
        setUnauthView('hero');
        setShowAuth(false);
      } else {
        setUser(null);
        setUserData(null);
      }
      setLoading(false);
    });

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

  const isAdmin = user?.email === "fxbrosinvestments00@gmail.com" || userData?.isAdmin;

  const handleResetPassword = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setAuthError(null);
    try {
      const targetEmail = email.toLowerCase() === 'admin' ? 'fxbrosinvestments00@gmail.com' : email;
      await sendPasswordResetEmail(auth, targetEmail);
      setResetEmailSent(true);
    } catch (error: any) {
      console.error(error);
      setAuthError('Falha ao enviar e-mail de recuperação.');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleAuth = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setAuthError(null);

    try {
      await setPersistence(auth, rememberMe ? browserLocalPersistence : browserSessionPersistence);
      if (isLogin) {
        const targetEmail = email.toLowerCase() === 'admin' ? 'fxbrosinvestments00@gmail.com' : email;
        const userCredential = await signInWithEmailAndPassword(auth, targetEmail, password);
        if (!userCredential.user.emailVerified) {
          try {
            await sendEmailVerification(userCredential.user);
          } catch (e) {
            console.error("Verification email send error:", e);
          }
          await signOut(auth);
          setVerificationEmail(email);
          setShowVerification(true);
        }
      } else {
        if (password !== repeatPassword) {
          setAuthError('Passwords do not match.');
          setIsSubmitting(false);
          return;
        }
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        await updateProfile(userCredential.user, { displayName: name });
        try {
          await setDoc(doc(db, 'users', userCredential.user.uid), {
             uid: userCredential.user.uid,
             email: userCredential.user.email,
             name: name,
             isAdmin: userCredential.user.email === "fxbrosinvestments00@gmail.com",
             isPremium: false,
             plan: 'basic',
             analysisLimit: 8,
             isApproved: userCredential.user.email === "fxbrosinvestments00@gmail.com"
          });
        } catch (e) {
          console.error("Failed to write new user to DB", e);
        }
        try {
          await sendEmailVerification(userCredential.user);
        } catch (e) {
          console.error("Verification email send error:", e);
        }
        await signOut(auth);
        setVerificationEmail(email);
        setShowVerification(true);
      }
    } catch (error: any) {
      console.error("Auth Error:", error);
      if (isLogin) {
        setAuthError('Email or Password Incorrect');
      } else {
        if (error.code === 'auth/email-already-in-use') {
          setAuthError('User already exists. Sign in?');
          setIsLogin(true);
        } else {
          setAuthError('Failed to register.');
        }
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleLogout = () => {
    signOut(auth);
    setShowAuth(false);
    setUnauthView('hero');
  };

  if (loading) {
    return (
      <div className="h-screen w-full flex flex-col items-center justify-center bg-brand-dark gap-6">
        <img 
          src="https://i.ibb.co/9BwbV3M/FXBROS-WORLD-3.png" 
          alt="Logo" 
          className="w-24 h-24 object-contain animate-pulse"
        />
        <div className="w-10 h-10 border-4 border-brand-red border-t-transparent rounded-full animate-spin"></div>
      </div>
    );
  }

  // Se estiver em manutenção e o usuário não for admin, mostra a página de manutenção
  if (maintenanceMode && !isAdmin) {
    return <MaintenancePage message={maintenanceMessage} />;
  }

  if (!user) {
    if (!showAuth) {
      if (unauthView === 'hero') {
        return <LandingPage onGetStarted={() => setShowAuth(true)} onViewPlans={() => setUnauthView('plans')} />;
      }
      return (
        <div className="min-h-screen">
          <PlansView 
            isUnauthenticated={true} 
            onGetStarted={() => setShowAuth(true)} 
            onBack={() => setUnauthView('hero')} 
          />
        </div>
      );
    }

    return (
      <main className="min-h-screen bg-brand-dark flex flex-col items-center justify-center p-6 selection:bg-brand-red selection:text-white relative overflow-hidden">
        {/* Background Image for Login */}
        <div className="absolute inset-0 z-0 pointer-events-none">
          <img 
            src="https://i.ibb.co/BRvFhtp/Chat-GPT-Image-28-de-abr-de-2026-12-49-43.png" 
            alt="Login Background" 
            className="w-full h-full object-cover opacity-80"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-brand-dark/40 via-brand-dark/20 to-brand-dark" />
        </div>

        <div className="max-w-[400px] w-full space-y-6 relative z-10">
          <button 
            onClick={() => setShowAuth(false)}
            className="flex items-center gap-2 text-zinc-500 hover:text-white text-xs font-bold transition-colors mb-4"
          >
            <ArrowLeft size={16} /> VOLTAR PARA O INÍCIO
          </button>

          <div className="text-center space-y-2">
            <div className="mx-auto w-24 h-24 flex items-center justify-center mb-2">
              <img 
                src="https://i.ibb.co/9BwbV3M/FXBROS-WORLD-3.png" 
                alt="Logo" 
                className="w-full h-full object-contain"
                referrerPolicy="no-referrer"
              />
            </div>
            
            <div className="space-y-0.5">
              <h1 className="text-2xl font-black italic tracking-tighter uppercase leading-none">
                {isSecretAdminRoute ? <>FXBROS <span className="text-brand-red">ADMIN</span></> : <><span className="text-white">QUANT</span><span className="text-brand-red">SCAN</span></>}
              </h1>
              <p className="text-zinc-500 font-medium text-[10px] leading-tight">
                {isSecretAdminRoute ? "Acesso Restrito" : "Acesse a inteligência institucional Pro."}
              </p>
            </div>
          </div>

          <motion.div 
            key={showVerification ? 'verify' : showForgotPassword ? 'forgot' : isLogin ? 'login' : 'register'}
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="glass-card p-5 md:p-6 space-y-5 border-zinc-800/50"
          >
            {showVerification ? (
              <div className="text-center space-y-6">
                <div className="w-20 h-20 bg-brand-red/10 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Mail size={32} className="text-brand-red" />
                </div>
                <p className="text-sm text-zinc-300 leading-relaxed font-medium">
                  We have sent you a verification email to <span className="font-bold text-white">{verificationEmail}</span>. Verify it and log in.
                </p>
                <button 
                  onClick={() => {
                    setShowVerification(false);
                    setIsLogin(true);
                    setEmail('');
                    setPassword('');
                  }}
                  className="w-full bg-brand-red text-white py-3.5 rounded-xl font-black flex items-center justify-center gap-3 hover:bg-brand-red/90 transition-all active:scale-95 text-base red-glow"
                >
                  LOGIN
                </button>
              </div>
            ) : showForgotPassword ? (
              resetEmailSent ? (
                <div className="text-center space-y-6">
                  <div className="w-20 h-20 bg-brand-red/10 rounded-full flex items-center justify-center mx-auto mb-6">
                    <Mail size={32} className="text-brand-red" />
                  </div>
                  <p className="text-sm text-zinc-300 leading-relaxed font-medium">
                    We sent you a password change link to <span className="font-bold text-white">{email}</span>.
                  </p>
                  <button 
                    onClick={() => {
                      setShowForgotPassword(false);
                      setResetEmailSent(false);
                      setIsLogin(true);
                      setAuthError(null);
                    }}
                    className="w-full bg-brand-red text-white py-3.5 rounded-xl font-black flex items-center justify-center gap-3 hover:bg-brand-red/90 transition-all active:scale-95 text-base red-glow"
                  >
                    Sign In
                  </button>
                </div>
              ) : (
                <div className="space-y-4">
                  <div className="text-center space-y-2 mb-6">
                    <h3 className="text-xl font-black italic uppercase text-white tracking-tighter">Recuperar Senha</h3>
                    <p className="text-xs text-zinc-400 font-medium">Digite seu e-mail para receber o link de redefinição.</p>
                  </div>
                  <form onSubmit={handleResetPassword} className="space-y-4">
                    <div className="space-y-1.5">
                      <label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">E-mail</label>
                      <div className="relative">
                        <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-600" size={16} />
                        <input 
                          type="text" 
                          required
                          value={email}
                          onChange={(e) => setEmail(e.target.value)}
                          placeholder="seu@email.com"
                          className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 pl-10 pr-4 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
                          autoCapitalize="none"
                        />
                      </div>
                    </div>
                    {authError && (
                      <p className="text-brand-red text-[10px] font-bold text-center">{authError}</p>
                    )}
                    <button 
                      type="submit"
                      disabled={isSubmitting}
                      className="w-full bg-brand-red text-white py-3.5 rounded-xl font-black flex items-center justify-center gap-3 hover:bg-brand-red/90 transition-all active:scale-95 text-base disabled:opacity-50"
                    >
                      {isSubmitting ? <Loader2 className="animate-spin" size={18} /> : 'Get Reset Link'}
                    </button>
                  </form>
                  <button 
                    onClick={() => {
                      setShowForgotPassword(false);
                      setAuthError(null);
                    }}
                    className="w-full py-3.5 text-zinc-400 hover:text-white text-xs font-black uppercase tracking-widest transition-colors flex items-center justify-center gap-2"
                  >
                    <ArrowLeft size={14} /> Voltar
                  </button>
                </div>
              )
            ) : (
              <>
                {!isSecretAdminRoute && (
                  <div className="flex bg-brand-dark p-1 rounded-lg border border-white/5">
                    <button 
                      onClick={() => { setIsLogin(true); setAuthError(null); }}
                      className={`flex-1 py-1.5 rounded-md font-bold text-[10px] uppercase tracking-tighter transition-all ${isLogin ? 'bg-brand-red text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'}`}
                    >
                      Login
                    </button>
                    <button 
                      onClick={() => { setIsLogin(false); setAuthError(null); }}
                      className={`flex-1 py-1.5 rounded-md font-bold text-[10px] uppercase tracking-tighter transition-all ${!isLogin ? 'bg-brand-red text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'}`}
                    >
                      Cadastro
                    </button>
                  </div>
                )}

                <form onSubmit={handleAuth} className="space-y-4">
                  {!isLogin && (
                    <div className="space-y-1.5">
                      <label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">Nome Completo</label>
                      <div className="relative">
                        <UserIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-600" size={16} />
                        <input 
                          type="text" 
                          required={!isLogin}
                          value={name}
                          onChange={(e) => setName(e.target.value)}
                          placeholder="Seu Nome"
                          className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 pl-10 pr-4 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
                        />
                      </div>
                    </div>
                  )}

                  <div className="space-y-1.5">
                    <label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">E-mail</label>
                    <div className="relative">
                      <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-600" size={16} />
                      <input 
                        type="text" 
                        required
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        placeholder="seu@email.com"
                        className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 pl-10 pr-4 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
                        autoCapitalize="none"
                      />
                    </div>
                  </div>

                  <div className="space-y-1.5">
                    <div className="flex items-center justify-between ml-1">
                      <label className="text-[10px] uppercase font-black tracking-widest text-zinc-500">Senha</label>
                      {isLogin && (
                        <button 
                          type="button" 
                          onClick={() => {
                            setShowForgotPassword(true);
                            setAuthError(null);
                            setResetEmailSent(false);
                          }} 
                          className="text-[10px] uppercase font-black tracking-widest text-zinc-400 hover:text-brand-red transition-colors"
                        >
                          Forgot password?
                        </button>
                      )}
                    </div>
                    <div className="relative">
                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-600" size={16} />
                      <input 
                        type={showPassword ? "text" : "password"} 
                        required
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        placeholder="••••••••"
                        className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 pl-10 pr-10 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
                      />
                      <button 
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-white transition-colors"
                      >
                        {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                      </button>
                    </div>
                  </div>

                  {!isLogin && (
                    <div className="space-y-1.5">
                      <label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">Repetir Senha</label>
                      <div className="relative">
                        <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-600" size={16} />
                        <input 
                          type={showConfirmPassword ? "text" : "password"} 
                          required={!isLogin}
                          value={repeatPassword}
                          onChange={(e) => setRepeatPassword(e.target.value)}
                          placeholder="••••••••"
                          className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 pl-10 pr-10 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
                        />
                        <button 
                          type="button"
                          onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                          className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-white transition-colors"
                        >
                          {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                        </button>
                      </div>
                    </div>
                  )}

                  {isLogin && (
                    <div className="flex items-center gap-2 mt-2 ml-1">
                       <input 
                         type="checkbox" 
                         id="remember"
                         checked={rememberMe}
                         onChange={(e) => setRememberMe(e.target.checked)}
                         className="w-3.5 h-3.5 rounded bg-brand-dark/50 border border-white/10 accent-brand-red cursor-pointer"
                       />
                       <label htmlFor="remember" className="text-[10px] text-zinc-400 font-bold uppercase tracking-widest cursor-pointer hover:text-zinc-300">
                         Mantenha-me logado
                       </label>
                    </div>
                  )}

                  {authError && (
                    <p className="text-brand-red text-[10px] font-bold text-center">{authError}</p>
                  )}

                  <button 
                    type="submit"
                    disabled={isSubmitting}
                    className="w-full bg-brand-red text-white py-3.5 rounded-xl font-black flex items-center justify-center gap-3 hover:bg-brand-red/90 transition-all active:scale-95 text-base disabled:opacity-50"
                  >
                    {isSubmitting ? (
                      <Loader2 className="animate-spin" size={18} />
                    ) : (
                      <>
                        {isLogin ? 'ENTRAR' : 'CADASTRAR'}
                        {isLogin ? <LogIn size={18} /> : <UserPlus size={18} />}
                      </>
                    )}
                  </button>
                  {authError && !isLogin && authError.includes('aprov') && (
                     <p className="text-zinc-400 text-[10px] text-center mt-2">Após o cadastro, aguarde a aprovação manual.</p>
                  )}
                </form>
              </>
            )}
          </motion.div>
          
          <div className="flex items-center justify-center gap-6 pt-4 opacity-25">
            <div className="flex items-center gap-2 text-[8px] uppercase font-black tracking-widest text-zinc-600">
               <ShieldAlert size={10} />
               Secure Auth
            </div>
            <div className="flex items-center gap-2 text-[8px] uppercase font-black tracking-widest text-zinc-600">
               <Ghost size={10} />
               IA Logic
            </div>
          </div>
        </div>
      </main>
    );
  }

  return (
    <div className="min-h-screen bg-brand-dark text-white flex flex-col md:flex-row pb-20 md:pb-0 relative overflow-hidden">
      <NotificationManager />
      {/* Background Image for App */}
      <div className="absolute inset-0 z-0 pointer-events-none">
        <img 
          src="https://i.ibb.co/YFQNMsjX/7eaead9a-0cd4-48d7-8f10-b32d98256e6f.png" 
          alt="App Background" 
          className={cn(
            "w-full h-full object-cover transition-opacity duration-500",
            activeTab === 'history' ? "opacity-85" : "opacity-80"
          )}
        />
        <div className="absolute inset-0 bg-gradient-to-b from-brand-dark/40 via-brand-dark/20 to-brand-dark" />
      </div>

      <Navbar activeTab={activeTab} setActiveTab={setActiveTab} isAdmin={isAdmin} user={user} />
      
      <main className="flex-1 overflow-y-auto overflow-x-hidden relative z-10 flex flex-col">
        <LiveMarketTicker />
        
        {/* Desktop Header */}
        <header className="hidden md:flex items-center justify-between p-8 pb-4 max-w-6xl w-full mx-auto">
          <div className="space-y-1">
            <span className="block text-[11px] font-black uppercase tracking-widest text-zinc-500 mb-1">Olá Humano, Bem-Vindo</span>
            <h2 className="text-2xl font-black italic uppercase tracking-tighter text-white">
              {activeTab === 'scan' && 'Scanner de IA'}
              {activeTab === 'autoTrade' && 'Auto Trading'}
              {activeTab === 'history' && 'Histórico de Sinais'}
              {activeTab === 'stats' && 'Performance & Dados'}
              {activeTab === 'profile' && 'Perfil do Usuário'}
              {activeTab === 'admin' && 'Painel Administrativo'}
            </h2>
            <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500">
               <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
               Servidor Live • Latência 24ms
            </div>
          </div>

          <div className="flex items-center gap-4">
            <button onClick={handleLogout} className="glass-card !p-2 text-zinc-500 hover:text-white transition-all">
              <LogIn size={20} className="rotate-180" />
            </button>
          </div>
        </header>

        <div className="max-w-6xl mx-auto p-4 md:p-8 lg:p-12 md:pt-4">
          <header className="flex justify-between items-center mb-6 md:hidden">
             <div className="flex items-center gap-2">
                <img 
                  src="https://i.ibb.co/9BwbV3M/FXBROS-WORLD-3.png" 
                  alt="Logo" 
                  className="w-12 h-12 object-contain"
                  referrerPolicy="no-referrer"
                />
                <div className="flex flex-col">
                  <span className="text-[10px] text-zinc-500 tracking-widest uppercase font-bold">Olá Humano, Bem-Vindo</span>
                  <div className="font-black italic text-xl tracking-tighter uppercase leading-none"><span className="text-white">QUANT</span><span className="text-brand-red">SCAN</span></div>
                </div>
             </div>
             <button onClick={handleLogout} className="text-zinc-500 hover:text-white p-2">
               <LogIn size={18} className="rotate-180" />
             </button>
          </header>

          <AnimatePresence mode="wait">
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, x: 15 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -15 }}
              transition={{ duration: 0.25, ease: 'easeOut' }}
            >
              {activeTab === 'scan' && <AnalysisView userData={userData} onGoToHistory={() => setActiveTab('history')} />}
              {activeTab === 'autoTrade' && <AutoTradingView userData={userData} onUpdate={setUserData} onNavigate={setActiveTab} isAdmin={isAdmin} />}
              {activeTab === 'history' && <SignalHistory />}
              {activeTab === 'stats' && <DashboardStats />}
              {activeTab === 'profile' && <ProfileView user={user} userData={userData} onUpdate={setUserData} onDeleted={handleLogout} />}
              {activeTab === 'admin' && isAdmin && <AdminDashboard />}
            </motion.div>
          </AnimatePresence>
        </div>
      </main>
    </div>
  );
}