'use client';

import { useCallback } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useSidebar } from '@/components/SidebarContext';
import SidebarMenuItem from '@/components/SidebarMenuItem';

const menuGroups = [
  {
    title: 'الرئيسية',
    items: [
      { id: 'dashboard', href: '/supplier/dashboard', icon: 'ri-dashboard-3-line', label: 'لوحة التحكم', badge: 0 },
      { id: 'contracts', href: '/supplier/contracts', icon: 'ri-file-list-3-line', label: 'العقود', badge: 3 },
      { id: 'pending', href: '/supplier/pending', icon: 'ri-time-line', label: 'الطلبات المعلقة', badge: 5 },
      { id: 'invoices', href: '/supplier/invoices', icon: 'ri-bill-line', label: 'الفواتير', badge: 0 },
      { id: 'products', href: '/supplier/products', icon: 'ri-store-2-line', label: 'المنتجات', badge: 0 },
    ],
  },
  {
    title: 'التشغيل',
    items: [
      { id: 'assignments', href: '/supplier/assignments', icon: 'ri-task-line', label: 'إسناد المهمات', badge: 3 },
      { id: 'delivery', href: '/supplier/delivery', icon: 'ri-truck-line', label: 'التسليمات', badge: 2 },
      { id: 'messages', href: '/supplier/messages', icon: 'ri-message-3-line', label: 'الرسائل', badge: 4 },
      { id: 'notifications', href: '/supplier/notifications', icon: 'ri-notification-3-line', label: 'الإشعارات', badge: 7 },
      { id: 'disputes', href: '/supplier/disputes', icon: 'ri-alarm-warning-line', label: 'النزاعات', badge: 1 },
    ],
  },
  {
    title: 'المالية',
    items: [
      { id: 'wallet', href: '/supplier/wallet', icon: 'ri-wallet-3-line', label: 'المحفظة', badge: 0 },
      { id: 'deferred', href: '/supplier/deferred-payments', icon: 'ri-calendar-check-line', label: 'الأقساط', badge: 0 },
      { id: 'branches', href: '/supplier/branches', icon: 'ri-building-line', label: 'الفروع', badge: 0 },
    ],
  },
  {
    title: 'الإدارة',
    items: [
      { id: 'team', href: '/supplier/team', icon: 'ri-team-line', label: 'فريق العمل', badge: 0 },
      { id: 'settings', href: '/supplier/settings', icon: 'ri-settings-4-line', label: 'الإعدادات', badge: 0 },
      { id: 'help', href: '/supplier/help', icon: 'ri-question-line', label: 'المساعدة', badge: 0 },
    ],
  },
];

export default function SupplierSidebar() {
  const { collapsed, setCollapsed } = useSidebar();
  const pathname = usePathname();

  const isActive = useCallback((id: string, href: string) => {
    if (pathname === href) return true;
    if (href !== '/supplier/dashboard' && pathname?.startsWith(href)) return true;
    return false;
  }, [pathname]);

  const handleLinkClick = useCallback(() => {
    setCollapsed(true);
  }, [setCollapsed]);

  return (
    <>
      {/* Overlay */}
      {!collapsed && (
        <div
          className="fixed inset-0 bg-black/30 z-40"
          onClick={() => setCollapsed(true)}
        />
      )}

      {/* Sidebar Panel */}
      <aside
        className={`fixed top-0 right-0 h-full z-50 bg-[#1B1D3A] text-white transition-transform duration-300 ease-in-out overflow-y-auto overflow-x-hidden w-[280px] ${
          collapsed ? 'translate-x-full' : 'translate-x-0'
        }`}
      >
        {/* Logo */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
          <div className="flex items-center gap-2">
            <div className="w-9 h-9 rounded-lg bg-[#030772] flex items-center justify-center">
              <i className="ri-shield-check-line text-white text-lg"></i>
            </div>
            <span className="font-bold text-lg">مورد</span>
          </div>
          <button
            onClick={() => setCollapsed(true)}
            className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white/10 transition-colors cursor-pointer"
          >
            <i className="ri-arrow-right-s-line text-white/60 text-lg"></i>
          </button>
        </div>

        {/* Navigation */}
        <nav className="py-3">
          {menuGroups.map((menuGroup, groupIndex) => (
            <div key={groupIndex} className="mb-1">
              <div className="px-5 py-2">
                <span className="text-xs font-medium text-[#8B94EC] uppercase tracking-wider">
                  {menuGroup.title}
                </span>
              </div>
              {menuGroup.items.map((item) => (
                <Link
                  key={item.id}
                  href={item.href}
                  className="block"
                  onClick={handleLinkClick}
                >
                  <SidebarMenuItem
                    icon={item.icon}
                    label={item.label}
                    active={isActive(item.id, item.href)}
                    collapsed={false}
                    badge={item.badge}
                  />
                </Link>
              ))}
            </div>
          ))}
        </nav>

        {/* Bottom Logout */}
        <div className="absolute bottom-0 right-0 left-0 border-t border-white/10 bg-[#1B1D3A]">
          <Link href="/supplier/login" className="block" onClick={handleLinkClick}>
            <SidebarMenuItem
              icon="ri-logout-box-r-line"
              label="تسجيل الخروج"
              active={false}
              collapsed={false}
            />
          </Link>
        </div>
      </aside>
    </>
  );
}