"use client";

import * as React from "react";
import Link from "next/link";
import {
  CreditCardIcon,
  LayoutDashboardIcon,
  WalletCardsIcon,
} from "lucide-react";

import { FluxentLogo } from "@/components/fluxent-logo";
import { NavMain, type NavMainItem } from "@/components/nav-main";
import { NavUser, type NavUserData } from "@/components/nav-user";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";

const navMainItems: NavMainItem[] = [
  {
    title: "控制台",
    url: "/",
    icon: LayoutDashboardIcon,
  },
  {
    title: "资金账户",
    url: "/accounts",
    icon: WalletCardsIcon,
  },
  {
    title: "支付渠道",
    url: "/channels",
    icon: CreditCardIcon,
  },
];

export function AppSidebar({
  user,
  ...props
}: {
  user: NavUserData;
} & React.ComponentProps<typeof Sidebar>) {
  const { isMobile, setOpenMobile } = useSidebar();

  const handleLogoNavigation = () => {
    if (isMobile) {
      setOpenMobile(false);
    }
  };

  return (
    <Sidebar variant="inset" {...props}>
      {/* Sidebar Header: Fluxent Logo & Brand */}
      <SidebarHeader className="p-2.5">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              size="lg"
              render={<Link href="/" onClick={handleLogoNavigation} />}
              className="gap-2.5 hover:bg-sidebar-accent"
            >
              <FluxentLogo size={32} />
              <div className="grid flex-1 text-left leading-tight">
                <span className="truncate font-heading text-sm font-bold tracking-tight text-sidebar-foreground">
                  Fluxent
                </span>
                <span className="truncate text-[10px] tracking-wider text-muted-foreground uppercase">
                  财务操作系统
                </span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      {/* Sidebar Content: Main navigation & secondary links */}
      <SidebarContent>
        <NavMain items={navMainItems} />
      </SidebarContent>

      {/* Sidebar Footer: User profile card with dropdown */}
      <SidebarFooter>
        <NavUser user={user} />
      </SidebarFooter>
    </Sidebar>
  );
}