"use client"
import { useState } from "react"
import { useComposer } from "@/contexts/composer-context"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ChevronLeft } from "lucide-react"
import { cn } from "@/lib/utils"
import { componentIds, getComponent } from "./component-variants-registry"

// Fixed border radius for UI components
const UI_BORDER_RADIUS = "6px"

// Foundation items
const foundationItems = [
  { name: "Color", id: "color" },
  { name: "Iconography", id: "iconography" },
  { name: "Typography", id: "typography" },
  { name: "Spacing", id: "spacing" },
  { name: "Elevation", id: "elevation" },
]

// Component items - filter to only include components that exist in the registry
const componentItems = [
  { name: "Accordion", id: "accordion" },
  { name: "Alert", id: "alerts" },
  { name: "Avatar", id: "avatars" },
  { name: "Badge", id: "badges" },
  { name: "Button", id: "buttons" },
  { name: "Card", id: "cards" },
  { name: "Checkbox", id: "checkbox" },
  { name: "Dropdown", id: "dropdowns" },
  { name: "Input", id: "input" },
  { name: "Progress", id: "progress" },
  { name: "Separator", id: "separator" },
  { name: "Slider", id: "slider" },
  { name: "Switch", id: "switch" },
  { name: "Tabs", id: "tabs" },
  { name: "Textarea", id: "textarea" },
].filter((item) => componentIds.includes(item.id))

// Block items
const blockItems = [{ name: "Contact Form", id: "contact-form" }].filter((item) => componentIds.includes(item.id))

export function ComponentPalette() {
  const { addComponent } = useComposer()
  const [selectedComponent, setSelectedComponent] = useState<string | null>(null)

  // Function to handle adding a component variant
  const handleAddVariant = (componentId: string, variantId: string) => {
    addComponent({
      type: "component-variant",
      componentId,
      variantId,
    })
    // Optionally, go back to the component list
    setSelectedComponent(null)
  }

  // If a component is selected, show its variants
  if (selectedComponent) {
    const component = getComponent(selectedComponent)
    if (!component) {
      return <div>Component not found</div>
    }

    return (
      <div className="bg-card border border-border rounded-lg h-full">
        <div className="p-4 border-b flex items-center">
          <Button variant="ghost" size="sm" className="mr-2 p-0 h-8 w-8" onClick={() => setSelectedComponent(null)}>
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <h3 className="font-medium">{component.name} Variants</h3>
        </div>
        <ScrollArea className="h-[calc(100vh-200px)]">
          <div className="p-4 grid gap-4">
            {component.variants.map((variant) => (
              <Card key={variant.id} className="overflow-hidden">
                <div className="p-4 border-b bg-muted/30">
                  <div className="flex justify-center items-center min-h-[100px]">{variant.component}</div>
                </div>
                <CardContent className="p-3 flex justify-between items-center">
                  <span className="text-sm font-medium">{variant.name}</span>
                  <Button size="sm" onClick={() => handleAddVariant(selectedComponent, variant.id)}>
                    Add
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </ScrollArea>
      </div>
    )
  }

  // Otherwise, show the component list
  return (
    <div className="bg-card border border-border rounded-lg h-full">
      <div className="p-4 border-b">
        <h3 className="font-medium">Component Palette</h3>
      </div>
      <ScrollArea className="h-[calc(100vh-200px)]">
        <div className="p-4 pt-6">
          {/* Components section */}
          <p className="text-xs font-medium text-muted-foreground mb-1 px-2">COMPONENTS</p>
          <nav className="space-y-0.5 mb-6">
            {componentItems.map((item) => (
              <button
                key={item.id}
                className={cn(
                  "flex items-center px-3 py-1 text-sm w-full text-left rounded",
                  "text-muted-foreground hover:text-foreground hover:bg-accent/50",
                )}
                style={{ borderRadius: UI_BORDER_RADIUS }}
                onClick={() => setSelectedComponent(item.id)}
              >
                {item.name}
              </button>
            ))}
          </nav>

          {/* Blocks section */}
          <p className="text-xs font-medium text-muted-foreground mb-1 px-2">BLOCKS</p>
          <nav className="space-y-0.5">
            {blockItems.map((item) => (
              <button
                key={item.id}
                className={cn(
                  "flex items-center px-3 py-1 text-sm w-full text-left rounded",
                  "text-muted-foreground hover:text-foreground hover:bg-accent/50",
                )}
                style={{ borderRadius: UI_BORDER_RADIUS }}
                onClick={() => setSelectedComponent(item.id)}
              >
                {item.name}
              </button>
            ))}
          </nav>
        </div>
      </ScrollArea>
    </div>
  )
}