"use client"

import { useState } from "react"
import { Checkbox } from "@/components/ui/checkbox"
import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"

export function CheckboxSection() {
  const [isChecked, setIsChecked] = useState(false)

  const checkboxProperties = [
    {
      name: "variant",
      type: "select" as const,
      options: ["default", "card", "inline"],
      defaultValue: "default",
      label: "Variant",
      description: "Visual style variant",
    },
    {
      name: "label",
      type: "text" as const,
      defaultValue: "Accept terms and conditions",
      label: "Label",
      description: "Label text for the checkbox",
    },
    {
      name: "description",
      type: "text" as const,
      defaultValue: "",
      label: "Description",
      description: "Optional description text",
    },
    {
      name: "disabled",
      type: "boolean" as const,
      defaultValue: false,
      label: "Disabled",
      description: "Whether the checkbox is disabled",
    },
  ]

  const renderCheckbox = (props: Record<string, any>) => {
    const getContainerClasses = () => {
      if (props.variant === "default") {
        // Center align when no description, top align when description is present
        return props.description ? "flex items-start space-x-2" : "flex items-center space-x-2"
      }

      const containerClasses = {
        card: "flex items-start space-x-2 p-4 border rounded-lg bg-card",
        inline: "flex items-center space-x-2",
      }

      return containerClasses[props.variant as keyof typeof containerClasses]
    }

    return (
      <div className={getContainerClasses()}>
        <Checkbox
          id="interactive-checkbox"
          checked={isChecked}
          onCheckedChange={setIsChecked}
          disabled={props.disabled}
        />
        <div className={props.description ? "grid gap-1.5 leading-none" : ""}>
          <label
            htmlFor="interactive-checkbox"
            className={`text-sm font-medium leading-none cursor-pointer ${
              props.disabled ? "opacity-50 cursor-not-allowed" : "opacity-100"
            }`}
          >
            {props.label}
          </label>
          {props.description && (
            <p className={`text-sm text-muted-foreground ${props.disabled ? "opacity-50" : "opacity-100"}`}>
              {props.description}
            </p>
          )}
        </div>
      </div>
    )
  }

  const generateCheckboxCode = (props: Record<string, any>) => {
    const getContainerClasses = () => {
      if (props.variant === "default") {
        return props.description ? "flex items-start space-x-2" : "flex items-center space-x-2"
      }

      const containerClasses = {
        card: "flex items-start space-x-2 p-4 border rounded-lg bg-card",
        inline: "flex items-center space-x-2",
      }

      return containerClasses[props.variant as keyof typeof containerClasses]
    }

    return `import { Checkbox } from "@/components/ui/checkbox"

export function CheckboxDemo() {
  return (
    <div className="${getContainerClasses()}">
      <Checkbox 
        id="checkbox"${props.disabled ? "\n        disabled" : ""}
      />
      ${
        props.description
          ? `<div className="grid gap-1.5 leading-none">
        <label
          htmlFor="checkbox"
          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
        >
          ${props.label}
        </label>
        <p className="text-sm text-muted-foreground peer-disabled:opacity-50">
          ${props.description}
        </p>
      </div>`
          : `<label
        htmlFor="checkbox"
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
      >
        ${props.label}
      </label>`
      }
    </div>
  )
}`
  }

  return (
    <div className="space-y-8">
      <SectionHeading
        title="Checkbox"
        description="A control that allows the user to toggle between checked and not checked. Border-radius is capped at 6px regardless of the Roundedness property."
      />

      <ComponentContainer
        title="Interactive Checkbox"
        description="Customize the checkbox properties to see different variations. Click the checkbox to toggle its state."
        properties={checkboxProperties}
        renderComponent={renderCheckbox}
        generateCode={generateCheckboxCode}
      >
        <div className="flex items-center justify-center p-6">
          {renderCheckbox({
            variant: "default",
            label: "Accept terms and conditions",
            description: "",
            disabled: false,
          })}
        </div>
      </ComponentContainer>
    </div>
  )
}