import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, signInAnonymously } from 'firebase/auth';
import { getFirestore, collection, onSnapshot, doc, setDoc, addDoc } from 'firebase/firestore';
import { 
  User, Lock, Unlock, Camera, DollarSign, Heart, 
  MessageSquare, Settings, Eye, PlusCircle, 
  ShieldCheck, TrendingUp, Image as ImageIcon,
  Loader2
} from 'lucide-react';

/**
 * CONFIGURACIÓN PARA ELPRIVADO.ME
 * Reemplaza con tus credenciales de Firebase Console
 */
const firebaseConfig = {
  apiKey: "", // Se llena automáticamente en el entorno
  authDomain: "elprivado-me.firebaseapp.com",
  projectId: "elprivado-me",
  storageBucket: "elprivado-me.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'elprivado-me';

const App = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [view, setView] = useState('feed'); 
  const [posts, setPosts] = useState([]);
  const [isCreator, setIsCreator] = useState(false);

  // 1. Autenticación Inicial
  useEffect(() => {
    const initAuth = async () => {
      try {
        await signInAnonymously(auth);
      } catch (err) {
        console.error("Error en auth", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // 2. Cargar Posts desde Firestore (Datos reales)
  useEffect(() => {
    if (!user) return;
    const q = collection(db, 'artifacts', appId, 'public', 'data', 'posts');
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const postsData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setPosts(postsData);
    }, (error) => console.error("Error fetch posts", error));
    return () => unsubscribe();
  }, [user]);

  // 3. Lógica de Pago (Wompi Integration Mock)
  const handlePayment = async (post) => {
    const checkout = new window.WidgetCheckout({
      currency: 'COP',
      amountInCents: post.price * 100,
      publicKey: 'pub_test_Q5yS9s9v6Z6D6V6B6N6M6',
      reference: `ELPRIVADO_${post.id}_${Date.now()}`,
      customerEmail: user.email || 'fan@elprivado.me',
    });

    checkout.open((result) => {
      const transaction = result.transaction;
      if (transaction.status === 'APPROVED') {
        // Aquí guardaríamos en Firestore que este usuario ya tiene acceso
        console.log("Pago aprobado!");
      }
    });
  };

  if (loading) return (
    <div className="min-h-screen bg-black flex items-center justify-center">
      <Loader2 className="animate-spin text-pink-500" size={48} />
    </div>
  );

  return (
    <div className="min-h-screen bg-black text-white font-sans selection:bg-pink-500">
      <nav className="fixed top-0 w-full bg-zinc-950/80 backdrop-blur-md border-b border-zinc-800 z-50">
        <div className="max-w-4xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="text-2xl font-black bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent cursor-pointer" onClick={() => setView('feed')}>
            elprivado.me
          </div>
          <div className="flex items-center gap-6">
            <button onClick={() => setView('feed')} className={view === 'feed' ? 'text-pink-500' : ''}><Eye size={22} /></button>
            <button onClick={() => setView('dashboard')} className={view === 'dashboard' ? 'text-pink-500' : ''}><TrendingUp size={22} /></button>
            <button onClick={() => setView('profile')} className={view === 'profile' ? 'text-pink-500' : ''}><User size={22} /></button>
          </div>
        </div>
      </nav>

      <main className="pt-20 pb-24 max-w-xl mx-auto px-4">
        {view === 'feed' && (
          <div className="space-y-8">
            {posts.length === 0 ? (
              <div className="text-center py-20 text-zinc-500 italic">No hay contenido disponible todavía...</div>
            ) : (
              posts.map(post => (
                <div key={post.id} className="bg-zinc-900 rounded-3xl overflow-hidden border border-zinc-800">
                  <div className="p-4 flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-zinc-700 overflow-hidden">
                      <img src={`https://i.pravatar.cc/150?u=${post.author}`} alt="" />
                    </div>
                    <h4 className="font-bold text-sm">@{post.author}</h4>
                  </div>
                  <div className="relative aspect-[4/5] bg-zinc-800 flex items-center justify-center overflow-hidden">
                    <img 
                      src={post.previewUrl} 
                      className={`w-full h-full object-cover select-none ${post.isLocked ? 'blur-3xl brightness-50' : ''}`}
                      alt="Privado"
                    />
                    {post.isLocked && (
                      <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
                        <Lock className="text-pink-500 mb-4" size={48} />
                        <h3 className="text-xl font-bold mb-6">Desbloquea el acceso</h3>
                        <button 
                          onClick={() => handlePayment(post)}
                          className="bg-white text-black px-8 py-3 rounded-2xl font-black uppercase hover:scale-105 transition"
                        >
                          Pagar ${post.price.toLocaleString()} COP
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              ))
            )}
          </div>
        )}

        {view === 'dashboard' && (
          <div className="space-y-6">
            <h2 className="text-3xl font-black italic">Mi Negocio</h2>
            <div className="bg-zinc-900 p-8 rounded-3xl border border-zinc-800">
              <p className="text-zinc-500 text-xs uppercase mb-2">Ingresos por cobrar</p>
              <h3 className="text-5xl font-black text-green-400">$0.00</h3>
              <p className="text-[10px] text-zinc-600 mt-4 italic">* ElPrivado.me procesa tus pagos cada martes.</p>
            </div>
          </div>
        )}
      </main>

      {/* Mobile Footer */}
      <footer className="fixed bottom-0 w-full bg-black/90 backdrop-blur-xl border-t border-zinc-800 md:hidden py-4 px-8 flex justify-between items-center text-zinc-500">
        <button onClick={() => setView('feed')}><Eye /></button>
        <button onClick={() => setView('upload')}><PlusCircle /></button>
        <button onClick={() => setView('dashboard')}><TrendingUp /></button>
        <button onClick={() => setView('profile')}><User /></button>
      </footer>
    </div>
  );
};

export default App;