import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged,
  updateProfile,
  signInWithCustomToken
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  query, 
  onSnapshot, 
  orderBy, 
  serverTimestamp, 
  doc, 
  setDoc, 
  getDoc,
  deleteDoc 
} from 'firebase/firestore';
import { 
  MessageSquare, 
  Plus, 
  LogOut, 
  User, 
  Search, 
  Send, 
  ArrowLeft, 
  Users, 
  Trash2,
  Smile
} from 'lucide-react';

// --- Firebase Initialization ---
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 : 'default-app-id';

// --- Constants & Helpers ---
const AVATAR_COLORS = ['#EF4444', '#F59E0B', '#10B981', '#3B82F6', '#6366F1', '#8B5CF6', '#EC4899'];

const getRandomColor = () => AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)];

// --- Main Component ---
export default function App() {
  const [user, setUser] = useState(null); // Auth user
  const [userProfile, setUserProfile] = useState(null); // Firestore profile
  const [view, setView] = useState('loading'); // loading, auth, home, chat
  const [currentRoom, setCurrentRoom] = useState(null);
  const [rooms, setRooms] = useState([]);
  const [loading, setLoading] = useState(true);

  // 1. Auth & Initial Load
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth error:", err);
      }
    };
    initAuth();

    const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
      if (firebaseUser) {
        setUser(firebaseUser);
        // Check for existing profile in Firestore
        const userRef = doc(db, 'artifacts', appId, 'users', firebaseUser.uid, 'profile', 'data');
        const userSnap = await getDoc(userRef);

        if (userSnap.exists()) {
          setUserProfile(userSnap.data());
          setView('home');
        } else {
          setView('auth'); // Need to register
        }
      } else {
        setUser(null);
        setView('loading');
      }
      setLoading(false);
    });

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

  // 2. Fetch Rooms (Only when logged in)
  useEffect(() => {
    if (!user) return;

    const roomsRef = collection(db, 'artifacts', appId, 'public', 'data', 'rooms');
    // Note: Simple query to avoid index requirements
    const q = query(roomsRef);

    const unsubscribe = onSnapshot(q, (snapshot) => {
      const roomData = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      // Client-side sort by createdAt (desc)
      roomData.sort((a, b) => (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0));
      setRooms(roomData);
    }, (err) => console.error("Room fetch error:", err));

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

  // --- Actions ---

  const handleRegister = async (username) => {
    if (!user) return;
    const color = getRandomColor();
    const profileData = {
      uid: user.uid,
      username: username,
      color: color,
      createdAt: serverTimestamp()
    };

    // Save public profile
    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data'), profileData);
    setUserProfile(profileData);
    setView('home');
  };

  const handleCreateRoom = async (name, desc) => {
    if (!user) return;
    await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'rooms'), {
      name,
      description: desc,
      createdBy: user.uid,
      creatorName: userProfile.username,
      createdAt: serverTimestamp(),
      memberCount: 0 
    });
  };

  const handleLogout = async () => {
    // In this demo environment, we just reload to reset anonymous session effectively
    window.location.reload();
  };

  // --- Rendering Views ---

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-900 flex flex-col items-center justify-center text-white">
        <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
        <p className="font-mono text-sm opacity-70">Connecting to BloxChat Server...</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-100 dark:bg-[#111216] text-slate-900 dark:text-white font-sans transition-colors duration-200">
      {view === 'auth' && <AuthScreen onRegister={handleRegister} />}
      
      {view === 'home' && (
        <Dashboard 
          user={userProfile} 
          rooms={rooms} 
          onJoinRoom={(room) => { setCurrentRoom(room); setView('chat'); }} 
          onCreateRoom={handleCreateRoom}
          onLogout={handleLogout}
        />
      )}

      {view === 'chat' && currentRoom && (
        <ChatRoom 
          room={currentRoom} 
          user={userProfile} 
          uid={user.uid}
          onBack={() => { setCurrentRoom(null); setView('home'); }} 
        />
      )}
    </div>
  );
}

// --- Sub-Components ---

function AuthScreen({ onRegister }) {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name.trim().length > 0) onRegister(name.trim());
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-600 to-purple-700">
      <div className="bg-white dark:bg-[#1e2024] p-8 rounded-2xl shadow-2xl w-full max-w-md border-4 border-white/10 backdrop-blur-sm">
        <div className="text-center mb-8">
          <div className="w-20 h-20 bg-gradient-to-tr from-blue-500 to-cyan-400 rounded-2xl mx-auto flex items-center justify-center shadow-lg transform rotate-3 mb-4">
            <MessageSquare size={40} className="text-white" />
          </div>
          <h1 className="text-3xl font-extrabold tracking-tight">BloxChat</h1>
          <p className="text-gray-500 dark:text-gray-400 mt-2">Create an identity to start chatting.</p>
        </div>
        
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-bold mb-2 uppercase tracking-wide text-gray-500">Username</label>
            <input 
              type="text" 
              maxLength={15}
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="w-full bg-gray-100 dark:bg-black/20 border-2 border-transparent focus:border-blue-500 rounded-xl px-4 py-3 text-lg font-bold outline-none transition-all"
              placeholder="CoolUser123"
            />
          </div>
          <button 
            type="submit" 
            disabled={!name.trim()}
            className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-4 rounded-xl shadow-lg transform active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Start Playing
          </button>
        </form>
      </div>
    </div>
  );
}

function Dashboard({ user, rooms, onJoinRoom, onCreateRoom, onLogout }) {
  const [showCreate, setShowCreate] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');

  const filteredRooms = rooms.filter(r => 
    r.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
      {/* Header */}
      <header className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center transform -rotate-3 shadow-lg">
            <MessageSquare className="text-white" size={20} />
          </div>
          <h1 className="text-2xl font-black tracking-tight">BloxChat</h1>
        </div>

        <div className="flex items-center gap-4 flex-1 justify-end">
          <div className="relative w-full max-w-md hidden sm:block">
            <Search className="absolute left-3 top-2.5 text-gray-400" size={18} />
            <input 
              type="text" 
              placeholder="Search experiences..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full bg-white dark:bg-[#1e2024] border border-gray-200 dark:border-gray-800 rounded-full pl-10 pr-4 py-2 focus:ring-2 focus:ring-blue-500 outline-none transition"
            />
          </div>
          
          <button 
            onClick={() => setShowCreate(true)}
            className="bg-white dark:bg-[#1e2024] hover:bg-gray-50 dark:hover:bg-[#25282e] border border-gray-200 dark:border-gray-700 px-4 py-2 rounded-lg font-bold text-sm flex items-center gap-2 transition"
          >
            <Plus size={16} /> Create
          </button>

          <div className="flex items-center gap-3 pl-4 border-l border-gray-300 dark:border-gray-700">
            <div className="text-right hidden md:block">
              <div className="text-sm font-bold">{user.username}</div>
              <button onClick={onLogout} className="text-xs text-red-500 hover:underline">Log Out</button>
            </div>
            <div 
              className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold shadow-inner"
              style={{ backgroundColor: user.color }}
            >
              {user.username[0].toUpperCase()}
            </div>
          </div>
        </div>
      </header>

      {/* Room Grid */}
      <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
        <Users size={20} className="text-blue-500" /> 
        Active Experiences
      </h2>
      
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {filteredRooms.length === 0 ? (
          <div className="col-span-full py-12 text-center text-gray-500 bg-white dark:bg-[#1e2024] rounded-2xl border-2 border-dashed border-gray-300 dark:border-gray-700">
            <p>No rooms found. Be the first to create one!</p>
          </div>
        ) : (
          filteredRooms.map(room => (
            <RoomCard key={room.id} room={room} onClick={() => onJoinRoom(room)} />
          ))
        )}
      </div>

      {/* Create Modal */}
      {showCreate && <CreateRoomModal onClose={() => setShowCreate(false)} onCreate={onCreateRoom} />}
    </div>
  );
}

function RoomCard({ room, onClick }) {
  // Generate a consistent gradient based on room name
  const getGradient = (str) => {
    const sum = str.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
    const gradients = [
      'from-emerald-400 to-cyan-500',
      'from-blue-400 to-indigo-500',
      'from-purple-400 to-pink-500', 
      'from-orange-400 to-red-500'
    ];
    return gradients[sum % gradients.length];
  };

  return (
    <div 
      onClick={onClick}
      className="group bg-white dark:bg-[#1e2024] rounded-2xl overflow-hidden shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer border dark:border-gray-800"
    >
      <div className={`h-32 bg-gradient-to-r ${getGradient(room.name)} relative overflow-hidden`}>
        <div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
        <div className="absolute bottom-2 right-2 bg-black/40 backdrop-blur-md text-white text-xs px-2 py-1 rounded-md font-bold flex items-center gap-1">
          <User size={10} /> Live
        </div>
      </div>
      <div className="p-4">
        <h3 className="font-bold text-lg truncate mb-1">{room.name}</h3>
        <p className="text-gray-500 dark:text-gray-400 text-sm truncate mb-4">{room.description}</p>
        <div className="flex items-center justify-between text-xs text-gray-400">
          <span>By {room.creatorName || 'Unknown'}</span>
          <button className="bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-3 py-1 rounded-full font-bold group-hover:bg-blue-600 group-hover:text-white transition-colors">
            Play
          </button>
        </div>
      </div>
    </div>
  );
}

function CreateRoomModal({ onClose, onCreate }) {
  const [name, setName] = useState('');
  const [desc, setDesc] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if(name && desc) {
      onCreate(name, desc);
      onClose();
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
      <div className="bg-white dark:bg-[#232527] w-full max-w-lg rounded-2xl p-6 shadow-2xl animate-in fade-in zoom-in duration-200">
        <h2 className="text-2xl font-bold mb-4">Create New Experience</h2>
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label className="block text-sm font-bold mb-2">Room Name</label>
            <input 
              className="w-full bg-gray-100 dark:bg-black/30 border border-gray-300 dark:border-gray-700 rounded-lg p-3 outline-none focus:border-blue-500"
              placeholder="e.g. Obby Parkour"
              maxLength={25}
              required
              value={name}
              onChange={e => setName(e.target.value)}
            />
          </div>
          <div className="mb-6">
            <label className="block text-sm font-bold mb-2">Description</label>
            <textarea 
              className="w-full bg-gray-100 dark:bg-black/30 border border-gray-300 dark:border-gray-700 rounded-lg p-3 outline-none focus:border-blue-500"
              placeholder="What is this room about?"
              maxLength={60}
              required
              rows={3}
              value={desc}
              onChange={e => setDesc(e.target.value)}
            />
          </div>
          <div className="flex justify-end gap-3">
            <button 
              type="button" 
              onClick={onClose}
              className="px-5 py-2 rounded-lg font-bold text-gray-500 hover:bg-gray-100 dark:hover:bg-white/5"
            >
              Cancel
            </button>
            <button 
              type="submit" 
              className="px-5 py-2 rounded-lg bg-blue-600 text-white font-bold hover:bg-blue-500 shadow-lg"
            >
              Create
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function ChatRoom({ room, user, uid, onBack }) {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const messagesEndRef = useRef(null);
  
  // Real-time messages listener
  useEffect(() => {
    const messagesRef = collection(db, 'artifacts', appId, 'public', 'data', 'rooms', room.id, 'messages');
    // We sort client side because complex queries require indexes
    const q = query(messagesRef);

    const unsubscribe = onSnapshot(q, (snapshot) => {
      const msgs = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      // Client-side sort: Ascending time
      msgs.sort((a, b) => (a.createdAt?.seconds || 0) - (b.createdAt?.seconds || 0));
      setMessages(msgs);
      scrollToBottom();
    });

    return () => unsubscribe();
  }, [room.id]);

  const scrollToBottom = () => {
    setTimeout(() => {
      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
    }, 100);
  };

  const handleSend = async (e) => {
    e.preventDefault();
    if (!newMessage.trim()) return;

    try {
      const messagesRef = collection(db, 'artifacts', appId, 'public', 'data', 'rooms', room.id, 'messages');
      await addDoc(messagesRef, {
        text: newMessage.trim(),
        uid: uid,
        displayName: user.username,
        userColor: user.color,
        createdAt: serverTimestamp()
      });
      setNewMessage('');
    } catch (err) {
      console.error("Failed to send", err);
    }
  };

  return (
    <div className="flex flex-col h-screen max-w-7xl mx-auto bg-white dark:bg-[#111216] md:border-x dark:border-gray-800 shadow-2xl relative">
      {/* Header */}
      <div className="h-16 flex items-center justify-between px-4 border-b dark:border-gray-800 bg-white/80 dark:bg-[#1e2024]/80 backdrop-blur-md sticky top-0 z-10">
        <div className="flex items-center gap-3">
          <button onClick={onBack} className="p-2 hover:bg-gray-100 dark:hover:bg-white/10 rounded-full transition">
            <ArrowLeft size={20} />
          </button>
          <div>
            <h3 className="font-bold text-lg leading-tight">{room.name}</h3>
            <p className="text-xs text-green-500 font-bold flex items-center gap-1">
              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
              Live Chat
            </p>
          </div>
        </div>
        {room.createdBy === uid && (
           <div className="text-xs text-gray-400 bg-gray-100 dark:bg-white/5 px-2 py-1 rounded">Admin</div>
        )}
      </div>

      {/* Messages Area */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-slate-50 dark:bg-[#0b0c0e]">
        <div className="text-center py-6 opacity-50 text-sm">
          <p>Welcome to the start of {room.name}!</p>
          <p>Remember to be kind and respectful.</p>
        </div>
        
        {messages.map((msg) => {
          const isMe = msg.uid === uid;
          return (
            <div key={msg.id} className={`flex flex-col ${isMe ? 'items-end' : 'items-start'}`}>
              <div className={`flex items-center gap-2 mb-1 ${isMe ? 'flex-row-reverse' : 'flex-row'}`}>
                {!isMe && (
                   <div className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white shadow-sm" style={{backgroundColor: msg.userColor}}>
                      {msg.displayName?.[0]?.toUpperCase()}
                   </div>
                )}
                <span className="text-xs font-bold text-gray-500 dark:text-gray-400">
                  {msg.displayName}
                </span>
              </div>
              
              <div 
                className={`max-w-[85%] px-4 py-2 rounded-2xl shadow-sm text-sm break-words
                  ${isMe 
                    ? 'bg-blue-600 text-white rounded-tr-sm' 
                    : 'bg-white dark:bg-[#232527] border dark:border-gray-700 text-gray-800 dark:text-gray-100 rounded-tl-sm'
                  }`}
              >
                {msg.text}
              </div>
            </div>
          );
        })}
        <div ref={messagesEndRef} />
      </div>

      {/* Input Area */}
      <div className="p-4 bg-white dark:bg-[#1e2024] border-t dark:border-gray-800">
        <form onSubmit={handleSend} className="flex gap-2">
          <input
            type="text"
            value={newMessage}
            onChange={(e) => setNewMessage(e.target.value)}
            className="flex-1 bg-gray-100 dark:bg-black/30 border border-transparent focus:border-blue-500 rounded-full px-5 py-3 outline-none transition-all"
            placeholder="Say something..."
          />
          <button 
            type="submit" 
            disabled={!newMessage.trim()}
            className="bg-blue-600 hover:bg-blue-500 text-white p-3 rounded-full shadow-lg transition disabled:opacity-50 disabled:cursor-default"
          >
            <Send size={20} />
          </button>
        </form>
      </div>
    </div>
  );
}