"use client"

import * as React from "react"
import Link from "next/link"
import {
  CreditCardIcon,
  LayoutDashboardIcon,
  PenToolIcon,
  ReceiptTextIcon,
  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: "/bookkeeping",
    icon: PenToolIcon,
  },
  {
    title: "交易记录",
    url: "/transactions",
    icon: ReceiptTextIcon,
  },
  {
    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>
  )
}