import React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import PeopleIcon from '@mui/icons-material/People';
import SettingsIcon from '@mui/icons-material/Settings';
import ArticleIcon from '@mui/icons-material/Article';
import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
import ArchiveIcon from '@mui/icons-material/Archive';

const ADMIN_ITEMS = [
  { key: 'users', page: 'user-management', label: '사용자 관리', icon: PeopleIcon },
  { key: 'settings', page: 'system-settings', label: '시스템 설정', icon: SettingsIcon },
  { key: 'logs', page: 'system-logs', label: '시스템 로그', icon: ArticleIcon },
  { key: 'monitor', page: 'log-monitoring', label: '모니터링', icon: MonitorHeartIcon },
  { key: 'inactive', page: 'inactive-projects', label: '비활성 프로젝트', icon: ArchiveIcon },
];

export default function AdminSection({ user, navigateToPage }) {
  if (user?.role !== 'admin') return null;

  return (
    <>
      <Divider sx={{ my: 1 }} />
      <Box>
        <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 1.5, fontWeight: 600 }}>
          관리자 전용
        </Typography>
        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'repeat(2, 1fr)', sm: 'repeat(3, 1fr)', md: 'repeat(5, 1fr)' }, gap: 1.5 }}>
          {ADMIN_ITEMS.map(({ key, page, label, icon: Icon }) => (
            <Card key={key} variant="outlined" sx={{ transition: 'box-shadow 0.2s', '&:hover': { boxShadow: '0 2px 8px rgba(0,0,0,0.08)' } }}>
              <CardActionArea
                onClick={() => navigateToPage(page)}
                sx={{ p: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.75 }}
              >
                <Icon sx={{ fontSize: 24, color: 'text.secondary' }} />
                <Typography variant="body2" sx={{ fontWeight: 500, textAlign: 'center' }}>
                  {label}
                </Typography>
              </CardActionArea>
            </Card>
          ))}
        </Box>
      </Box>
    </>
  );
}
