import React, { useState, useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import { io } from 'socket.io-client';
import { ServerOff, Map } from 'lucide-react';

const WorldMapPage = ({ isMobile = false }) => {
  const [serverOnline, setServerOnline] = useState(null); // null = loading, true/false = 상태
  const socketRef = useRef(null);

  useEffect(() => {
    // 소켓 연결하여 서버 상태 확인
    const socket = io('/', {
      path: '/socket.io',
      transports: ['websocket', 'polling']
    });
    socketRef.current = socket;

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

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

  // 로딩 중
  if (serverOnline === null) {
    return (
      <div 
        className="w-full flex items-center justify-center bg-mc-dark" 
        style={{ height: isMobile ? 'calc(100dvh - 56px)' : '100dvh' }}
      >
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-mc-green/30 border-t-mc-green rounded-full animate-spin mx-auto mb-4" />
          <p className="text-gray-400">서버 상태 확인 중...</p>
        </div>
      </div>
    );
  }

  // 서버 오프라인
  if (!serverOnline) {
    return (
      <div 
        className="w-full flex items-center justify-center bg-mc-dark" 
        style={{ height: isMobile ? 'calc(100dvh - 56px)' : '100dvh' }}
      >
        <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 mb-6">
            마인크래프트 서버가 현재 오프라인 상태입니다.<br />
            서버가 시작되면 월드맵을 확인할 수 있습니다.
          </p>
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 rounded-lg text-gray-500 text-sm">
            <Map size={16} />
            월드맵 이용 불가
          </div>
        </motion.div>
      </div>
    );
  }

  // 서버 온라인 - BlueMap 표시
  return (
    <div 
      className="w-full" 
      style={{ 
        height: isMobile ? 'calc(100dvh - 56px)' : '100dvh'
      }}
    >
      {/* BlueMap iframe - 전체 화면 */}
      <motion.div 
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.3 }}
        className="h-full w-full"
      >
        <iframe 
          src="/map/"
          title="BlueMap 3D World Map"
          className="w-full h-full border-none"
          allowFullScreen
        />
      </motion.div>
    </div>
  );
};

export default WorldMapPage;
