import React, { useState, useEffect, useRef } from 'react';
import { Globe, Sun, CloudRain, CloudLightning, Clock, Users, MapPin, ServerOff } from 'lucide-react';
import { motion } from 'framer-motion';
import { io } from 'socket.io-client';

// 월드 정보 페이지
const WorldsPage = ({ isMobile = false }) => {
  const [worlds, setWorlds] = useState([]);
  const [loading, setLoading] = useState(true);
  const [serverOnline, setServerOnline] = useState(null);
  const socketRef = useRef(null);

  // 월드 순서 정렬 함수 (오버월드 -> 네더 -> 엔드)
  const sortWorlds = (worldList) => {
    const order = {
      'minecraft:overworld': 0,
      'minecraft:the_nether': 1,
      'minecraft:the_end': 2
    };
    return [...worldList].sort((a, b) => {
      const orderA = order[a.dimension] ?? 999;
      const orderB = order[b.dimension] ?? 999;
      return orderA - orderB;
    });
  };

  useEffect(() => {
    // 소켓 연결
    const socket = io('/', {
      path: '/socket.io',
      transports: ['websocket', 'polling']
    });
    socketRef.current = socket;

    socket.on('status', (data) => {
      setServerOnline(data.online);
      if (!data.online) {
        setLoading(false);
      }
    });

    socket.on('worlds', (data) => {
      setWorlds(sortWorlds(data.worlds || []));
      setLoading(false);
    });

    // 초기 데이터 요청
    socket.emit('get_worlds');

    // 5초마다 갱신
    const interval = setInterval(() => {
      socket.emit('get_worlds');
    }, 1000);

    return () => {
      clearInterval(interval);
      socket.disconnect();
    };
  }, []);

  // 시간 포맷팅 (틱 -> 시:분)
  const formatTime = (dayTime) => {
    const hours = Math.floor(dayTime / 1000);
    const minutes = Math.floor((dayTime % 1000) / 16.67);
    const hour24 = (hours + 6) % 24;
    const ampm = hour24 >= 12 ? '오후' : '오전';
    const hour12 = hour24 % 12 || 12;
    return `${ampm} ${hour12}:${String(Math.floor(minutes)).padStart(2, '0')}`;
  };

  // 날씨 아이콘
  const WeatherIcon = ({ type }) => {
    switch (type) {
      case 'thunderstorm':
        return <CloudLightning className="text-yellow-400" size={20} />;
      case 'rain':
        return <CloudRain className="text-blue-400" size={20} />;
      default:
        return <Sun className="text-yellow-300" size={20} />;
    }
  };

  // 차원 색상
  const getDimensionStyle = (dimension) => {
    if (dimension.includes('nether')) {
      return { 
        gradient: 'from-red-500/20 to-orange-500/20', 
        border: 'border-red-500/30',
        text: 'text-red-400'
      };
    }
    if (dimension.includes('end')) {
      return { 
        gradient: 'from-purple-500/20 to-pink-500/20', 
        border: 'border-purple-500/30',
        text: 'text-purple-400'
      };
    }
    return { 
      gradient: 'from-mc-green/20 to-emerald-500/20', 
      border: 'border-mc-green/30',
      text: 'text-mc-green'
    };
  };

  // 서버 오프라인 상태 - 전체 화면 가운데 정렬
  if (serverOnline === false) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center p-8"
        >
          <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-red-500/20 to-orange-500/20 border border-red-500/30 flex items-center justify-center">
            <ServerOff className="w-10 h-10 text-red-400" />
          </div>
          <h2 className="text-2xl font-bold text-white mb-2">서버 오프라인</h2>
          <p className="text-gray-400">
            마인크래프트 서버가 현재 오프라인 상태입니다.<br />
            서버가 시작되면 월드 정보를 확인할 수 있습니다.
          </p>
        </motion.div>
      </div>
    );
  }

  return (
    <div className="min-h-screen p-4 md:p-6 lg:p-8">
      <div className="max-w-4xl mx-auto">
        {/* 헤더 */}
        <div className="mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-white flex items-center gap-3">
            <Globe className="text-mc-green" />
            월드 정보
          </h1>
        </div>

        {/* 월드 카드 목록 */}
        {loading ? (
          <div className="flex items-center justify-center py-20">
            <div className="w-12 h-12 border-4 border-mc-green/30 border-t-mc-green rounded-full animate-spin" />
          </div>
        ) : worlds.length > 0 ? (
          <div className="grid gap-4">
            {worlds.map((world, index) => {
              const style = getDimensionStyle(world.dimension);
              return (
                <motion.div
                  key={world.dimension}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: index * 0.1, duration: 0.3 }}
                  className={`glow-card rounded-xl p-5 bg-gradient-to-br ${style.gradient} ${style.border}`}
                >
                  <div className="flex flex-col gap-4">
                    {/* 상단: 월드 이름 & 날씨/시간 */}
                    <div className="flex flex-wrap items-start justify-between gap-3">
                      <div>
                        <h2 className={`text-xl font-bold ${style.text}`}>{world.displayName}</h2>
                        <div className="flex items-center gap-2 text-gray-400 text-sm mt-1">
                          <Users size={14} />
                          <span>{world.playerCount}명 접속 중</span>
                        </div>
                      </div>

                      <div className="flex flex-wrap items-center gap-2">
                        <div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-lg">
                          <WeatherIcon type={world.weather?.type} />
                          <span className="text-white font-medium text-sm">{world.weather?.displayName}</span>
                        </div>
                        <div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-lg text-white text-sm">
                          <Clock size={14} className="text-gray-400" />
                          <span className="font-medium">{formatTime(world.time?.dayTime || 0)}</span>
                          <span className="text-gray-500 text-xs">(Day {world.time?.day || 1})</span>
                        </div>
                      </div>
                    </div>


                    {/* 하단: 접속 중인 플레이어 목록 */}
                    {world.players && world.players.length > 0 && (
                      <div className="pt-3 border-t border-white/10">
                        <div className="flex flex-wrap gap-3">
                          {world.players.map((player) => (
                            <div 
                              key={player.uuid}
                              className={`flex items-center gap-3 bg-white/5 rounded-xl ${isMobile ? 'p-2' : 'p-3'}`}
                            >
                              {/* 모바일: 머리만, PC: 전신 */}
                              <img 
                                src={isMobile 
                                  ? `https://mc-heads.net/avatar/${player.name}/40`
                                  : `https://mc-heads.net/body/${player.name}/60`
                                }
                                alt={player.name}
                                className={isMobile ? 'w-10 h-10 rounded' : 'h-16 w-auto'}
                              />
                              <div>
                                <p className={`text-white font-semibold ${isMobile ? 'text-sm' : ''}`}>{player.name}</p>
                                <div className={`flex items-center gap-1 text-gray-400 mt-0.5 ${isMobile ? 'text-xs' : 'text-sm'}`}>
                                  <MapPin size={isMobile ? 10 : 12} />
                                  <span>{player.x}, {player.y}, {player.z}</span>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {world.playerCount === 0 && (
                      <div className="text-gray-500 text-sm pt-3 border-t border-white/10">
                        현재 접속 중인 플레이어가 없습니다
                      </div>
                    )}
                  </div>
                </motion.div>
              );
            })}
          </div>
        ) : (
          <div className="text-center py-20 text-gray-400">
            <Globe size={48} className="mx-auto mb-4 opacity-50" />
            <p>월드 정보를 불러올 수 없습니다.</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default WorldsPage;