audi-rednote/audi-content-portal/src/components/layout/AppSidebar.tsx

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

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

const navItems = [
  {
    title: "官网车型库",
    icon: Car,
    id: "car-library",
  },
  {
    title: "小程序内容库",
    icon: NotebookPen,
    id: "mini-content",
  },
  {
    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">
        {/* Expanded: full logo banner */}
        <div className="group-data-[collapsible=icon]:hidden">
          <div className="bg-black px-4 py-3">
            <img
              src="/images/audi_logo.png"
              alt="Audi"
              className="h-7 w-auto object-contain"
            />
          </div>
          <div className="px-4 py-2">
            <p className="text-[11px] font-semibold text-gray-800 leading-tight tracking-wide">Rednote Mini App</p>
            <p className="text-[10px] text-gray-400 leading-tight tracking-widest uppercase">Backend Portal</p>
          </div>
        </div>
        {/* Collapsed: icon only */}
        <div className="hidden group-data-[collapsible=icon]:flex justify-center py-3">
          <LogoIconOnly />
        </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>
  )
}