"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
  REGEXP_ONLY_DIGITS,
} from "@exxatdesignux/ui/components/ui/input-otp"
import {
  MaskedInput,
  exxatMaskPatterns,
} from "@/components/ui/input-mask"
import { Label } from "@/components/ui/label"
import { PaymentCardFieldsGroup } from "@/components/ui/payment-card-fields"
import { Slider } from "@/components/ui/slider"
import { Textarea } from "@/components/ui/textarea"

export function InputDefaultPreview() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <Field orientation="vertical">
        <FieldLabel htmlFor="ds-input">Search</FieldLabel>
        <Input id="ds-input" placeholder="Search patterns…" aria-label="Search" />
      </Field>
      <Field orientation="vertical">
        <FieldLabel htmlFor="ds-input-disabled">Disabled</FieldLabel>
        <Input
          id="ds-input-disabled"
          placeholder="Unavailable"
          disabled
          aria-label="Disabled input"
        />
      </Field>
      <Field orientation="vertical" data-invalid={true}>
        <FieldLabel htmlFor="ds-input-invalid">Invalid</FieldLabel>
        <Input
          id="ds-input-invalid"
          defaultValue="bad@"
          aria-invalid
          aria-label="Invalid input"
        />
        <FieldDescription>Set data-invalid on Field and aria-invalid on the control.</FieldDescription>
      </Field>
    </div>
  )
}

export function TextareaDefaultPreview() {
  return (
    <Field orientation="vertical">
      <FieldLabel htmlFor="ds-textarea">Question stem</FieldLabel>
      <Textarea
        id="ds-textarea"
        rows={3}
        defaultValue="Which nerve innervates the diaphragm?"
        aria-label="Question stem"
      />
      <FieldDescription>Pair with FieldDescription in product forms.</FieldDescription>
    </Field>
  )
}

export function TextareaStatesPreview() {
  return (
    <div className="grid w-full gap-5 md:grid-cols-2">
      <Field orientation="vertical">
        <FieldLabel htmlFor="ds-textarea-help">Notes with help</FieldLabel>
        <Textarea
          id="ds-textarea-help"
          rows={4}
          placeholder="Add placement notes"
          aria-describedby="ds-textarea-help-copy"
        />
        <FieldDescription id="ds-textarea-help-copy">
          Include only information needed for placement review.
        </FieldDescription>
      </Field>

      <Field orientation="vertical" data-invalid>
        <FieldLabel htmlFor="ds-textarea-invalid">Feedback</FieldLabel>
        <Textarea
          id="ds-textarea-invalid"
          rows={4}
          defaultValue="Too short"
          aria-invalid
          aria-describedby="ds-textarea-invalid-copy"
        />
        <FieldError id="ds-textarea-invalid-copy">
          Enter at least 20 characters.
        </FieldError>
      </Field>

      <Field orientation="vertical" data-disabled>
        <FieldLabel htmlFor="ds-textarea-disabled">Archived notes</FieldLabel>
        <Textarea
          id="ds-textarea-disabled"
          rows={4}
          defaultValue="Editing is unavailable for archived placements."
          disabled
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel htmlFor="ds-textarea-readonly">Submitted response</FieldLabel>
        <Textarea
          id="ds-textarea-readonly"
          rows={4}
          value="The response remains focusable and selectable."
          readOnly
          aria-readonly="true"
        />
        <FieldDescription>Use read-only when users may still copy the value.</FieldDescription>
      </Field>

      <Field orientation="vertical" className="md:col-span-2">
        <FieldLabel htmlFor="ds-textarea-fixed">Fixed-height response</FieldLabel>
        <Textarea
          id="ds-textarea-fixed"
          rows={5}
          className="resize-none"
          defaultValue="Use resize-none only when the surrounding layout cannot grow. Keep enough visible rows for the expected response."
        />
        <FieldDescription>
          Default textareas are resizable. Fixed height is an explicit layout exception.
        </FieldDescription>
      </Field>
    </div>
  )
}

export function InputGroupPreview() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <InputGroup>
        <InputGroupAddon>
          <i className="fa-light fa-magnifying-glass" aria-hidden="true" />
        </InputGroupAddon>
        <InputGroupInput placeholder="Search…" aria-label="Search with icon" />
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="0.00" aria-label="Amount" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>USD</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="name@example.com" aria-label="Email address" />
        <InputGroupAddon align="inline-end">
          <i className="fa-light fa-envelope" aria-hidden="true" />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="Invite email…" aria-label="Invite email" />
        <InputGroupAddon align="inline-end">
          <InputGroupButton type="button" size="xs">
            Send
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

export function InputWithPrimaryButtonPreview() {
  return (
    <Field orientation="vertical" className="max-w-md">
      <FieldLabel htmlFor="ds-input-invite">Email address</FieldLabel>
      <div className="flex flex-col gap-2 sm:flex-row">
        <Input
          id="ds-input-invite"
          type="email"
          inputMode="email"
          autoComplete="email"
          placeholder="name@example.com"
        />
        <Button type="button" size="sm" className="shrink-0">
          Send invite
        </Button>
      </div>
    </Field>
  )
}

const PASSWORD_REQUIREMENTS = [
  { id: "length", label: "At least 8 characters", test: (value: string) => value.length >= 8 },
  { id: "number", label: "At least one number", test: (value: string) => /\d/.test(value) },
  { id: "symbol", label: "At least one symbol", test: (value: string) => /[^A-Za-z0-9]/.test(value) },
] as const

export function PasswordValidationPreview() {
  const [password, setPassword] = React.useState("")
  const requirements = PASSWORD_REQUIREMENTS.map((requirement) => ({
    ...requirement,
    met: requirement.test(password),
  }))
  const metCount = requirements.filter((requirement) => requirement.met).length

  return (
    <Field orientation="vertical" className="max-w-sm">
      <FieldLabel htmlFor="ds-input-password">Password</FieldLabel>
      <Input
        id="ds-input-password"
        type="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
        autoComplete="new-password"
        aria-describedby="ds-input-password-rules"
      />
      <div id="ds-input-password-rules" className="flex flex-col gap-1 text-sm">
        {requirements.map((requirement) => (
          <span
            key={requirement.id}
            className={requirement.met ? "text-status-badge-success-fg" : "text-muted-foreground"}
          >
            <span className="sr-only">{requirement.met ? "Met: " : "Not met: "}</span>
            <i
              className={requirement.met ? "fa-solid fa-circle-check me-1.5" : "fa-light fa-circle me-1.5"}
              aria-hidden="true"
            />
            {requirement.label}
          </span>
        ))}
      </div>
      <span className="sr-only" role="status">
        {metCount} of {PASSWORD_REQUIREMENTS.length} password requirements met.
      </span>
    </Field>
  )
}

export function InputOTPPreview() {
  return (
    <Field orientation="vertical" className="max-w-sm">
      <FieldLabel htmlFor="ds-input-otp">Verification code</FieldLabel>
      <InputOTP
        id="ds-input-otp"
        maxLength={6}
        pattern={REGEXP_ONLY_DIGITS}
        inputMode="numeric"
        autoComplete="one-time-code"
        aria-describedby="ds-input-otp-description"
      >
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
      <FieldDescription id="ds-input-otp-description">
        Enter the 6 digit code.
      </FieldDescription>
    </Field>
  )
}

export function InputMaskPreview() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <Field orientation="vertical">
        <FieldLabel htmlFor="ds-mask-phone">Phone</FieldLabel>
        <MaskedInput
          id="ds-mask-phone"
          mask={exxatMaskPatterns.phoneUS}
          placeholder="(555) 123-4567"
          aria-label="Phone"
          inputMode="tel"
          autoComplete="tel"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel htmlFor="ds-mask-zip">ZIP</FieldLabel>
        <MaskedInput
          id="ds-mask-zip"
          mask={exxatMaskPatterns.zipUS}
          placeholder="12345"
          aria-label="ZIP code"
          inputMode="numeric"
          autoComplete="postal-code"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel htmlFor="ds-mask-date">Date (MM/DD/YYYY)</FieldLabel>
        <MaskedInput
          id="ds-mask-date"
          mask={exxatMaskPatterns.dateMDY}
          placeholder="MM/DD/YYYY"
          aria-label="Date"
          inputMode="numeric"
        />
        <FieldDescription>Validate the calendar value separately from the mask.</FieldDescription>
      </Field>
      <Field orientation="vertical">
        <FieldLabel htmlFor="ds-mask-ref">Custom reference</FieldLabel>
        <MaskedInput
          id="ds-mask-ref"
          mask={exxatMaskPatterns.customReference}
          placeholder="AA99 AAA"
          aria-label="Custom reference"
          className="font-mono uppercase"
        />
      </Field>
    </div>
  )
}

export function LabelPreview() {
  return (
    <div className="flex max-w-sm flex-col gap-2">
      <Label htmlFor="ds-label-demo">Standalone label</Label>
      <Input id="ds-label-demo" placeholder="Prefer FieldLabel in product forms" />
      <p className="text-xs text-muted-foreground">
        Use Label only outside Field. In forms, FieldLabel wires a11y for you.
      </p>
    </div>
  )
}

export function SliderPreview() {
  const [slider, setSlider] = React.useState(40)
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <div className="flex items-center justify-between text-xs text-muted-foreground">
        <span>Volume</span>
        <span className="tabular-nums">{slider}%</span>
      </div>
      <Slider
        value={[slider]}
        onValueChange={(values) => setSlider(values[0] ?? 0)}
        max={100}
        step={1}
        aria-label="Demo slider"
      />
    </div>
  )
}

export function PaymentCardFieldsPreview() {
  return (
    <div className="max-w-xs">
      <PaymentCardFieldsGroup />
      <p className="mt-2 text-xs text-muted-foreground">
        One usePaymentInputs() instance drives number, expiry, and CVC together.
      </p>
    </div>
  )
}