'use client';
import React, { useState, useEffect } from 'react';
import { Layout, Menu, Button, Drawer } from 'antd';
import { MenuOutlined } from '@ant-design/icons';
import Link from 'next/link';
import styles from './Header.module.scss';
import { useRouter, usePathname } from 'next/navigation';
import { useAuth } from '@/fsd/app/provider/AuthContext';

const { Header } = Layout;

const AppHeader: React.FC = () => {
	const router = useRouter();
	const pathname = usePathname();
	const { isAuthenticated, logout } = useAuth();
	const [currentKey, setCurrentKey] = useState('');
	const [drawerOpen, setDrawerOpen] = useState(false); // Заменяем visible на open
	const [isMobile, setIsMobile] = useState(false);

	useEffect(() => {
		if (pathname === '/create') {
			setCurrentKey('1');
		} else if (pathname === '/view') {
			setCurrentKey('2');
		} else if (pathname === '/search') {
			setCurrentKey('3');
		} else {
			setCurrentKey('');
		}
	}, [pathname]);

	useEffect(() => {
		const handleResize = () => {
			setIsMobile(window.innerWidth <= 580);
		};

		handleResize();
		window.addEventListener('resize', handleResize);

		return () => window.removeEventListener('resize', handleResize);
	}, []);

	const handleLogout = () => {
		logout();
		router.push('/login');
	};

	const handleLogoClick = () => {
		setCurrentKey('1');
		router.push('/create');
	};

	const showDrawer = () => {
		setDrawerOpen(true);
	};

	const closeDrawer = () => {
		setDrawerOpen(false);
	};

	const menuItems = [
		{
			key: '1',
			label: (
				<Link href='/create' className={styles.list_item}>
					Создание вакансии
				</Link>
			),
		},
		{
			key: '2',
			label: (
				<Link href='/view' className={styles.list_item}>
					Просмотр вакансий
				</Link>
			),
		},
		{
			key: '3',
			label: (
				<Link href='/search' className={styles.list_item}>
					Поиск резюме
				</Link>
			),
		},
	];

	return (
		<Header className={styles.header}>
			<div className={styles.logo} onClick={handleLogoClick}>
				MTUCI JOBS
			</div>

			{isAuthenticated && (
				<>
					{isMobile ? (
						<>
							<div className={styles.burgerIcon} onClick={showDrawer}>
								<MenuOutlined />
							</div>
							<Drawer
								title='Меню'
								placement='right'
								onClose={closeDrawer}
								open={drawerOpen} // Используем "open" вместо "visible"
							>
								<Menu
									mode='vertical'
									selectedKeys={[currentKey]}
									items={menuItems} // Передаем элементы меню сюда
									onClick={closeDrawer}
									className={styles.menuBurger}
								/>
								<Button
									type='primary'
									onClick={handleLogout}
									className={styles.logoutButtonBurger}
								>
									Выйти
								</Button>
							</Drawer>
						</>
					) : (
						<>
							<Menu
								theme='dark'
								mode='horizontal'
								selectedKeys={[currentKey]}
								items={menuItems}
								className={styles.menu}
							/>
							<Button
								type='primary'
								onClick={handleLogout}
								className={styles.logoutButton}
							>
								Выйти
							</Button>
						</>
					)}
				</>
			)}
		</Header>
	);
};

export default AppHeader;