"use client"

import { Badge } from "@/components/ui/badge"
import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import {
  commonProperties,
  getIconByName,
  generateIconImport,
  generateIconJSX,
  getActualValue,
} from "@/utils/component-properties"

export function BadgesSection() {
  // Define badge properties
  const badgeProperties = [
    commonProperties.badgeVariant,
    {
      name: "text",
      type: "text",
      defaultValue: "Badge",
      label: "Text",
      description: "The text content of the badge",
    },
    commonProperties.icon,
    commonProperties.iconPosition,
  ]

  // Render badge based on properties
  const renderBadge = (props: Record<string, any>) => {
    const icon = getIconByName(props.icon)
    const actualVariant = getActualValue(props.variant)
    const actualIconPosition = getActualValue(props.iconPosition)

    return (
      <Badge variant={actualVariant}>
        {actualIconPosition === "left" && icon && (
          <span className="mr-1 w-3 h-3 flex items-center justify-center [&>svg]:w-3 [&>svg]:h-3">{icon}</span>
        )}
        {props.text}
        {actualIconPosition === "right" && icon && (
          <span className="ml-1 w-3 h-3 flex items-center justify-center [&>svg]:w-3 [&>svg]:h-3">{icon}</span>
        )}
      </Badge>
    )
  }

  // Generate badge code
  const generateBadgeCode = (props: Record<string, any>) => {
    const actualVariant = getActualValue(props.variant)
    const actualIconPosition = getActualValue(props.iconPosition)
    const actualIcon = getActualValue(props.icon)

    let code = `import { Badge } from "@/components/ui/badge"\n`

    if (actualIcon !== "none") {
      code += generateIconImport(props.icon)
    }

    code += "\n"

    code += `<Badge${actualVariant !== "default" ? ` variant="${actualVariant}"` : ""}>`

    if (actualIcon !== "none" && actualIconPosition === "left") {
      code += `\n  <span className="mr-1">${generateIconJSX(props.icon)}</span>`
    }

    code += actualIcon !== "none" && actualIconPosition === "left" ? "\n  " : ""
    code += props.text

    if (actualIcon !== "none" && actualIconPosition === "right") {
      code += `\n  <span className="ml-1">${generateIconJSX(props.icon)}</span>`
    }

    code += actualIcon !== "none" ? "\n" : ""
    code += `</Badge>`

    return code
  }

  return (
    <section id="badges" className="scroll-mt-16">
      <SectionHeading title="Badge" description="Small status descriptors for UI elements." />

      <div className="space-y-8">
        <ComponentContainer
          title="Interactive Badge"
          description="Customize the badge properties using the panel."
          properties={badgeProperties}
          renderComponent={renderBadge}
          generateCode={generateBadgeCode}
        >
          <Badge>Badge</Badge>
        </ComponentContainer>

        <ComponentContainer
          title="Standard Variants"
          description="Different badge styles for various contexts."
          code={`import { Badge } from "@/components/ui/badge"

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>`}
        >
          <div className="flex flex-wrap gap-4">
            <Badge>Default</Badge>
            <Badge variant="secondary">Secondary</Badge>
            <Badge variant="destructive">Destructive</Badge>
            <Badge variant="outline">Outline</Badge>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Semantic Variants"
          description="Semantic badges using the new color palette for status and alerts."
          code={`import { Badge } from "@/components/ui/badge"

<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="neutral">Neutral</Badge>`}
        >
          <div className="flex flex-wrap gap-4">
            <Badge variant="success">Success</Badge>
            <Badge variant="warning">Warning</Badge>
            <Badge variant="error">Error</Badge>
            <Badge variant="info">Info</Badge>
            <Badge variant="neutral">Neutral</Badge>
          </div>
        </ComponentContainer>
      </div>

      <div className="space-y-4 mt-8">
        <h2 className="text-xl font-medium">Usage</h2>
        <div className="rounded-md border p-4">
          <pre className="text-sm text-muted-foreground overflow-x-auto whitespace-pre-wrap break-words">
            <code>{`import { Badge } from "@/components/ui/badge"`}</code>
          </pre>
        </div>
      </div>
    </section>
  )
}