import { ChevronDown, ChevronRight, Package, ClipboardList } from "lucide-react";
import { useState } from "react";
import { cn } from "./ui/utils";

interface MenuItem {
  id: string;
  label: string;
  icon?: React.ReactNode;
  children?: MenuItem[];
}

interface NavigationSidebarProps {
  currentPath: string;
  onNavigate: (path: string) => void;
}

export default function NavigationSidebar({
  currentPath,
  onNavigate,
}: NavigationSidebarProps) {
  const [expandedItems, setExpandedItems] = useState<string[]>([
    "inventory-management",
  ]);

  const menuItems: MenuItem[] = [
    {
      id: "inventory-management",
      label: "商品與庫存管理",
      icon: <Package className="h-5 w-5" />,
      children: [
        {
          id: "product-management",
          label: "商品建檔管理",
          icon: <ClipboardList className="h-4 w-4" />,
        },
      ],
    },
  ];

  const toggleExpand = (itemId: string) => {
    setExpandedItems((prev) =>
      prev.includes(itemId)
        ? prev.filter((id) => id !== itemId)
        : [...prev, itemId]
    );
  };

  const renderMenuItem = (item: MenuItem, level: number = 0) => {
    const hasChildren = item.children && item.children.length > 0;
    const isExpanded = expandedItems.includes(item.id);
    const isActive = currentPath === item.id;

    return (
      <div key={item.id}>
        <button
          onClick={() => {
            if (hasChildren) {
              toggleExpand(item.id);
            } else {
              onNavigate(item.id);
            }
          }}
          className={cn(
            "w-full flex items-center gap-3 px-4 py-3 transition-all rounded-md mx-2",
            level === 0 && "hover:bg-background-light",
            level > 0 && "hover:bg-background-light-grey pl-10",
            isActive && "bg-primary-light/20 font-medium"
          )}
        >
          {hasChildren && (
            <span className="flex-shrink-0">
              {isExpanded ? (
                <ChevronDown className="h-4 w-4 text-grey-1" />
              ) : (
                <ChevronRight className="h-4 w-4 text-grey-1" />
              )}
            </span>
          )}
          {!hasChildren && level > 0 && <span className="w-4" />}
          {item.icon && (
            <span
              className={cn(
                "flex-shrink-0",
                isActive ? "text-primary-main" : "text-grey-1"
              )}
            >
              {item.icon}
            </span>
          )}
          <span
            className={cn(
              "transition-colors",
              isActive ? "text-primary-main" : "text-grey-0"
            )}
          >
            {item.label}
          </span>
        </button>
        {hasChildren && isExpanded && (
          <div>
            {item.children?.map((child) => renderMenuItem(child, level + 1))}
          </div>
        )}
      </div>
    );
  };

  return (
    <aside className="w-64 bg-card border-r border-border h-screen flex flex-col">
      {/* Header */}
      <div className="p-6 border-b border-border">
        <h2 className="text-primary-main">甜點店 ERP 系統</h2>
      </div>

      {/* Navigation Menu */}
      <nav className="flex-1 overflow-y-auto py-4">
        {menuItems.map((item) => renderMenuItem(item))}
      </nav>

      {/* Footer */}
      <div className="p-4 border-t border-border">
        <p className="caption text-muted-foreground">版本 1.0.0</p>
      </div>
    </aside>
  );
}