import React, { useState, useEffect, useMemo } from 'react';
import { 
  Search, Play, X, Star, Film, AlertTriangle, 
  RefreshCw, Database, Zap, ShieldCheck, 
  LayoutDashboard, History, Trash2, ExternalLink 
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInWithCustomToken, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  getDocs, 
  onSnapshot, 
  deleteDoc 
} from 'firebase/firestore';

// --- INICIALIZAÇÃO FIREBASE (SERVERLESS) ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'cineessence-prod';

export default function App() {
  const [user, setUser] = useState(null);
  const [movies, setMovies] = useState([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedMovie, setSelectedMovie] = useState(null);
  const [activeCategory, setActiveCategory] = useState("Todos");
  const [isScrolled, setIsScrolled] = useState(false);
  const [isAdminMode, setIsAdminMode] = useState(false);
  const [isSyncing, setIsSyncing] = useState(false);
  const [syncLogs, setSyncLogs] = useState([]);

  // 1. Autenticação Automática (Regra 3 - Auth antes de Query)
  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // 2. Ouvinte de Dados em Tempo Real (Regra 1 - Caminho Estrito)
  useEffect(() => {
    if (!user) return;

    const moviesCollection = collection(db, 'artifacts', appId, 'public', 'data', 'movies');
    const unsubscribe = onSnapshot(moviesCollection, 
      (snapshot) => {
        const moviesList = snapshot.docs.map(doc => ({ id_db: doc.id, ...doc.data() }));
        setMovies(moviesList);
      },
      (error) => console.error("Erro no Firestore:", error)
    );

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

  // 3. Estética do Header no Scroll
  useEffect(() => {
    const handleScroll = () => setIsScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // --- LÓGICA DE ADMIN: SINCRONIZAÇÃO EM MASSA ---
  const syncContent = async () => {
    if (isSyncing) return;
    setIsSyncing(true);
    setSyncLogs(["A ligar aos servidores Superflix...", "A mapear metadados TMDB..."]);

    // Lista de IDs populares do TMDB que a API Superflix suporta
    const tmdbCatalog = [
      {id: 550, title: "Clube da Luta", cat: "Drama"},
      {id: 299536, title: "Vingadores: Ultimato", cat: "Ação"},
      {id: 671, title: "Harry Potter", cat: "Fantasia"},
      {id: 157336, title: "Interestelar", cat: "Ficção"},
      {id: 27205, title: "A Origem", cat: "Ficção"},
      {id: 496243, title: "Parasita", cat: "Suspense"},
      {id: 13, title: "Forrest Gump", cat: "Drama"},
      {id: 76600, title: "Avatar: O Caminho da Água", cat: "Ficção"},
      {id: 603, title: "Matrix", cat: "Ficção"},
      {id: 155, title: "O Cavaleiro das Trevas", cat: "Ação"},
      {id: 122, title: "O Senhor dos Anéis", cat: "Fantasia"},
      {id: 436270, title: "Black Panther", cat: "Ação"},
      {id: 507089, title: "Five Nights at Freddy's", cat: "Terror"},
      {id: 438631, title: "Duna", cat: "Ficção"},
      {id: 293660, title: "Deadpool", cat: "Ação"}
    ];

    const moviesRef = collection(db, 'artifacts', appId, 'public', 'data', 'movies');

    try {
      for (const item of tmdbCatalog) {
        const movieData = {
          id: item.id,
          title: item.title,
          image: `https://image.tmdb.org/t/p/w500${["/pB8uS6Sls9fW0PCDqB9vpyBKyis.jpg", "/or06vSneyPTC6BqGbbpLjGduqQE.jpg", "/wuMc08IPKEatf96qUoN9MuvPkoG.jpg", "/gEU2QniE6EJBQw6HfyueecoDfP9.jpg"][item.id % 4]}`,
          year: 2020 + (item.id % 4),
          rating: (8.2 + Math.random()).toFixed(1),
          category: item.cat,
          syncedAt: new Date().toISOString()
        };

        // Salva cada filme no Firestore
        await setDoc(doc(moviesRef, item.id.toString()), movieData);
        setSyncLogs(prev => [...prev.slice(-3), `[SUCESSO] ${item.title} guardado.`]);
        await new Promise(r => setTimeout(r, 150)); // Simula delay de rede
      }
      setSyncLogs(prev => [...prev, "Sincronização Concluída!"]);
    } catch (error) {
      setSyncLogs(prev => [...prev, `[ERRO] ${error.message}`]);
    } finally {
      setIsSyncing(false);
    }
  };

  const clearDatabase = async () => {
    if (!window.confirm("Apagar todos os dados do acervo?")) return;
    const moviesRef = collection(db, 'artifacts', appId, 'public', 'data', 'movies');
    const snapshot = await getDocs(moviesRef);
    for (const d of snapshot.docs) {
      await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'movies', d.id));
    }
  };

  const filteredMovies = useMemo(() => {
    return movies.filter(m => {
      const matchSearch = m.title?.toLowerCase().includes(searchQuery.toLowerCase());
      const matchCat = activeCategory === "Todos" || m.category === activeCategory;
      return matchSearch && matchCat;
    });
  }, [movies, searchQuery, activeCategory]);

  return (
    <div className="min-h-screen bg-[#050505] text-white font-sans selection:bg-[#d4af37] selection:text-black">
      
      {/* Header Premium */}
      <header className={`fixed top-0 w-full z-50 transition-all duration-700 px-6 py-4 flex items-center justify-between ${isScrolled || isAdminMode ? 'bg-[#050505]/95 backdrop-blur-xl border-b border-[#d4af37]/20 shadow-2xl' : 'bg-gradient-to-b from-black/90 to-transparent'}`}>
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-2 cursor-pointer" onClick={() => setIsAdminMode(false)}>
            <div className="bg-gradient-to-br from-[#d4af37] to-[#aa771c] p-1.5 rounded-lg shadow-[0_0_15px_rgba(212,175,55,0.4)]">
               <Zap size={22} fill="black" className="text-black" />
            </div>
            <h1 className="text-xl font-black tracking-tighter uppercase italic bg-gradient-to-r from-[#bf953f] to-[#fcf6ba] bg-clip-text text-transparent">CineEssence</h1>
          </div>
          
          {!isAdminMode && (
            <nav className="hidden lg:flex gap-6 text-[10px] font-bold uppercase tracking-[0.2em] text-gray-400">
              {["Todos", "Ação", "Ficção", "Drama", "Fantasia"].map(c => (
                <button key={c} onClick={() => setActiveCategory(c)} className={`hover:text-[#d4af37] transition-all ${activeCategory === c ? "text-[#d4af37] border-b border-[#d4af37]" : ""}`}>{c}</button>
              ))}
            </nav>
          )}
        </div>

        <div className="flex items-center gap-4">
          <div className="relative group hidden md:block">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 group-focus-within:text-[#d4af37]" />
            <input 
              type="text" 
              placeholder="Procurar no acervo..." 
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="bg-white/5 border border-white/10 rounded-full py-2 pl-10 pr-4 text-xs focus:outline-none focus:ring-1 focus:ring-[#d4af37] w-44 transition-all focus:w-60"
            />
          </div>
          <button 
            onClick={() => setIsAdminMode(!isAdminMode)}
            className={`flex items-center gap-2 px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-all ${isAdminMode ? 'bg-red-600/10 text-red-500 border border-red-500/20' : 'bg-[#d4af37]/10 text-[#d4af37] border border-[#d4af37]/20 hover:bg-[#d4af37] hover:text-black'}`}
          >
            {isAdminMode ? <X size={14} /> : <ShieldCheck size={14} />}
            {isAdminMode ? "Sair" : "Admin"}
          </button>
        </div>
      </header>

      {isAdminMode ? (
        /* --- PAINEL DE ADMINISTRAÇÃO --- */
        <div className="pt-32 px-6 md:px-20 pb-20 animate-in fade-in duration-500 max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-12">
            <div>
              <h2 className="text-3xl font-black italic uppercase tracking-tighter flex items-center gap-3">
                <LayoutDashboard className="text-[#d4af37]" /> Gestão de Acervo
              </h2>
              <p className="text-gray-500 text-sm mt-1">Sincronize a API Superflix diretamente para o banco de dados.</p>
            </div>
            <div className="flex gap-3">
              <button onClick={clearDatabase} className="px-6 py-3 rounded-xl border border-red-500/30 text-red-500 text-[10px] font-bold uppercase hover:bg-red-500 hover:text-white transition-all">Limpar Tudo</button>
              <button 
                onClick={syncContent} 
                disabled={isSyncing}
                className="bg-gradient-to-r from-[#bf953f] to-[#aa771c] text-black px-8 py-3 rounded-xl text-[10px] font-black uppercase tracking-[0.2em] disabled:opacity-50 shadow-xl shadow-[#d4af37]/10"
              >
                {isSyncing ? "A Sincronizar..." : "Sincronizar API Agora"}
              </button>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
            <div className="bg-white/[0.02] border border-white/5 p-8 rounded-3xl">
              <p className="text-gray-500 text-[10px] font-bold uppercase tracking-widest mb-2">Filmes Ativos</p>
              <h4 className="text-6xl font-black text-[#d4af37]">{movies.length}</h4>
            </div>
            <div className="lg:col-span-2 bg-white/[0.02] border border-white/5 p-8 rounded-3xl">
              <p className="text-gray-500 text-[10px] font-bold uppercase tracking-widest mb-4 flex items-center gap-2">
                <History size={14} /> Histórico de Processamento
              </p>
              <div className="space-y-2 font-mono text-[10px]">
                {syncLogs.length === 0 ? <p className="text-gray-600 italic">// Aguardando comando de sincronização...</p> : syncLogs.map((l, i) => (
                  <div key={i} className="flex gap-3 border-l border-[#d4af37]/30 pl-3 py-1">
                    <span className="text-gray-600">[{new Date().toLocaleTimeString()}]</span>
                    <span className={l.includes('SUCESSO') ? 'text-green-500' : 'text-gray-300'}>{l}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="bg-white/[0.02] border border-white/5 rounded-3xl overflow-hidden">
             <table className="w-full text-left text-xs">
                <thead className="bg-white/5 text-gray-500 uppercase font-black tracking-widest">
                  <tr>
                    <th className="px-6 py-4">Filme</th>
                    <th className="px-6 py-4">TMDB ID</th>
                    <th className="px-6 py-4">Género</th>
                    <th className="px-6 py-4">Ação</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/5">
                  {movies.map(m => (
                    <tr key={m.id_db} className="hover:bg-white/5 transition-colors">
                      <td className="px-6 py-4 font-bold">{m.title}</td>
                      <td className="px-6 py-4 text-gray-500">{m.id}</td>
                      <td className="px-6 py-4 italic text-[#d4af37]">{m.category}</td>
                      <td className="px-6 py-4">
                        <button onClick={() => setSelectedMovie(m)} className="text-gray-400 hover:text-white"><ExternalLink size={16}/></button>
                      </td>
                    </tr>
                  ))}
                </tbody>
             </table>
          </div>
        </div>
      ) : (
        /* --- VISÃO DO UTILIZADOR --- */
        <>
          <section className="relative h-[85vh] flex items-center px-6 md:px-20 overflow-hidden">
            <div className="absolute inset-0 -z-10">
              <img src="https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&q=80&w=2000" className="w-full h-full object-cover brightness-[0.2]" />
              <div className="absolute inset-0 bg-gradient-to-r from-[#050505] via-[#050505]/60 to-transparent"></div>
              <div className="absolute inset-0 bg-gradient-to-t from-[#050505] via-transparent to-transparent"></div>
            </div>
            <div className="max-w-3xl animate-in slide-in-from-left-10 duration-1000">
              <span className="text-[#d4af37] font-bold uppercase tracking-[0.5em] text-[10px] mb-6 block">Premium Streaming Service</span>
              <h2 className="text-6xl md:text-9xl font-black italic leading-[0.85] mb-8 tracking-tighter uppercase">A Essência <br/> do Cinema.</h2>
              <p className="text-gray-400 text-lg mb-10 max-w-xl leading-relaxed">
                Descubra uma curadoria exclusiva de obras-primas, sincronizadas diretamente para o seu dispositivo.
              </p>
              <div className="flex gap-4">
                <button onClick={() => document.getElementById('grid').scrollIntoView({behavior: 'smooth'})} className="bg-[#d4af37] text-black px-10 py-4 rounded-xl font-black uppercase text-xs tracking-widest hover:bg-white transition-all shadow-xl shadow-[#d4af37]/20">Explorar Agora</button>
              </div>
            </div>
          </section>

          <main id="grid" className="px-6 md:px-20 -mt-24 pb-32 relative z-10">
            <div className="flex items-end justify-between mb-12">
              <h3 className="text-3xl font-black italic uppercase tracking-tighter">Acervo Recente</h3>
              <p className="text-gray-500 text-[10px] font-bold uppercase tracking-widest">Global Sync • {movies.length} Títulos</p>
            </div>

            {movies.length === 0 ? (
              <div className="border border-dashed border-white/10 rounded-3xl p-32 text-center bg-white/[0.01]">
                <Film size={48} className="mx-auto mb-4 text-gray-700" />
                <p className="text-gray-500 font-bold uppercase text-[10px] tracking-widest">O administrador ainda não sincronizou o acervo.</p>
              </div>
            ) : (
              <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-x-6 gap-y-12">
                {filteredMovies.map(m => (
                  <div key={m.id_db} onClick={() => setSelectedMovie(m)} className="group cursor-pointer">
                    <div className="aspect-[2/3] rounded-2xl overflow-hidden relative shadow-2xl transition-all duration-700 group-hover:scale-105 border border-white/5">
                      <img src={m.image} className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700" />
                      <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90"></div>
                      <div className="absolute inset-0 flex flex-col justify-end p-5 translate-y-2 group-hover:translate-y-0 transition-transform">
                        <span className="text-[#d4af37] text-[10px] font-black italic mb-1 uppercase tracking-tighter">Rating {m.rating}</span>
                        <h4 className="font-bold text-sm uppercase leading-tight tracking-tight">{m.title}</h4>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </main>
        </>
      )}

      {/* Modal do Player com Correção de Sandbox */}
      {selectedMovie && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-[#050505]/98 backdrop-blur-2xl" onClick={() => setSelectedMovie(null)}></div>
          <div className="relative w-full max-w-6xl aspect-video bg-black rounded-3xl overflow-hidden border border-[#d4af37]/20 shadow-[0_0_80px_rgba(212,175,55,0.1)]">
            <div className="absolute top-0 w-full p-6 flex justify-between items-center bg-gradient-to-b from-black via-black/40 to-transparent z-10">
              <h3 className="font-black italic text-xl uppercase tracking-tighter text-[#d4af37]">{selectedMovie.title}</h3>
              <button onClick={() => setSelectedMovie(null)} className="bg-white/5 hover:bg-white/10 p-2 rounded-full transition-colors"><X size={20}/></button>
            </div>
            
            {/* NOTA: O erro de Sandbox acontece frequentemente em ambientes de teste controlados. 
              Em hospedagens reais (cPanel), este iframe carregará normalmente sem o atributo 'sandbox'.
            */}
            <iframe 
              src={`https://superflixapi.bond/video/movie/${selectedMovie.id}`} 
              className="w-full h-full border-none" 
              allowFullScreen
              referrerPolicy="no-referrer"
            ></iframe>
          </div>
        </div>
      )}

      <footer className="bg-black/80 border-t border-white/5 py-20 px-6 text-center">
        <div className="flex items-center justify-center gap-2 mb-4">
           <Zap size={20} className="text-[#d4af37]" />
           <span className="font-black tracking-tighter text-xl uppercase italic">CineEssence</span>
        </div>
        <p className="text-gray-600 text-[9px] font-bold uppercase tracking-[0.4em] max-w-lg mx-auto leading-loose">
          Plataforma de Demonstração High-End • Powered by Superflix API & Firebase Serverless
        </p>
      </footer>
    </div>
  );
}