/* eslint-disable */
// Sidebar — emoji + label, tinted active state, off-canvas on mobile

const NAV_ITEMS = [
  { id: "overview",  emoji: "📊", label: "Dashboard" },
  { id: "kanban",    emoji: "📋", label: "Task Board" },
  { id: "registry",  emoji: "🎁", label: "Gift Registry" },
  { id: "meals",     emoji: "🍽️", label: "Meal Planner" },
  { id: "memories",  emoji: "📸", label: "Memory Wall" },
  { id: "budget",    emoji: "💰", label: "Budget Tracker" },
  { id: "documents", emoji: "🔒", label: "Document Safe" },
  { id: "items",     emoji: "📦", label: "Item Tracker" },
  { id: "rentals",   emoji: "🏠", label: "Rentals" },
];

const Sidebar = ({ active, onNavigate, open, onClose }) => (
  <React.Fragment>
    <aside
      className={
        "w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 min-h-screen fixed md:static inset-y-0 left-0 z-50 transition-transform duration-300 ease-in-out " +
        (open ? "translate-x-0" : "-translate-x-full md:translate-x-0")
      }
    >
      <div className="p-6 space-y-2">
        {NAV_ITEMS.map((item) => {
          const isActive = active === item.id;
          return (
            <button
              key={item.id}
              onClick={() => { onNavigate(item.id); onClose(); }}
              className={
                "w-full text-left px-4 py-3 rounded-lg transition-colors flex items-center gap-3 " +
                (isActive
                  ? "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium"
                  : "text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700")
              }
            >
              <span className="text-lg">{item.emoji}</span>
              <span>{item.label}</span>
            </button>
          );
        })}
        <hr className="my-4 border-gray-200 dark:border-gray-700" />
        <button
          onClick={() => { onNavigate("settings"); onClose(); }}
          className={
            "w-full text-left px-4 py-3 rounded-lg transition-colors flex items-center gap-3 " +
            (active === "settings"
              ? "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium"
              : "text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700")
          }
        >
          <span className="text-lg">⚙️</span>
          <span>Settings</span>
        </button>
      </div>
    </aside>
    {open && (
      <div
        onClick={onClose}
        className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
      />
    )}
  </React.Fragment>
);

window.Sidebar = Sidebar;
window.NAV_ITEMS = NAV_ITEMS;