// --- FIREBASE INITIALIZATION ---
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 : 'tiktok-affiliates-app';

export default function App() {
  const [user, setUser] = useState(null); 
  const [loggedAffiliateId, setLoggedAffiliateId] = useState(null); 
  const isManuallyLoggedOut = useRef(false); 
  
  const [profile, setProfile] = useState(null);
  const [leaderboard, setLeaderboard] = useState([]);
  const [allSubmissions, setAllSubmissions] = useState([]);
  const [userSubmissions, setUserSubmissions] = useState([]);
  const [rewardsData, setRewardsData] = useState({ month: '', items: [] });
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [isAdmin, setIsAdmin] = useState(false);
  const [showAdminModal, setShowAdminModal] = useState(false);
  const [adminPassword, setAdminPassword] = useState('');
  const [adminError, setAdminError] = useState('');

  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Erro na autenticação:", error);
      }
    };
    
    initAuth();
    
    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
      setUser(currentUser);
      
      if (currentUser && !loggedAffiliateId && !isManuallyLoggedOut.current) {
        try {
          const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'affiliates', currentUser.uid);
          const docSnap = await getDoc(docRef);
          if (docSnap.exists()) {
            setLoggedAffiliateId(currentUser.uid); 
          }
        } catch (e) {
          console.error(e);
        }
      }
      setLoading(false);
    });
    
    return () => unsubscribe();
  }, [loggedAffiliateId]);

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

    let unsubProfile = () => {};
    if (loggedAffiliateId) {
      const profileRef = doc(db, 'artifacts', appId, 'public', 'data', 'affiliates', loggedAffiliateId);
      unsubProfile = onSnapshot(profileRef, (docSnap) => {
        if (docSnap.exists()) {
          setProfile(docSnap.data());
        } else {
          setProfile(null);
        }
      });
    }

    const affiliatesRef = collection(db, 'artifacts', appId, 'public', 'data', 'affiliates');
    const unsubRanking = onSnapshot(affiliatesRef, (snapshot) => {
      const data = snapshot.docs.map(doc => doc.data());
      data.sort((a, b) => b.points - a.points);
      setLeaderboard(data);
    });

    const submissionsRef = collection(db, 'artifacts', appId, 'public', 'data', 'submissions');
    const unsubSubmissions = onSnapshot(submissionsRef, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      data.sort((a, b) => b.timestamp - a.timestamp);
      
      setAllSubmissions(data);
      if (loggedAffiliateId) {
        setUserSubmissions(data.filter(sub => sub.userId === loggedAffiliateId));
      }
    });

    const rewardsRef = doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'rewards');
    const unsubRewards = onSnapshot(rewardsRef, (docSnap) => {
      if (docSnap.exists()) {
        setRewardsData(docSnap.data());
      } else {
        setRewardsData({ month: '', items: [] });
      }
    });

    return () => {
      unsubProfile();
      unsubRanking();
      unsubSubmissions();
      unsubRewards();
    };
  }, [user, loggedAffiliateId]);

  const handleLogin = async (tiktokHandle, password) => {
    const handleClean = tiktokHandle.startsWith('@') ? tiktokHandle : `@${tiktokHandle}`;
    
    const snapshot = await getDocs(collection(db, 'artifacts', appId, 'public', 'data', 'affiliates'));
    const affiliates = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
    const foundUser = affiliates.find(a => a.tiktokHandle.toLowerCase() === handleClean.toLowerCase() && a.password === password);
    
    if (foundUser) {
      isManuallyLoggedOut.current = false;
      setLoggedAffiliateId(foundUser.id);
      setActiveTab('dashboard');
      
      updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'affiliates', foundUser.id), {
        lastActivity: Date.now()
      }).catch(console.error);
    } else {
      throw new Error('Usuário do TikTok ou senha incorretos.');
    }
  };

  const handleRegister = async (name, tiktokHandle, email, phone, password) => {
    const handleClean = tiktokHandle.startsWith('@') ? tiktokHandle : `@${tiktokHandle}`;
    
    const snapshot = await getDocs(collection(db, 'artifacts', appId, 'public', 'data', 'affiliates'));
    const affiliates = snapshot.docs.map(d => d.data());
    
    if (affiliates.some(a => a.tiktokHandle.toLowerCase() === handleClean.toLowerCase())) {
      throw new Error('Este usuário do TikTok já está cadastrado.');
    }

    const newId = user ? user.uid : crypto.randomUUID(); 
    
    await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'affiliates', newId), {
      id: newId,
      name,
      tiktokHandle: handleClean,
      email,
      phone,
      password,
      points: 0,
      createdAt: Date.now(),
      lastActivity: Date.now()
    });
    
    isManuallyLoggedOut.current = false;
    setLoggedAffiliateId(newId);
    setActiveTab('dashboard');
  };

  const handleLogout = () => {
    isManuallyLoggedOut.current = true;
    setLoggedAffiliateId(null);
    setProfile(null);
    setIsAdmin(false);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center text-slate-800">
        <h1 className="text-3xl font-black text-pink-500 mb-6 animate-pulse">Afiliados Sapekitos</h1>
        <Loader2 className="w-8 h-8 animate-spin text-sky-500" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans selection:bg-pink-200 selection:text-pink-900 pb-20 md:pb-0">
      <header className="bg-white border-b border-slate-200 sticky top-0 z-10 shadow-sm">
        <div className="max-w-4xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <h1 className="font-black text-xl tracking-tight text-slate-700">
              Afiliados <span className="text-pink-500">Sapekitos</span>
            </h1>
          </div>
          <div className="flex items-center gap-3">
            {!loggedAffiliateId && !isAdmin && (
              <button 
                onClick={() => setShowAdminModal(true)}
                className="p-2 rounded-full transition-colors text-slate-300 hover:text-slate-500 hover:bg-slate-100"
                title="Acesso da Equipe de Marketing"
              >
                <ShieldCheck className="w-5 h-5" />
              </button>
            )}
            
            {profile && loggedAffiliateId && (
              <div className="flex items-center gap-3 ml-2 border-l border-slate-200 pl-4">
                <div className="text-right hidden sm:block">
                  <p className="text-sm font-bold text-slate-700">{profile.name}</p>
                  <p className="text-xs text-sky-500 font-bold">{profile.points} pts</p>
                </div>
                <div className="w-10 h-10 rounded-full bg-sky-50 flex items-center justify-center border-2 border-sky-200">
                  <User className="w-5 h-5 text-sky-500" />
                </div>
                <button
                  onClick={handleLogout}
                  className="p-2 ml-1 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors"
                  title="Sair da Conta"
                >
                  <LogOut className="w-5 h-5" />
                </button>
              </div>
            )}

            {isAdmin && !loggedAffiliateId && (
              <button
                onClick={handleLogout}
                className="p-2 ml-1 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors border-l border-slate-200 pl-4"
                title="Sair da Administração"
              >
                <LogOut className="w-5 h-5" />
              </button>
            )}
          </div>
        </div>
      </header>

      <main className="max-w-4xl mx-auto p-4 pt-6">
        {!loggedAffiliateId && !isAdmin ? (
          <AuthScreen onLogin={handleLogin} onRegister={handleRegister} />
        ) : (
          <div className="space-y-6">
            <div className="hidden md:flex bg-white p-1 rounded-xl w-fit border border-slate-200 shadow-sm">
              {loggedAffiliateId && (
                <>
                  <button 
                    onClick={() => setActiveTab('dashboard')}
                    className={`px-6 py-2 rounded-lg font-medium text-sm transition-all ${activeTab === 'dashboard' ? 'bg-sky-50 text-sky-600 shadow-sm border border-sky-100' : 'text-slate-500 hover:text-slate-700'}`}
                  >
                    Meu Painel
                  </button>
                  <button 
                    onClick={() => setActiveTab('ranking')}
                    className={`px-6 py-2 rounded-lg font-medium text-sm transition-all ${activeTab === 'ranking' ? 'bg-sky-50 text-sky-600 shadow-sm border border-sky-100' : 'text-slate-500 hover:text-slate-700'}`}
                  >
                    Ranking Global
                  </button>
                </>
              )}
              {isAdmin && (
                <button 
                  onClick={() => setActiveTab('admin')}
                  className={`px-6 py-2 rounded-lg font-bold text-sm transition-all ${activeTab === 'admin' ? 'bg-indigo-50 text-indigo-600 shadow-sm border border-indigo-100' : 'text-indigo-400 hover:text-indigo-600'}`}
                >
                  Validação de Links (MKT)
                </button>
              )}
            </div>

            {activeTab === 'dashboard' && profile ? (
              <Dashboard profile={profile} loggedAffiliateId={loggedAffiliateId} submissions={userSubmissions} leaderboard={leaderboard} />
            ) : activeTab === 'ranking' && (profile || isAdmin) ? (
              <Leaderboard leaderboard={leaderboard} currentUserId={loggedAffiliateId} rewardsData={rewardsData} />
            ) : isAdmin && activeTab === 'admin' ? (
              <AdminPanel allSubmissions={allSubmissions} leaderboard={leaderboard} rewardsData={rewardsData} />
            ) : null}
          </div>
        )}
      </main>

      {(loggedAffiliateId || isAdmin) && (
        <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 pb-safe shadow-[0_-5px_15px_rgba(0,0,0,0.05)] z-20">
          <div className="flex h-16">
            {loggedAffiliateId && (
              <>
                <button 
                  onClick={() => setActiveTab('dashboard')}
                  className={`flex-1 flex flex-col items-center justify-center gap-1 transition-colors ${activeTab === 'dashboard' ? 'text-sky-500' : 'text-slate-400'}`}
                >
                  <User className="w-5 h-5" />
                  <span className="text-xs font-bold">Painel</span>
                </button>
                <button 
                  onClick={() => setActiveTab('ranking')}
                  className={`flex-1 flex flex-col items-center justify-center gap-1 transition-colors ${activeTab === 'ranking' ? 'text-pink-500' : 'text-slate-400'}`}
                >
                  <Trophy className="w-5 h-5" />
                  <span className="text-xs font-bold">Ranking</span>
                </button>
              </>
            )}
            {isAdmin && (
              <button 
                onClick={() => setActiveTab('admin')}
                className={`flex-1 flex flex-col items-center justify-center gap-1 transition-colors ${activeTab === 'admin' ? 'text-indigo-600' : 'text-slate-400'}`}
              >
                <ShieldCheck className="w-5 h-5" />
                <span className="text-xs font-bold">Validar</span>
              </button>
            )}
          </div>
        </nav>
      )}

      {showAdminModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 backdrop-blur-sm p-4">
          <div className="bg-white rounded-3xl p-6 w-full max-w-sm shadow-2xl animate-in zoom-in-95 duration-200">
            <div className="flex items-center gap-3 mb-4">
              <div className="bg-indigo-100 p-2 rounded-xl">
                <ShieldCheck className="w-6 h-6 text-indigo-600" />
              </div>
              <h3 className="text-xl font-black text-slate-800">Acesso da Equipe</h3>
            </div>
            <p className="text-sm text-slate-500 mb-5 font-medium">Insira a senha do marketing para validar os links.</p>
            
            <input
              type="password"
              value={adminPassword}
              onChange={(e) => { setAdminPassword(e.target.value); setAdminError(''); }}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  if (adminPassword === 'sapekitos') {
                    setIsAdmin(true);
                    setActiveTab('admin');
                    setShowAdminModal(false);
                    setAdminPassword('');
                  } else {
                    setAdminError('Senha incorreta!');
                  }
                }
              }}
              className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 mb-2 text-slate-800 focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all"
              placeholder="Senha do Marketing"
              autoFocus
            />
            
            {adminError && <p className="text-red-500 text-xs font-bold mb-2 ml-1">{adminError}</p>}
            
            <div className="flex gap-3 mt-6">
              <button
                onClick={() => {
                  setShowAdminModal(false);
                  setAdminPassword('');
                  setAdminError('');
                }}
                className="flex-1 py-3 rounded-xl font-bold text-slate-500 bg-slate-100 hover:bg-slate-200 transition-colors"
              >
                Cancelar
              </button>
              <button
                onClick={() => {
                  if (adminPassword === 'sapekitos') {
                    setIsAdmin(true);
                    setActiveTab('admin');
                    setShowAdminModal(false);
                    setAdminPassword('');
                  } else {
                    setAdminError('Senha incorreta!');
                  }
                }}
                className="flex-1 py-3 rounded-xl font-bold text-white bg-indigo-600 hover:bg-indigo-700 shadow-lg shadow-indigo-600/20 transition-all"
              >
                Entrar
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function AuthScreen({ onLogin, onRegister }) {
  const [isLogin, setIsLogin] = useState(true);
  const [tiktokHandle, setTiktokHandle] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);

    const cleanHandle = tiktokHandle.replace('@', '').trim();

    if (!cleanHandle) {
      setError('O usuário do TikTok é obrigatório.');
      setIsLoading(false);
      return;
    }

    if (!isLogin && (!name || !cleanHandle || !email || !phone || !password)) {
      setError('Todos os campos de cadastro são obrigatórios.');
      setIsLoading(false);
      return;
    }

    try {
      if (isLogin) {
        await onLogin(cleanHandle, password);
      } else {
        await onRegister(name, cleanHandle, email, phone, password);
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex items-center justify-center p-2 pt-6">
      <div className="max-w-md w-full bg-white rounded-3xl p-8 border border-slate-100 shadow-xl shadow-slate-200/50 relative overflow-hidden animate-in fade-in duration-500">
        
        <div className="absolute top-0 right-0 w-40 h-40 bg-pink-100 rounded-full blur-3xl -mr-16 -mt-16 opacity-60"></div>
        <div className="absolute bottom-0 left-0 w-40 h-40 bg-sky-100 rounded-full blur-3xl -ml-16 -mb-16 opacity-60"></div>
        <div className="absolute top-1/2 right-0 w-20 h-20 bg-lime-100 rounded-full blur-2xl -mr-10 opacity-50"></div>

        <div className="text-center mb-8 relative z-10">
          <h2 className="text-2xl font-black text-slate-800">
            {isLogin ? 'Bem-vindo(a) de volta!' : 'Crie sua conta'}
          </h2>
          <p className="text-slate-500 text-sm mt-2 font-medium">
            {isLogin ? 'Faça login para gerenciar seus links e ver sua pontuação.' : 'Cadastre-se para participar do nosso ranking de afiliados Sapekitos.'}
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4 relative z-10">
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm font-medium flex items-center gap-2">
              <AlertCircle className="w-5 h-5 shrink-0" />
              {error}
            </div>
          )}

          {!isLogin && (
            <>
              <div>
                <label className="block text-sm font-bold text-slate-700 mb-1.5">Nome Completo</label>
                <input
                  type="text"
                  required
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:ring-2 focus:ring-sky-400 focus:border-transparent outline-none transition-all placeholder:text-slate-400"
                  placeholder="Ex: João da Silva"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-slate-700 mb-1.5">E-mail</label>
                <input
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:ring-2 focus:ring-sky-400 focus:border-transparent outline-none transition-all placeholder:text-slate-400"
                  placeholder="seu@email.com"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-slate-700 mb-1.5">Número de Celular</label>
                <input
                  type="tel"
                  required
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:ring-2 focus:ring-sky-400 focus:border-transparent outline-none transition-all placeholder:text-slate-400"
                  placeholder="(11) 99999-9999"
                />
              </div>
            </>
          )}

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-1.5">Usuário do TikTok</label>
            <div className="relative">
              <span className="absolute left-4 top-1/2 -translate-y-1/2 font-bold text-slate-400">@</span>
              <input
                type="text"
                required
                value={tiktokHandle}
                onChange={(e) => setTiktokHandle(e.target.value.replace('@', ''))}
                className="w-full pl-9 bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:ring-2 focus:ring-sky-400 focus:border-transparent outline-none transition-all placeholder:text-slate-400"
                placeholder="seu_usuario"
              />
            </div>
          </div>
          
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-1.5">Senha</label>
            <input
              type="password"
              required
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:ring-2 focus:ring-pink-400 focus:border-transparent outline-none transition-all placeholder:text-slate-400"
              placeholder="******"
              minLength={6}
            />
          </div>

          <button
            type="submit"
            disabled={isLoading}
            className="w-full bg-[#f06276] hover:bg-[#d95668] text-white font-bold py-3.5 px-4 rounded-xl mt-6 transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-70 disabled:cursor-not-allowed flex justify-center items-center shadow-lg shadow-[#f06276]/30"
          >
            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : (isLogin ? 'Entrar' : 'Concluir Cadastro')}
          </button>
        </form>

        <div className="mt-6 text-center relative z-10 border-t border-slate-100 pt-5">
          <button
            type="button"
            onClick={() => {
              setIsLogin(!isLogin);
              setError('');
            }}
            className="text-sm font-bold text-slate-500 hover:text-sky-500 transition-colors"
          >
            {isLogin ? 'Não tem uma conta? ' : 'Já tem uma conta? '}
            <span className="text-sky-500 underline decoration-2 underline-offset-2">{isLogin ? 'Cadastre-se' : 'Faça Login'}</span>
          </button>
        </div>
      </div>
    </div>
  );
}

function Dashboard({ profile, loggedAffiliateId, submissions, leaderboard }) {
  const [submissionType, setSubmissionType] = useState('video');
  const [url, setUrl] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [successMsg, setSuccessMsg] = useState('');
  const [errorMsg, setErrorMsg] = useState('');

  const userRankIndex = leaderboard.findIndex(affiliate => affiliate.id === loggedAffiliateId);
  const userRank = userRankIndex !== -1 ? `${userRankIndex + 1}º` : '-';

  const handleSubmitAction = async (e) => {
    e.preventDefault();
    if (!url || !url.includes('tiktok.com')) {
      setErrorMsg("Por favor, insira um link válido do TikTok.");
      setTimeout(() => setErrorMsg(''), 5000);
      return;
    }

    setIsSubmitting(true);
    setSuccessMsg('');
    setErrorMsg('');

    try {
      const pointsToAdd = submissionType === 'live' ? 7 : 5;
      
      const subRef = collection(db, 'artifacts', appId, 'public', 'data', 'submissions');
      await addDoc(subRef, {
        userId: loggedAffiliateId,
        userName: profile.name,
        tiktokHandle: profile.tiktokHandle,
        type: submissionType,
        url: url,
        timestamp: Date.now(),
        status: 'pending',
        points: pointsToAdd
      });

      const userRef = doc(db, 'artifacts', appId, 'public', 'data', 'affiliates', loggedAffiliateId);
      updateDoc(userRef, { lastActivity: Date.now() }).catch(console.error);

      setUrl('');
      setSuccessMsg(`Link enviado para análise! Você receberá os ${pointsToAdd} pontos assim que nossa equipe validar.`);
      
      setTimeout(() => setSuccessMsg(''), 6000);
    } catch (error) {
      console.error("Erro ao registar ação:", error);
      setErrorMsg("Houve um erro ao registar. Tente novamente.");
      setTimeout(() => setErrorMsg(''), 5000);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 animate-in fade-in duration-500">
      <div className="md:col-span-2 space-y-6">
        <div className="bg-gradient-to-br from-sky-400 via-sky-500 to-pink-500 rounded-3xl p-6 border border-sky-300 relative overflow-hidden shadow-lg shadow-sky-500/20 text-white">
          <div className="absolute top-0 right-0 p-4 opacity-20">
            <Trophy className="w-40 h-40" />
          </div>
          <h2 className="text-sky-50 font-bold uppercase tracking-wider mb-2 text-sm">Seus Pontos Aprovados</h2>
          <div className="flex items-end gap-3 mb-6 relative z-10">
            <span className="text-7xl font-black leading-none drop-shadow-md">
              {profile.points || 0}
            </span>
            <span className="text-sky-100 font-bold mb-2 text-lg">PTS</span>
          </div>
          
          <div className="border-t border-sky-300/40 pt-5 mt-2 relative z-10 flex gap-4">
            <div>
              <p className="text-xs text-sky-100 mb-1 font-medium">Perfil TikTok</p>
              <p className="text-sm font-bold truncate bg-white/20 px-3 py-1 rounded-lg backdrop-blur-sm">{profile.tiktokHandle}</p>
            </div>
            <div>
              <p className="text-xs text-sky-100 mb-1 font-medium">Ranking Global</p>
              <p className="text-sm font-bold truncate bg-white/20 px-3 py-1 rounded-lg backdrop-blur-sm flex items-center gap-1.5">
                <Trophy className="w-3.5 h-3.5 text-yellow-300" /> {userRank}
              </p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-3xl p-6 md:p-8 border border-slate-200 shadow-md relative overflow-hidden">
          <div className="flex items-center gap-3 mb-6">
            <div className="bg-pink-100 p-2 rounded-xl">
              <Plus className="w-6 h-6 text-pink-500" />
            </div>
            <h3 className="text-xl font-black text-slate-800">Registrar Conteúdo</h3>
          </div>

          {errorMsg && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl mb-6 text-sm font-medium flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
              <div className="bg-red-200/50 p-1.5 rounded-full shrink-0">
                <AlertCircle className="w-5 h-5 text-red-600" />
              </div>
              {errorMsg}
            </div>
          )}

          {successMsg && (
            <div className="bg-sky-50 border border-sky-200 text-sky-700 px-4 py-3 rounded-xl mb-6 text-sm font-medium flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
              <div className="bg-sky-200/50 p-1.5 rounded-full shrink-0">
                <Clock className="w-5 h-5 text-sky-600" />
              </div>
              {successMsg}
            </div>
          )}

          <div className="flex p-1.5 bg-slate-50 border border-slate-100 rounded-xl mb-6">
            <button
              onClick={() => setSubmissionType('video')}
              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-lg font-bold text-sm transition-all ${submissionType === 'video' ? 'bg-white text-sky-600 shadow border border-slate-200' : 'text-slate-500 hover:text-slate-700'}`}
            >
              <Video className="w-4 h-4" /> Vídeo TikTok
            </button>
            <button
              onClick={() => setSubmissionType('live')}
              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-lg font-bold text-sm transition-all ${submissionType === 'live' ? 'bg-white text-pink-600 shadow border border-slate-200' : 'text-slate-500 hover:text-slate-700'}`}
            >
              <Radio className="w-4 h-4" /> Live TikTok
            </button>
          </div>

          <form onSubmit={handleSubmitAction}>
            <div className="mb-5">
              <label className="block text-sm font-bold text-slate-700 mb-2">Link do(a) {submissionType === 'video' ? 'Vídeo' : 'Live'}</label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                  <LinkIcon className="h-5 w-5 text-slate-400" />
                </div>
                <input
                  type="url"
                  required
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  className="block w-full pl-12 bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-slate-800 focus:ring-2 focus:ring-sky-400 focus:border-transparent outline-none transition-all placeholder:text-slate-400"
                  placeholder={`Cole aqui o link do seu ${submissionType === 'video' ? 'vídeo' : 'perfil/live'}...`}
                />
              </div>
            </div>
            
            <button 
              type="submit" 
              disabled={isSubmitting || !url}
              className="w-full bg-[#f06276] hover:bg-[#d95668] text-white font-bold py-3.5 px-4 rounded-xl transition-all transform hover:scale-[1.01] active:scale-[0.99] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex justify-center items-center gap-2 shadow-lg shadow-[#f06276]/30"
            >
              {isSubmitting ? (
                <Loader2 className="w-5 h-5 animate-spin" />
              ) : (
                <>
                  <Plus className="w-5 h-5" /> 
                  Enviar para Análise ({submissionType === 'live' ? '7' : '5'} pts)
                </>
              )}
            </button>
          </form>
          
          <div className="mt-5 flex items-start gap-2 text-xs text-slate-500 font-medium">
            <AlertCircle className="w-4 h-4 shrink-0 text-orange-400 mt-0.5" />
            <p>O link será analisado pela equipe de marketing. Após validado, os pontos serão adicionados ao seu perfil.</p>
          </div>
        </div>
      </div>

      <div className="flex flex-col gap-6">
        <a 
          href="https://chat.whatsapp.com/KS5M4abMEjuL1UqKxQJ15r"
          target="_blank"
          rel="noopener noreferrer"
          className="bg-[#25D366] hover:bg-[#1EBE57] text-white font-black py-4 px-6 rounded-3xl shadow-lg shadow-[#25D366]/30 transition-all transform hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-3"
        >
          <MessageCircle className="w-6 h-6" fill="currentColor" />
          Entrar no Grupo WhatsApp
        </a>

        <div className="bg-white rounded-3xl border border-slate-200 shadow-md flex flex-col h-[500px] md:h-auto overflow-hidden">
          <div className="p-6 border-b border-slate-100 bg-slate-50/50">
            <h3 className="text-lg font-black text-slate-800">Status dos Links</h3>
          </div>
          
          <div className="p-5 flex-1 overflow-y-auto space-y-3">
            {submissions.length === 0 ? (
              <div className="text-center py-12 px-4">
                <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Video className="w-6 h-6 text-slate-400" />
                </div>
                <p className="text-slate-600 font-bold mb-1">Nenhum envio ainda.</p>
                <p className="text-slate-500 text-sm">Registre seus links ao lado para começar!</p>
              </div>
            ) : (
              submissions.map((sub) => {
                let statusConfig = { color: 'text-orange-500', bg: 'bg-orange-100', icon: Clock, text: 'Em Análise' };
                if (sub.status === 'approved') statusConfig = { color: 'text-lime-600', bg: 'bg-lime-100', icon: CheckCircle, text: 'Aprovado' };
                if (sub.status === 'rejected') statusConfig = { color: 'text-red-500', bg: 'bg-red-100', icon: XCircle, text: 'Rejeitado' };
                
                const StatusIcon = statusConfig.icon;

                return (
                  <div key={sub.id} className="bg-white p-3.5 rounded-2xl border border-slate-100 shadow-sm flex flex-col gap-2 hover:border-slate-200 transition-colors">
                    <div className="flex items-center gap-3">
                      <div className={`p-2.5 rounded-xl ${sub.type === 'video' ? 'bg-sky-50 text-sky-500' : 'bg-pink-50 text-pink-500'}`}>
                        {sub.type === 'video' ? <Video className="w-5 h-5" /> : <Radio className="w-5 h-5" />}
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-bold text-slate-700 capitalize">{sub.type}</p>
                        <p className="text-[10px] text-slate-400 truncate mt-0.5" title={sub.url}>{sub.url}</p>
                      </div>
                      <div className="text-right">
                        <span className="font-black text-slate-600 text-sm">
                          {sub.points} <span className="text-[10px] opacity-70">pts</span>
                        </span>
                      </div>
                    </div>
                    <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold w-fit ${statusConfig.bg} ${statusConfig.color}`}>
                      <StatusIcon className="w-3.5 h-3.5" />
                      {statusConfig.text}
                    </div>
                    
                    {sub.status === 'rejected' && sub.rejectionReason && (
                      <div className="mt-1 bg-red-50/50 border border-red-100 rounded-lg p-2.5 text-xs text-red-600">
                        <strong className="block mb-0.5 text-red-700">Motivo da Rejeição:</strong>
                        {sub.rejectionReason}
                      </div>
                    )}
                  </div>
                );
              })
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function AdminPanel({ allSubmissions, leaderboard, rewardsData }) {
  const [processingId, setProcessingId] = useState(null);
  const [rejectingId, setRejectingId] = useState(null);
  const [rejectionReason, setRejectionReason] = useState('');
  
  const [rewardsMonth, setRewardsMonth] = useState(rewardsData?.month || '');
  const [rewardsList, setRewardsList] = useState(rewardsData?.items || []);
  const [newRewardText, setNewRewardText] = useState('');
  const [savingRewards, setSavingRewards] = useState(false);
  const [rewardsSuccess, setRewardsSuccess] = useState(false);

  useEffect(() => {
    setRewardsMonth(rewardsData?.month || '');
    setRewardsList(rewardsData?.items || []);
  }, [rewardsData]);

  const pendingSubs = allSubmissions.filter(s => s.status === 'pending');

  const handleValidation = async (submission, isApproved, reason = null) => {
    setProcessingId(submission.id);
    try {
      const subRef = doc(db, 'artifacts', appId, 'public', 'data', 'submissions', submission.id);
      
      const updateData = {
        status: isApproved ? 'approved' : 'rejected',
        reviewedAt: Date.now()
      };

      if (!isApproved && reason) {
        updateData.rejectionReason = reason;
      }

      await updateDoc(subRef, updateData);

      if (isApproved) {
        const userProfile = leaderboard.find(u => u.id === submission.userId);
        if (userProfile) {
          const userRef = doc(db, 'artifacts', appId, 'public', 'data', 'affiliates', submission.userId);
          await updateDoc(userRef, {
            points: (userProfile.points || 0) + submission.points
          });
        }
      }
    } catch (error) {
      console.error("Erro ao validar:", error);
      alert("Falha ao processar validação.");
    } finally {
      setProcessingId(null);
      if (!isApproved) {
        setRejectingId(null);
        setRejectionReason('');
      }
    }
  };

  const handleAddReward = () => {
    if (newRewardText.trim()) {
      setRewardsList([...rewardsList, { id: Date.now().toString(), text: newRewardText }]);
      setNewRewardText('');
    }
  };

  const handleRemoveReward = (idToRemove) => {
    setRewardsList(rewardsList.filter(r => r.id !== idToRemove));
  };

  const handleSaveRewards = async () => {
    setSavingRewards(true);
    setRewardsSuccess(false);
    try {
      await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'rewards'), {
        month: rewardsMonth,
        items: rewardsList
      });
      setRewardsSuccess(true);
      setTimeout(() => setRewardsSuccess(false), 3000);
    } catch (e) {
      console.error("Erro ao salvar premiações", e);
    } finally {
      setSavingRewards(false);
    }
  };

  return (
    <div className="space-y-6 animate-in fade-in duration-500">
      <div className="bg-indigo-600 rounded-3xl p-6 text-white shadow-lg shadow-indigo-600/20 flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-black mb-1">Painel do Marketing</h2>
          <p className="text-indigo-200 text-sm font-medium">Avalie os links e configure as premiações para os afiliados.</p>
        </div>
        <ShieldCheck className="w-12 h-12 text-indigo-400 opacity-50 hidden sm:block" />
      </div>

      <div className="bg-white rounded-3xl border border-slate-200 shadow-md p-6">
        <h3 className="font-black text-lg text-slate-800 flex items-center gap-2 mb-4">
          <Gift className="w-5 h-5 text-pink-500" />
          Configurar Premiações do Mês
        </h3>
        
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-1.5">Mês de Referência</label>
            <input
              type="text"
              value={rewardsMonth}
              onChange={(e) => setRewardsMonth(e.target.value)}
              placeholder="Ex: Março/2026"
              className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:ring-2 focus:ring-pink-400 outline-none transition-all"
            />
          </div>

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-1.5">Adicionar Prêmio</label>
            <div className="flex gap-2">
              <input
                type="text"
                value={newRewardText}
                onChange={(e) => setNewRewardText(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleAddReward()}
                placeholder="Ex: 1º Lugar - Kit Completo + R$ 500"
                className="flex-1 bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:ring-2 focus:ring-pink-400 outline-none transition-all"
              />
              <button 
                onClick={handleAddReward}
                disabled={!newRewardText.trim()}
                className="bg-sky-500 hover:bg-sky-600 text-white font-bold px-6 rounded-xl disabled:opacity-50 transition-colors"
              >
                Adicionar
              </button>
            </div>
          </div>

          {rewardsList.length > 0 && (
            <div className="bg-slate-50 rounded-xl border border-slate-200 p-4 space-y-2 mt-4">
              <h4 className="text-xs font-bold text-slate-500 uppercase mb-2">Prêmios Atuais</h4>
              {rewardsList.map((reward) => (
                <div key={reward.id} className="flex justify-between items-center bg-white border border-slate-200 p-3 rounded-lg shadow-sm">
                  <span className="text-sm font-bold text-slate-700">{reward.text}</span>
                  <button 
                    onClick={() => handleRemoveReward(reward.id)}
                    className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              ))}
            </div>
          )}

          <div className="flex items-center justify-between pt-4 border-t border-slate-100">
             {rewardsSuccess ? (
                <span className="text-sm font-bold text-lime-600 flex items-center gap-1">
                  <CheckCircle className="w-4 h-4" /> Atualizado com sucesso!
                </span>
             ) : (
                <span className="text-sm text-slate-400">Salve para atualizar o ranking global.</span>
             )}
             
             <button
                onClick={handleSaveRewards}
                disabled={savingRewards}
                className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2.5 px-6 rounded-xl transition-all shadow-md shadow-indigo-600/20 disabled:opacity-50 flex items-center gap-2"
             >
                {savingRewards ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Salvar Premiações'}
             </button>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-3xl border border-slate-200 shadow-md overflow-hidden">
        <div className="px-6 py-5 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
          <h3 className="font-black text-lg text-slate-800 flex items-center gap-2">
            <Clock className="w-5 h-5 text-orange-500" />
            Fila de Análise
          </h3>
          <span className="text-xs font-bold text-orange-600 bg-orange-100 px-3 py-1 rounded-full">{pendingSubs.length} pendentes</span>
        </div>

        <div className="divide-y divide-slate-100">
          {pendingSubs.length === 0 ? (
            <div className="p-10 text-center font-medium text-slate-500">
              Oba! Nenhum link pendente de aprovação no momento.
            </div>
          ) : (
            pendingSubs.map((sub) => (
              <div key={sub.id} className="p-5 hover:bg-slate-50 transition-colors flex flex-col gap-3">
                
                <div className="flex flex-col md:flex-row gap-4 justify-between items-start md:items-center w-full">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="font-bold text-slate-800">{sub.userName}</span>
                      <span className="text-xs text-slate-500 bg-slate-200 px-2 py-0.5 rounded-full">{sub.tiktokHandle}</span>
                    </div>
                    <div className="flex items-center gap-2 mb-2">
                      <span className={`text-[10px] uppercase font-black px-2 py-0.5 rounded flex items-center gap-1 w-fit ${sub.type === 'video' ? 'bg-sky-100 text-sky-600' : 'bg-pink-100 text-pink-600'}`}>
                        {sub.type === 'video' ? <Video className="w-3 h-3" /> : <Radio className="w-3 h-3" />}
                        {sub.type}
                      </span>
                      <span className="text-xs font-bold text-slate-500 flex items-center gap-1">
                        <Award className="w-3.5 h-3.5" /> Vale {sub.points} pts
                      </span>
                    </div>
                    <a href={sub.url} target="_blank" rel="noopener noreferrer" className="text-sm text-sky-500 hover:text-sky-600 hover:underline flex items-center gap-1 truncate w-full break-all">
                      <LinkIcon className="w-3.5 h-3.5 shrink-0" /> {sub.url}
                    </a>
                  </div>

                  <div className="flex gap-2 w-full md:w-auto shrink-0 mt-2 md:mt-0">
                    {rejectingId !== sub.id && (
                      <>
                        <button 
                          onClick={() => { setRejectingId(sub.id); setRejectionReason(''); }}
                          disabled={processingId === sub.id}
                          className="flex-1 md:flex-none px-4 py-2.5 rounded-xl text-sm font-bold text-red-600 bg-red-50 hover:bg-red-100 border border-red-200 transition-colors disabled:opacity-50"
                        >
                          Invalidar
                        </button>
                        <button 
                          onClick={() => handleValidation(sub, true)}
                          disabled={processingId === sub.id}
                          className="flex-1 md:flex-none px-6 py-2.5 rounded-xl text-sm font-bold text-white bg-lime-500 hover:bg-lime-600 shadow-md shadow-lime-500/20 transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:transform-none"
                        >
                          {processingId === sub.id ? <Loader2 className="w-5 h-5 animate-spin mx-auto" /> : 'Validar Link'}
                        </button>
                      </>
                    )}
                  </div>
                </div>

                {rejectingId === sub.id && (
                  <div className="w-full bg-red-50 p-4 rounded-xl border border-red-200 mt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                    <label className="block text-sm font-bold text-red-800 mb-2">Motivo da Rejeição:</label>
                    <textarea
                      value={rejectionReason}
                      onChange={(e) => setRejectionReason(e.target.value)}
                      className="w-full p-3 rounded-lg border border-red-200 focus:ring-2 focus:ring-red-400 outline-none text-sm bg-white text-slate-800 resize-none"
                      rows="2"
                      placeholder="Descreva ao afiliado o motivo pelo qual este link está sendo rejeitado..."
                    />
                    <div className="flex justify-end gap-2 mt-3">
                      <button 
                        onClick={() => { setRejectingId(null); setRejectionReason(''); }} 
                        className="px-4 py-2.5 text-sm font-bold text-slate-600 bg-white hover:bg-slate-100 border border-slate-200 rounded-xl transition-colors"
                      >
                        Cancelar
                      </button>
                      <button 
                        onClick={() => handleValidation(sub, false, rejectionReason)} 
                        disabled={processingId === sub.id || !rejectionReason.trim()} 
                        className="px-4 py-2.5 text-sm font-bold text-white bg-red-500 hover:bg-red-600 rounded-xl disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
                      >
                        {processingId === sub.id ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Confirmar Rejeição'}
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))
          )}
        </div>
      </div>

      <div className="bg-white rounded-3xl border border-slate-200 shadow-md p-6">
        <h3 className="font-black text-lg text-slate-800 flex items-center gap-2 mb-4">
          <Activity className="w-5 h-5 text-sky-500" />
          Atividade Recente dos Afiliados
        </h3>
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm">
            <thead>
              <tr className="border-b border-slate-100 text-slate-500">
                <th className="pb-3 font-bold">Afiliado</th>
                <th className="pb-3 font-bold text-center">Última Atividade</th>
                <th className="pb-3 font-bold text-right">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {leaderboard.map(affiliate => {
                const timestamp = affiliate.lastActivity || affiliate.createdAt;
                const daysAgo = timestamp ? Math.floor((Date.now() - timestamp) / (1000 * 60 * 60 * 24)) : null;
                
                let statusConfig = { color: 'text-slate-600 bg-slate-100 border-slate-200', text: 'Sem dados' };
                
                if (daysAgo !== null) {
                  if (daysAgo <= 15) {
                    statusConfig = { color: 'text-lime-700 bg-lime-100 border-lime-200', text: daysAgo === 0 ? 'Hoje' : `Há ${daysAgo} dia${daysAgo > 1 ? 's' : ''}` };
                  } else if (daysAgo <= 30) {
                    statusConfig = { color: 'text-amber-700 bg-amber-100 border-amber-200', text: `Há ${daysAgo} dias` };
                  } else {
                    statusConfig = { color: 'text-red-700 bg-red-100 border-red-200', text: `Há ${daysAgo} dias` };
                  }
                }

                const lastDateFormatted = timestamp ? new Date(timestamp).toLocaleDateString('pt-BR') : '-';

                return (
                  <tr key={affiliate.id} className="hover:bg-slate-50 transition-colors">
                    <td className="py-3">
                      <p className="font-bold text-slate-800">{affiliate.name}</p>
                      <p className="text-xs text-slate-500">{affiliate.tiktokHandle}</p>
                    </td>
                    <td className="py-3 text-center text-slate-600 font-medium">
                      {lastDateFormatted}
                    </td>
                    <td className="py-3 text-right">
                      <span className={`inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-black border ${statusConfig.color}`}>
                        {statusConfig.text}
                      </span>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function Leaderboard({ leaderboard, currentUserId, rewardsData }) {
  const top3 = leaderboard.slice(0, 3);
  const restOfList = leaderboard.slice(3);

  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
      
      <div className="text-center space-y-3 mb-8 mt-6">
        <h2 className="text-3xl md:text-4xl font-black text-slate-800">
          Ranking <span className="text-pink-500">Sapekitos</span>
        </h2>
        <p className="text-slate-500 text-sm max-w-md mx-auto font-medium">Quem produzir mais conteúdo e bater as metas ganhará prêmios exclusivos!</p>
      </div>

      {/* NOVO: EXIBIÇÃO DAS PREMIAÇÕES DO MÊS */}
      {rewardsData && rewardsData.items && rewardsData.items.length > 0 && (
        <div className="bg-gradient-to-r from-pink-500 via-[#f06276] to-sky-500 rounded-3xl p-1 mb-10 shadow-lg animate-in zoom-in-95 duration-500">
          <div className="bg-white rounded-[22px] p-6 md:p-8 h-full w-full">
            <h3 className="text-xl md:text-2xl font-black text-slate-800 flex items-center justify-center gap-2 mb-6 text-center">
              <Gift className="w-6 h-6 md:w-8 md:h-8 text-pink-500" />
              Premiações de {rewardsData.month || 'Mês Atual'}
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
              {rewardsData.items.map((reward) => (
                <div key={reward.id} className="flex items-center gap-3 bg-slate-50 p-4 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                  <div className="bg-sky-100 p-2 rounded-xl shrink-0">
                    <Award className="w-6 h-6 text-sky-500" />
                  </div>
                  <span className="font-bold text-slate-700">{reward.text}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Top 3 Podium */}
      {top3.length > 0 && (
        <div className="flex justify-center items-end gap-3 md:gap-8 mb-14 mt-8 pt-10 px-2">
          
          {/* 2nd Place */}
          {top3[1] && (
            <div className="flex flex-col items-center w-28 md:w-32 animate-in slide-in-from-bottom-8 duration-700 delay-100">
              <div className="relative mb-3">
                <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-white border-4 border-slate-300 flex items-center justify-center shadow-[0_5px_15px_rgba(148,163,184,0.3)] z-10 relative">
                  <span className="font-black text-slate-500 text-lg">2º</span>
                </div>
              </div>
              <div className="text-center mb-3 w-full truncate px-1">
                <p className="text-sm md:text-base font-black text-slate-800 truncate">{top3[1].name.split(' ')[0]}</p>
                <p className="text-xs font-bold text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full inline-block mt-1">{top3[1].points} pts</p>
              </div>
              <div className="w-full h-24 md:h-32 bg-gradient-to-t from-slate-100 to-white rounded-t-2xl border-t-2 border-l border-r border-slate-200 shadow-inner flex justify-center pt-3">
                <div className="w-1.5 h-full bg-slate-200/50 rounded-full"></div>
              </div>
            </div>
          )}

          {top3[0] && (
            <div className="flex flex-col items-center w-32 md:w-40 animate-in slide-in-from-bottom-12 duration-700 z-10">
              <div className="relative mb-3">
                <div className="absolute -top-7 left-1/2 -translate-x-1/2 text-yellow-400 z-20">
                  <Trophy className="w-10 h-10 drop-shadow-[0_5px_10px_rgba(250,204,21,0.4)]" fill="currentColor" />
                </div>
                <div className="w-20 h-20 md:w-24 md:h-24 rounded-full bg-white border-4 border-yellow-400 flex items-center justify-center shadow-[0_5px_20px_rgba(250,204,21,0.4)] z-10 relative mt-2">
                  <span className="font-black text-2xl text-yellow-500">1º</span>
                </div>
              </div>
              <div className="text-center mb-3 w-full truncate px-1">
                <p className="text-base md:text-lg font-black text-slate-800 truncate">{top3[0].name.split(' ')[0]}</p>
                <p className="text-sm font-bold text-yellow-600 bg-yellow-50 border border-yellow-100 px-3 py-0.5 rounded-full inline-block mt-1">{top3[0].points} pts</p>
              </div>
              <div className="w-full h-32 md:h-40 bg-gradient-to-t from-yellow-50 to-white rounded-t-2xl border-t-2 border-l border-r border-yellow-200 shadow-inner flex justify-center pt-3">
                <div className="w-2 h-full bg-yellow-200/50 rounded-full"></div>
              </div>
            </div>
          )}

          {top3[2] && (
            <div className="flex flex-col items-center w-28 md:w-32 animate-in slide-in-from-bottom-4 duration-700 delay-200">
              <div className="relative mb-3">
                <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-white border-4 border-amber-500 flex items-center justify-center shadow-[0_5px_15px_rgba(245,158,11,0.3)] z-10 relative">
                  <span className="font-black text-amber-500 text-lg">3º</span>
                </div>
              </div>
              <div className="text-center mb-3 w-full truncate px-1">
                <p className="text-sm md:text-base font-black text-slate-800 truncate">{top3[2].name.split(' ')[0]}</p>
                <p className="text-xs font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full inline-block mt-1">{top3[2].points} pts</p>
              </div>
              <div className="w-full h-16 md:h-24 bg-gradient-to-t from-amber-50 to-white rounded-t-2xl border-t-2 border-l border-r border-amber-200 shadow-inner flex justify-center pt-3">
                <div className="w-1.5 h-full bg-amber-200/50 rounded-full"></div>
              </div>
            </div>
          )}
        </div>
      )}

      <div className="bg-white rounded-3xl border border-slate-200 shadow-lg overflow-hidden">
        <div className="px-6 py-5 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
          <h3 className="font-black text-lg text-slate-800">Tabela Geral</h3>
          <span className="text-xs font-bold text-slate-400 bg-slate-200 px-3 py-1 rounded-full">{leaderboard.length} ativos</span>
        </div>
        
        <div className="divide-y divide-slate-100">
          {leaderboard.length === 0 ? (
            <div className="p-10 text-center font-medium text-slate-500">
              Nenhum afiliado registrado ainda.
            </div>
          ) : (
            leaderboard.map((affiliate, index) => {
              const isMe = affiliate.id === currentUserId;
              
              let positionColor = "text-slate-400";
              let badgeColor = "bg-slate-50 text-slate-500 border-slate-200";
              
              if (index === 0) { positionColor = "text-yellow-500"; badgeColor = "bg-yellow-100 text-yellow-700 border-yellow-200"; }
              else if (index === 1) { positionColor = "text-slate-400"; badgeColor = "bg-slate-100 text-slate-700 border-slate-200"; }
              else if (index === 2) { positionColor = "text-amber-500"; badgeColor = "bg-amber-100 text-amber-700 border-amber-200"; }

              return (
                <div 
                  key={affiliate.id} 
                  className={`flex items-center p-4 md:p-5 hover:bg-slate-50 transition-colors ${isMe ? 'bg-sky-50/50 border-l-4 border-l-sky-500' : 'border-l-4 border-l-transparent'}`}
                >
                  <div className={`w-8 font-black text-lg text-center ${positionColor}`}>
                    {index + 1}
                  </div>
                  
                  <div className="ml-4 flex-1 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 min-w-0">
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2">
                        <p className={`font-bold truncate ${isMe ? 'text-sky-600' : 'text-slate-700'}`}>
                          {affiliate.name}
                        </p>
                        {isMe && <span className="text-[10px] bg-sky-100 text-sky-600 px-2 py-0.5 rounded-full uppercase font-black tracking-wider border border-sky-200">Você</span>}
                      </div>
                      <p className="text-xs font-medium text-slate-400 truncate">{affiliate.tiktokHandle}</p>
                    </div>
                  </div>

                  <div className="ml-4 text-right">
                    <div className={`px-3 py-1.5 rounded-xl font-black text-sm border ${badgeColor}`}>
                      {affiliate.points} <span className="text-[10px] uppercase opacity-70">pts</span>
                    </div>
                  </div>
                </div>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
}