"use client";

import { cn } from "@/lib/utils";
import {
  LayoutDashboard,
  TrendingUp,
  ListOrdered,
  Bot,
  Building2,
  Settings,
  type LucideIcon,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

interface NavItem {
  label: string;
  path: string;
  icon: LucideIcon;
}

const navItems: NavItem[] = [
  { label: "仪表盘", path: "/", icon: LayoutDashboard },
  { label: "交易", path: "/trading", icon: TrendingUp },
  { label: "订单", path: "/orders", icon: ListOrdered },
  { label: "代理", path: "/agents", icon: Bot },
  { label: "交易所", path: "/exchanges", icon: Building2 },
  { label: "配置", path: "/config", icon: Settings },
];

export interface SidebarProps {
  className?: string;
  isOpen?: boolean;
  onToggle?: () => void;
}

export function Sidebar({ className, isOpen = true }: SidebarProps) {
  const pathname = usePathname();

  return (
    <aside
      className={cn(
        "h-screen bg-[#1e1e1e] border-r border-[#2c2c2c]",
        "flex flex-col fixed left-0 top-0 z-40",
        "transition-all duration-300 ease-in-out",
        isOpen ? "w-64" : "w-0",
        className,
      )}
      style={{ overflow: "hidden" }}
    >
      <div
        className={cn(
          "flex flex-col h-full",
          !isOpen && "opacity-0 pointer-events-none",
        )}
      >
        {/* Logo */}
        <div className="p-4 border-b border-[#2c2c2c]">
          <Link href="/" className="flex items-center gap-2">
            <div className="w-8 h-8 bg-[#00ffcc] rounded-lg flex items-center justify-center">
              <TrendingUp className="w-5 h-5 text-[#121212]" />
            </div>
            <span className="text-[#e1e1e1] font-bold text-lg tracking-tight">
              OpenClaw
            </span>
          </Link>
        </div>

        {/* Navigation */}
        <nav className="flex-1 p-3">
          <ul className="space-y-1">
            {navItems.map((item) => {
              const Icon = item.icon;
              const isActive =
                pathname === item.path ||
                (item.path !== "/" && pathname?.startsWith(item.path));

              return (
                <li key={item.path}>
                  <Link
                    href={item.path}
                    className={cn(
                      "flex items-center gap-3 px-3 py-2.5 rounded-lg",
                      "text-sm font-medium transition-all duration-200",
                      isActive
                        ? "bg-[#00ffcc]/10 text-[#00ffcc] border border-[#00ffcc]/20"
                        : "text-[#a0a0a0] hover:bg-[#2c2c2c] hover:text-[#e1e1e1]",
                    )}
                  >
                    <Icon className="w-5 h-5" />
                    {item.label}
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>

        {/* Footer */}
        <div className="p-4 border-t border-[#2c2c2c]">
          <p className="text-[#666666] text-xs text-center font-medium">
            OpenClaw Trading System
          </p>
        </div>
      </div>
    </aside>
  );
}
