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

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { Shield, LogOut, Settings, Server, Users, Loader2 } from 'lucide-react';

export default function Admin() {
  const { isLoggedIn, isAdmin, user, loading, logout } = useAuth();
  const navigate = useNavigate();

  // 권한 확인
  useEffect(() => {
    if (!loading) {
      if (!isLoggedIn) {
        navigate('/login');
      } else if (!isAdmin) {
        navigate('/');
      }
    }
  }, [isLoggedIn, isAdmin, loading, navigate]);

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  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 null;
  }

  return (
    <div className="p-6 max-w-4xl mx-auto">
      {/* 헤더 */}
      <div className="flex items-center justify-between mb-8">
        <div className="flex items-center gap-3">
          <div className="p-3 rounded-xl bg-yellow-500/20 border border-yellow-500/30">
            <Shield className="w-6 h-6 text-yellow-500" />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-white">관리자 페이지</h1>
            <p className="text-sm text-zinc-400">서버 관리 및 설정</p>
          </div>
        </div>
        
        <button
          onClick={handleLogout}
          className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg transition-colors"
        >
          <LogOut className="w-4 h-4" />
          로그아웃
        </button>
      </div>

      {/* 사용자 정보 */}
      <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 mb-6">
        <h2 className="text-lg font-semibold text-white mb-4">로그인 정보</h2>
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <span className="text-zinc-500">이름</span>
            <p className="text-white mt-1">{user?.name || '-'}</p>
          </div>
          <div>
            <span className="text-zinc-500">이메일</span>
            <p className="text-white mt-1">{user?.email}</p>
          </div>
        </div>
      </div>

      {/* 관리 기능 카드 */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* 서버 상태 */}
        <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
          <div className="flex items-center gap-3 mb-4">
            <Server className="w-5 h-5 text-mc-green" />
            <h2 className="text-lg font-semibold text-white">서버 상태</h2>
          </div>
          <p className="text-zinc-400 text-sm">
            마인크래프트 서버 상태 모니터링 및 관리
          </p>
          <div className="mt-4 py-2 px-3 bg-mc-green/10 border border-mc-green/20 rounded-lg text-mc-green text-sm inline-block">
            정상 작동 중
          </div>
        </div>

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

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