"use client"

import { useState, useEffect } from "react"
import { usePathname } from "next/navigation"
import Link from "next/link"
import { ChevronDown, ChevronLeft } from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"
import {
  template,
  getFilteredSidebarItems,
} from "./SidebarMenuConfig"

export function DashboardSidebar() {
  const [expandedItems, setExpandedItems] = useState<string[]>([])
  const [mounted, setMounted] = useState<boolean>(false)
  const pathname = usePathname()

  useEffect(() => {
    setMounted(true)
    setExpandedItems(getFilteredSidebarItems(template).map(item => item.id))
  }, [])

  const toggleItem = (itemId: string) => {
    setExpandedItems(prev =>
      prev.includes(itemId)
        ? prev.filter(id => id !== itemId)
        : [...prev, itemId]
    )
  }

  const filteredItems = getFilteredSidebarItems(template)

  if (!mounted) return null

  return (
    <Sidebar side="right">
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {filteredItems.map((item) => (
                <SidebarMenuItem key={item.id}>
                  <div className="flex flex-col w-full">
                    <div
                      className="flex items-center px-3 h-10 cursor-pointer"
                      onClick={() => toggleItem(item.id)}
                    >
                      {expandedItems.includes(item.id) ? (
                        <ChevronDown className="ml-1 h-4 w-4" />
                      ) : (
                        <ChevronLeft className="ml-1 h-4 w-4" />
                      )}
                      <item.icon className="ml-2 h-4 w-4" />
                      <span>{item.title}</span>
                    </div>

                    {expandedItems.includes(item.id) && (
                      <div className="mr-6 border-r pr-2 pt-1">
                        <ul className="w-full">
                          {item.children.map((child) => {
                            const isActive = pathname === child.href;
                            return (
                              <li
                                key={child.id}
                                data-slot="sidebar-menu-item"
                                data-sidebar="menu-item"
                                className="group/menu-item relative"
                              >
                                <SidebarMenuButton
                                  className={cn(
                                    "h-9 w-full justify-start",
                                    isActive ? "bg-primary/10 text-primary font-bold" : ""
                                  )}
                                  asChild
                                >
                                  <Link href={child.href}>
                                    <span>{child.title}</span>
                                  </Link>
                                </SidebarMenuButton>
                              </li>
                            )
                          })}
                        </ul>
                      </div>
                    )}
                  </div>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}