import { useState, useEffect } from 'react';
import { Plus, Copy, Check, LogOut } from 'lucide-react';

export default function RoomList({ user, onSelectRoom, onLogout }) {
  const [rooms, setRooms] = useState([]);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [newRoomName, setNewRoomName] = useState('');
  const [copiedId, setCopiedId] = useState(null);

  // بارگذاری اتاق‌ها از LocalStorage
  useEffect(() => {
    const savedRooms = JSON.parse(localStorage.getItem('chat_rooms') || '[]');
    setRooms(savedRooms);
  }, []);

  const handleCreateRoom = () => {
    if (!newRoomName.trim()) return;
    if (rooms.length >= 3) {
      alert('شما حداکثر مجاز به ساخت ۳ اتاق هستید.');
      return;
    }

    const newRoom = {
      id: Math.random().toString(36).substr(2, 9),
      name: newRoomName,
      createdAt: new Date().toISOString(),
      members: 1
    };

    const updatedRooms = [...rooms, newRoom];
    setRooms(updatedRooms);
    localStorage.setItem('chat_rooms', JSON.stringify(updatedRooms));
    setNewRoomName('');
    setShowCreateModal(false);
    onSelectRoom(newRoom);
  };

  const copyRoomLink = (e, roomId) => {
    e.stopPropagation();
    const link = `${window.location.origin}/?room=${roomId}`;
    navigator.clipboard.writeText(link);
    setCopiedId(roomId);
    setTimeout(() => setCopiedId(null), 2000);
  };

  return (
    <div className="flex flex-col h-screen pt-20 px-4 pb-4 max-w-2xl mx-auto w-full">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h2 className="text-2xl font-bold text-white">اتاق‌های گفتگو</h2>
          <p className="text-white/50 text-sm mt-1">به یک اتاق بپیوندید یا یکی بسازید</p>
        </div>
        <button
          onClick={onLogout}
          className="p-2 rounded-lg bg-white/5 hover:bg-red-500/20 text-white/70 hover:text-red-400 transition-colors"
          title="خروج"
        >
          <LogOut className="w-5 h-5" />
        </button>
      </div>

      <div className="flex-1 overflow-y-auto custom-scrollbar space-y-3 mb-4">
        {rooms.length === 0 ? (
          <div className="text-center py-20 text-white/30">
            <p>هنوز اتاقی وجود ندارد</p>
            <p className="text-sm mt-2">اولین اتاق را بسازید!</p>
          </div>
        ) : (
          rooms.map((room) => (
            <div
              key={room.id}
              onClick={() => onSelectRoom(room)}
              className="glass-panel p-4 rounded-xl cursor-pointer hover:bg-white/10 transition-all duration-200 group relative"
            >
              <div className="flex justify-between items-start">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center text-white font-bold text-lg">
                    {room.name.charAt(0)}
                  </div>
                  <div>
                    <h3 className="text-white font-bold text-lg">{room.name}</h3>
                    <p className="text-white/40 text-xs mt-1">
                      کد: {room.id} • {room.members} عضو
                    </p>
                  </div>
                </div>
                <button
                  onClick={(e) => copyRoomLink(e, room.id)}
                  className="p-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity bg-white/5 hover:bg-white/20 text-white"
                >
                  {copiedId === room.id ? <Check className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
                </button>
              </div>
            </div>
          ))
        )}
      </div>

      <button
        onClick={() => setShowCreateModal(true)}
        disabled={rooms.length >= 3}
        className="w-full bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl transition-all duration-300 shadow-lg shadow-indigo-500/30 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
      >
        <Plus className="w-5 h-5" />
        ساخت اتاق جدید ({rooms.length}/3)
      </button>

      {/* مودال ساخت اتاق */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="glass-panel p-6 rounded-2xl w-full max-w-sm animate-slide-in">
            <h3 className="text-xl font-bold text-white mb-4">ساخت اتاق جدید</h3>
            <input
              type="text"
              placeholder="نام اتاق..."
              value={newRoomName}
              onChange={(e) => setNewRoomName(e.target.value)}
              className="glass-input w-full p-3 rounded-xl mb-4"
              autoFocus
            />
            <div className="flex gap-3">
              <button
                onClick={() => setShowCreateModal(false)}
                className="flex-1 py-3 rounded-xl bg-white/5 text-white hover:bg-white/10 transition-colors"
              >
                انصراف
              </button>
              <button
                onClick={handleCreateRoom}
                className="flex-1 py-3 rounded-xl bg-primary text-white hover:bg-indigo-600 transition-colors font-bold"
              >
                ایجاد
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}