import * as React from "react"
import { 
  LayoutDashboard, 
  Car, 
  NotebookPen,
  Users, 
  UserCog,
  Settings, 
  LogOut,
  ChevronRight
} from "lucide-react"

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from "@/components/ui/sidebar"

const navItems = [
  {
    title: "仪表盘",
    icon: LayoutDashboard,
    id: "dashboard",
  },
  {
    title: "车型库",
    icon: Car,
    id: "car-library",
  },
  {
    title: "小程序内容库",
    icon: NotebookPen,
    id: "mini-content",
  },
  {
    title: "潜客管理",
    icon: Users,
    id: "leads",
  },
  {
    title: "用户与权限",
    icon: UserCog,
    id: "user-access",
  },
  {
    title: "系统设置",
    icon: Settings,
    id: "settings",
  },
]

export function AppSidebar({ 
  activeTab, 
  setActiveTab 
}: { 
  activeTab: string; 
  setActiveTab: (id: string) => void 
}) {
  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="border-b border-sidebar-border/50 py-6">
        <div className="flex items-center gap-3 px-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-audi-red text-white">
            <span className="text-xs font-bold tracking-tighter">A</span>
          </div>
          <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
            <span className="text-sm font-bold tracking-[0.15em] uppercase truncate">Audi Portal</span>
            <span className="text-[10px] text-muted-foreground tracking-widest uppercase truncate">Smart Operations</span>
          </div>
        </div>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel className="group-data-[collapsible=icon]:hidden">主要功能</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {navItems.map((item) => (
                <SidebarMenuItem key={item.id}>
                  <SidebarMenuButton 
                    tooltip={item.title}
                    isActive={activeTab === item.id}
                    onClick={() => setActiveTab(item.id)}
                    className="data-active:bg-audi-red/5 data-active:text-audi-red"
                  >
                    <item.icon />
                    <span>{item.title}</span>
                    {activeTab === item.id && (
                      <ChevronRight className="ml-auto size-3 opacity-50 group-data-[collapsible=icon]:hidden" />
                    )}
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter className="border-t border-sidebar-border/50 p-4">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton className="text-muted-foreground hover:text-foreground">
              <LogOut />
              <span>退出登录</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}