"use client"

import { useState } from "react"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { PageBreadcrumb } from "@/components/page-breadcrumb"

export function ToggleSection() {
  const [basicToggle, setBasicToggle] = useState(false)
  const [labelToggle, setLabelToggle] = useState(true)
  const [formToggle, setFormToggle] = useState(false)

  // Properties for the interactive switch
  const [switchChecked, setSwitchChecked] = useState(false)
  const [switchDisabled, setSwitchDisabled] = useState(false)
  const [switchSize, setSwitchSize] = useState<"default" | "sm" | "lg">("default")
  const [showLabel, setShowLabel] = useState(true)
  const [labelText, setLabelText] = useState("Enable notifications")
  const [labelPosition, setLabelPosition] = useState<"left" | "right">("right")

  const getSwitchSizeClasses = (size: string) => {
    switch (size) {
      case "sm":
        return "h-4 w-7"
      case "lg":
        return "h-7 w-12"
      default:
        return "h-6 w-11"
    }
  }

  const generateCode = (props: Record<string, any>) => {
    const { checked, disabled, size, showLabel, labelText, labelPosition } = props

    const sizeClasses = size !== "default" ? ` className="${getSwitchSizeClasses(size)}"` : ""
    const disabledProp = disabled ? " disabled" : ""
    const checkedProp = checked ? " checked" : ""

    if (!showLabel) {
      return `import { Switch } from "@/components/ui/switch"

export function SwitchDemo() {
  return <Switch${sizeClasses}${disabledProp}${checkedProp} />
}`
    }

    const labelComponent = `<Label htmlFor="switch">${labelText}</Label>`
    const switchComponent = `<Switch id="switch"${sizeClasses}${disabledProp}${checkedProp} />`

    if (labelPosition === "left") {
      return `import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      ${labelComponent}
      ${switchComponent}
    </div>
  )
}`
    }

    return `import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      ${switchComponent}
      ${labelComponent}
    </div>
  )
}`
  }

  const renderInteractiveSwitch = (props: Record<string, any>) => {
    const { checked, disabled, size, showLabel, labelText, labelPosition } = props

    return (
      <div className="flex items-center justify-center p-6">
        <div className="flex items-center space-x-2">
          {showLabel && labelPosition === "left" && <Label htmlFor="interactive-switch">{labelText}</Label>}
          <Switch
            id="interactive-switch"
            checked={checked}
            onCheckedChange={setSwitchChecked}
            disabled={disabled}
            className={getSwitchSizeClasses(size)}
          />
          {showLabel && labelPosition === "right" && <Label htmlFor="interactive-switch">{labelText}</Label>}
        </div>
      </div>
    )
  }

  const switchProperties = [
    {
      name: "checked",
      type: "boolean" as const,
      defaultValue: false,
      label: "Checked",
      description: "Whether the switch is checked",
    },
    {
      name: "disabled",
      type: "boolean" as const,
      defaultValue: false,
      label: "Disabled",
      description: "Whether the switch is disabled",
    },
    {
      name: "size",
      type: "select" as const,
      defaultValue: "default",
      label: "Size",
      options: ["sm", "default", "lg"],
      description: "Size of the switch",
    },
    {
      name: "showLabel",
      type: "boolean" as const,
      defaultValue: true,
      label: "Show Label",
      description: "Whether to show a label",
    },
    {
      name: "labelText",
      type: "text" as const,
      defaultValue: "Enable notifications",
      label: "Label Text",
      description: "Text for the label",
    },
    {
      name: "labelPosition",
      type: "select" as const,
      defaultValue: "right",
      label: "Label Position",
      options: ["left", "right"],
      description: "Position of the label relative to switch",
    },
  ]

  return (
    <section id="toggle" className="scroll-mt-16">
      <PageBreadcrumb category="components" sectionName="Switch" sectionId="toggle" />

      <SectionHeading
        title="Switch"
        description="A control that allows the user to toggle between checked and not checked."
      />

      <div className="space-y-8">
        <ComponentContainer
          title="Interactive Switch"
          description="Customize the switch component with different properties."
          properties={switchProperties}
          renderComponent={renderInteractiveSwitch}
          generateCode={generateCode}
        >
          <div className="flex items-center justify-center p-6">
            <div className="flex items-center space-x-2">
              <Switch />
              <Label>Default Switch</Label>
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Default Switch"
          description="A simple switch component."
          code={`import { Switch } from "@/components/ui/switch"

export function SwitchDemo() {
  return <Switch />
}`}
        >
          <div className="flex items-center justify-center p-6">
            <Switch checked={basicToggle} onCheckedChange={setBasicToggle} />
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Switch with Label"
          description="A switch with an associated label."
          code={`import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export function SwitchWithLabelDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="flex items-center space-x-2">
              <Switch id="airplane-mode" checked={labelToggle} onCheckedChange={setLabelToggle} />
              <Label htmlFor="airplane-mode">Airplane Mode</Label>
            </div>
          </div>
        </ComponentContainer>

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

export function SwitchSizesDemo() {
  return (
    <div className="flex items-center space-x-4">
      <Switch className="h-4 w-7" />
      <Switch className="h-6 w-11" />
      <Switch className="h-7 w-12" />
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="flex items-center space-x-4">
              <Switch className="h-4 w-7" />
              <Switch className="h-6 w-11" />
              <Switch className="h-7 w-12" />
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Switch in Form"
          description="A switch used in a form context with description."
          code={`import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export function SwitchFormDemo() {
  return (
    <div className="flex items-center justify-between">
      <div className="space-y-0.5">
        <Label htmlFor="marketing-emails">Marketing emails</Label>
        <div className="text-sm text-muted-foreground">
          Receive emails about new products, features, and more.
        </div>
      </div>
      <Switch id="marketing-emails" />
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="flex items-center justify-between w-full max-w-sm">
              <div className="space-y-0.5">
                <Label htmlFor="marketing-emails">Marketing emails</Label>
                <div className="text-sm text-muted-foreground">
                  Receive emails about new products, features, and more.
                </div>
              </div>
              <Switch id="marketing-emails" checked={formToggle} onCheckedChange={setFormToggle} />
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Disabled Switch"
          description="A switch in disabled state."
          code={`import { Switch } from "@/components/ui/switch"

export function DisabledSwitchDemo() {
  return <Switch disabled />
}`}
        >
          <div className="flex items-center justify-center p-6">
            <Switch disabled />
          </div>
        </ComponentContainer>
      </div>
    </section>
  )
}