"use client"

/**
 * Credit card inputs — matches Shadcn Studio input-mask 03–06 (`react-payment-inputs` + `Input`).
 * One `usePaymentInputs()` instance drives number + expiry + CVC; use this group (or `usePaymentInputs` yourself in a parent).
 */

import * as React from "react"
import { usePaymentInputs } from "react-payment-inputs"
import images, { type CardImages } from "react-payment-inputs/images"

import { cn } from "../../lib/utils"
import { Input } from "./input"

export { usePaymentInputs } from "react-payment-inputs"
export type { CardImages }

/** Stacked number + expiry/CVC (Studio 06). Single hook — do not split across separate roots. */
export function PaymentCardFieldsGroup({ className }: { className?: string }) {
  const id = React.useId()
  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } =
    usePaymentInputs()

  return (
    <div className={cn("w-full max-w-xs space-y-0", className)}>
      <div className="relative focus-within:z-1">
        <Input
          {...getCardNumberProps()}
          id={`card-number-${id}`}
          className="peer rounded-b-none pe-11 shadow-none"
        />
        <div className="text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50">
          {meta.cardType ? (
            <svg
              className="w-6 overflow-hidden"
              {...getCardImageProps({
                images: images as unknown as CardImages,
              })}
            />
          ) : (
            <i className="fa-light fa-credit-card text-xs leading-none" aria-hidden="true" />
          )}
          <span className="sr-only">Card network</span>
        </div>
      </div>
      <div className="-mt-px flex">
        <div className="min-w-0 flex-1 focus-within:z-1">
          <Input
            {...getExpiryDateProps()}
            id={`card-expiry-${id}`}
            className="rounded-t-none rounded-e-none shadow-none"
          />
        </div>
        <div className="-ms-px min-w-0 flex-1 focus-within:z-1">
          <Input
            {...getCVCProps()}
            id={`card-cvc-${id}`}
            className="rounded-t-none rounded-s-none shadow-none"
          />
        </div>
      </div>
    </div>
  )
}