"use client"

import { useDraggable } from "@dnd-kit/core"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useState } from "react"
import {
  Table,
  Calendar,
  Circle,
  Square,
  Type,
  MousePointer,
  CreditCard,
  ChevronDown,
  Tags as Tabs,
  BarChart3,
  ToggleLeft,
  User,
  Medal as Modal,
  Search,
} from "lucide-react"

const COMPONENT_TYPES = [
  { id: "data-table", name: "Data Table", icon: Table, category: "Data" },
  { id: "contextmenu", name: "Context Menu", icon: MousePointer, category: "Overlay" },
  { id: "menubar", name: "Menubar", icon: Tabs, category: "Layout" },
  { id: "carousel", name: "Carousel", icon: BarChart3, category: "Display" },
  { id: "drawer", name: "Drawer", icon: Modal, category: "Overlay" },
  { id: "table", name: "Table", icon: Table, category: "Data" },
  { id: "datepicker", name: "Date Picker", icon: Calendar, category: "Input" },
  { id: "radiogroup", name: "Radio Group", icon: Circle, category: "Input" },
  { id: "checkbox", name: "Checkbox", icon: Square, category: "Input" },
  { id: "input", name: "Input", icon: Type, category: "Input" },
  { id: "textarea", name: "Textarea", icon: Type, category: "Input" },
  { id: "button", name: "Button", icon: MousePointer, category: "Action" },
  { id: "card", name: "Card", icon: CreditCard, category: "Layout" },
  { id: "select", name: "Select", icon: ChevronDown, category: "Input" },
  { id: "tabs", name: "Tabs", icon: Tabs, category: "Layout" },
  { id: "progress", name: "Progress", icon: BarChart3, category: "Display" },
  { id: "switch", name: "Switch", icon: ToggleLeft, category: "Input" },
  { id: "avatar", name: "Avatar", icon: User, category: "Display" },
  { id: "dialog", name: "Dialog", icon: Modal, category: "Overlay" },
]

function DraggableComponent({ component }: { component: (typeof COMPONENT_TYPES)[0] }) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: component.id,
  })

  const style = transform
    ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
      }
    : undefined

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...listeners}
      {...attributes}
      className={`p-3 bg-card border border-border rounded-md cursor-grab hover:bg-accent/10 transition-colors ${
        isDragging ? "opacity-50" : ""
      }`}
    >
      <div className="flex items-center gap-2">
        <component.icon className="w-4 h-4 text-muted-foreground" />
        <span className="text-sm font-medium text-card-foreground">{component.name}</span>
      </div>
    </div>
  )
}

export function ComponentPalette() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState<string>("All")

  const categories = ["All", ...Array.from(new Set(COMPONENT_TYPES.map((c) => c.category)))]

  const filteredComponents = COMPONENT_TYPES.filter((component) => {
    const matchesSearch = component.name.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "All" || component.category === selectedCategory
    return matchesSearch && matchesCategory
  })

  return (
    <div className="h-full flex flex-col overflow-hidden">
      {/* Header */}
      <div className="p-4 border-b border-sidebar-border">
        <h2 className="text-lg font-semibold text-sidebar-foreground mb-3">Components</h2>

        {/* Search */}
        <div className="relative mb-3">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input
            placeholder="Search components..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-9 bg-input border-border"
          />
        </div>

        {/* Category Filter */}
        <div className="flex flex-wrap gap-1">
          {categories.map((category) => (
            <button
              key={category}
              onClick={() => setSelectedCategory(category)}
              className={`px-2 py-1 text-xs rounded-md transition-colors ${
                selectedCategory === category
                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
                  : "bg-sidebar hover:bg-sidebar-accent/20 text-sidebar-foreground"
              }`}
            >
              {category}
            </button>
          ))}
        </div>
      </div>

      {/* Component List */}
      <ScrollArea className="flex-1 component-panel-scroll">
        <div className="p-4 space-y-2">
          {filteredComponents.map((component) => (
            <DraggableComponent key={component.id} component={component} />
          ))}
        </div>
      </ScrollArea>
    </div>
  )
}
