import React, { useState, useEffect } from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { Spin } from 'antd';
import { fetchUserList } from '../api/posts';
import '../style/SuperAdmin.css';

export default function SuperAdmin() {
  const SUPERADMIN_USER_ID = 3;
  const [loading, setLoading] = useState(true);
  const [hasPermission, setHasPermission] = useState(true);

  useEffect(() => {
    async function check() {
      try {
        await fetchUserList(SUPERADMIN_USER_ID);
      } catch (e) {
        if (e.message === 'Unauthorized') {
          setHasPermission(false);
        } else {
          console.error(e);
        }
      } finally {
        setLoading(false);
      }
    }
    check();
  }, []);

  if (loading) return <Spin spinning tip="加载中…" style={{ width: '100%', marginTop: 100 }} />;
  if (!hasPermission) return <div style={{ textAlign: 'center', marginTop: 100 }}>权限不足</div>;

  return (
    <div className="super-admin-container">
      <aside className="super-admin-sidebar">
        <h2>超级管理员</h2>
        <nav>
          <ul>
            <li>
              <NavLink 
                to="users" 
                end 
                className={({ isActive }) => isActive ? 'active' : ''}
              >
                用户管理
              </NavLink>
            </li>
            <li>
              <NavLink 
                to="dashboard" 
                className={({ isActive }) => isActive ? 'active' : ''}
              >
                平台运行监控
              </NavLink>
            </li>
          </ul>
        </nav>
      </aside>

      <main className="super-admin-content">
        <Outlet />
      </main>
    </div>
  );
}