"use client"

import * as React from "react"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
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 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="Invite email…" aria-label="Invite email" />
        <InputGroupAddon align="inline-end">
          <InputGroupButton type="button" size="xs">
            Send
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

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>
  )
}