import { Link, useLocation } from 'react-router-dom';
import { X, LayoutDashboard, Package, Store, ShoppingCart, Settings, Calculator, Truck } from 'lucide-react';

const navItems = [
  { label: 'SHIRE Merchant', path: '/assistant', emoji: '🧠' },
  { label: 'Dashboard', path: '/', icon: LayoutDashboard, emoji: '📊' },
  { label: 'Products', path: '/products', icon: Package, emoji: '📦' },
  { label: 'Marketplaces', path: '/marketplaces', icon: Store, emoji: '🏪' },
  { label: 'Orders', path: '/orders', icon: ShoppingCart, emoji: '🛒' },
  { label: 'Cost Calculator', path: '/calculator', icon: Calculator, emoji: '🧮' },
  { label: 'Shipping', path: '/shipping', icon: Truck, emoji: '📬' },
  { label: 'Settings', path: '/settings', icon: Settings, emoji: '⚙️' },
];

export default function Sidebar({ open, onClose }) {
  const location = useLocation();

  return (
    <>
      {/* Overlay */}
      {open && (
        <div
          className="fixed inset-0 z-40 bg-black/50 md:hidden"
          onClick={onClose}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`fixed inset-y-0 left-0 z-50 w-64 flex flex-col transition-transform duration-300 ease-in-out
          ${open ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}
        style={{ background: '#1a0a2e' }}
      >
        {/* Logo */}
        <div className="flex items-center justify-between px-5 py-5 border-b border-white/10">
          <div className="flex items-center gap-2">
            <span className="text-xl">🖨️</span>
            <div>
              <p className="text-white font-bold text-sm leading-tight">Shire 3D Manager</p>
            </div>
          </div>
          <button onClick={onClose} className="text-white/40 hover:text-white md:hidden">
            <X size={18} />
          </button>
        </div>

        {/* Nav */}
        <nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
          {navItems.map(({ label, path, emoji }) => {
            const active = location.pathname === path ||
              (path !== '/' && location.pathname.startsWith(path));
            return (
              <Link
                key={path}
                to={path}
                onClick={onClose}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all
                  ${active
                    ? 'text-white'
                    : 'text-white/60 hover:text-white hover:bg-white/10'
                  }`}
                style={active ? { background: '#f97316' } : {}}
              >
                <span className="text-base">{emoji}</span>
                {label}
              </Link>
            );
          })}
        </nav>

        {/* Local mode */}
        <div className="px-3 pb-5 border-t border-white/10 pt-4">
          <div className="px-3 py-2 text-xs font-medium text-emerald-300">● Local standalone mode</div>
        </div>
      </aside>
    </>
  );
}
