/**
 * 관리자 페이지
 */

import { useEffect, useState } from 'react';
import { useNavigate, useLocation, Link } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { Shield, ArrowLeft, Settings, Server, Users, Loader2, User, Terminal, MessageSquare } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

export default function Admin({ isMobile = false }) {
  const { isLoggedIn, isAdmin, user, loading } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const [toast, setToast] = useState(null);

  // 권한 확인
  useEffect(() => {
    if (!loading) {
      if (!isLoggedIn) {
        navigate('/login', { state: { from: location.pathname } });
      } else if (!isAdmin) {
        setToast('관리자 권한이 필요합니다.');
        setTimeout(() => {
          navigate('/');
        }, 1500);
      }
    }
  }, [isLoggedIn, isAdmin, loading, navigate, location.pathname]);

  // 토스트 자동 숨기기
  useEffect(() => {
    if (toast) {
      const timer = setTimeout(() => setToast(null), 3000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <Loader2 className="w-8 h-8 text-mc-green animate-spin" />
      </div>
    );
  }

  if (!isLoggedIn || !isAdmin) {
    return (
      <>
        {/* 토스트 알림 */}
        <AnimatePresence>
          {toast && (
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 50 }}
              className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[200] bg-red-500/90 backdrop-blur-sm text-white px-6 py-3 rounded-xl text-center font-medium shadow-lg"
            >
              {toast}
            </motion.div>
          )}
        </AnimatePresence>
        <div className="flex items-center justify-center min-h-[60vh]">
          <Loader2 className="w-8 h-8 text-mc-green animate-spin" />
        </div>
      </>
    );
  }

  return (
    <div className="pb-8">
      {/* 모바일용 헤더 */}
      {isMobile && (
        <header className="bg-mc-dark border-b border-white/10 sticky top-0 z-50 backdrop-blur-xl">
          <div className="flex items-center h-14 px-4">
            <Link
              to="/"
              className="p-2 -ml-2 rounded-lg text-zinc-400 hover:text-white hover:bg-white/5 transition-colors"
            >
              <ArrowLeft size={20} />
            </Link>
            <div className="ml-2">
              <h1 className="text-lg font-bold text-white">관리자</h1>
              <p className="text-xs text-zinc-500">서버 관리 및 설정</p>
            </div>
          </div>
        </header>
      )}

      <main className={`max-w-4xl mx-auto px-4 sm:px-6 ${isMobile ? 'py-4' : 'py-8'} space-y-4 sm:space-y-6`}>
        {/* 데스크탑용 타이틀 */}
        {!isMobile && (
          <div className="mb-6">
            <h1 className="text-2xl font-bold text-white">관리자 페이지</h1>
            <p className="text-sm text-zinc-500 mt-1">서버 관리 및 설정</p>
          </div>
        )}

        {/* 관리자 정보 카드 */}
        <section className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
          <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
            <Shield size={20} className="text-yellow-500" />
            관리자 정보
          </h2>
          
          <div className="flex items-center gap-6">
            <div className="w-16 h-16 rounded-2xl bg-yellow-500/20 border border-yellow-500/30 flex items-center justify-center">
              <User size={32} className="text-yellow-500" />
            </div>
            
            <div className="flex-1 space-y-3">
              <div>
                <p className="text-sm text-zinc-500">닉네임</p>
                <p className="text-lg font-medium text-white">{user?.name || '-'}</p>
              </div>
              <div>
                <p className="text-sm text-zinc-500">이메일</p>
                <p className="text-white">{user?.email}</p>
              </div>
            </div>
          </div>
        </section>

        {/* 서버 관리 섹션 */}
        <section className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
          <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
            <Server size={20} className="text-mc-green" />
            서버 관리
          </h2>
          
          <div className="space-y-4">
            {/* 서버 명령어 */}
            <div className="p-4 bg-zinc-800/50 rounded-xl">
              <div className="flex items-center gap-3 mb-2">
                <Terminal size={18} className="text-zinc-400" />
                <p className="font-medium text-white">서버 명령어</p>
              </div>
              <p className="text-sm text-zinc-400 mb-3">
                마인크래프트 서버에 명령어를 전송합니다.
              </p>
              <div className="text-zinc-500 text-sm">
                추후 업데이트 예정
              </div>
            </div>

            {/* 공지 전송 */}
            <div className="p-4 bg-zinc-800/50 rounded-xl">
              <div className="flex items-center gap-3 mb-2">
                <MessageSquare size={18} className="text-zinc-400" />
                <p className="font-medium text-white">공지 전송</p>
              </div>
              <p className="text-sm text-zinc-400 mb-3">
                게임 내 모든 플레이어에게 공지를 전송합니다.
              </p>
              <div className="text-zinc-500 text-sm">
                추후 업데이트 예정
              </div>
            </div>
          </div>
        </section>

        {/* 플레이어 관리 섹션 */}
        <section className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
          <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
            <Users size={20} className="text-blue-400" />
            플레이어 관리
          </h2>
          
          <p className="text-sm text-zinc-400">
            접속 중인 플레이어 목록 및 관리 기능
          </p>
          <div className="mt-4 text-zinc-500 text-sm">
            추후 업데이트 예정
          </div>
        </section>

        {/* 설정 섹션 */}
        <section className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
          <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
            <Settings size={20} className="text-zinc-400" />
            설정
          </h2>
          
          <p className="text-sm text-zinc-400">
            대시보드 설정 및 구성 관리
          </p>
          <div className="mt-4 text-zinc-500 text-sm">
            추후 업데이트 예정
          </div>
        </section>
      </main>
    </div>
  );
}