import { Link } from 'react-router-dom';
import { useThemeContext } from '../contexts/ThemeContext';

const sections = [
    {
        title: 'S&P Collector',
        description: 'S&P 배치 수집 관리',
        detail: '대시보드, 실행 이력, 재수집 이력, 작업 관리, 스케줄, 타임라인',
        path: '/dashboard',
        icon: '🔄',
        iconClass: 'gc-card-icon',
        menuCount: 6,
    },
    {
        title: 'S&P Bypass',
        description: 'S&P Bypass API 관리',
        detail: 'API 등록, 코드 생성 관리, 테스트',
        path: '/bypass-catalog',
        icon: '🔗',
        iconClass: 'gc-card-icon gc-card-icon-guide',
        menuCount: 1,
    },
    {
        title: 'S&P Risk & Compliance',
        description: 'S&P 위험 지표 및 규정 준수',
        detail: '위험 지표 및 규정 준수 가이드, 변경 이력 조회',
        path: '/risk-compliance-history',
        icon: '⚖️',
        iconClass: 'gc-card-icon gc-card-icon-nexus',
        menuCount: 2,
    },
];

export default function MainMenu() {
    const { theme, toggle } = useThemeContext();

    return (
        <div className="min-h-[70vh] flex flex-col items-center justify-center">
            {/* 헤더 */}
            <div className="text-center mb-10">
                <h1 className="text-3xl font-bold text-wing-text mb-2">S&P Data Platform</h1>
                <p className="text-sm text-wing-muted">해양 데이터 통합 관리 플랫폼</p>
            </div>

            {/* 섹션 카드 */}
            <div className="gc-cards">
                {sections.map((section) => (
                    <Link key={section.path} to={section.path} className="gc-card">
                        <div className={section.iconClass}>
                            <span className="text-5xl">{section.icon}</span>
                        </div>
                        <h3>{section.title}</h3>
                        <p>{section.description}<br />{section.detail}</p>
                    </Link>
                ))}
            </div>

            {/* 테마 토글 */}
            <button
                onClick={toggle}
                className="mt-8 px-3 py-1.5 rounded-lg text-sm bg-wing-card text-wing-muted
                    hover:text-wing-text border border-wing-border transition-colors"
                title={theme === 'dark' ? '라이트 모드' : '다크 모드'}
            >
                {theme === 'dark' ? '☀️ 라이트 모드' : '🌙 다크 모드'}
            </button>
        </div>
    );
}