"use client"

import type React from "react"
import type { JSX } from "react"

import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { Button } from "@/components/ui/button"
import {
  Calendar,
  ChevronDown,
  Command,
  FileText,
  Folder,
  Home,
  Inbox,
  Mail,
  PanelLeftClose,
  PanelLeftOpen,
  Settings,
  Star,
  Trash2,
  User,
  Users,
} from "lucide-react"
import { useState } from "react"
import { cn } from "@/lib/utils"

export function SidebarSection() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(true)

  return (
    <div className="space-y-8">
      <SectionHeading title="Sidebar" description="A flexible sidebar component for navigation, settings, and more." />

      <ComponentContainer title="Sidebar Component">
        <div className="h-[700px] w-full border rounded-lg overflow-hidden bg-white dark:bg-zinc-950 flex">
          {/* Sidebar */}
          <div
            className={cn("transition-all duration-300 ease-in-out", isSidebarOpen ? "w-64" : "w-0", "overflow-hidden")}
          >
            <Sidebar>
              <SidebarHeader>
                <div className="flex items-center justify-between w-full h-8">
                  <div className="flex items-center gap-2">
                    <Command className="h-5 w-5" />
                    <span className="font-medium">Application</span>
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 ml-auto"
                    onClick={() => setIsSidebarOpen(false)}
                  >
                    <PanelLeftClose className="h-4 w-4" />
                  </Button>
                </div>
              </SidebarHeader>

              <SidebarContent>
                <SidebarGroup title="Navigation">
                  <SidebarItem icon={Home} isActive>
                    Dashboard
                  </SidebarItem>
                  <SidebarItem icon={Users}>Team</SidebarItem>
                  <SidebarItem icon={Calendar}>Calendar</SidebarItem>
                  <SidebarItem icon={FileText}>Documents</SidebarItem>
                </SidebarGroup>

                <SidebarSeparator />

                <SidebarGroup title="Projects">
                  <SidebarCollapsible icon={Folder} label="Active Projects" defaultOpen>
                    <SidebarItem indent>Website Redesign</SidebarItem>
                    <SidebarItem indent isActive>
                      Mobile Application
                    </SidebarItem>
                    <SidebarItem indent>API Integration</SidebarItem>
                  </SidebarCollapsible>

                  <SidebarCollapsible icon={Folder} label="Archived Projects">
                    <SidebarItem indent>Legacy System</SidebarItem>
                    <SidebarItem indent>2023 Campaigns</SidebarItem>
                  </SidebarCollapsible>
                </SidebarGroup>

                <SidebarSeparator />

                <SidebarGroup title="Messages">
                  <SidebarItem icon={Inbox} badge="12">
                    Inbox
                  </SidebarItem>
                  <SidebarItem icon={Star} badge="3">
                    Starred
                  </SidebarItem>
                  <SidebarItem icon={Mail}>Sent</SidebarItem>
                  <SidebarItem icon={Trash2}>Trash</SidebarItem>
                </SidebarGroup>

                <SidebarSeparator />

                <SidebarGroup title="Tags">
                  <SidebarItem icon={() => <div className="h-2 w-2 rounded-full bg-blue-500" />}>Work</SidebarItem>
                  <SidebarItem icon={() => <div className="h-2 w-2 rounded-full bg-green-500" />}>Personal</SidebarItem>
                  <SidebarItem icon={() => <div className="h-2 w-2 rounded-full bg-amber-500" />}>
                    Important
                  </SidebarItem>
                  <SidebarItem icon={() => <div className="h-2 w-2 rounded-full bg-purple-500" />}>
                    Planning
                  </SidebarItem>
                </SidebarGroup>
              </SidebarContent>

              <SidebarFooter>
                <SidebarItem icon={Settings}>Settings</SidebarItem>
                <SidebarItem icon={User}>
                  <div className="flex items-center gap-2">
                    <Avatar className="h-6 w-6">
                      <AvatarImage src="/avatar-man-1.png" />
                      <AvatarFallback>JD</AvatarFallback>
                    </Avatar>
                    <span>John Doe</span>
                  </div>
                </SidebarItem>
              </SidebarFooter>
            </Sidebar>
          </div>

          {/* Main Content Area */}
          <div className="flex-1 flex flex-col">
            {/* Top Bar */}
            <div className="h-16 border-b border-border flex items-center px-4 bg-background">
              <div className="flex items-center h-8">
                {!isSidebarOpen && (
                  <Button variant="ghost" size="icon" className="h-8 w-8 mr-3" onClick={() => setIsSidebarOpen(true)}>
                    <PanelLeftOpen className="h-4 w-4" />
                  </Button>
                )}
                <h1 className="text-lg font-semibold">Dashboard</h1>
              </div>
            </div>

            {/* Content */}
            <div className="flex-1 bg-secondary" />
          </div>
        </div>
      </ComponentContainer>
    </div>
  )
}

// Sidebar Components

function Sidebar({ children, className }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn("w-64 h-full bg-zinc-50 dark:bg-zinc-900 flex flex-col border-r border-border", className)}>
      {children}
    </div>
  )
}

function SidebarHeader({ children, className }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("h-16 flex items-center px-4 border-b border-border", className)}>{children}</div>
}

function SidebarContent({ children, className }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex-1 overflow-auto p-2", className)}>{children}</div>
}

function SidebarFooter({ children, className }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("p-2 border-t border-border", className)}>{children}</div>
}

function SidebarGroup({ children, title, className }: React.HTMLAttributes<HTMLDivElement> & { title?: string }) {
  return (
    <div className={cn("mb-3", className)}>
      {title && (
        <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">{title}</div>
      )}
      <div className="space-y-1">{children}</div>
    </div>
  )
}

function SidebarSeparator({ className }: React.HTMLAttributes<HTMLDivElement>) {
  return <Separator className={cn("my-2", className)} />
}

interface SidebarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  icon?: React.ElementType | (() => JSX.Element)
  isActive?: boolean
  badge?: string | number
  indent?: boolean
}

function SidebarItem({
  icon: Icon,
  children,
  isActive = false,
  badge,
  indent = false,
  className,
  ...props
}: SidebarItemProps) {
  return (
    <button
      className={cn(
        "w-full flex items-center gap-3 px-3 py-2 text-sm rounded-md transition-colors text-left",
        indent && "pl-9",
        isActive
          ? "bg-zinc-100 dark:bg-zinc-800 text-foreground font-medium"
          : "text-muted-foreground hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-foreground",
        className,
      )}
      {...props}
    >
      {Icon && (typeof Icon === "function" ? <Icon /> : <Icon className="h-4 w-4 flex-shrink-0" />)}
      <span className="flex-1 truncate">{children}</span>
      {badge && (
        <Badge variant="secondary" className="h-5 px-1.5 text-xs">
          {badge}
        </Badge>
      )}
    </button>
  )
}

interface SidebarCollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
  icon?: React.ElementType
  label: string
  defaultOpen?: boolean
}

function SidebarCollapsible({
  icon: Icon,
  label,
  children,
  defaultOpen = false,
  className,
  ...props
}: SidebarCollapsibleProps) {
  const [isOpen, setIsOpen] = useState(defaultOpen)

  return (
    <div className={cn("mb-1", className)} {...props}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className={cn(
          "w-full flex items-center gap-3 px-3 py-2 text-sm rounded-md transition-colors text-left",
          "text-muted-foreground hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-foreground",
          isOpen && "font-medium",
        )}
      >
        {Icon && <Icon className="h-4 w-4 flex-shrink-0" />}
        <span className="flex-1 truncate">{label}</span>
        <ChevronDown className={cn("h-4 w-4 transition-transform", isOpen ? "transform rotate-180" : "")} />
      </button>
      {isOpen && <div className="mt-1 space-y-1">{children}</div>}
    </div>
  )
}