import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  FlatList,
  StyleSheet,
  TouchableOpacity,
  Alert,
  Switch,
  ActivityIndicator
} from 'react-native';
import { GameButton, LoadingSpinner } from '../../components/common/GameHeader';
import { GameModal } from '../../components/common/GameModal';
import { GameContainer } from '../../components/common/GameContainer';
import { useMultiplayerRoom, useMultiplayerLobby } from './useMultiplayer';
import { GameRoom } from './MultiplayerService';

interface MultiplayerLobbyProps {
  playerId: string;
  onRoomJoined: (room: GameRoom) => void;
  availableGames: { id: string; name: string }[];
}

/**
 * Lobby component for browsing and creating multiplayer rooms
 */
export const MultiplayerLobby: React.FC<MultiplayerLobbyProps> = ({
  playerId,
  onRoomJoined,
  availableGames
}) => {
  const [showCreateRoom, setShowCreateRoom] = useState(false);
  
  const { 
    currentRoom, 
    connectionStatus, 
    isLoading, 
    error, 
    createRoom, 
    joinRoom,
    clearError 
  } = useMultiplayerRoom(playerId);
  
  const { publicRooms, loadPublicRooms } = useMultiplayerLobby();

  // Handle room joined
  React.useEffect(() => {
    if (currentRoom) {
      onRoomJoined(currentRoom);
    }
  }, [currentRoom, onRoomJoined]);

  if (connectionStatus === 'connecting') {
    return (
      <GameContainer title="מתחבר למשחקים מרובי משתתפים">
        <View style={styles.centerContainer}>
          <LoadingSpinner size="large" text="מתחבר..." />
        </View>
      </GameContainer>
    );
  }

  if (connectionStatus === 'disconnected') {
    return (
      <GameContainer title="שגיאת חיבור">
        <View style={styles.centerContainer}>
          <Text style={styles.errorText}>
            לא ניתן להתחבר לשרת המשחקים
          </Text>
          <GameButton
            title="נסה שוב"
            onPress={() => window.location.reload()}
            style={styles.retryButton}
          />
        </View>
      </GameContainer>
    );
  }

  return (
    <GameContainer title="לובי משחקים מרובי משתתפים">
      {error && (
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>{error}</Text>
          <TouchableOpacity onPress={clearError}>
            <Text style={styles.closeError}>✕</Text>
          </TouchableOpacity>
        </View>
      )}

      <View style={styles.header}>
        <GameButton
          title="צור חדר חדש"
          onPress={() => setShowCreateRoom(true)}
          variant="primary"
          size="large"
          style={styles.createButton}
        />
        
        <GameButton
          title="רענן רשימה"
          onPress={loadPublicRooms}
          variant="secondary"
          style={styles.refreshButton}
        />
      </View>

      <Text style={styles.sectionTitle}>חדרים זמינים</Text>
      
      {publicRooms.length === 0 ? (
        <View style={styles.emptyState}>
          <Text style={styles.emptyText}>אין חדרים זמינים כרגע</Text>
          <Text style={styles.emptySubtext}>צור חדר חדש או נסה שוב מאוחר יותר</Text>
        </View>
      ) : (
        <FlatList
          data={publicRooms}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => <RoomItem room={item} onJoin={joinRoom} />}
          style={styles.roomsList}
          showsVerticalScrollIndicator={false}
        />
      )}

      <CreateRoomModal
        visible={showCreateRoom}
        onClose={() => setShowCreateRoom(false)}
        onCreateRoom={createRoom}
        availableGames={availableGames}
        isLoading={isLoading}
      />
    </GameContainer>
  );
};

interface RoomItemProps {
  room: GameRoom;
  onJoin: (roomId: string, password?: string) => Promise<GameRoom>;
}

const RoomItem: React.FC<RoomItemProps> = ({ room, onJoin }) => {
  const [isJoining, setIsJoining] = useState(false);
  const [showPasswordInput, setShowPasswordInput] = useState(false);
  const [password, setPassword] = useState('');

  const handleJoin = async () => {
    if (room.isPrivate && !showPasswordInput) {
      setShowPasswordInput(true);
      return;
    }

    setIsJoining(true);
    try {
      await onJoin(room.id, room.isPrivate ? password : undefined);
    } catch (error) {
      Alert.alert('שגיאה', 'לא ניתן להצטרף לחדר');
    } finally {
      setIsJoining(false);
      setShowPasswordInput(false);
      setPassword('');
    }
  };

  return (
    <View style={styles.roomItem}>
      <View style={styles.roomInfo}>
        <Text style={styles.roomName}>{room.name}</Text>
        <Text style={styles.roomDetails}>
          {room.players.length}/{room.maxPlayers} שחקנים • {room.gameId}
        </Text>
        {room.isPrivate && <Text style={styles.privateRoom}>🔒 חדר פרטי</Text>}
      </View>
      
      <View style={styles.roomActions}>
        {showPasswordInput ? (
          <View style={styles.passwordContainer}>
            <TextInput
              style={styles.passwordInput}
              placeholder="סיסמה"
              value={password}
              onChangeText={setPassword}
              secureTextEntry
            />
            <TouchableOpacity onPress={() => setShowPasswordInput(false)}>
              <Text style={styles.cancelPassword}>ביטול</Text>
            </TouchableOpacity>
          </View>
        ) : null}
        
        <GameButton
          title={isJoining ? "מצטרף..." : "הצטרף"}
          onPress={handleJoin}
          disabled={isJoining || room.players.length >= room.maxPlayers}
          size="small"
          style={styles.joinButton}
        />
      </View>
    </View>
  );
};

interface CreateRoomModalProps {
  visible: boolean;
  onClose: () => void;
  onCreateRoom: (gameId: string, roomName: string, maxPlayers: number, isPrivate: boolean, password?: string) => Promise<GameRoom>;
  availableGames: { id: string; name: string }[];
  isLoading: boolean;
}

const CreateRoomModal: React.FC<CreateRoomModalProps> = ({
  visible,
  onClose,
  onCreateRoom,
  availableGames,
  isLoading
}) => {
  const [selectedGame, setSelectedGame] = useState(availableGames[0]?.id || '');
  const [roomName, setRoomName] = useState('');
  const [maxPlayers, setMaxPlayers] = useState(4);
  const [isPrivate, setIsPrivate] = useState(false);
  const [password, setPassword] = useState('');

  const handleCreate = async () => {
    if (!selectedGame || !roomName.trim()) {
      Alert.alert('שגיאה', 'נא למלא את כל השדות הנדרשים');
      return;
    }

    try {
      await onCreateRoom(selectedGame, roomName.trim(), maxPlayers, isPrivate, isPrivate ? password : undefined);
      onClose();
    } catch (error) {
      Alert.alert('שגיאה', 'לא ניתן ליצור חדר');
    }
  };

  return (
    <GameModal
      visible={visible}
      onClose={onClose}
      title="צור חדר חדש"
    >
      <View style={styles.modalContent}>
        <Text style={styles.modalLabel}>בחר משחק:</Text>
        <View style={styles.gameSelector}>
          {availableGames.map(game => (
            <TouchableOpacity
              key={game.id}
              style={[
                styles.gameOption,
                selectedGame === game.id && styles.selectedGame
              ]}
              onPress={() => setSelectedGame(game.id)}
            >
              <Text style={[
                styles.gameOptionText,
                selectedGame === game.id && styles.selectedGameText
              ]}>
                {game.name}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        <Text style={styles.modalLabel}>שם החדר:</Text>
        <TextInput
          style={styles.textInput}
          value={roomName}
          onChangeText={setRoomName}
          placeholder="הכנס שם לחדר"
        />

        <Text style={styles.modalLabel}>מספר שחקנים מקסימלי:</Text>
        <View style={styles.playerCountSelector}>
          {[2, 3, 4, 6, 8].map(count => (
            <TouchableOpacity
              key={count}
              style={[
                styles.playerCountOption,
                maxPlayers === count && styles.selectedPlayerCount
              ]}
              onPress={() => setMaxPlayers(count)}
            >
              <Text style={[
                styles.playerCountText,
                maxPlayers === count && styles.selectedPlayerCountText
              ]}>
                {count}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        <View style={styles.privateToggle}>
          <Text style={styles.modalLabel}>חדר פרטי:</Text>
          <Switch
            value={isPrivate}
            onValueChange={setIsPrivate}
          />
        </View>

        {isPrivate && (
          <>
            <Text style={styles.modalLabel}>סיסמה:</Text>
            <TextInput
              style={styles.textInput}
              value={password}
              onChangeText={setPassword}
              placeholder="הכנס סיסמה"
              secureTextEntry
            />
          </>
        )}

        <View style={styles.modalButtons}>
          <GameButton
            title="ביטול"
            onPress={onClose}
            variant="secondary"
            style={styles.modalButton}
          />
          <GameButton
            title={isLoading ? "יוצר..." : "צור חדר"}
            onPress={handleCreate}
            disabled={isLoading || !selectedGame || !roomName.trim()}
            style={styles.modalButton}
          />
        </View>
      </View>
    </GameModal>
  );
};

const styles = StyleSheet.create({
  centerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  errorText: {
    fontSize: 16,
    color: '#FF3B30',
    textAlign: 'center',
    marginBottom: 20,
  },
  retryButton: {
    marginTop: 20,
  },
  errorContainer: {
    backgroundColor: '#FFE5E5',
    padding: 15,
    borderRadius: 8,
    marginBottom: 15,
    flexDirection: 'row',
    alignItems: 'center',
  },
  closeError: {
    fontSize: 18,
    color: '#FF3B30',
    marginLeft: 'auto',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  createButton: {
    flex: 1,
    marginRight: 10,
  },
  refreshButton: {
    flex: 1,
    marginLeft: 10,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
    color: '#333',
  },
  emptyState: {
    alignItems: 'center',
    padding: 40,
  },
  emptyText: {
    fontSize: 16,
    color: '#666',
    marginBottom: 8,
  },
  emptySubtext: {
    fontSize: 14,
    color: '#999',
    textAlign: 'center',
  },
  roomsList: {
    flex: 1,
  },
  roomItem: {
    backgroundColor: '#FFF',
    padding: 15,
    borderRadius: 8,
    marginBottom: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  roomInfo: {
    marginBottom: 10,
  },
  roomName: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 5,
  },
  roomDetails: {
    fontSize: 14,
    color: '#666',
  },
  privateRoom: {
    fontSize: 12,
    color: '#FF9500',
    marginTop: 5,
  },
  roomActions: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  passwordContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    marginRight: 10,
  },
  passwordInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#DDD',
    borderRadius: 4,
    padding: 8,
    marginRight: 10,
  },
  cancelPassword: {
    color: '#007AFF',
    fontSize: 14,
  },
  joinButton: {
    minWidth: 80,
  },
  modalContent: {
    padding: 20,
  },
  modalLabel: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 8,
    color: '#333',
  },
  gameSelector: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 20,
  },
  gameOption: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 6,
    borderWidth: 1,
    borderColor: '#DDD',
    marginRight: 8,
    marginBottom: 8,
  },
  selectedGame: {
    backgroundColor: '#007AFF',
    borderColor: '#007AFF',
  },
  gameOptionText: {
    fontSize: 14,
    color: '#333',
  },
  selectedGameText: {
    color: '#FFF',
  },
  textInput: {
    borderWidth: 1,
    borderColor: '#DDD',
    borderRadius: 4,
    padding: 12,
    fontSize: 16,
    marginBottom: 20,
  },
  playerCountSelector: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  playerCountOption: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#DDD',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10,
  },
  selectedPlayerCount: {
    backgroundColor: '#007AFF',
    borderColor: '#007AFF',
  },
  playerCountText: {
    fontSize: 16,
    color: '#333',
  },
  selectedPlayerCountText: {
    color: '#FFF',
  },
  privateToggle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  modalButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  modalButton: {
    flex: 1,
    marginHorizontal: 5,
  },
});