import React, { useEffect, useState } from 'react';
import { Button, Layout, Menu, Typography } from 'antd';
import 'antd/dist/antd.css';
import {
	DashboardOutlined,
	KeyOutlined,
	ReadOutlined,
	RightOutlined,
	UnorderedListOutlined,
	UserOutlined,
	EditOutlined,
	StarOutlined,
	FileTextOutlined,
	PlusOutlined,
	PlayCircleOutlined,
	ClockCircleOutlined,
	StopOutlined,
	FileOutlined,
	ExperimentOutlined,
	CalendarOutlined,
	PlusSquareOutlined,
	TeamOutlined,
	BuildOutlined,
	SolutionOutlined,
} from '@ant-design/icons';
import { Link, useLocation } from 'react-router-dom';
import { authenticationService } from '../../_services';

import { ReactComponent as DashboardIcon } from '../assets/image/sider-icon/dashboard.svg';
import { ReactComponent as QuestionIcon } from '../assets/image/sider-icon/question.svg';
import { ReactComponent as QuizIcon } from '../assets/image/sider-icon/quizexam.svg';
import { ReactComponent as PracticeIcon } from '../assets/image/sider-icon/practice.svg';
import { ReactComponent as BatchIcon } from '../assets/image/sider-icon/batch.svg';
import { ReactComponent as ClassesIcon } from '../assets/image/sider-icon/classes.svg';
import { ReactComponent as PerfIcon } from '../assets/image/sider-icon/performance.svg';

import OdiSVG from '../assets/image/GrayscalePKLogo.svg';
import './Main.css';
import Sidebar from '../Sidebar';
import MediaQuery from 'react-responsive';

const { SubMenu } = Menu;
const { Sider } = Layout;

export function Siderc() {
	const [collapse, setCollapse] = useState(false);
	const [openKeys, setOpenKeys] = useState([]);
	const location = useLocation();
	const currentUser = authenticationService.currentUserValue;

	// 🗺️ Map route -> submenu key
	const submenuMap = {
		liveExam: 'quiz',
		liveExams: 'quiz',
		upcomingExam: 'quiz',
		upcomingExams: 'quiz',
		expiredExams: 'quiz',
		draftExams: 'quiz',
		createExam: 'quiz',

		createPractise: 'practice',
		draftPractise: 'practice',
		livePractise: 'practice',
		upcomingPractise: 'practice',

		createbatch: 'batches',
		viewbatch: 'batches',

		class: 'classes',
		viewclass: 'classes',
	};

	const pathSegments = location.pathname.split('/');
	const currentPath = pathSegments[pathSegments.length - 1];

	useEffect(() => {
		const submenuKey = submenuMap[currentPath];
		if (submenuKey) setOpenKeys([submenuKey]);
		else setOpenKeys([]);
	}, [currentPath]);

	const subMenuToggle = ({ key }) => {
		setOpenKeys((prev) => (prev.includes(key) ? [] : [key]));
	};

	return (
		<Sidebar
			className="main-sider-menu"
			collapse={collapse}
			control={() => setCollapse((prev) => !prev)}
			otherStyles={{
				borderTopRightRadius: '40px',
				borderBottomRightRadius: '40px',
			}}
		>
			<MediaQuery maxWidth={992}>
				<Button
					type="text"
					data-collapse-check={collapse ? '0' : '1'}
					className="slider-trigger-button"
					onClick={() => setCollapse((prev) => !prev)}
				>
					<RightOutlined />
				</Button>
			</MediaQuery>

			<Sider breakpoint="lg" collapsed={false} className="sidebar">
				<div className="logo">
					<a className="center-flex ml-3-5">
						<img src={OdiSVG} alt="PracticeKea" style={{ height: '50%' }} />
						<Typography.Title
							level={4}
							style={{
								marginBlock: 0,
								marginLeft: 10,
								color: '#fff',
							}}
						>
							PracticeKea
						</Typography.Title>
					</a>
				</div>

				{currentUser?.role_id !== 4 ? (
					<Menu
						mode="inline"
						selectedKeys={[currentPath]}
						openKeys={openKeys}
						onOpenChange={setOpenKeys}
						style={{ height: '100%' }}
					>
						<Menu.Item key="dashboard" icon={<DashboardIcon />}>
							<Link to="/dashboard">Dashboard</Link>
						</Menu.Item>

						{/* 🧾 Questions Section */}
						<SubMenu
							key="question"
							icon={<QuestionIcon />}
							title="Question"
							onTitleClick={subMenuToggle}
						>
							{currentUser?.role_id === 2 && (
								<Menu.Item key="allQuestions" icon={<UnorderedListOutlined />}>
									<Link to="/allQuestions">All Questions</Link>
								</Menu.Item>
							)}
							<Menu.Item key="myQuestions" icon={<UserOutlined />}>
								<Link to="/myQuestions">My Questions</Link>
							</Menu.Item>
							<Menu.Item key="addQuestion" icon={<EditOutlined />}>
								<Link to="/addQuestion">Create Question</Link>
							</Menu.Item>
							<Menu.Item key="bookmarkQuestions" icon={<StarOutlined />}>
								<Link to="/bookmarkQuestions">Bookmarked</Link>
							</Menu.Item>
							<Menu.Item key="draftQuestions" icon={<FileTextOutlined />}>
								<Link to="/draftQuestions">Draft Questions</Link>
							</Menu.Item>
						</SubMenu>

						{/* 🧩 Quiz Section */}
						<SubMenu
							key="quiz"
							icon={<QuizIcon />}
							title="Quiz/Exam"
							onTitleClick={subMenuToggle}
						>
							<Menu.Item key="createExam" icon={<PlusOutlined />}>
								<Link to="/createExam">Create Exam</Link>
							</Menu.Item>
							<Menu.Item key="liveExam" icon={<PlayCircleOutlined />}>
								<Link to="/liveExam">Live Exams</Link>
							</Menu.Item>
							<Menu.Item key="upcomingExam" icon={<ClockCircleOutlined />}>
								<Link to="/upcomingExam">Upcoming Exams</Link>
							</Menu.Item>
							<Menu.Item key="expiredExams" icon={<StopOutlined />}>
								<Link to="/expiredExams">Expired Exams</Link>
							</Menu.Item>
							<Menu.Item key="draftExams" icon={<FileOutlined />}>
								<Link to="/draftExams">Draft Exams</Link>
							</Menu.Item>
						</SubMenu>

						{/* 🧠 Practice Section */}
						<SubMenu
							key="practice"
							icon={<PracticeIcon />}
							title="Practice"
							onTitleClick={subMenuToggle}
						>
							<Menu.Item key="createPractise" icon={<ExperimentOutlined />}>
								<Link to="/createPractise">Create Practise</Link>
							</Menu.Item>
							<Menu.Item key="draftPractise" icon={<FileTextOutlined />}>
								<Link to="/draftPractise">Draft Practises</Link>
							</Menu.Item>
							<Menu.Item key="livePractise" icon={<PlayCircleOutlined />}>
								<Link to="/livePractise">Live Practises</Link>
							</Menu.Item>
							<Menu.Item key="upcomingPractise" icon={<CalendarOutlined />}>
								<Link to="/upcomingPractise">Upcoming Practises</Link>
							</Menu.Item>
						</SubMenu>

						{/* 🧱 Batch Section */}
						{currentUser?.role_id === 2 && (
							<SubMenu
								key="batches"
								icon={<BatchIcon />}
								title="Batch"
								onTitleClick={subMenuToggle}
							>
								<Menu.Item key="createbatch" icon={<PlusSquareOutlined />}>
									<Link to="/createbatch">Create Batch</Link>
								</Menu.Item>
								<Menu.Item key="viewbatch" icon={<TeamOutlined />}>
									<Link to="/viewbatch">View All Batch</Link>
								</Menu.Item>
							</SubMenu>
						)}

						{/* 🏫 Classes Section */}
						{currentUser?.role_id === 2 && (
							<SubMenu
								key="classes"
								icon={<ClassesIcon />}
								title="Classes"
								onTitleClick={subMenuToggle}
							>
								<Menu.Item key="class" icon={<BuildOutlined />}>
									<Link to="/class">Create Class</Link>
								</Menu.Item>
								<Menu.Item key="viewclass" icon={<SolutionOutlined />}>
									<Link to="/viewclass">View All Class</Link>
								</Menu.Item>
							</SubMenu>
						)}

						{/* 📊 Performance */}
						<SubMenu
							key="performance"
							icon={<PerfIcon />}
							title="Performance"
							onTitleClick={subMenuToggle}
						></SubMenu>
					</Menu>
				) : (
					// ---------------------- STUDENT SIDEBAR ----------------------
					<Menu
						mode="inline"
						selectedKeys={[currentPath]}
						openKeys={openKeys}
						onOpenChange={setOpenKeys}
						style={{ height: '100%', borderRight: '0' }}
					>
						<Menu.Item key="dashboard" icon={<DashboardOutlined />}>
							<Link to="/dashboard">Dashboard</Link>
						</Menu.Item>

						<SubMenu
							key="quiz"
							icon={<KeyOutlined />}
							title="Quiz/Exam"
							onTitleClick={subMenuToggle}
						>
							<Menu.Item key="liveExams" icon={<PlayCircleOutlined />}>
								<Link to="/liveExams">Live Exams</Link>
							</Menu.Item>
							<Menu.Item key="upcomingExams" icon={<ClockCircleOutlined />}>
								<Link to="/upcomingExams">Upcoming Exams</Link>
							</Menu.Item>
						</SubMenu>
					</Menu>
				)}
			</Sider>
		</Sidebar>
	);
}
