"use client"

import { useState, useEffect } from "react"
import { cn } from "@/lib/utils"

// Define all available sections for the Free package
const sections = [
  // Foundation
  { id: "color", name: "Color", category: "foundation" },
  { id: "typography", name: "Typography", category: "foundation" },
  { id: "spacing", name: "Spacing", category: "foundation" },
  { id: "iconography", name: "Iconography", category: "foundation" },
  { id: "elevation", name: "Elevation", category: "foundation" },

  // Components
  { id: "accordion", name: "Accordion", category: "components" },
  { id: "alerts", name: "Alert", category: "components" },
  { id: "alert-dialog", name: "Alert Dialog", category: "components" },
  { id: "aspect-ratio", name: "Aspect Ratio", category: "components" },
  { id: "avatars", name: "Avatar", category: "components" },
  { id: "badges", name: "Badge", category: "components" },
  { id: "breadcrumbs", name: "Breadcrumb", category: "components" },
  { id: "buttons", name: "Button", category: "components" },
  { id: "calendar", name: "Calendar", category: "components" },
  { id: "cards", name: "Card", category: "components" },
  { id: "checkbox", name: "Checkbox", category: "components" },
  { id: "collapsible", name: "Collapsible", category: "components" },
  { id: "combobox", name: "Combobox", category: "components" },
  { id: "context-menu", name: "Context Menu", category: "components" },
  { id: "dropdowns", name: "Dropdown", category: "components" },
  { id: "forms", name: "Form", category: "components" },
  { id: "hover-card", name: "Hover Card", category: "components" },
  { id: "label", name: "Label", category: "components" },
  { id: "modals", name: "Modal", category: "components" },
  { id: "pagination", name: "Pagination", category: "components" },
  { id: "progress", name: "Progress", category: "components" },
  { id: "scroll-area", name: "Scroll Area", category: "components" },
  { id: "sheet", name: "Sheet", category: "components" },
  { id: "skeleton", name: "Skeleton", category: "components" },
  { id: "slider", name: "Slider", category: "components" },
  { id: "tabs", name: "Tab", category: "components" },
  { id: "tables", name: "Table", category: "components" },
  { id: "toggle", name: "Toggle", category: "components" },
  { id: "tooltips", name: "Tooltip", category: "components" },
]

export function Sidebar() {
  const [activeSection, setActiveSection] = useState("color")
  const [mounted, setMounted] = useState(false)

  // Handle section click
  const handleSectionClick = (sectionId: string) => {
    setActiveSection(sectionId)

    // Scroll to the section
    const sectionElement = document.getElementById(sectionId)
    if (sectionElement) {
      // Find the main content container
      const mainContent = document.querySelector(".main-content")
      if (mainContent) {
        // Enable smooth scrolling for this operation
        mainContent.scrollTo({
          top: sectionElement.offsetTop,
          behavior: "smooth",
        })
      }
    }
  }

  // Set up intersection observer to update active section based on scroll
  useEffect(() => {
    setMounted(true)

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && entry.target.id) {
            setActiveSection(entry.target.id)
          }
        })
      },
      {
        rootMargin: "-100px 0px -80% 0px",
        threshold: 0,
      },
    )

    // Observe all section elements
    sections.forEach((section) => {
      const element = document.getElementById(section.id)
      if (element) observer.observe(element)
    })

    return () => {
      sections.forEach((section) => {
        const element = document.getElementById(section.id)
        if (element) observer.unobserve(element)
      })
    }
  }, [mounted])

  if (!mounted) return null

  // Group sections by category
  const foundationSections = sections.filter((section) => section.category === "foundation")
  const componentSections = sections.filter((section) => section.category === "components")

  return (
    <div className="h-full overflow-y-auto py-4 px-3 bg-background-primary">
      <div className="mb-6">
        <h2 className="text-xs font-semibold text-muted-foreground mb-2 uppercase tracking-wider px-3">Foundation</h2>
        <ul className="space-y-1">
          {foundationSections.map((section) => (
            <li key={section.id}>
              <button
                onClick={() => handleSectionClick(section.id)}
                className={cn(
                  "w-full text-left px-3 py-2 rounded-md text-sm transition-colors",
                  activeSection === section.id ? "bg-primary text-primary-foreground" : "hover:bg-muted",
                )}
              >
                {section.name}
              </button>
            </li>
          ))}
        </ul>
      </div>

      <div>
        <h2 className="text-xs font-semibold text-muted-foreground mb-2 uppercase tracking-wider px-3">Components</h2>
        <ul className="space-y-1">
          {componentSections.map((section) => (
            <li key={section.id}>
              <button
                onClick={() => handleSectionClick(section.id)}
                className={cn(
                  "w-full text-left px-3 py-2 rounded-md text-sm transition-colors",
                  activeSection === section.id ? "bg-primary text-primary-foreground" : "hover:bg-muted",
                )}
              >
                {section.name}
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}