"use client"
import { ReactNode, useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
import { AppSidebar, AppSidebarProps } from "@/components/app-sidebar"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Separator } from "@/components/ui/separator"
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import React from 'react'
export interface SideBarProps {
  children: ReactNode
  data?: AppSidebarProps['data']
}

export default function SideBar({ children, data }: SideBarProps) {
  const pathname = usePathname()
  const [breadcrumbItems, setBreadcrumbItems] = useState<Array<{ title: string, url?: string, isPage?: boolean }>>([])

  useEffect(() => {
    if (!data || !data.navMain) return

    const generateBreadcrumb = () => {
      const items = [{ title: "首页", url: "/" }]

      // 解析当前路径
      const pathSegments = pathname.split('/').filter(Boolean)

      if (pathSegments.length === 0) {
        // 首页
        items.push({ title: "首页", isPage: true })
      } else if (pathSegments[0] === 'central-config') {
        // 中心配置模块
        items.push({ title: "中心配置", url: "/central-config" })

        if (pathSegments.length === 1) {
          // 中心配置主页
          items.push({ title: "中心配置", isPage: true })
        } else if (pathSegments.length >= 2) {
          // 查找匹配的一级菜单
          const mainModule = data.navMain.find(item =>
            item.url === `/central-config/${pathSegments[1]}`
          )

          if (mainModule) {
            items.push({ title: mainModule.title, url: mainModule.url })

            if (pathSegments.length === 2) {
              // 一级菜单页面
              items.push({ title: mainModule.title, isPage: true })
            } else if (pathSegments.length >= 3) {
              // 查找匹配的二级菜单
              const subModule = mainModule.items.find(item =>
                item.url === pathname
              )

              if (subModule) {
                items.push({ title: subModule.title, isPage: true })
              }
            }
          }
        }
      }

      setBreadcrumbItems(items)
    }

    generateBreadcrumb()
  }, [pathname, data])

  return (
    <SidebarProvider>
      <AppSidebar data={data} />
      <SidebarInset>
        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator orientation="vertical" className="mr-2 h-4" />
          <Breadcrumb>
            <BreadcrumbList>
              {breadcrumbItems.map((item, index) => (
                <React.Fragment key={index}>
                  {index > 0 && <BreadcrumbSeparator className="hidden md:block" />}
                  <BreadcrumbItem className="hidden md:block">
                    {item.isPage ? (
                      <BreadcrumbPage>{item.title}</BreadcrumbPage>
                    ) : item.url ? (
                      <BreadcrumbLink href={item.url}>{item.title}</BreadcrumbLink>
                    ) : (
                      <span>{item.title}</span>
                    )}
                  </BreadcrumbItem>
                </React.Fragment>
              ))}
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4">
          {children}
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
