import React, { useState } from "react";
import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";
import {
  BarChart3,
  ChevronDown,
  ChevronRight,
  Clipboard,
  GraduationCap,
  History,
  Headphones,
  Users,
  User,
  CreditCard,
  LogOut,
  Rocket
} from "lucide-react";

const menuItems = [
  {
    label: "Program Management",
    icon: Rocket,
    children: [
      { label: "FER Dashboard", page: "Dashboard", icon: BarChart3 },
      { label: "Program Onboarding", page: "Dashboard", icon: Clipboard },
      { label: "Training", page: "Dashboard", icon: GraduationCap },
      { label: "Issue History", page: "Dashboard", icon: History },
    ],
  },
  {
    label: "Communication & Support",
    icon: Headphones,
    children: [],
  },
  {
    label: "Member Management",
    icon: Users,
    children: [
      { label: "My Profile", page: "MyProfile", icon: User },
      { label: "Stripe Connect", page: "StripeConnect", icon: CreditCard },
    ],
  },
];

export default function Sidebar({ activePage }) {
  const [expanded, setExpanded] = useState({ "Program Management": true, "Member Management": true });

  const toggle = (label) => {
    setExpanded((prev) => ({ ...prev, [label]: !prev[label] }));
  };

  return (
    <aside
      id="sidebar"
      className="w-[220px] min-h-screen bg-white border-r border-gray-200 flex flex-col fixed left-0 top-0 z-30"
    >
      {/* Logo */}
      <div className="px-4 py-4 border-b border-gray-200">
        <img
          src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/69ac537c5138f01ec706f4bc/9c287bb3b_Logo_PBC_horz_color.png"
          alt="PackageHub Business Centers"
          className="h-10 w-auto object-contain"
        />
      </div>

      {/* Nav */}
      <nav className="flex-1 py-2 overflow-y-auto">
        {menuItems.map((group) => (
          <div key={group.label} className="mb-0.5">
            <button
              onClick={() => toggle(group.label)}
              className="w-full flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors"
            >
              <group.icon className="w-4 h-4 text-gray-500 flex-shrink-0" />
              <span className="flex-1 text-left">{group.label}</span>
              {group.children.length > 0 && (
                expanded[group.label]
                  ? <ChevronDown className="w-3.5 h-3.5 text-gray-400" />
                  : <ChevronRight className="w-3.5 h-3.5 text-gray-400" />
              )}
            </button>
            {expanded[group.label] && group.children.map((item) => {
              const isActive =
                (item.page === "Dashboard" && activePage === "Dashboard" && item.label === "FER Dashboard") ||
                (item.page === "MyProfile" && activePage === "MyProfile") ||
                (item.page === "StripeConnect" && activePage === "StripeConnect");

              return (
                <Link
                  key={item.label}
                  to={createPageUrl(item.page)}
                  className={`flex items-center gap-2 pl-10 pr-4 py-2 text-sm transition-colors ${
                    isActive
                      ? "bg-gray-200 text-gray-900 font-semibold"
                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                  }`}
                >
                  {item.label}
                </Link>
              );
            })}
          </div>
        ))}
      </nav>

      {/* Logout */}
      <div className="border-t border-gray-200 p-3">
        <button className="flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors w-full rounded-lg border border-gray-200">
          <LogOut className="w-4 h-4" />
          Logout
        </button>
      </div>
    </aside>
  );
}