import { NavLink } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import {
  HomeIcon, ShoppingCartIcon, CubeIcon, ArchiveBoxIcon,
  TruckIcon, AdjustmentsHorizontalIcon, ClockIcon,
  ChartBarIcon, CurrencyDollarIcon, UsersIcon, XMarkIcon,
  BookOpenIcon, UserGroupIcon, Cog6ToothIcon,
} from '@heroicons/react/24/outline';

const nav = [
  { to: '/', label: 'Dashboard', icon: HomeIcon, roles: ['owner','admin','kasir'] },
  { to: '/pos', label: 'POS Kasir', icon: ShoppingCartIcon, roles: ['owner','admin','kasir'] },
  { to: '/sales-history', label: 'Riwayat Transaksi', icon: ClockIcon, roles: ['owner','admin','kasir'] },
  { divider: true, label: 'Manajemen', roles: ['owner','admin'] },
  { to: '/products', label: 'Barang', icon: CubeIcon, roles: ['owner','admin'] },
  { to: '/packages', label: 'Paket', icon: ArchiveBoxIcon, roles: ['owner','admin'] },
  { to: '/purchases', label: 'Pembelian Stok', icon: TruckIcon, roles: ['owner','admin'] },
  { to: '/stock', label: 'Manajemen Stok', icon: AdjustmentsHorizontalIcon, roles: ['owner','admin'] },
  { to: '/stock-history', label: 'Riwayat Stok', icon: ClockIcon, roles: ['owner','admin'] },
  { divider: true, label: 'Laporan', roles: ['owner','admin'] },
  { to: '/reports/sales', label: 'Laporan Penjualan', icon: ChartBarIcon, roles: ['owner','admin'] },
  { to: '/reports/profit-loss', label: 'Laba Rugi', icon: CurrencyDollarIcon, roles: ['owner','admin'] },
  { divider: true, label: 'Pengaturan', roles: ['owner', 'admin'] },
  { to: '/users', label: 'User Management', icon: UsersIcon, roles: ['owner'] },
  { to: '/accounts', label: 'Kelola Akun Kasir', icon: UserGroupIcon, roles: ['owner', 'admin'] },
  { to: '/settings', label: 'Pengaturan Usaha', icon: Cog6ToothIcon, roles: ['owner'] },
];

export default function Sidebar({ open, onClose }) {
  const { user } = useAuth();

  return (
    <aside className={`fixed inset-y-0 left-0 z-30 w-64 bg-gray-900 flex flex-col transition-transform duration-300 lg:static lg:translate-x-0 ${open ? 'translate-x-0' : '-translate-x-full'}`}>
      <div className="flex items-center justify-between px-5 py-4 border-b border-gray-700">
        <div className="flex items-center gap-3">
          <span className="text-2xl">🔧</span>
          <div>
            <h1 className="text-white font-bold text-sm leading-tight">Antang Garage Oli</h1>
            <p className="text-gray-400 text-xs">POS System</p>
          </div>
        </div>
        <button onClick={onClose} className="lg:hidden text-gray-400 hover:text-white p-1">
          <XMarkIcon className="w-5 h-5" />
        </button>
      </div>

      <nav className="flex-1 overflow-y-auto py-3 px-3 space-y-0.5">
        {nav.map((item, i) => {
          if (!item.roles.includes(user?.role)) return null;
          if (item.divider) return (
            <div key={i} className="pt-4 pb-1 px-2">
              <p className="text-gray-500 text-xs font-semibold uppercase tracking-wider">{item.label}</p>
            </div>
          );
          const Icon = item.icon;
          return (
            <NavLink key={item.to} to={item.to} end={item.to === '/'}
              onClick={onClose}
              className={({ isActive }) =>
                `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${
                  isActive ? 'bg-orange-500 text-white' : 'text-gray-400 hover:bg-gray-800 hover:text-white'
                }`
              }>
              <Icon className="w-5 h-5 flex-shrink-0" />
              {item.label}
            </NavLink>
          );
        })}
      </nav>

      <div className="px-3 pb-2">
        <NavLink to="/panduan" onClick={onClose}
          className={({ isActive }) =>
            `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${
              isActive ? 'bg-orange-500 text-white' : 'text-gray-400 hover:bg-gray-800 hover:text-white'
            }`
          }>
          <BookOpenIcon className="w-5 h-5 flex-shrink-0" />
          Panduan Penggunaan
        </NavLink>
      </div>

      <div className="px-4 py-3 border-t border-gray-700">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
            {user?.name?.[0]?.toUpperCase()}
          </div>
          <div className="min-w-0">
            <p className="text-white text-sm font-medium truncate">{user?.name}</p>
            <p className="text-gray-400 text-xs capitalize">{user?.role}</p>
          </div>
        </div>
        <p className="text-gray-600 text-xs mt-3 text-center leading-tight">
          © CV. Gurita Gemilang
        </p>
      </div>
    </aside>
  );
}
