import type React from "react"
import * as LucideIcons from "lucide-react"

// Common property types
export interface ComponentProperty {
  name: string
  type: "select" | "boolean" | "text" | "number" | "color"
  options?: string[]
  defaultValue: any
  label: string
  description?: string
}

// Common properties that can be reused across components
export const commonProperties = {
  // Button properties
  buttonVariant: {
    name: "variant",
    type: "select",
    options: ["Primary", "Secondary", "Outline", "Link", "Ghost", "Destructive"],
    defaultValue: "default",
    label: "Variant",
    description: "The visual style of the button",
  } as ComponentProperty,

  buttonSize: {
    name: "size",
    type: "select",
    options: ["Default", "Small", "Large", "Icon"],
    defaultValue: "default",
    label: "Size",
    description: "The size of the button",
  } as ComponentProperty,

  disabled: {
    name: "disabled",
    type: "boolean",
    defaultValue: false,
    label: "Disabled",
    description: "Whether the component is disabled",
  } as ComponentProperty,

  // Badge properties
  badgeVariant: {
    name: "variant",
    type: "select",
    options: ["Default", "Secondary", "Destructive", "Outline", "Success", "Warning", "Info"],
    defaultValue: "default",
    label: "Variant",
    description: "The visual style of the badge",
  } as ComponentProperty,

  // Avatar properties
  avatarSize: {
    name: "size",
    type: "select",
    options: ["Default", "Small", "Large", "Extra Large"],
    defaultValue: "default",
    label: "Size",
    description: "The size of the avatar",
  } as ComponentProperty,

  // Card properties
  cardVariant: {
    name: "variant",
    type: "select",
    options: ["Default", "Destructive", "Outline"],
    defaultValue: "default",
    label: "Variant",
    description: "The visual style of the card",
  } as ComponentProperty,

  // Alert properties
  alertVariant: {
    name: "variant",
    type: "select",
    options: ["Default", "Destructive", "Warning", "Success", "Info"],
    defaultValue: "default",
    label: "Variant",
    description: "The visual style of the alert",
  } as ComponentProperty,

  // Common properties
  text: {
    name: "text",
    type: "text",
    defaultValue: "Label",
    label: "Text",
    description: "The text content",
  } as ComponentProperty,

  icon: {
    name: "icon",
    type: "select",
    options: [
      "None",
      "Check",
      "X",
      "Settings",
      "User",
      "Mail",
      "Bell",
      "Search",
      "Heart",
      "Star",
      "Home",
      "Info",
      "AlertCircle",
      "AlertTriangle",
      "ChevronDown",
      "ChevronRight",
      "Plus",
      "Minus",
    ],
    defaultValue: "none",
    label: "Icon",
    description: "The icon to display",
  } as ComponentProperty,

  iconPosition: {
    name: "iconPosition",
    type: "select",
    options: ["Left", "Right"],
    defaultValue: "left",
    label: "Icon Position",
    description: "The position of the icon relative to the text",
  } as ComponentProperty,
}

// Helper function to get Lucide icon component by name
export const getIconByName = (name: string): React.ReactNode => {
  if (name === "none" || name === "None") return null
  const IconComponent = (LucideIcons as Record<string, React.ComponentType>)[name]
  return IconComponent ? <IconComponent className="h-4 w-4" /> : null
}

// Helper function to generate icon import code
export const generateIconImport = (iconName: string): string => {
  return iconName && iconName !== "none" && iconName !== "None" ? `import { ${iconName} } from "lucide-react"\n` : ""
}

// Helper function to generate icon JSX code
export const generateIconJSX = (iconName: string, position = "left"): string => {
  if (iconName === "none" || iconName === "None") return ""
  return `<${iconName} className="h-4 w-4" />`
}

// Helper function to convert display value to actual value
export const getActualValue = (displayValue: string): string => {
  const valueMap: Record<string, string> = {
    Primary: "default", // Map Primary to default for button variant
    Default: "default",
    Secondary: "secondary",
    Destructive: "destructive",
    Outline: "outline",
    Ghost: "ghost",
    Link: "link",
    Small: "sm",
    Large: "lg",
    Icon: "icon",
    Success: "success",
    Warning: "warning",
    Info: "info",
    Error: "error",
    Neutral: "neutral",
    "Extra Large": "xl",
    Left: "left",
    Right: "right",
    None: "none",
  }

  return valueMap[displayValue] || displayValue.toLowerCase()
}

// Helper function to convert actual value to display value
export const getDisplayValue = (actualValue: string): string => {
  const displayMap: Record<string, string> = {
    default: "Primary", // Map default to Primary for button variant
    secondary: "Secondary",
    destructive: "Destructive",
    outline: "Outline",
    ghost: "Ghost",
    link: "Link",
    sm: "Small",
    lg: "Large",
    icon: "Icon",
    success: "Success",
    warning: "Warning",
    info: "Info",
    error: "Error",
    neutral: "Neutral",
    xl: "Extra Large",
    left: "Left",
    right: "Right",
    none: "None",
  }

  return displayMap[actualValue] || actualValue.charAt(0).toUpperCase() + actualValue.slice(1)
}

// Helper function to generate className based on variants
export const generateClassName = (props: Record<string, any>): string => {
  const classNames = []

  if (props.className) {
    classNames.push(props.className)
  }

  return classNames.length > 0 ? ` className="${classNames.join(" ")}"` : ""
}