import { Layout, Menu, Avatar, Dropdown } from 'antd';
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
import {
    LayoutDashboard,
    ListTree,
    Settings,
    Bell,
    Gamepad2,
    Wallet,
    CreditCard,
    TicketPercent,
    Users,
    Gift,
    Wrench,
} from 'lucide-react';

import logo from '../assets/logo.png';
import { useStore } from '../hooks/useStore';
import { useEffect } from 'react';

const { Header, Sider, Content } = Layout;

const AdminLayout = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const { dataUser, dataWebsite } = useStore();

    useEffect(() => {
        // If dataUser is loaded (check some property) and not admin, redirect
        // Or if dataUser is empty but we expect it to be populated.
        // Assuming dataUser is populated by Provider. If empty initially, this might redirect prematurely.
        // But Provider fetches auth on mount.
        // Better to check if logged in cookie exists?

        // Wait for dataUser to be potentially populated?
        // Let's assume if there is a 'logged' cookie, dataUser should arrive.
        // A simple check: if dateUser.isAdmin === false, redirect.

        if (dataUser.isAdmin === false) {
            navigate('/');
        }
    }, [dataUser, navigate]);

    const items = [
        {
            key: '/admin',
            icon: <LayoutDashboard size={20} />,
            label: <Link to="/admin">Thống kê</Link>,
        },
        {
            key: '/admin/categories',
            icon: <ListTree size={20} />,
            label: <Link to="/admin/categories">Quản lý danh mục</Link>,
        },
        {
            key: '/admin/products',
            icon: <Gamepad2 size={20} />,
            label: <Link to="/admin/products">Quản lý tài khoản</Link>,
        },
        {
            key: '/admin/deposits',
            icon: <Wallet size={20} />,
            label: <Link to="/admin/deposits">Quản lý nạp tiền</Link>,
        },
        {
            key: '/admin/card-types',
            icon: <CreditCard size={20} />,
            label: <Link to="/admin/card-types">Quản lý loại thẻ</Link>,
        },
        {
            key: '/admin/discounts',
            icon: <TicketPercent size={20} />,
            label: <Link to="/admin/discounts">Quản lý giảm giá</Link>,
        },
        {
            key: '/admin/lucky-wheel',
            icon: <Gift size={20} />,
            label: <Link to="/admin/lucky-wheel">Vòng quay may mắn</Link>,
        },
        {
            key: '/admin/notifications',
            icon: <Bell size={20} />,
            label: <Link to="/admin/notifications">Quản lý thông báo</Link>,
        },
        {
            key: '/admin/users',
            icon: <Users size={20} />,
            label: <Link to="/admin/users">Quản lý người dùng</Link>,
        },
        {
            key: '/admin/system-config',
            icon: <Wrench size={20} />,
            label: <Link to="/admin/system-config">Cấu hình hệ thống</Link>,
        },
    ];

    return (
        <Layout className="min-h-screen" hasSider>
            <Sider theme="light" width={260} className="border-r border-gray-200 !fixed left-0 top-0 bottom-0 h-screen overflow-y-auto z-20">
                <div className="h-16 flex items-center justify-center border-b border-gray-200">
                    <h1 className="text-xl font-extrabold text-blue-600 uppercase">
                        <img src={`${dataWebsite?.logo}`} alt="logo" className="w-80 h-20" />
                    </h1>
                </div>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={[location.pathname]}
                    selectedKeys={[location.pathname]}
                    items={items}
                    className="border-0 py-4"
                />
            </Sider>
            <Layout className="ml-[260px]">
                <Header className="!bg-white h-16 border-b border-gray-200 px-6 flex items-center justify-between sticky top-0 z-10">
                    <h2 className="text-lg font-semibold text-gray-700">
                        {items.find((item) => item.key === location.pathname)?.label?.props?.children ||
                            'Admin Dashboard'}
                    </h2>

                    <div className="flex items-center gap-4">
                        <button className="p-2 text-gray-500 hover:bg-gray-100 rounded-full transition-colors relative">
                            <Bell size={20} />
                            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
                        </button>

                        <div className="flex items-center gap-3 pl-4 border-l border-gray-200">
                            <div className="text-right hidden sm:block">
                                <p className="text-sm font-semibold text-gray-700">Administrator</p>
                                <p className="text-xs text-green-500">Online</p>
                            </div>
                            <Avatar
                                src="https://ui-avatars.com/api/?name=Admin&background=0D8ABC&color=fff"
                                size="large"
                                className="cursor-pointer"
                            />
                        </div>
                    </div>
                </Header>
                <Content className="p-6 bg-slate-50 overflow-y-auto">
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
    );
};

export default AdminLayout;
