import React, { useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import LogoDM from "../../../assets/icons/LogoDM.svg";
import { BiBarChartAlt2 } from "react-icons/bi";
import { AiOutlinePieChart } from "react-icons/ai";
import { PiCoffee } from "react-icons/pi";
import { HiOutlineLogout } from "react-icons/hi";
import { FiMenu, FiX } from "react-icons/fi";

const Sidebar = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const [isOpen, setIsOpen] = useState(false);

    const isActive = (path) => location.pathname === path;

    const handleLogout = () => {
        try {
            localStorage.removeItem('accessToken');
            localStorage.removeItem('refreshToken');
            localStorage.removeItem('token');
            localStorage.removeItem('adminInfo');

            console.log('Tokens cleared from localStorage');
            console.log('Current token:', localStorage.getItem('token'));

            navigate('/login');
        } catch (error) {
            console.error('Logout error:', error);
            navigate('/login');
        }
    };

    const closeSidebar = () => setIsOpen(false);

    return (
        <>
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="sm:hidden fixed top-3 right-3 z-[70] bg-[#7F4629] text-white p-2.5 rounded-lg shadow-lg"
                aria-label="Toggle menu"
            >
                {isOpen ? <FiX className="w-5 h-5" /> : <FiMenu className="w-5 h-5" />}
            </button>

            {isOpen && (
                <div
                    className="sm:hidden fixed inset-0 bg-black/50 z-[60]"
                    onClick={closeSidebar}
                />
            )}

            <aside
                dir="rtl"
                className={`
                    fixed top-0 right-0 z-[65] 
                    h-screen w-[260px] 
                    flex flex-col 
                    bg-[#EFEEEE] 
                    rounded-tl-2xl rounded-bl-2xl 
                    shadow-xl border-l border-[#D9CAB3]
                    transition-transform duration-300 ease-in-out
                    ${isOpen ? 'translate-x-0' : 'translate-x-full'}
                    sm:translate-x-0 sm:w-[220px]
                `}
            >
                <div className="flex justify-center mt-5 mb-2">
                    <img src={LogoDM} className="h-10 w-10 sm:h-12 sm:w-12" alt="Logo" />
                </div>

                <nav className="flex-1 px-3 mt-6 space-y-3 overflow-y-auto">
                    <Link
                        to="/dashboard"
                        onClick={closeSidebar}
                        className={`group flex items-center gap-2.5 rounded-lg p-2.5 transition-all duration-200 ${
                            isActive("/dashboard")
                                ? "bg-[#7F4629] shadow-md"
                                : "hover:bg-[#7F4629]"
                        }`}
                    >
                        <BiBarChartAlt2
                            className={`w-5 h-5 flex-shrink-0 transition-colors ${
                                isActive("/dashboard")
                                    ? "text-white"
                                    : "text-[#402E32] group-hover:text-white"
                            }`}
                        />
                        <span
                            className={`text-sm font-medium transition-colors ${
                                isActive("/dashboard")
                                    ? "text-white"
                                    : "text-[#402E32] group-hover:text-white"
                            }`}
                        >
                            داشبورد
                        </span>
                    </Link>

                    <Link
                        to="/cafe-management"
                        onClick={closeSidebar}
                        className={`group flex items-center gap-2.5 rounded-lg p-2.5 transition-all duration-200 ${
                            isActive("/cafe-management")
                                ? "bg-[#7F4629] shadow-md"
                                : "hover:bg-[#7F4629]"
                        }`}
                    >
                        <PiCoffee
                            className={`w-5 h-5 flex-shrink-0 transition-colors ${
                                isActive("/cafe-management")
                                    ? "text-white"
                                    : "text-[#402E32] group-hover:text-white"
                            }`}
                        />
                        <span
                            className={`text-sm font-medium transition-colors ${
                                isActive("/cafe-management")
                                    ? "text-white"
                                    : "text-[#402E32] group-hover:text-white"
                            }`}
                        >
                            مدیریت کافه ها
                        </span>
                    </Link>

                    <Link
                        to="/stats"
                        onClick={closeSidebar}
                        className={`group flex items-center gap-2.5 rounded-lg p-2.5 transition-all duration-200 ${
                            isActive("/stats")
                                ? "bg-[#7F4629] shadow-md"
                                : "hover:bg-[#7F4629]"
                        }`}
                    >
                        <AiOutlinePieChart
                            className={`w-5 h-5 flex-shrink-0 transition-colors ${
                                isActive("/stats")
                                    ? "text-white"
                                    : "text-[#402E32] group-hover:text-white"
                            }`}
                        />
                        <span
                            className={`text-sm font-medium transition-colors ${
                                isActive("/stats")
                                    ? "text-white"
                                    : "text-[#402E32] group-hover:text-white"
                            }`}
                        >
                            آمار و تحلیل
                        </span>
                    </Link>
                </nav>

                <div className="p-3 border-t border-[#D9CAB3]">
                    <button
                        onClick={() => {
                            handleLogout();
                            closeSidebar();
                        }}
                        className="group flex items-center gap-2.5 rounded-lg p-2.5 transition-all duration-200 hover:bg-[#7F4629] w-full"
                    >
                        <HiOutlineLogout className="w-5 h-5 flex-shrink-0 text-[#402E32] transition-colors group-hover:text-white" />
                        <span className="text-sm text-[#402E32] font-medium transition-colors group-hover:text-white">
                            خروج
                        </span>
                    </button>
                </div>
            </aside>
        </>
    );
};

export default Sidebar;