import React, { useState, useEffect, useRef } from 'react';
import { 
  Play, Pause, SkipForward, SkipBack, Heart, Share2, 
  ShoppingBag, Trophy, User, Settings, BarChart3, 
  Users, Radio, Music, Gift, ShieldCheck, MapPin, 
  LogOut, Menu, X, ChevronRight, Upload, Calendar,
  CreditCard, DollarSign, Activity, CheckCircle, 
  Smartphone, Monitor, Globe, Search, Lock, Star,
  Headphones, Crown, Award, Image, Video
} from 'lucide-react';

// --- MOCK DATA & CONFIG ---

const ARTIST_NAME = "LEONE STAR"; 
const THEME_COLOR = "purple"; 

// Mock de Músicas
const RADIO_PLAYLIST = [
  { id: 1, title: "Horizonte Azul", artist: ARTIST_NAME, duration: "3:45", plays: 12500 },
  { id: 2, title: "Sem Olhar pra Trás", artist: ARTIST_NAME, duration: "2:50", plays: 8900 },
  { id: 3, title: "A Noite é Nossa", artist: ARTIST_NAME, duration: "4:10", plays: 15600 },
];

// Mock de Missões Robustas
const MISSIONS = [
  { id: 1, title: "Story com a música nova", points: 100, type: "daily", status: "pending", requiresUpload: true, platform: "Instagram" },
  { id: 2, title: "Seguir no Spotify", points: 50, type: "one-time", status: "completed", requiresUpload: false, platform: "Spotify" },
  { id: 3, title: "Ouvir 'Horizonte' 5x", points: 250, type: "weekly", status: "pending", requiresUpload: false, platform: "App" },
  { id: 4, title: "Comprar Camiseta Tour", points: 1000, type: "monthly", status: "pending", requiresUpload: false, platform: "Store" },
];

// Mock de Produtos da Loja
const PRODUCTS = [
  { id: 1, name: "Camiseta Tour 2026", price: 89.90, image: "shirt", stock: 150, rating: 4.8 },
  { id: 2, name: "Boné Aba Reta LS", price: 59.90, image: "cap", stock: 45, rating: 5.0 },
  { id: 3, name: "Copo Térmico", price: 45.00, image: "cup", stock: 0, rating: 4.5 },
  { id: 4, name: "Ingresso VIP (Meet)", price: 250.00, image: "ticket", stock: 10, rating: 5.0 },
];

// Mock de Ranking
const RANKING_DATA = [
  { id: 1, name: "Mariana Silva", points: 15420, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Mariana", level: "Diamante" },
  { id: 2, name: "João Pedro", points: 12350, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Joao", level: "Ouro" },
  { id: 3, name: "Ana Clara", points: 11200, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Ana", level: "Ouro" },
  { id: 4, name: "Carlos Edu", points: 9800, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Carlos", level: "Prata" },
  { id: 5, name: "Bia Santos", points: 8500, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Bia", level: "Prata" },
];

// --- COMPONENTS ---

// 1. LANDING PAGE REFINED
const LandingPage = ({ onEnter }) => {
  return (
    <div className="min-h-screen bg-black text-white flex flex-col items-center justify-center relative overflow-hidden font-sans">
      {/* Background Video Simulator - Imagem estática simulando frame de vídeo */}
      <div className="absolute inset-0 z-0 opacity-60">
        <div className="w-full h-full bg-cover bg-center" style={{backgroundImage: 'url("https://images.unsplash.com/photo-1501386761578-eac5c94b800a?q=80&w=2070&auto=format&fit=crop")'}}></div>
        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
      </div>

      <div className="z-10 text-center px-4 max-w-4xl animate-fade-in-up flex flex-col items-center">
        <h1 className="text-6xl md:text-9xl font-black tracking-tighter mb-2 text-white drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]">
          {ARTIST_NAME}
        </h1>
        <p className="text-xl md:text-2xl text-purple-300 mb-8 font-medium tracking-widest uppercase">
          A revolução da música começa aqui.
        </p>
        
        {/* Plataformas */}
        <div className="flex gap-6 mb-12 opacity-80 grayscale hover:grayscale-0 transition-all duration-500">
          <div className="flex flex-col items-center gap-1"><Headphones className="w-8 h-8"/> <span className="text-xs">Spotify</span></div>
          <div className="flex flex-col items-center gap-1"><Video className="w-8 h-8"/> <span className="text-xs">YouTube</span></div>
          <div className="flex flex-col items-center gap-1"><Music className="w-8 h-8"/> <span className="text-xs">Apple</span></div>
        </div>
        
        <button 
          onClick={onEnter}
          className="group relative px-12 py-5 bg-gradient-to-r from-purple-700 to-pink-600 hover:from-purple-600 hover:to-pink-500 text-white font-black text-2xl rounded-full transition-all duration-300 transform hover:scale-105 shadow-[0_0_40px_rgba(168,85,247,0.6)] border border-white/20"
        >
          <span className="flex items-center gap-3">
            SOU FÃ <ChevronRight className="w-8 h-8 group-hover:translate-x-2 transition-transform"/>
          </span>
        </button>
      </div>

      <div className="absolute bottom-6 text-gray-500 text-xs tracking-widest">
        PLATAFORMA OFICIAL • PWA 2.0
      </div>
    </div>
  );
};

// 2. SMART REGISTRATION FLOW
const Registration = ({ onComplete }) => {
  const [step, setStep] = useState(1);
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    cpf: '', name: '', birthDate: '', nickname: '', cep: '', address: '', 
    email: '', whatsapp: '', password: '', 
    socials: { instagram: '', tiktok: '', spotify: false, deezer: false }
  });

  const simulateFetch = (field, delay = 800) => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      if (field === 'cpf') setFormData(prev => ({ ...prev, name: "Leone Pataíba", birthDate: "1990-05-20" }));
      if (field === 'cep') setFormData(prev => ({ ...prev, address: "Rua dos Artistas, 123 - Centro, Salvador/BA" }));
    }, delay);
  };

  return (
    <div className="min-h-screen bg-gray-950 text-white flex items-center justify-center p-4" style={{backgroundImage: 'radial-gradient(circle at center, #2e1065 0%, #020617 100%)'}}>
      <div className="w-full max-w-lg bg-gray-900/90 backdrop-blur-xl rounded-2xl shadow-2xl overflow-hidden border border-purple-500/30">
        
        {/* Progress Bar */}
        <div className="bg-gray-800/50 p-6 pb-2">
          <div className="flex justify-between text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
            <span>Identificação</span>
            <span>Localização</span>
            <span>Acesso</span>
          </div>
          <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
            <div className="h-full bg-gradient-to-r from-purple-500 to-pink-500 transition-all duration-500" style={{width: `${(step/3)*100}%`}}></div>
          </div>
        </div>

        <div className="p-6 md:p-8">
          {step === 1 && (
            <div className="space-y-5 animate-fade-in">
              <h2 className="text-2xl font-bold text-white">Vamos começar!</h2>
              <div>
                <label className="text-sm text-purple-300 font-bold ml-1">CPF</label>
                <input 
                  type="text" 
                  value={formData.cpf}
                  onChange={e => setFormData({...formData, cpf: e.target.value})}
                  onBlur={() => formData.cpf.length > 3 && simulateFetch('cpf')}
                  placeholder="000.000.000-00"
                  className="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 text-lg focus:border-purple-500 outline-none transition-colors"
                />
              </div>

              {loading ? (
                <div className="flex items-center gap-2 text-purple-400 text-sm animate-pulse">
                  <Activity className="w-4 h-4 animate-spin"/> Buscando dados na Receita...
                </div>
              ) : formData.name && (
                <div className="bg-purple-900/20 border border-purple-500/30 rounded-xl p-4 space-y-3 animate-fade-in">
                  <div>
                    <span className="text-xs text-gray-400 block">Nome Completo</span>
                    <span className="text-white font-medium">{formData.name}</span>
                  </div>
                  <div>
                    <span className="text-xs text-gray-400 block">Data de Nascimento</span>
                    <span className="text-white font-medium">{formData.birthDate}</span>
                  </div>
                </div>
              )}

              <button 
                onClick={() => setStep(2)} 
                disabled={!formData.name}
                className="w-full bg-white text-black font-bold py-4 rounded-xl hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Continuar
              </button>
            </div>
          )}

          {step === 2 && (
            <div className="space-y-5 animate-fade-in">
              <h2 className="text-2xl font-bold text-white">Onde você está?</h2>
              
              <div>
                <label className="text-sm text-purple-300 font-bold ml-1">Como quer ser chamado?</label>
                <input 
                  type="text" 
                  className="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 outline-none focus:border-purple-500"
                  placeholder="Seu apelido ou nome social"
                  value={formData.nickname}
                  onChange={e => setFormData({...formData, nickname: e.target.value})}
                />
              </div>

              <div>
                <label className="text-sm text-purple-300 font-bold ml-1">CEP</label>
                <input 
                  type="text" 
                  className="w-full bg-gray-800 border border-gray-700 rounded-xl p-4 outline-none focus:border-purple-500"
                  placeholder="00000-000"
                  value={formData.cep}
                  onChange={e => setFormData({...formData, cep: e.target.value})}
                  onBlur={() => formData.cep.length > 3 && simulateFetch('cep')}
                />
              </div>

              {formData.address && (
                <div className="bg-gray-800/50 p-3 rounded-lg border border-gray-700 text-sm text-gray-300 flex items-start gap-2 animate-fade-in">
                  <MapPin className="w-4 h-4 mt-0.5 text-purple-400"/>
                  {formData.address}
                </div>
              )}

              <button onClick={() => setStep(3)} className="w-full bg-white text-black font-bold py-4 rounded-xl hover:bg-gray-200 transition-colors mt-4">
                Próximo Passo
              </button>
            </div>
          )}

          {step === 3 && (
            <div className="space-y-5 animate-fade-in">
              <h2 className="text-2xl font-bold text-white">Acesso & Interesses</h2>
              
              <div className="grid grid-cols-1 gap-3">
                <input type="email" placeholder="E-mail" className="bg-gray-800 border border-gray-700 rounded-xl p-3 outline-none focus:border-purple-500" />
                <input type="tel" placeholder="WhatsApp (com DDD)" className="bg-gray-800 border border-gray-700 rounded-xl p-3 outline-none focus:border-purple-500" />
                <input type="password" placeholder="Senha Forte" className="bg-gray-800 border border-gray-700 rounded-xl p-3 outline-none focus:border-purple-500" />
              </div>

              <div className="pt-2">
                <p className="text-sm text-gray-400 mb-3">Onde você ouve música? (Importante)</p>
                <div className="grid grid-cols-2 gap-3">
                  <button className={`p-3 rounded-xl border flex items-center justify-center gap-2 ${formData.socials.spotify ? 'bg-green-900/30 border-green-500 text-white' : 'border-gray-700 text-gray-500'}`} onClick={() => setFormData({...formData, socials: {...formData.socials, spotify: !formData.socials.spotify}})}>
                    <Headphones className="w-4 h-4"/> Spotify
                  </button>
                  <button className={`p-3 rounded-xl border flex items-center justify-center gap-2 ${formData.socials.deezer ? 'bg-purple-900/30 border-purple-500 text-white' : 'border-gray-700 text-gray-500'}`} onClick={() => setFormData({...formData, socials: {...formData.socials, deezer: !formData.socials.deezer}})}>
                    <Music className="w-4 h-4"/> Deezer
                  </button>
                </div>
              </div>

              <div className="flex items-start gap-3 mt-4">
                <input type="checkbox" className="mt-1 w-4 h-4 accent-purple-600" />
                <p className="text-xs text-gray-500 leading-relaxed">
                  Li e aceito os Termos de Uso e Política de Privacidade. Autorizo o recebimento de novidades via WhatsApp e E-mail.
                </p>
              </div>

              <button 
                onClick={onComplete}
                className="w-full bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500 text-white font-bold py-4 rounded-xl text-lg shadow-[0_0_20px_rgba(34,197,94,0.4)] mt-2"
              >
                FINALIZAR CADASTRO
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// 3. WELCOME EXPERIENCE
const WelcomeVideo = ({ onFinish }) => {
  return (
    <div className="fixed inset-0 z-50 bg-black flex flex-col items-center justify-center p-4 animate-fade-in">
      <div className="w-full max-w-3xl bg-gray-900 rounded-2xl overflow-hidden shadow-2xl border border-purple-500/50">
        <div className="aspect-video bg-gray-800 relative group cursor-pointer">
          {/* Mock Video Placeholder */}
          <img src="https://images.unsplash.com/photo-1516280440614-6697288d5d38?auto=format&fit=crop&q=80&w=1000" className="w-full h-full object-cover opacity-60" />
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
               <Play className="w-8 h-8 text-white fill-white ml-1" />
            </div>
          </div>
          <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black to-transparent">
            <h3 className="text-2xl font-bold text-white">Parabéns por se cadastrar!</h3>
            <p className="text-purple-300">Mensagem exclusiva do {ARTIST_NAME}</p>
          </div>
        </div>
        
        <div className="p-8 text-center bg-gray-900">
          <p className="text-gray-300 mb-8 text-lg">
            "Olá! Fico muito feliz em ter você aqui. Preparei conteúdos exclusivos, missões e prêmios que você só encontra neste app. Vamos juntos nessa jornada!"
          </p>
          <button 
            onClick={onFinish}
            className="w-full md:w-auto px-12 py-4 bg-white text-black font-bold rounded-full hover:bg-purple-50 transition-colors text-lg flex items-center justify-center gap-2 mx-auto"
          >
            ENTRAR NO APP OFICIAL <ChevronRight className="w-5 h-5"/>
          </button>
        </div>
      </div>
    </div>
  );
};

// 4. ARTIST APP (FAN VIEW)
const AppHeader = ({ onViewChange }) => (
  <header className="bg-gray-900/80 backdrop-blur-md sticky top-0 z-30 border-b border-gray-800">
    <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
      <div className="flex items-center gap-3 cursor-pointer" onClick={() => onViewChange('home')}>
        <div className="w-9 h-9 bg-gradient-to-tr from-purple-600 to-pink-600 rounded-full flex items-center justify-center font-bold text-white text-sm border-2 border-gray-800 ring-2 ring-purple-500/30">L</div>
        <div className="hidden md:block">
          <div className="font-bold text-white text-sm leading-tight">{ARTIST_NAME}</div>
          <div className="text-[10px] text-purple-400 font-bold tracking-widest uppercase">Official App</div>
        </div>
      </div>

      <div className="flex items-center gap-4">
        <div className="bg-gray-800/80 px-3 py-1.5 rounded-full border border-gray-700 flex items-center gap-2 cursor-pointer hover:bg-gray-700 transition-colors">
          <div className="bg-yellow-500/20 p-1 rounded-full"><Trophy className="w-3 h-3 text-yellow-400" /></div>
          <div className="flex flex-col items-start leading-none">
            <span className="text-[10px] text-gray-400 uppercase font-bold">Seus Pontos</span>
            <span className="text-sm font-bold text-white">1.250</span>
          </div>
        </div>
        
        <div className="w-9 h-9 bg-gray-700 rounded-full overflow-hidden border border-gray-600 cursor-pointer" onClick={() => onViewChange('admin')}>
           <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="User" />
        </div>
      </div>
    </div>
    
    {/* Bottom Nav for Mobile - Integrated into header for simplicity in this prototype */}
    <nav className="flex justify-around md:justify-center md:gap-8 px-2 py-3 bg-gray-950 md:bg-transparent border-t md:border-t-0 border-gray-800 text-[10px] md:text-sm font-medium text-gray-400 uppercase tracking-wider">
      <button onClick={() => onViewChange('home')} className="flex flex-col md:flex-row items-center gap-1 hover:text-white transition-colors group">
        <Monitor className="w-5 h-5 group-hover:text-purple-400 mb-1 md:mb-0"/> Home
      </button>
      <button onClick={() => onViewChange('missions')} className="flex flex-col md:flex-row items-center gap-1 hover:text-white transition-colors group">
        <TargetIcon className="w-5 h-5 group-hover:text-purple-400 mb-1 md:mb-0"/> Missões
      </button>
      <button onClick={() => onViewChange('store')} className="flex flex-col md:flex-row items-center gap-1 hover:text-white transition-colors group">
        <ShoppingBag className="w-5 h-5 group-hover:text-purple-400 mb-1 md:mb-0"/> Loja
      </button>
      <button onClick={() => onViewChange('ranking')} className="flex flex-col md:flex-row items-center gap-1 hover:text-white transition-colors group">
        <Crown className="w-5 h-5 group-hover:text-purple-400 mb-1 md:mb-0"/> Ranking
      </button>
    </nav>
  </header>
);

const RadioBar = ({ isPlaying, setIsPlaying }) => (
  <div className="fixed bottom-0 left-0 right-0 bg-gray-900/95 backdrop-blur-xl border-t border-purple-500/20 p-2 z-40 shadow-[0_-10px_40px_rgba(0,0,0,0.8)]">
    <div className="max-w-7xl mx-auto flex items-center justify-between px-2">
      <div className="flex items-center gap-3 w-full md:w-auto overflow-hidden">
        <div className="w-12 h-12 bg-gray-800 rounded-lg relative overflow-hidden group">
           <div className={`absolute inset-0 bg-purple-600 mix-blend-overlay ${isPlaying ? 'animate-pulse' : ''}`}></div>
           <Music className="absolute inset-0 m-auto text-white w-5 h-5" />
        </div>
        <div className="flex flex-col overflow-hidden mr-4">
          <span className="text-white text-sm font-bold truncate">Horizonte Azul</span>
          <span className="text-gray-400 text-xs truncate">Leone Star • Ao Vivo</span>
        </div>
      </div>

      <div className="flex items-center gap-4 text-white shrink-0">
        <button className="hidden md:block hover:text-purple-400"><SkipBack className="w-5 h-5"/></button>
        <button 
          onClick={() => setIsPlaying(!isPlaying)}
          className="w-10 h-10 bg-white text-black rounded-full flex items-center justify-center hover:scale-105 transition-transform shadow-lg shadow-purple-500/20"
        >
          {isPlaying ? <Pause className="fill-black w-4 h-4" /> : <Play className="fill-black w-4 h-4 ml-1" />}
        </button>
        <button className="hidden md:block hover:text-purple-400"><SkipForward className="w-5 h-5"/></button>
      </div>

      <div className="hidden md:flex flex-col items-end w-32">
        <div className="flex items-center gap-1 text-red-500 text-xs font-bold animate-pulse">
          <div className="w-2 h-2 bg-red-500 rounded-full"></div> AO VIVO
        </div>
        <span className="text-gray-500 text-xs">12.4k ouvintes</span>
      </div>
    </div>
  </div>
);

// --- VIEWS CONTENT ---
const HomeView = () => (
  <div className="pb-32 animate-fade-in px-4 md:px-0">
    {/* Hero Banners */}
    <div className="mt-6 rounded-2xl overflow-hidden relative h-64 md:h-96 shadow-2xl">
      <img src="https://images.unsplash.com/photo-1493225255756-d9584f8606e9?auto=format&fit=crop&q=80&w=1000" className="w-full h-full object-cover" />
      <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent"></div>
      <div className="absolute bottom-6 left-6 right-6">
        <span className="px-3 py-1 bg-purple-600 text-white text-xs font-bold rounded-full mb-3 inline-block">LANÇAMENTO</span>
        <h2 className="text-3xl md:text-5xl font-bold text-white mb-2 leading-tight">Ecos do Amanhã</h2>
        <div className="flex gap-3 mt-4">
          <button className="bg-white text-black px-6 py-2 rounded-full font-bold text-sm hover:bg-gray-200">Ouvir Álbum</button>
          <button className="bg-gray-800/80 backdrop-blur text-white px-6 py-2 rounded-full font-bold text-sm hover:bg-gray-700">Ver Clipe</button>
        </div>
      </div>
    </div>

    {/* Section: Latest */}
    <div className="max-w-7xl mx-auto mt-8">
      <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2"><Globe className="w-5 h-5 text-purple-500"/> Feed do Artista</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {[1,2,3].map(i => (
          <div key={i} className="bg-gray-800 rounded-xl p-4 border border-gray-700 hover:border-purple-500 transition-colors">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-10 h-10 rounded-full bg-gray-700 overflow-hidden"><img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Leone" /></div>
              <div>
                <div className="text-sm font-bold text-white">Leone Star</div>
                <div className="text-xs text-gray-500">@leonestar • 2h atrás</div>
              </div>
            </div>
            <p className="text-gray-300 text-sm mb-3">Galera, quem aí já garantiu o ingresso pro show de SP? O lote vira amanhã! 🚀 #Tour2026</p>
            <div className="aspect-video bg-gray-700 rounded-lg mb-3 overflow-hidden">
               <img src={`https://picsum.photos/seed/${i+55}/400/200`} className="w-full h-full object-cover"/>
            </div>
            <div className="flex justify-between text-gray-400 text-sm px-2">
               <span className="hover:text-red-500 cursor-pointer flex gap-1"><Heart className="w-4 h-4"/> 2.4k</span>
               <span className="hover:text-blue-500 cursor-pointer flex gap-1"><Share2 className="w-4 h-4"/> Share</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const MissionsView = () => (
  <div className="max-w-4xl mx-auto px-4 py-8 pb-32 animate-fade-in">
    <div className="flex items-center justify-between mb-6">
      <h2 className="text-2xl font-bold text-white">Central de Missões</h2>
      <div className="text-sm text-purple-400 font-bold">Reseta em: 04:23:10</div>
    </div>

    <div className="space-y-4">
      {MISSIONS.map((mission) => (
        <div key={mission.id} className="bg-gray-800 rounded-xl p-5 border border-gray-700 relative overflow-hidden group hover:border-purple-500/50 transition-colors">
          {mission.status === 'completed' && <div className="absolute top-0 right-0 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-bl-xl">COMPLETADA</div>}
          
          <div className="flex items-start gap-4">
            <div className={`p-3 rounded-xl shrink-0 ${mission.status === 'completed' ? 'bg-green-900/20 text-green-500' : 'bg-purple-900/20 text-purple-500'}`}>
               {mission.requiresUpload ? <Image className="w-6 h-6"/> : <Play className="w-6 h-6"/>}
            </div>
            <div className="flex-1">
              <h4 className="text-lg font-bold text-white mb-1">{mission.title}</h4>
              <p className="text-sm text-gray-400 mb-3">Plataforma: {mission.platform} • <span className="text-yellow-400 font-bold">+{mission.points} pts</span></p>
              
              {mission.status !== 'completed' && (
                <div className="flex gap-3">
                  <button className="px-4 py-2 bg-white text-black text-sm font-bold rounded-lg hover:bg-gray-200">
                    Realizar
                  </button>
                  {mission.requiresUpload && (
                    <button className="px-4 py-2 bg-gray-700 text-white text-sm font-bold rounded-lg flex items-center gap-2 hover:bg-gray-600">
                      <Upload className="w-4 h-4"/> Enviar Print
                    </button>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const StoreView = () => (
  <div className="max-w-7xl mx-auto px-4 py-8 pb-32 animate-fade-in">
    <div className="flex justify-between items-center mb-6">
      <h2 className="text-2xl font-bold text-white">Loja Oficial</h2>
      <button className="bg-purple-600 px-4 py-2 rounded-lg text-white font-bold text-sm">Meus Pedidos</button>
    </div>

    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {PRODUCTS.map(product => (
        <div key={product.id} className="bg-gray-800 rounded-xl overflow-hidden group hover:shadow-[0_0_15px_rgba(147,51,234,0.3)] transition-all border border-gray-700">
          <div className="h-40 bg-gray-700 relative flex items-center justify-center">
             <ShoppingBag className="w-12 h-12 text-gray-600" />
             {product.stock === 0 && (
               <div className="absolute inset-0 bg-black/70 flex items-center justify-center font-bold text-white tracking-wider">ESGOTADO</div>
             )}
          </div>
          <div className="p-4">
             <div className="flex justify-between items-start mb-2">
                <h3 className="text-white text-sm font-bold line-clamp-2 h-10">{product.name}</h3>
                <div className="flex items-center text-xs text-yellow-400 gap-1"><Star className="w-3 h-3 fill-yellow-400"/> {product.rating}</div>
             </div>
             <div className="flex items-center justify-between mt-2">
               <span className="text-lg font-bold text-white">R$ {product.price.toFixed(2)}</span>
               <button disabled={product.stock === 0} className="w-8 h-8 bg-white text-black rounded-full flex items-center justify-center hover:bg-purple-400 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                 +
               </button>
             </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const RankingView = () => (
  <div className="max-w-2xl mx-auto px-4 py-8 pb-32 animate-fade-in">
    <div className="bg-gradient-to-r from-yellow-600 to-yellow-800 rounded-2xl p-6 mb-8 text-white shadow-xl relative overflow-hidden">
      <div className="relative z-10">
        <h2 className="text-2xl font-bold mb-1">Liga Diamante</h2>
        <p className="text-yellow-200 text-sm mb-4">Termina em 6 dias</p>
        <div className="flex items-center gap-4">
           <div className="text-4xl font-black">7º</div>
           <div className="text-sm">Sua posição<br/>atual</div>
        </div>
      </div>
      <Trophy className="absolute right-[-20px] bottom-[-20px] w-40 h-40 text-yellow-500/30 rotate-12" />
    </div>

    <div className="space-y-2">
      {RANKING_DATA.map((user, index) => (
        <div key={user.id} className={`flex items-center justify-between p-4 rounded-xl border ${index === 0 ? 'bg-gradient-to-r from-gray-800 to-gray-700 border-yellow-500/50' : 'bg-gray-800 border-gray-700'}`}>
          <div className="flex items-center gap-4">
            <div className={`w-8 h-8 flex items-center justify-center font-bold rounded-lg ${index < 3 ? 'bg-white text-black' : 'text-gray-500'}`}>
              {index + 1}
            </div>
            <img src={user.avatar} className="w-10 h-10 rounded-full bg-gray-600" />
            <div>
              <div className="font-bold text-white text-sm">{user.name}</div>
              <div className="text-xs text-purple-400">{user.level}</div>
            </div>
          </div>
          <div className="font-mono font-bold text-white">{user.points.toLocaleString()} pts</div>
        </div>
      ))}
    </div>
  </div>
);

// 5. MASTER & ADMIN DASHBOARD
const AdminPanel = ({ onExit }) => {
  const [role, setRole] = useState('MASTER'); // MASTER or MANAGER
  const [tab, setTab] = useState('crm');

  return (
    <div className="min-h-screen bg-slate-950 text-white font-sans flex flex-col md:flex-row">
      {/* Sidebar */}
      <div className="w-full md:w-64 bg-slate-900 border-r border-slate-800 flex flex-col shrink-0">
        <div className="p-6 border-b border-slate-800">
           <div className="text-xs text-slate-500 font-bold mb-1 tracking-widest">AMBIENTE</div>
           <select 
             value={role} 
             onChange={(e) => setRole(e.target.value)}
             className="w-full bg-slate-950 border border-slate-700 text-purple-400 font-bold rounded p-2 text-sm outline-none focus:border-purple-500"
           >
             <option value="MASTER">👑 MASTER (Você)</option>
             <option value="MANAGER">🎵 ARTISTA ADMIN</option>
           </select>
        </div>

        <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
          <div className="text-xs text-slate-500 font-bold px-3 mb-2 mt-4">GESTÃO</div>
          <button onClick={() => setTab('dash')} className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium ${tab === 'dash' ? 'bg-purple-900/30 text-purple-300' : 'text-slate-400 hover:text-white hover:bg-slate-800'}`}>
            <BarChart3 className="w-4 h-4"/> Dashboard
          </button>
          <button onClick={() => setTab('crm')} className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium ${tab === 'crm' ? 'bg-purple-900/30 text-purple-300' : 'text-slate-400 hover:text-white hover:bg-slate-800'}`}>
            <Users className="w-4 h-4"/> CRM de Fãs
          </button>
          <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">
            <TargetIcon className="w-4 h-4"/> Missões
          </button>
          
          <div className="text-xs text-slate-500 font-bold px-3 mb-2 mt-6">MONETIZAÇÃO</div>
          <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">
            <ShoppingBag className="w-4 h-4"/> Loja & Estoque
          </button>
          <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">
            <DollarSign className="w-4 h-4"/> Assinaturas
          </button>

          {role === 'MASTER' && (
            <>
              <div className="text-xs text-slate-500 font-bold px-3 mb-2 mt-6">SISTEMA (MASTER)</div>
              <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">
                <ShieldCheck className="w-4 h-4"/> Admins & Roles
              </button>
              <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">
                <Globe className="w-4 h-4"/> Multi-Artistas
              </button>
            </>
          )}
        </nav>

        <div className="p-4 border-t border-slate-800">
          <button onClick={onExit} className="flex items-center gap-2 text-red-400 text-sm hover:text-white transition-colors">
            <LogOut className="w-4 h-4"/> Sair do Painel
          </button>
        </div>
      </div>

      {/* Content Area */}
      <div className="flex-1 overflow-auto bg-slate-950 p-6 md:p-10">
        {tab === 'crm' && (
          <div className="animate-fade-in max-w-6xl mx-auto">
            <div className="flex justify-between items-end mb-8">
              <div>
                <h1 className="text-3xl font-bold text-white mb-2">CRM de Fãs</h1>
                <p className="text-slate-400">Gerenciamento granular da base de dados.</p>
              </div>
              <div className="flex gap-2">
                <button className="bg-slate-800 text-white px-4 py-2 rounded-lg text-sm font-bold border border-slate-700 flex items-center gap-2"><Upload className="w-4 h-4"/> Exportar CSV</button>
                <button className="bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">+ Novo Fã</button>
              </div>
            </div>

            {/* Filters Mock */}
            <div className="flex gap-4 mb-6 overflow-x-auto pb-2">
               <div className="bg-slate-900 border border-slate-700 px-4 py-2 rounded-lg text-sm text-slate-300 whitespace-nowrap flex items-center gap-2"><MapPin className="w-3 h-3"/> Todos Estados</div>
               <div className="bg-slate-900 border border-slate-700 px-4 py-2 rounded-lg text-sm text-slate-300 whitespace-nowrap flex items-center gap-2"><Smartphone className="w-3 h-3"/> Todos Devices</div>
               <div className="bg-slate-900 border border-slate-700 px-4 py-2 rounded-lg text-sm text-slate-300 whitespace-nowrap flex items-center gap-2"><Star className="w-3 h-3"/> Apenas VIPs</div>
            </div>

            <div className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-xl">
              <table className="w-full text-left border-collapse">
                <thead className="bg-slate-950 text-slate-400 text-xs uppercase tracking-wider font-bold">
                  <tr>
                    <th className="p-4 border-b border-slate-800">Usuário</th>
                    <th className="p-4 border-b border-slate-800">Localização</th>
                    <th className="p-4 border-b border-slate-800 hidden md:table-cell">Dispositivo / IP</th>
                    <th className="p-4 border-b border-slate-800 text-right">Engajamento</th>
                    <th className="p-4 border-b border-slate-800 text-center">Ações</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800 text-sm">
                  {[1,2,3,4,5,6].map((i) => (
                    <tr key={i} className="hover:bg-slate-800/50 transition-colors group">
                      <td className="p-4">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center font-bold text-slate-500">
                             <User className="w-5 h-5"/>
                          </div>
                          <div>
                            <div className="font-bold text-white">Fã Exemplo {i}</div>
                            <div className="text-xs text-slate-500">fa{i}@email.com</div>
                          </div>
                        </div>
                      </td>
                      <td className="p-4">
                        <div className="text-slate-300">São Paulo, SP</div>
                        <div className="text-xs text-slate-600">Último: 2h atrás</div>
                      </td>
                      <td className="p-4 hidden md:table-cell">
                        <div className="flex items-center gap-2 text-slate-400">
                          <Smartphone className="w-4 h-4"/> iPhone 14
                        </div>
                        <div className="text-xs text-slate-600 font-mono mt-1">192.168.0.{i}5</div>
                      </td>
                      <td className="p-4 text-right">
                        <div className="font-bold text-yellow-500">12.500 pts</div>
                        <div className="text-xs text-green-500">Alto Risco</div>
                      </td>
                      <td className="p-4 text-center">
                        <button className="text-purple-400 hover:text-white font-bold text-xs border border-purple-500/30 px-3 py-1 rounded hover:bg-purple-600 transition-colors">
                          VER PERFIL
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {tab === 'dash' && (
           <div className="flex flex-col items-center justify-center h-full text-slate-500">
              <BarChart3 className="w-16 h-16 mb-4 opacity-20"/>
              <p>Dashboard Visual Placeholder</p>
              <p className="text-xs">(Mesma estrutura do código anterior, focado no CRM agora)</p>
           </div>
        )}
      </div>
    </div>
  );
};

// 6. MAIN CONTROLLER
// Simula TargetIcon pois lucide-react pode não ter exportado corretamente dependendo da versão
const TargetIcon = (props) => (
  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
);

export default function App() {
  const [currentView, setCurrentView] = useState('landing');
  const [isPlaying, setIsPlaying] = useState(false);
  const [showWelcome, setShowWelcome] = useState(false);

  const startRegistration = () => setCurrentView('register');
  const finishRegistration = () => {
    setCurrentView('home'); 
    setShowWelcome(true);
  };

  // Helper to change view inside the App context
  const handleAppNav = (view) => {
    if(view === 'admin') setCurrentView('admin');
    else setCurrentView(view);
  };

  if (currentView === 'landing') return <LandingPage onEnter={startRegistration} />;
  
  if (currentView === 'register') return <Registration onComplete={finishRegistration} />;

  if (currentView === 'admin') return <AdminPanel onExit={() => setCurrentView('home')} />;

  // App Layout (Authenticated)
  return (
    <div className="min-h-screen bg-gray-900 font-sans text-gray-100 selection:bg-purple-500 selection:text-white pb-16 md:pb-0">
      <AppHeader onViewChange={handleAppNav} />

      <main className="md:pl-0">
        {currentView === 'home' && <HomeView />}
        {currentView === 'missions' && <MissionsView />}
        {currentView === 'store' && <StoreView />}
        {currentView === 'ranking' && <RankingView />}
      </main>

      <RadioBar isPlaying={isPlaying} setIsPlaying={setIsPlaying} />
      
      {showWelcome && <WelcomeVideo onFinish={() => setShowWelcome(false)} />}
    </div>
  );
}