import { Link } from 'react-router-dom';
import { Dropdown } from 'antd';
import {
    LayoutGrid,
    History,
    Settings,
    User,
    CreditCard,
    RefreshCcw,
    Newspaper,
    ChevronDown,
    LogIn,
    UserPlus,
} from 'lucide-react';
import logo from '../assets/logo.png';
import avatar from '../assets/av-1.svg';
import { useStore } from '../hooks/useStore';
import { requestLogout } from '../config/UserRequest';

const Header = () => {
    const { dataUser, dataWebsite } = useStore();
    const isLoggedIn = dataUser && Object.keys(dataUser).length > 0;

    // Menu items configuration
    const navItems = [
        { label: 'Trang Chủ', icon: <LayoutGrid size={18} />, link: '/' },
        { label: 'Lịch Sử Mua Nick', icon: <History size={18} />, link: '/history/purchased' },
        // { label: 'Dịch Vụ Khác', icon: <Settings size={18} />, link: '/services/boosting' },
        { label: 'Tài Khoản', icon: <User size={18} />, link: '/profile' },
        { label: 'Nạp Tiền', icon: <CreditCard size={18} />, link: '/deposit/bank' },
        { label: 'Dòng Tiền', icon: <RefreshCcw size={18} />, link: '/history/transactions' },
        { label: 'Vòng Quay May Mắn', icon: <RefreshCcw size={18} />, link: '/lucky-wheel' },
    ];

    const handleLogout = async () => {
        try {
            await requestLogout();
            setTimeout(() => {
                window.location.reload();
            }, 1000);
            toast.success('Đăng xuất thành công!');
        } catch (error) {
            toast.error(error.response?.data?.message || 'Đăng xuất thất bại!');
        }
    };

    const userMenu = {
        items: [
            { key: '1', label: <Link to="/profile">Thông tin tài khoản</Link> },
            { key: '2', label: <Link to="/history/purchased">Lịch sử mua nick</Link> },
            { key: '3', label: <Link to="/deposit/card">Nạp tiền</Link> },
            {
                key: '4',
                label: (
                    <Link to="/" onClick={handleLogout} className="text-red-500">
                        Đăng xuất
                    </Link>
                ),
            },
        ],
    };

    return (
        <div className="w-full bg-white border-b border-gray-200 fixed top-0 z-50">
            <div className="container mx-auto px-4 h-16 flex items-center justify-between font-bold text-gray-600 text-[13px] uppercase tracking-wide">
                {/* Logo Section */}
                <Link to="/" className="flex-shrink-0 mr-8">
                    {/* Placeholder for the logo from the image "SHOPGAMERVN" */}
                    <div className="h-10 flex items-center">
                        <img src={`${dataWebsite?.logo}`} alt="Logo" className="h-full object-contain" />
                    </div>
                </Link>

                {/* Navigation Items */}
                <nav className="hidden xl:flex items-center space-x-6 flex-1 justify-center">
                    {navItems.map((item, index) => {
                        if (item.hasDropdown) {
                            return (
                                <Dropdown key={index} menu={{ items: item.items }} placement="bottom">
                                    <Link
                                        to={item.link}
                                        className="flex items-center gap-2 hover:text-blue-600 transition-colors py-2 cursor-pointer"
                                    >
                                        {item.icon}
                                        <span>{item.label}</span>
                                        <ChevronDown size={14} />
                                    </Link>
                                </Dropdown>
                            );
                        }
                        return (
                            <Link
                                key={index}
                                to={item.link}
                                className="flex items-center gap-2 hover:text-blue-600 transition-colors py-2"
                            >
                                {item.icon}
                                <span>{item.label}</span>
                            </Link>
                        );
                    })}
                </nav>

                {/* Right Side: Auth Buttons or User Profile */}
                <div className="flex items-center gap-4 ml-4">
                    {isLoggedIn ? (
                        <>
                            {/* Admin Panel Button */}
                            {dataUser?.isAdmin && (
                                <Link
                                    to="/admin"
                                    className="hidden sm:flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full hover:from-purple-600 hover:to-indigo-600 transition-all duration-200 shadow-md hover:shadow-lg"
                                >
                                    <Settings size={16} />
                                    <span className="normal-case font-medium text-sm">Admin Panel</span>
                                </Link>
                            )}
                            {/* User Profile Dropdown - When Logged In */}
                            <Dropdown menu={userMenu} placement="bottomRight">
                            <div className="flex items-center gap-2 cursor-pointer group">
                                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center overflow-hidden border border-blue-200">
                                    <img src={avatar} alt="Avatar" className="w-full h-full object-cover" />
                                </div>
                                <div className="flex flex-col items-start leading-tight">
                                    <div className="flex items-center gap-1">
                                        <span className="font-bold text-gray-700 group-hover:text-blue-600 transition-colors">
                                            {dataUser.fullName || 'User'}
                                        </span>
                                        <ChevronDown size={12} className="text-gray-400" />
                                    </div>
                                    <span className="text-red-500 font-bold text-xs">
                                        {dataUser.balance?.toLocaleString('vi-VN') || 0} đ
                                    </span>
                                </div>
                            </div>
                        </Dropdown>
                        </>
                    ) : (
                        /* Login/Register Buttons - When Not Logged In */
                        <div className="flex items-center gap-3">
                            <Link
                                to="/login"
                                className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:text-blue-600 border border-gray-300 rounded-full hover:border-blue-400 transition-all duration-200"
                            >
                                <LogIn size={16} />
                                <span className="normal-case font-medium">Đăng nhập</span>
                            </Link>
                            <Link
                                to="/register"
                                className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-full hover:from-orange-600 hover:to-red-600 transition-all duration-200 shadow-md hover:shadow-lg"
                            >
                                <UserPlus size={16} />
                                <span className="normal-case font-medium">Đăng ký</span>
                            </Link>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default Header;
