import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, setDoc, onSnapshot, collection, query, addDoc, serverTimestamp, updateDoc } from 'firebase/firestore';
import { Send, User, Edit3, Check, X, AlertTriangle, ShieldCheck } from 'lucide-react';

/**
 * IMPORTANTE: Sostituisci i valori qui sotto con quelli della tua Firebase Console.
 * Senza questi, l'app su Cloudflare non sa a quale database collegarsi.
 */
const CF_FIREBASE_CONFIG = {
  apiKey: "IL_TUO_API_KEY",
  authDomain: "IL_TUO_PROGETTO.firebaseapp.com",
  projectId: "IL_TUO_ID_PROGETTO",
  storageBucket: "IL_TUO_PROGETTO.appspot.com",
  messagingSenderId: "IL_TUO_SENDER_ID",
  appId: "IL_TUO_APP_ID"
};

const firebaseConfig = (typeof __firebase_config !== 'undefined' && __firebase_config)
  ? JSON.parse(__firebase_config)
  : CF_FIREBASE_CONFIG;

const appId = typeof __app_id !== 'undefined' ? __app_id : 'vibe-chat-cf';

// Inizializzazione protetta
let db, auth;
try {
  const app = initializeApp(firebaseConfig);
  db = getFirestore(app);
  auth = getAuth(app);
} catch (e) {
  console.error("Firebase init error:", e);
}

export default function App() {
  const [user, setUser] = useState(null);
  const [profile, setProfile] = useState(null);
  const [messages, setMessages] = useState([]);
  const [inputText, setInputText] = useState('');
  const [isEditing, setIsEditing] = useState(false);
  const [newName, setNewName] = useState('');
  const [connError, setConnError] = useState(null);
  const scrollRef = useRef(null);

  // RULE 3: Auth prima di ogni operazione
  useEffect(() => {
    if (!auth) {
      setConnError("Configurazione Firebase mancante.");
      return;
    }

    const initAuth = async () => {
      try {
        // Proviamo il token custom fornito dall'ambiente, altrimenti anonimo
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
           const { signInWithCustomToken } = await import('firebase/auth');
           await signInWithCustomToken(auth, __initial_auth_token);
        } else {
           await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth error:", err);
        setConnError("Errore di autenticazione. Verifica di aver abilitato 'Anonymous Auth' su Firebase.");
      }
    };
    initAuth();
    
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
    });
    return () => unsubscribe();
  }, []);

  // Sincronizzazione dati protetta (solo dopo auth)
  useEffect(() => {
    if (!user || !db) return;

    // RULE 1: Percorso privato corretto
    const profileRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'info');
    
    const unsubProfile = onSnapshot(profileRef, (snap) => {
      if (snap.exists()) {
        const data = snap.data();
        setProfile(data);
        setNewName(data.name || '');
      } else {
        const initial = { 
            name: `User_${user.uid.substring(0, 4)}`, 
            uid: user.uid,
            createdAt: serverTimestamp()
        };
        setDoc(profileRef, initial).catch(e => {
            console.error("SetDoc error:", e);
            setConnError("Errore permessi profilo. Verifica le Security Rules.");
        });
      }
    }, (err) => {
        console.error("Profile onSnapshot error:", err);
        setConnError("Errore permessi lettura profilo.");
    });

    // RULE 1: Percorso pubblico corretto
    const msgsRef = collection(db, 'artifacts', appId, 'public', 'data', 'messages');
    
    const unsubMsgs = onSnapshot(msgsRef, (snap) => {
      const list = snap.docs.map(d => ({ id: d.id, ...d.data() }));
      // RULE 2: Ordinamento in memoria
      const sorted = list.sort((a, b) => {
        const timeA = a.time?.seconds || 0;
        const timeB = b.time?.seconds || 0;
        return timeA - timeB;
      });
      setMessages(sorted);
      setTimeout(() => scrollRef.current?.scrollIntoView({ behavior: 'smooth' }), 100);
    }, (err) => {
        console.error("Messages onSnapshot error:", err);
        // Non blocchiamo l'intera app per i messaggi, ma logghiamo
    });

    return () => { unsubProfile(); unsubMsgs(); };
  }, [user]);

  const sendMessage = async (e) => {
    e.preventDefault();
    if (!inputText.trim() || !user || !profile) return;
    
    const text = inputText;
    setInputText('');
    
    try {
      // Assicurati che il percorso sia esattamente quello delle regole
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'messages'), {
        text,
        sender: profile.name || 'Anonimo',
        uid: user.uid,
        time: serverTimestamp()
      });
    } catch (e) {
      console.error("Send error:", e);
      setConnError("Invio fallito. Controlla le regole di scrittura 'public/data'.");
    }
  };

  const updateProfile = async () => {
    if (!newName.trim() || !user) return;
    try {
      const profileRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'info');
      await updateDoc(profileRef, {
        name: newName.trim()
      });
      setIsEditing(false);
    } catch (e) {
      console.error("Update profile error:", e);
      setConnError("Aggiornamento profilo fallito. Controlla i permessi 'users/uid'.");
    }
  };

  if (connError) return (
    <div className="h-screen bg-[#050505] flex flex-col items-center justify-center p-6 text-center">
      <AlertTriangle size={50} className="text-amber-500 mb-4" />
      <h1 className="text-xl font-bold text-white mb-2">Errore Permessi Firebase</h1>
      <p className="text-zinc-400 max-w-sm mb-6">{connError}</p>
      <div className="bg-zinc-900 p-4 rounded-xl text-xs text-zinc-500 text-left font-mono border border-white/5 space-y-2">
        <p className="font-bold text-white uppercase mb-1">Cosa fare adesso:</p>
        <p>1. Vai nella Console Firebase &gt; Firestore &gt; Rules</p>
        <p>2. Incolla queste regole:</p>
        <pre className="bg-black p-2 rounded text-indigo-400 overflow-x-auto text-[10px]">
{`match /artifacts/${appId}/public/data/messages/{d} {
  allow read, write: if request.auth != null;
}
match /artifacts/${appId}/users/{uid}/profile/info {
  allow read, write: if request.auth != null && request.auth.uid == uid;
}`}
        </pre>
      </div>
    </div>
  );

  if (!user) return <div className="h-screen bg-black flex items-center justify-center text-indigo-500 font-black animate-pulse uppercase tracking-widest">Auth in corso...</div>;

  return (
    <div className="flex h-screen bg-[#0a0a0a] text-zinc-200 font-sans selection:bg-indigo-500/30">
      <aside className="w-72 border-r border-white/5 bg-[#0d0d0d] hidden md:flex flex-col">
        <div className="p-8 border-b border-white/5 flex items-center gap-2">
          <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
            <ShieldCheck size={20} className="text-white" />
          </div>
          <h1 className="text-xl font-black italic tracking-tighter text-white">VIBE<span className="text-indigo-500">XAT</span></h1>
        </div>

        <div className="p-6 flex-1">
          <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-600 mb-4">Account</p>
          <div className="bg-gradient-to-br from-zinc-800 to-zinc-900 rounded-2xl p-5 border border-white/10 shadow-xl">
            {isEditing ? (
              <div className="space-y-3">
                <input 
                  value={newName} 
                  onChange={e => setNewName(e.target.value)}
                  className="w-full bg-black border border-indigo-500/50 rounded-xl px-3 py-2 text-sm text-white"
                  autoFocus
                />
                <div className="flex gap-2">
                  <button onClick={updateProfile} className="flex-1 bg-indigo-600 hover:bg-indigo-500 py-2 rounded-lg text-xs font-bold transition-colors">Salva</button>
                  <button onClick={() => setIsEditing(false)} className="bg-zinc-700 p-2 rounded-lg"><X size={14}/></button>
                </div>
              </div>
            ) : (
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">
                  {profile?.name?.charAt(0).toUpperCase() || '?'}
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-bold text-white truncate">{profile?.name || 'Viber'}</p>
                  <button onClick={() => setIsEditing(true)} className="text-[10px] text-indigo-400 hover:text-indigo-300 font-bold uppercase flex items-center gap-1 mt-1 transition-colors">
                    <Edit3 size={10}/> Modifica
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </aside>

      <main className="flex-1 flex flex-col relative">
        <header className="h-20 flex items-center justify-between px-8 border-b border-white/5 bg-[#0a0a0a]/50 backdrop-blur-xl z-10">
          <div className="flex items-center gap-3">
            <div className="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)]"></div>
            <span className="text-sm font-bold tracking-wide uppercase">Live Stream</span>
          </div>
          <span className="text-[10px] bg-indigo-500/10 text-indigo-400 px-3 py-1 rounded-full border border-indigo-500/20 font-bold uppercase">Cloudflare Mode</span>
        </header>

        <div className="flex-1 overflow-y-auto p-8 space-y-6 custom-scroll">
          {messages.length === 0 && (
            <div className="text-center py-20 opacity-20 italic text-sm">Nessun messaggio. Sii il primo a scrivere!</div>
          )}
          {messages.map((m) => (
            <div key={m.id} className={`flex flex-col ${m.uid === user.uid ? 'items-end' : 'items-start'}`}>
              <span className="text-[10px] font-bold text-zinc-500 mb-1.5 px-2">{m.sender}</span>
              <div className={`max-w-[80%] px-5 py-3 rounded-2xl text-sm leading-relaxed ${
                m.uid === user.uid 
                  ? 'bg-indigo-600 text-white rounded-tr-none shadow-lg shadow-indigo-900/20' 
                  : 'bg-zinc-900 text-zinc-200 rounded-tl-none border border-white/5'
              }`}>
                {m.text}
              </div>
            </div>
          ))}
          <div ref={scrollRef} />
        </div>

        <div className="p-8 pt-0 bg-gradient-to-t from-[#0a0a0a] via-[#0a0a0a] to-transparent">
          <form onSubmit={sendMessage} className="relative flex items-center group">
            <input 
              value={inputText}
              onChange={e => setInputText(e.target.value)}
              placeholder="Invia un messaggio sicuro..."
              className="w-full bg-zinc-900/50 border border-white/10 rounded-2xl py-5 pl-7 pr-16 text-sm focus:outline-none focus:border-indigo-500/50 focus:bg-zinc-900 transition-all placeholder:text-zinc-600"
            />
            <button type="submit" className="absolute right-3.5 p-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl shadow-lg transition-all active:scale-95">
              <Send size={20} />
            </button>
          </form>
        </div>
      </main>

      <style dangerouslySetInnerHTML={{ __html: `
        .custom-scroll::-webkit-scrollbar { width: 4px; }
        .custom-scroll::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 10px; }
        .custom-scroll::-webkit-scrollbar-thumb:hover { background: #333; }
      `}} />
    </div>
  );
}