"use client"

import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { useState } from "react"
import { Eye, EyeOff } from "lucide-react"
import { OTPInput } from "@/components/ui/otp-input"

export function FormsSection() {
  const [showPassword, setShowPassword] = useState(false)

  return (
    <section id="forms" className="mb-12">
      <SectionHeading title="Forms" description="Input components for collecting user data." />

      <ComponentContainer
        title="Text Input"
        description="Basic text input field with label."
        code={`<div className="w-full max-w-sm">
  <div className="space-y-1.5">
    <Label htmlFor="email">Email</Label>
    <Input type="email" id="email" placeholder="Email" />
  </div>
</div>`}
      >
        <div className="w-full max-w-sm">
          <div className="space-y-1.5">
            <Label htmlFor="email">Email</Label>
            <Input type="email" id="email" placeholder="Email" />
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Password Input"
        description="Password input field with show/hide toggle."
        code={`const [showPassword, setShowPassword] = useState(false)

<div className="w-full max-w-sm">
  <div className="space-y-1.5">
    <Label htmlFor="password">Password</Label>
    <div className="relative">
      <Input 
        type={showPassword ? "text" : "password"} 
        id="password" 
        placeholder="Enter your password"
        className="pr-10"
      />
      <button
        type="button"
        onClick={() => setShowPassword(!showPassword)}
        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
      >
        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
      </button>
    </div>
  </div>
</div>`}
      >
        <div className="w-full max-w-sm">
          <div className="space-y-1.5">
            <Label htmlFor="password">Password</Label>
            <div className="relative">
              <Input
                type={showPassword ? "text" : "password"}
                id="password"
                placeholder="Enter your password"
                className="pr-10"
              />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
              >
                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Input Error State"
        description="Input field with error styling and message."
        code={`<div className="w-full max-w-sm">
  <div className="space-y-1.5">
    <Label htmlFor="email-error">Email</Label>
    <Input type="email" id="email-error" placeholder="Email" error />
    <p className="text-sm text-destructive">Please enter a valid email address.</p>
  </div>
</div>`}
      >
        <div className="w-full max-w-sm">
          <div className="space-y-1.5">
            <Label htmlFor="email-error">Email</Label>
            <Input type="email" id="email-error" placeholder="Email" error />
            <p className="text-sm text-destructive">Please enter a valid email address.</p>
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Textarea"
        description="Multi-line text input field."
        code={`<div className="w-full max-w-sm">
  <div className="space-y-1.5">
    <Label htmlFor="message">Your message</Label>
    <Textarea placeholder="Type your message here." id="message" />
  </div>
</div>`}
      >
        <div className="w-full max-w-sm">
          <div className="space-y-1.5">
            <Label htmlFor="message">Your message</Label>
            <Textarea placeholder="Type your message here." id="message" />
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Textarea Error State"
        description="Textarea with error styling and message."
        code={`<div className="w-full max-w-sm">
  <div className="space-y-1.5">
    <Label htmlFor="message-error">Your message</Label>
    <Textarea placeholder="Type your message here." id="message-error" error />
    <p className="text-sm text-destructive">Message must be at least 10 characters long.</p>
  </div>
</div>`}
      >
        <div className="w-full max-w-sm">
          <div className="space-y-1.5">
            <Label htmlFor="message-error">Your message</Label>
            <Textarea placeholder="Type your message here." id="message-error" error />
            <p className="text-sm text-destructive">Message must be at least 10 characters long.</p>
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Select"
        description="Dropdown selection component."
        code={`<div className="w-full max-w-sm">
  <div className="space-y-1.5">
    <Label htmlFor="framework">Framework</Label>
    <Select>
      <SelectTrigger id="framework">
        <SelectValue placeholder="Select" />
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectItem value="next">Next.js</SelectItem>
        <SelectItem value="sveltekit">SvelteKit</SelectItem>
        <SelectItem value="astro">Astro</SelectItem>
        <SelectItem value="nuxt">Nuxt.js</SelectItem>
      </SelectContent>
    </Select>
  </div>
</div>`}
      >
        <div className="w-full max-w-sm">
          <div className="space-y-1.5">
            <Label htmlFor="framework">Framework</Label>
            <Select>
              <SelectTrigger id="framework">
                <SelectValue placeholder="Select" />
              </SelectTrigger>
              <SelectContent position="popper">
                <SelectItem value="next">Next.js</SelectItem>
                <SelectItem value="sveltekit">SvelteKit</SelectItem>
                <SelectItem value="astro">Astro</SelectItem>
                <SelectItem value="nuxt">Nuxt.js</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Checkbox"
        description="Binary selection component."
        code={`<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>`}
      >
        <div className="flex items-center space-x-2">
          <Checkbox id="terms" />
          <Label htmlFor="terms">Accept terms and conditions</Label>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Radio Group"
        description="Single selection from multiple options."
        code={`<RadioGroup defaultValue="comfortable">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </div>
</RadioGroup>`}
      >
        <RadioGroup defaultValue="comfortable">
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="default" id="r1" />
            <Label htmlFor="r1">Default</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="comfortable" id="r2" />
            <Label htmlFor="r2">Comfortable</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="compact" id="r3" />
            <Label htmlFor="r3">Compact</Label>
          </div>
        </RadioGroup>
      </ComponentContainer>

      <ComponentContainer
        title="Disabled Input"
        description="Non-interactive input field."
        code={`<div className="w-full max-w-sm">
  <div className="space-y-1.5">
    <Label htmlFor="disabled">Disabled</Label>
    <Input type="text" id="disabled" placeholder="This field is disabled" disabled />
  </div>
</div>`}
      >
        <div className="w-full max-w-sm">
          <div className="space-y-1.5">
            <Label htmlFor="disabled">Disabled</Label>
            <Input type="text" id="disabled" placeholder="This field is disabled" disabled />
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Input with Button"
        description="Input field with an action button."
        code={`<div className="flex w-full max-w-sm items-center space-x-2">
  <Input type="email" placeholder="Email" />
  <Button type="submit">Subscribe</Button>
</div>`}
      >
        <div className="flex w-full max-w-sm items-center space-x-2">
          <Input type="email" placeholder="Email" />
          <Button type="submit">Subscribe</Button>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Complete Form"
        description="A complete form with various input types."
        code={`<form className="space-y-6 w-full max-w-sm">
  <div className="space-y-4">
    <div className="grid grid-cols-2 gap-4">
      <div className="space-y-1.5">
        <Label htmlFor="first-name">First name</Label>
        <Input id="first-name" placeholder="First name" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="last-name">Last name</Label>
        <Input id="last-name" placeholder="Last name" />
      </div>
    </div>
    <div className="space-y-1.5">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="Email" />
    </div>
    <div className="space-y-1.5">
      <Label htmlFor="message">Message</Label>
      <Textarea id="message" placeholder="Your message" />
    </div>
    <div className="flex items-center space-x-2">
      <Checkbox id="marketing" />
      <Label htmlFor="marketing">Receive marketing emails</Label>
    </div>
  </div>
  <Button type="submit">Submit</Button>
</form>`}
      >
        <form className="space-y-6 w-full max-w-sm">
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label htmlFor="first-name">First name</Label>
                <Input id="first-name" placeholder="First name" />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="last-name">Last name</Label>
                <Input id="last-name" placeholder="Last name" />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="Email" />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="message">Message</Label>
              <Textarea id="message" placeholder="Your message" />
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="marketing" />
              <Label htmlFor="marketing">Receive marketing emails</Label>
            </div>
          </div>
          <Button type="submit">Submit</Button>
        </form>
      </ComponentContainer>

      <ComponentContainer
        title="OTP Input"
        description="One-time password input with auto-focus and paste support."
        code={`<div className="w-full max-w-sm flex flex-col items-start">
  <div className="space-y-1.5">
    <Label htmlFor="otp">Enter verification code</Label>
    <OTPInput length={6} />
    <p className="text-sm text-muted-foreground">Enter the 6-digit code sent to your phone.</p>
  </div>
</div>`}
      >
        <div className="w-full max-w-sm flex flex-col items-start">
          <div className="space-y-1.5">
            <Label htmlFor="otp">Enter verification code</Label>
            <OTPInput length={6} />
            <p className="text-sm text-muted-foreground">Enter the 6-digit code sent to your phone.</p>
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="4-Digit PIN"
        description="Shorter PIN input for security codes."
        code={`<div className="w-full max-w-sm flex flex-col items-start">
  <div className="space-y-1.5">
    <Label htmlFor="pin">Enter PIN</Label>
    <OTPInput length={4} type="password" />
  </div>
</div>`}
      >
        <div className="w-full max-w-sm flex flex-col items-start">
          <div className="space-y-1.5">
            <Label htmlFor="pin">Enter PIN</Label>
            <OTPInput length={4} type="password" />
          </div>
        </div>
      </ComponentContainer>
    </section>
  )
}