"use client"

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

export function ButtonsSection() {
  // Define button properties
  const buttonProperties = [
    commonProperties.buttonVariant,
    commonProperties.buttonSize,
    {
      name: "text",
      type: "text",
      defaultValue: "Button",
      label: "Text",
      description: "The text content of the button",
    },
    commonProperties.icon,
    commonProperties.iconPosition,
    commonProperties.disabled,
    {
      name: "loading",
      type: "boolean",
      defaultValue: false,
      label: "Loading",
      description: "Show loading spinner",
    },
  ]

  // Render button based on properties
  const renderButton = (props: Record<string, any>) => {
    const icon = getIconByName(props.icon)
    const isIconOnly = getActualValue(props.size) === "icon"
    const actualVariant = getActualValue(props.variant)
    const actualSize = getActualValue(props.size)
    const actualIconPosition = getActualValue(props.iconPosition)

    return (
      <Button
        variant={actualVariant}
        size={actualSize}
        disabled={props.disabled}
        className={cn(props.loading && "relative")}
      >
        {props.loading && (
          <span className="absolute inset-0 flex items-center justify-center">
            <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
              ></path>
            </svg>
          </span>
        )}
        <span className={cn(props.loading && "invisible", "flex items-center")}>
          {!isIconOnly && actualIconPosition === "left" && icon && (
            <span className="mr-2 flex items-center">{icon}</span>
          )}
          {!isIconOnly ? props.text : icon}
          {!isIconOnly && actualIconPosition === "right" && icon && (
            <span className="ml-2 flex items-center">{icon}</span>
          )}
        </span>
      </Button>
    )
  }

  // Generate button code
  const generateButtonCode = (props: Record<string, any>) => {
    const isIconOnly = getActualValue(props.size) === "icon"
    const actualVariant = getActualValue(props.variant)
    const actualSize = getActualValue(props.size)
    const actualIconPosition = getActualValue(props.iconPosition)
    const actualIcon = getActualValue(props.icon)

    let code = `import { Button } from "@/components/ui/button"\n`

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

    code += "\n"

    code += `<Button`

    if (actualVariant !== "default") {
      code += ` variant="${actualVariant}"`
    }

    if (actualSize !== "default") {
      code += ` size="${actualSize}"`
    }

    if (props.disabled) {
      code += ` disabled`
    }

    if (props.loading) {
      code += ` className="relative"`
    }

    code += `>`

    if (props.loading) {
      code += `\n  <span className="absolute inset-0 flex items-center justify-center">
    <svg
      className="animate-spin h-4 w-4"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <circle
        className="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="4"
      ></circle>
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
      ></path>
    </svg>
  </span>\n`
    }

    if (props.loading) {
      code += `  <span className="invisible">`
    }

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

      code += props.text

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

    if (props.loading) {
      code += `</span>`
    }

    code += `\n</Button>`

    return code
  }

  return (
    <section id="buttons" className="scroll-mt-16">
      <SectionHeading title="Button" description="Interactive button component for user actions." />

      <div className="space-y-8">
        <ComponentContainer
          title="Interactive Button"
          description="Customize the button properties using the panel."
          properties={buttonProperties}
          renderComponent={renderButton}
          generateCode={generateButtonCode}
        >
          <Button>Button</Button>
        </ComponentContainer>

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

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>`}
        >
          <div className="flex flex-wrap gap-4">
            <Button variant="default">Default</Button>
            <Button variant="destructive">Destructive</Button>
            <Button variant="outline">Outline</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="ghost">Ghost</Button>
            <Button variant="link">Link</Button>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Button Sizes"
          description="Different button sizes."
          code={`import { Button } from "@/components/ui/button"

<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><span className="sr-only">Icon</span>+</Button>`}
        >
          <div className="flex flex-wrap items-center gap-4">
            <Button size="default">Default</Button>
            <Button size="sm">Small</Button>
            <Button size="lg">Large</Button>
            <Button size="icon">+</Button>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Button States"
          description="Different button states."
          code={`import { Button } from "@/components/ui/button"

<Button>Default</Button>
<Button disabled>Disabled</Button>`}
        >
          <div className="flex flex-wrap gap-4">
            <Button>Default</Button>
            <Button disabled>Disabled</Button>
          </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 { Button } from "@/components/ui/button"`}</code>
          </pre>
        </div>
      </div>
    </section>
  )
}