import React 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";

const Sidebar = () => {
    const location = useLocation();
    const navigate = useNavigate();

    // چک کردن صفحه فعال
    const isActive = (path) => location.pathname === path;

    // تابع خروج
    const handleLogout = () => {
        localStorage.removeItem("token");
        navigate("/login");
    };

    return (
        <aside
            dir="rtl"
            className="fixed right-0 top-0 z-50 flex h-screen w-[220px] flex-col bg-[#EFEEEE] rounded-tl-3xl rounded-bl-3xl shadow-xl border-l border-[#D9CAB3]"
        >
            <div className="flex justify-center mt-6">
                <img src={LogoDM} className="h-12 w-12" alt="Logo" />
            </div>

            <nav className="w-[85%] mr-4 mt-8 space-y-4">
                {/* داشبورد */}
                <Link
                    to="/dashboard"
                    className={`group relative flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:shadow-md ${
                        isActive("/dashboard") ? "bg-[#7F4629] shadow-md" : "hover:bg-[#7F4629]"
                    }`}
                >
                    <BiBarChartAlt2
                        className={`w-6 h-6 transition-colors ${
                            isActive("/dashboard") ? "text-white" : "text-[#402E32] group-hover:text-white"
                        }`}
                    />
                    <span
                        className={`font-medium transition-colors ${
                            isActive("/dashboard") ? "text-white" : "text-[#402E32] group-hover:text-white"
                        }`}
                    >
            داشبورد
          </span>
                </Link>

                {/* مدیریت کافه‌ها */}
                <Link
                    to="/cafe-management"
                    className={`group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:shadow-md ${
                        isActive("/cafe-management") ? "bg-[#7F4629] shadow-md" : "hover:bg-[#7F4629]"
                    }`}
                >
                    <PiCoffee
                        className={`w-6 h-6 transition-colors ${
                            isActive("/cafe-management") ? "text-white" : "text-[#402E32] group-hover:text-white"
                        }`}
                    />
                    <span
                        className={`font-medium transition-colors ${
                            isActive("/cafe-management") ? "text-white" : "text-[#402E32] group-hover:text-white"
                        }`}
                    >
            مدیریت کافه ها
          </span>
                </Link>

                {/* آمار و تحلیل */}
                <Link
                    to="/stats"
                    className={`group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:shadow-md ${
                        isActive("/stats") ? "bg-[#7F4629] shadow-md" : "hover:bg-[#7F4629]"
                    }`}
                >
                    <AiOutlinePieChart
                        className={`w-6 h-6 transition-colors ${
                            isActive("/stats") ? "text-white" : "text-[#402E32] group-hover:text-white"
                        }`}
                    />
                    <span
                        className={`font-medium transition-colors ${
                            isActive("/stats") ? "text-white" : "text-[#402E32] group-hover:text-white"
                        }`}
                    >
            آمار و تحلیل
          </span>
                </Link>

                {/* خروج */}
                <button
                    onClick={handleLogout}
                    className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md mt-18 w-full text-right"
                >
                    <HiOutlineLogout className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
                    <span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
            خروج
          </span>
                </button>
            </nav>
        </aside>
    );
};

export default Sidebar;