import {
    ArrowLeftOnRectangleIcon,
    BanknotesIcon,
    BuildingOffice2Icon,
    CalendarDaysIcon,
    ChartBarIcon,
    ChatBubbleLeftEllipsisIcon,
    CreditCardIcon,
    DevicePhoneMobileIcon,
    DocumentTextIcon,
    HeartIcon,
    KeyIcon,
    StarIcon,
    TagIcon,
    UserGroupIcon,
    UsersIcon,
} from "@heroicons/react/24/outline";
import { NavLink, useNavigate } from "react-router-dom";
import { useAuthStore } from "../../stores/authStore";
import { useUiStore } from "../../stores/uiStore";

const sections = [
    {
        label: "عمومی",
        items: [
            { to: "/admin/dashboard", icon: ChartBarIcon, label: "داشبورد" },
            { to: "/admin/users", icon: UserGroupIcon, label: "کاربران" },
            { to: "/admin/doctors", icon: HeartIcon, label: "پزشکان" },
            {
                to: "/admin/clinics",
                icon: BuildingOffice2Icon,
                label: "کلینیک‌ها",
            },
        ],
    },
    {
        label: "مدیریت",
        items: [
            {
                to: "/admin/appointments",
                icon: CalendarDaysIcon,
                label: "نوبت‌ها",
            },
            { to: "/admin/payments", icon: CreditCardIcon, label: "پرداخت‌ها" },
            {
                to: "/admin/settlements",
                icon: BanknotesIcon,
                label: "تسویه‌حساب",
            },
        ],
    },
    {
        label: "محتوا",
        items: [
            {
                to: "/admin/comments",
                icon: ChatBubbleLeftEllipsisIcon,
                label: "نظرات",
            },
            { to: "/admin/ratings", icon: StarIcon, label: "امتیازها" },
            { to: "/admin/blogs", icon: DocumentTextIcon, label: "بلاگ" },
            { to: "/admin/sms", icon: DevicePhoneMobileIcon, label: "پیامک" },
        ],
    },
    {
        label: "سیستم",
        items: [
            { to: "/admin/categories", icon: TagIcon, label: "دسته‌بندی‌ها" },
            {
                to: "/admin/representations",
                icon: UsersIcon,
                label: "نمایندگان",
            },
            { to: "/admin/secretaries", icon: KeyIcon, label: "منشی‌ها" },
        ],
    },
];

interface Props {
    mobileOpen?: boolean;
    onMobileClose?: () => void;
}

export default function Sidebar({
    mobileOpen: _mobileOpen,
    onMobileClose: _onMobileClose,
}: Props) {
    const sidebarOpen = useUiStore((s) => s.sidebarOpen);
    const logout = useAuthStore((s) => s.logout);
    const navigate = useNavigate();

    return (
        <aside className="sidebar">
            {/* Brand */}
            <div className="sidebar-brand">
                <div className="brand-logo">
                    <HeartIcon style={{ width: 20, height: 20 }} />
                </div>
                <div className="brand-text">
                    <b>ClinicPro</b>
                    <span>پنل مدیریت</span>
                </div>
            </div>

            {/* Navigation */}
            <nav className="nav">
                {sections.map((section) => (
                    <div className="nav-group" key={section.label}>
                        <span className="nav-label">{section.label}</span>
                        {section.items.map(({ to, icon: Icon, label }) => (
                            <NavLink
                                key={to}
                                to={to}
                                title={!sidebarOpen ? label : undefined}
                                className={({ isActive }) =>
                                    `nav-item${isActive ? " active" : ""}`
                                }
                            >
                                <Icon
                                    style={{
                                        width: 19,
                                        height: 19,
                                        flexShrink: 0,
                                    }}
                                />
                                <span>{label}</span>
                            </NavLink>
                        ))}
                    </div>
                ))}
            </nav>

            {/* User footer */}
            <div className="sidebar-foot">
                <div
                    className="user-chip"
                    onClick={() => {
                        logout();
                        navigate("/admin/login");
                    }}
                    title="خروج از سیستم"
                >
                    <div
                        className="avatar sm"
                        style={{
                            background:
                                "linear-gradient(145deg, oklch(0.62 0.15 256), oklch(0.48 0.16 256))",
                            flexShrink: 0,
                        }}
                    >
                        A
                    </div>
                    <div className="user-meta">
                        <b>Admin</b>
                        <span>مدیر سیستم</span>
                    </div>
                    <ArrowLeftOnRectangleIcon
                        style={{
                            width: 16,
                            height: 16,
                            flexShrink: 0,
                            color: "var(--text-3)",
                        }}
                    />
                </div>
            </div>
        </aside>
    );
}