import React from 'react';
import { useStore } from '../context/StoreContext';
import { LayoutDashboard, PackageSearch, Barcode, ArrowDownLeft, ShoppingCart, History, Database, Truck, PackageX, X, Download } from 'lucide-react';

export const Sidebar: React.FC = () => {
  const { activeTab, setActiveTab, mobileMenuOpen, setMobileMenuOpen, isSidebarCollapsed, toggleSidebar, setInstallModalOpen } = useStore();

  const navItems = [
    {
      id: 'dashboard',
      label: 'Dashboard Overview',
      subLabel: 'Ringkasan Stok & Statistik',
      icon: LayoutDashboard,
    },
    {
      id: 'products',
      label: 'Kelola Stok Barang',
      subLabel: 'Varian, Harga & Barcode',
      icon: PackageSearch,
    },
    {
      id: 'master-data',
      label: 'Master Data Sembako',
      subLabel: 'Kategori, Satuan & Ukuran',
      icon: Database,
    },
    {
      id: 'suppliers',
      label: 'Master Supplier',
      subLabel: 'Daftar Distributor & Pemasok',
      icon: Truck,
    },
    {
      id: 'inbound',
      label: 'Barang Masuk (Inbound)',
      subLabel: 'Penerimaan dari Supplier',
      icon: ArrowDownLeft,
    },
    {
      id: 'outbound',
      label: 'Barang Expired / Keluar',
      subLabel: 'Kedaluwarsa, Rusak & Loss',
      icon: PackageX,
    },
    {
      id: 'pos',
      label: 'Kasir & Transaksi Baru',
      subLabel: 'Penjualan & Struk WA/PDF',
      icon: ShoppingCart,
    },
    {
      id: 'transactions',
      label: 'Riwayat Penjualan',
      subLabel: 'Laporan Penjualan & Margin',
      icon: History,
    }
  ];

  return (
    <>
      {/* Mobile Drawer Backdrop */}
      {mobileMenuOpen && (
        <div
          className="fixed inset-0 bg-slate-900/60 backdrop-blur-xs z-40 md:hidden transition-opacity"
          onClick={() => setMobileMenuOpen(false)}
        />
      )}

      {/* Sidebar Component */}
      <aside
        className={`fixed md:static inset-y-0 left-0 z-50 bg-emerald-900 text-emerald-50 flex-shrink-0 flex flex-col justify-between border-r border-emerald-800 transition-all duration-300 ease-in-out ${
          isSidebarCollapsed ? 'w-64 md:w-16' : 'w-64 md:w-60'
        } ${
          mobileMenuOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
        }`}
      >
        <div>
          {/* Brand Header */}
          <div className={`p-4 flex items-center border-b border-emerald-800 transition-all ${
            isSidebarCollapsed ? 'justify-between md:justify-center md:px-2' : 'justify-between'
          }`}>
            <div className="flex items-center gap-3 overflow-hidden">
              <div
                onClick={() => {
                  if (window.innerWidth >= 768 && isSidebarCollapsed) {
                    toggleSidebar();
                  }
                }}
                className={`w-9 h-9 sm:w-10 sm:h-10 bg-emerald-500 rounded-xl flex items-center justify-center font-black text-lg sm:text-xl text-white shadow-xs shrink-0 ${
                  isSidebarCollapsed ? 'cursor-pointer hover:bg-emerald-400 transition' : ''
                }`}
                title={isSidebarCollapsed ? "Klik untuk buka sidebar" : "Toko Makmur"}
              >
                TM
              </div>
              <div className={`leading-tight ${isSidebarCollapsed ? 'md:hidden' : 'block'}`}>
                <h1 className="font-bold text-sm sm:text-base text-white tracking-tight truncate">Toko Makmur</h1>
                <p className="text-[10px] sm:text-[11px] text-emerald-200/80 italic font-medium truncate">Dashboard Sembako</p>
              </div>
            </div>

            {/* Mobile Close Button */}
            <button
              onClick={() => setMobileMenuOpen(false)}
              className="p-1.5 rounded-lg text-emerald-200 hover:text-white hover:bg-emerald-800 md:hidden transition"
              title="Tutup Menu"
            >
              <X className="w-5 h-5" />
            </button>
          </div>

          {/* Navigation Category Label */}
          <div className={`px-5 pt-4 pb-1 text-[10px] uppercase tracking-wider font-bold text-emerald-400 opacity-90 ${
            isSidebarCollapsed ? 'md:hidden' : 'block'
          }`}>
            Menu Utama
          </div>

          {/* Navigation List */}
          <nav className="py-1">
            {navItems.map((item) => {
              const Icon = item.icon;
              const isActive = activeTab === item.id;
              return (
                <button
                  key={item.id}
                  onClick={() => {
                    setActiveTab(item.id);
                    setMobileMenuOpen(false);
                  }}
                  title={`${item.label} - ${item.subLabel}`}
                  className={`w-full text-left transition-colors flex items-center ${
                    isSidebarCollapsed ? 'px-4 py-3 justify-between md:px-0 md:py-3.5 md:justify-center' : 'px-5 py-3 justify-between'
                  } ${
                    isActive
                      ? 'bg-emerald-800 text-white border-r-4 border-emerald-400 font-semibold'
                      : 'hover:bg-emerald-800/70 text-emerald-100 hover:text-white'
                  }`}
                >
                  <div className={`flex items-center gap-3 min-w-0 ${isSidebarCollapsed ? 'md:justify-center md:w-full' : ''}`}>
                    <div className="relative shrink-0">
                      <Icon className={`w-5 h-5 shrink-0 transition-colors ${isActive ? 'text-emerald-300' : 'text-emerald-300/70'}`} />
                    </div>

                    <div className={`truncate ${isSidebarCollapsed ? 'md:hidden' : 'block'}`}>
                      <span className="text-xs font-bold block leading-snug truncate">{item.label}</span>
                      <span className={`text-[10px] block truncate ${isActive ? 'text-emerald-200' : 'text-emerald-300/60'}`}>
                        {item.subLabel}
                      </span>
                    </div>
                  </div>
                </button>
              );
            })}
          </nav>
        </div>

        {/* Sidebar Bottom Footer Info & Install App Button */}
        <div className={`p-3 bg-emerald-950 border-t border-emerald-800/80 text-[10px] space-y-2 ${
          isSidebarCollapsed ? 'md:p-2 md:text-center' : 'block'
        }`}>
          {/* Quick Install Trigger */}
          <button
            type="button"
            onClick={() => {
              setInstallModalOpen(true);
              setMobileMenuOpen(false);
            }}
            className={`w-full bg-emerald-800/80 hover:bg-emerald-700 text-emerald-100 font-bold rounded-xl transition flex items-center border border-emerald-700/60 shadow-xs ${
              isSidebarCollapsed ? 'p-2 justify-center' : 'px-3 py-2 justify-start gap-2'
            }`}
            title="Install Toko Makmur ke Layar Utama HP / Tablet"
          >
            <Download className="w-4 h-4 text-emerald-300 shrink-0" />
            <div className={`text-left leading-tight ${isSidebarCollapsed ? 'md:hidden' : 'block'}`}>
              <div className="text-[11px] font-extrabold text-white">Install App (PWA)</div>
              <div className="text-[9px] text-emerald-300/80">Pasang di HP / Tablet</div>
            </div>
          </button>

          {!isSidebarCollapsed ? (
            <div className="pt-1">
              <div className="flex justify-between items-center text-emerald-200 font-semibold">
                <span>Toko Makmur</span>
                <span className="font-bold text-emerald-400">Kasir & Inventori</span>
              </div>
              <p className="text-[10px] text-emerald-300/70 leading-tight mt-0.5">
                Sistem kasir & kelola stok sembako mandiri.
              </p>
            </div>
          ) : (
            <div className="hidden md:block text-[9px] text-emerald-400 font-bold tracking-tighter">
              TM
            </div>
          )}
        </div>
      </aside>
    </>
  );
};