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

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 : 'xat-vibe-v2';

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 scrollRef = useRef(null);

  // 1. Auth Init
  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    return onAuthStateChanged(auth, setUser);
  }, []);

  // 2. Profile and Data Sync
  useEffect(() => {
    if (!user) return;

    // Sync Profile
    const userDocRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'info');
    const unsubProfile = onSnapshot(userDocRef, (docSnap) => {
      if (docSnap.exists()) {
        const data = docSnap.data();
        setProfile(data);
        setNewName(data.name || '');
      } else {
        // Create default profile if not exists
        const defaultName = `Viber_${user.uid.substring(0, 4)}`;
        setDoc(userDocRef, { name: defaultName, uid: user.uid });
      }
    }, (err) => console.error("Profile error:", err));

    // Sync Messages
    const msgsCol = collection(db, 'artifacts', appId, 'public', 'data', 'messages');
    const unsubMsgs = onSnapshot(msgsCol, (snap) => {
      const docs = snap.docs.map(d => ({ id: d.id, ...d.data() }));
      // In-memory sort because we can't use complex queries (Rule 2)
      const sorted = docs.sort((a, b) => (a.time?.seconds || 0) - (b.time?.seconds || 0));
      setMessages(sorted);
      setTimeout(() => scrollRef.current?.scrollIntoView({ behavior: 'smooth' }), 100);
    }, (err) => console.error("Messages error:", err));

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

  const handleUpdateName = async () => {
    if (!newName.trim() || !user) return;
    const userDocRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'info');
    try {
      await updateDoc(userDocRef, { name: newName.trim() });
      setIsEditing(false);
    } catch (e) {
      console.error(e);
    }
  };

  const handleSendMessage = async (e) => {
    e.preventDefault();
    if (!inputText.trim() || !user || !profile) return;
    
    const msg = inputText;
    setInputText('');
    
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'messages'), {
        text: msg,
        sender: profile.name || 'Anonimo',
        uid: user.uid,
        time: serverTimestamp()
      });
    } catch (e) {
      console.error(e);
    }
  };

  if (!user) return <div className="h-screen bg-black flex items-center justify-center text-white">Connessione...</div>;

  return (
    <div className="flex h-screen bg-[#0a0a0a] text-zinc-200 font-sans overflow-hidden">
      {/* Sidebar */}
      <aside className="w-80 border-r border-white/5 bg-[#0d0d0d] flex flex-col">
        <div className="p-6 border-b border-white/5">
          <h1 className="text-xl font-black italic tracking-tighter text-white">
            XAT<span className="text-indigo-500">VIBE</span>
          </h1>
        </div>

        <div className="flex-1 p-4">
            <p className="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mb-4 px-2">Il tuo Profilo</p>
            
            <div className="bg-white/5 rounded-2xl p-4 border border-white/5">
                {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 focus:outline-none"
                            placeholder="Nuovo username..."
                            autoFocus
                        />
                        <div className="flex gap-2">
                            <button onClick={handleUpdateName} className="flex-1 bg-indigo-600 py-2 rounded-lg text-xs font-bold flex items-center justify-center gap-1">
                                <Check size={14}/> Conferma
                            </button>
                            <button onClick={() => setIsEditing(false)} className="px-3 bg-zinc-800 py-2 rounded-lg">
                                <X size={14}/>
                            </button>
                        </div>
                    </div>
                ) : (
                    <div className="flex items-center gap-4">
                        <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-indigo-600 to-purple-600 flex items-center justify-center font-bold text-white shadow-lg">
                            {profile?.name?.charAt(0).toUpperCase() || '?'}
                        </div>
                        <div className="flex-1 min-w-0">
                            <h2 className="text-sm font-bold text-white truncate">{profile?.name || 'Caricamento...'}</h2>
                            <button 
                                onClick={() => setIsEditing(true)}
                                className="text-[10px] text-indigo-400 font-bold uppercase mt-1 hover:text-indigo-300 transition-colors flex items-center gap-1"
                            >
                                <Edit3 size={10}/> Cambia Nome
                            </button>
                        </div>
                    </div>
                )}
            </div>
        </div>

        <div className="p-4 border-t border-white/5">
            <div className="text-[9px] text-zinc-600 font-mono">ID: {user.uid}</div>
        </div>
      </aside>

      {/* Main Chat */}
      <main className="flex-1 flex flex-col">
        <header className="h-16 flex items-center px-8 border-b border-white/5 bg-[#0a0a0a]/80 backdrop-blur-md">
            <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></div>
                <span className="text-sm font-bold">Canale Generale</span>
            </div>
        </header>

        <div className="flex-1 overflow-y-auto p-6 space-y-4 custom-scrollbar">
          {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 px-2">
                    {m.uid === user.uid ? 'Tu' : m.sender}
                </span>
                <div className={`max-w-[70%] px-4 py-2.5 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-800 text-zinc-100 rounded-tl-none border border-white/5'
                }`}>
                    {m.text}
                </div>
            </div>
          ))}
          <div ref={scrollRef} />
        </div>

        <div className="p-6">
          <form onSubmit={handleSendMessage} className="relative flex items-center max-w-5xl mx-auto">
            <input 
              value={inputText}
              onChange={(e) => setInputText(e.target.value)}
              className="w-full bg-zinc-900 border border-white/5 rounded-2xl py-4 pl-6 pr-16 text-sm focus:outline-none focus:border-indigo-500/50 transition-all placeholder:text-zinc-600"
              placeholder="Scrivi qualcosa di leggendario..."
            />
            <button type="submit" className="absolute right-3 p-2.5 bg-indigo-600 hover:bg-indigo-500 rounded-xl text-white transition-all active:scale-95 shadow-lg">
                <Send size={18} />
            </button>
          </form>
        </div>
      </main>

      <style dangerouslySetInnerHTML={{ __html: `
        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #333; }
      `}} />
    </div>
  );
}