'use client';

import { useState } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { useAuth } from '@/lib/hooks';
import {
    HomeIcon,
    NewspaperIcon,
    UserGroupIcon,
    MapIcon,
    ClockIcon,
    DocumentTextIcon,
    ChatBubbleLeftRightIcon,
    Cog6ToothIcon,
    ArrowLeftOnRectangleIcon,
    Bars3Icon,
    XMarkIcon,
    UserCircleIcon,
    CalendarDaysIcon,
} from '@heroicons/react/24/outline';

const menuItems = [
    { name: 'Dashboard', href: '/admin/dashboard', icon: HomeIcon },
    { name: 'Heroes', href: '/admin/heroes', icon: UserCircleIcon },
    { name: 'News', href: '/admin/news', icon: NewspaperIcon },
    { name: 'Members TBM', href: '/admin/tbm', icon: UserGroupIcon },
    { name: 'Regions', href: '/admin/region', icon: MapIcon },
    { name: 'History', href: '/admin/histories', icon: ClockIcon },
    { name: 'Chairman', href: '/admin/chairman', icon: UserCircleIcon },
    { name: 'Vision & Mission', href: '/admin/vision-mission', icon: DocumentTextIcon },
    { name: 'Periods', href: '/admin/period', icon: CalendarDaysIcon },
    { name: 'Organization', href: '/admin/organization-structure', icon: UserGroupIcon },
    { name: 'FAQs', href: '/admin/faq', icon: ChatBubbleLeftRightIcon },
    { name: 'Contact', href: '/admin/contact', icon: ChatBubbleLeftRightIcon },
    { name: 'Settings', href: '/admin/config', icon: Cog6ToothIcon },
];

export default function AdminLayout({ children }: { children: React.ReactNode }) {
    const pathname = usePathname();
    const { user, logout } = useAuth();
    const [sidebarOpen, setSidebarOpen] = useState(false);

    return (
        <div className="min-h-screen bg-gray-100">
            <nav className="bg-white shadow-sm fixed w-full top-0 z-50">
                <div className="px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-between h-16">
                        <div className="flex items-center">
                            <button
                                onClick={() => setSidebarOpen(!sidebarOpen)}
                                className="lg:hidden p-2 rounded-md text-gray-400 hover:text-main hover:bg-gray-100"
                            >
                                {sidebarOpen ? (
                                    <XMarkIcon className="h-6 w-6" />
                                ) : (
                                    <Bars3Icon className="h-6 w-6" />
                                )}
                            </button>
                            <div className="flex-shrink-0 flex items-center ml-4 lg:ml-0">
                                <span className="text-xl font-bold text-brand">Admin Panel</span>
                            </div>
                        </div>

                        <div className="flex items-center space-x-4">
                            {user && (
                                <div className="text-right hidden sm:block">
                                    <p className="text-sm font-medium text-main">{user.name}</p>
                                    <p className="text-xs text-sec">{user.role}</p>
                                </div>
                            )}
                            <button
                                onClick={logout}
                                className="flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium text-white bg-brand hover:bg-orange-600 transition-all"
                            >
                                <ArrowLeftOnRectangleIcon className="h-5 w-5" />
                                <span className="hidden sm:inline">Logout</span>
                            </button>
                        </div>
                    </div>
                </div>
            </nav>

            <div className="flex pt-16">
                <aside
                    className={`
                    fixed top-16 inset-y-0 left-0 bottom-0 z-40 w-64 bg-white shadow-lg
                    transform transition-transform duration-300 ease-in-out
                    ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
                `}
                >
                    <div className="h-full overflow-y-auto py-6">
                        <nav className="px-3 space-y-1">
                            {menuItems.map((item) => {
                                const isActive = pathname === item.href;
                                return (
                                    <Link
                                        key={item.name}
                                        href={item.href}
                                        onClick={() => setSidebarOpen(false)}
                                        className={`
                                            flex items-center space-x-3 px-4 py-3 rounded-lg text-sm font-medium transition-all
                                            ${isActive
                                                ? 'bg-brand text-white shadow-md'
                                                : 'text-sec hover:bg-orange-50 hover:text-brand'
                                            }
                    `}
                                    >
                                        <item.icon className="h-5 w-5" />
                                        <span>{item.name}</span>
                                    </Link>
                                );
                            })}
                        </nav>
                    </div>
                </aside>

                {sidebarOpen && (
                    <div
                        className="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden"
                        onClick={() => setSidebarOpen(false)}
                    ></div>
                )}

                <main className="flex-1 overflow-x-hidden lg:ml-64">
                    <div className="p-6 lg:p-8">{children}</div>
                </main>
            </div>
        </div>
    );
}