"use client"

import { createContext, useContext, useState, useCallback, type ReactNode } from "react"
import { v4 as uuidv4 } from "uuid"

// Define the component types that can be used in the composer
export type ComponentType = "component-variant" | string // For backward compatibility

// Define the component item structure
export interface ComponentItem {
  id: string
  type: ComponentType
  componentId?: string
  variantId?: string
  props?: Record<string, any>
}

// Define the composer context interface
interface ComposerContextType {
  components: ComponentItem[]
  addComponent: (componentInfo: { type: ComponentType; componentId?: string; variantId?: string }) => void
  removeComponent: (id: string) => void
  moveComponent: (dragIndex: number, hoverIndex: number) => void
  updateComponent: (id: string, props: Record<string, any>) => void
  clearComponents: () => void
}

// Create the context
const ComposerContext = createContext<ComposerContextType | undefined>(undefined)

// Create the provider component
export function ComposerProvider({ children }: { children: ReactNode }) {
  const [components, setComponents] = useState<ComponentItem[]>([])

  // Add a new component
  const addComponent = useCallback(
    (componentInfo: { type: ComponentType; componentId?: string; variantId?: string }) => {
      setComponents((prev) => [
        ...prev,
        {
          id: uuidv4(),
          type: componentInfo.type,
          componentId: componentInfo.componentId,
          variantId: componentInfo.variantId,
          props: {},
        },
      ])
    },
    [],
  )

  // Remove a component
  const removeComponent = useCallback((id: string) => {
    setComponents((prev) => prev.filter((component) => component.id !== id))
  }, [])

  // Move a component (for drag and drop reordering)
  const moveComponent = useCallback((dragIndex: number, hoverIndex: number) => {
    setComponents((prev) => {
      const newComponents = [...prev]
      const draggedComponent = newComponents[dragIndex]
      newComponents.splice(dragIndex, 1)
      newComponents.splice(hoverIndex, 0, draggedComponent)
      return newComponents
    })
  }, [])

  // Update a component's props
  const updateComponent = useCallback((id: string, props: Record<string, any>) => {
    setComponents((prev) =>
      prev.map((component) =>
        component.id === id ? { ...component, props: { ...component.props, ...props } } : component,
      ),
    )
  }, [])

  // Clear all components
  const clearComponents = useCallback(() => {
    setComponents([])
  }, [])

  return (
    <ComposerContext.Provider
      value={{
        components,
        addComponent,
        removeComponent,
        moveComponent,
        updateComponent,
        clearComponents,
      }}
    >
      {children}
    </ComposerContext.Provider>
  )
}

// Create a hook to use the composer context
export function useComposer() {
  const context = useContext(ComposerContext)
  if (context === undefined) {
    throw new Error("useComposer must be used within a ComposerProvider")
  }
  return context
}