"use client"
import { useComposer } from "@/contexts/composer-context"
import { ComponentRenderer } from "./component-renderer"
import { Button } from "@/components/ui/button"
import { Trash2, GripVertical, Copy, Download } from "lucide-react"
import { Card } from "@/components/ui/card"
import { getVariant } from "./component-variants-registry"

export function Canvas() {
  const { components, removeComponent, clearComponents } = useComposer()

  // Function to copy component code
  const copyComponentCode = () => {
    // Implementation would depend on how you want to generate code
    alert("Code copying functionality would be implemented here")
  }

  // Function to export components
  const exportComponents = () => {
    // Implementation would depend on how you want to export
    alert("Export functionality would be implemented here")
  }

  return (
    <div className="border border-border rounded-lg bg-card h-full">
      <div className="p-4 border-b flex justify-between items-center">
        <h3 className="font-medium">Canvas</h3>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={copyComponentCode}>
            <Copy className="h-4 w-4 mr-2" />
            Copy Code
          </Button>
          <Button variant="outline" size="sm" onClick={exportComponents}>
            <Download className="h-4 w-4 mr-2" />
            Export
          </Button>
          <Button variant="outline" size="sm" onClick={clearComponents}>
            <Trash2 className="h-4 w-4 mr-2" />
            Clear
          </Button>
        </div>
      </div>

      <div className="p-4">
        {components.length === 0 ? (
          <div className="border border-dashed border-border rounded-lg p-8 text-center">
            <p className="text-muted-foreground">Select components from the palette to add them to the canvas.</p>
          </div>
        ) : (
          <div className="space-y-4">
            {components.map((component, index) => {
              // Get component name for display
              let componentName = "Component"
              if (component.type === "component-variant" && component.componentId && component.variantId) {
                const variant = getVariant(component.componentId, component.variantId)
                if (variant) {
                  componentName = `${variant.name} ${variant.id.split("-")[0]}`
                }
              }

              return (
                <Card key={component.id} className="relative">
                  <div className="absolute top-2 left-2 cursor-move p-1 rounded-md hover:bg-accent">
                    <GripVertical className="h-4 w-4 text-muted-foreground" />
                  </div>
                  <div className="absolute top-2 right-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-8 w-8 p-0"
                      onClick={() => removeComponent(component.id)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                  <div className="pt-10 px-4 pb-4">
                    <ComponentRenderer component={component} />
                  </div>
                </Card>
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}