field.masked()

import { useState } from 'react'
import { MASKS, field, useFormBridge } from '@runilib/react-formbridge'

const schema = {
  cardNumber: field
    .masked(MASKS.CARD_16)
    .label('Card number')
    .required()
    .showMaskInPlaceholder()
    .validateComplete('Card is incomplete.'),

  licensePlate: field
    .masked('LL-999-LL')
    .label('License plate')
    .tokens({
      L: /[A-Z]/,
    })
    .uppercase(),
}

function MaskedField({ form, name, inputMode = 'text' }) {
  const masked = form.fieldController(name)

  if (!masked.visible) return null

  return (
    <label style={{ display: 'grid', gap: 6 }}>
      <span>{masked.label}{masked.required ? ' *' : ''}</span>
      <input
        value={masked.displayValue}
        placeholder={masked.mask.placeholderText ?? masked.placeholder}
        inputMode={inputMode}
        disabled={masked.disabled}
        onChange={(event) => masked.onChange(event.target.value)}
        onFocus={masked.onFocus}
        onBlur={masked.onBlur}
        style={{
          padding: 10,
          border: `1px solid ${masked.error ? '#dc2626' : '#9ca3af'}`,
          borderRadius: 8,
          fontFamily: 'monospace',
          letterSpacing: 1,
        }}
      />
      <small style={{ color: masked.maskComplete ? '#15803d' : '#4b5563' }}>
        {masked.maskComplete ? 'Complete' : `Expected format: ${masked.mask.placeholder}`}
      </small>
      {masked.error ? <span role="alert" style={{ color: '#dc2626' }}>{masked.error}</span> : null}
    </label>
  )
}

export function MaskedPlaygroundWeb() {
  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(null)
  const form = useFormBridge(schema, {
    validateOn: 'onBlur',
  })
  const { Form, fieldController, state } = form

  return (
    <div
      style={{
        fontFamily: 'sans-serif',
        padding: 20,
        background: '#f5f7fb',
        display: 'grid',
        gap: 16,
      }}
    >
      <div>
        <h3 style={{ margin: '0 0 8px' }}>Interactive masked fields</h3>
        <p style={{ margin: 0, color: '#4b5563' }}>
          Try the card mask and the custom plate mask, then inspect the stored values.
        </p>
      </div>

      <Form
        onSubmit={async (values) => {
          setSubmitted(values)
        }}
      >
        <div style={{ display: 'grid', gap: 12 }}>
          <MaskedField form={form} name="cardNumber" inputMode="numeric" />
          <MaskedField form={form} name="licensePlate" />
          <button type="submit">Save values</button>
        </div>
      </Form>

      <div style={{ display: 'grid', gap: 12 }}>
        <div
          style={{
            border: '1px solid #d6d9e0',
            borderRadius: 12,
            padding: 12,
            background: '#fff',
          }}
        >
          <strong>Live values</strong>
          <pre style={{ marginBottom: 0, whiteSpace: 'pre-wrap' }}>
            {JSON.stringify(state.values, null, 2)}
          </pre>
        </div>

        <div
          style={{
            border: '1px solid #d6d9e0',
            borderRadius: 12,
            padding: 12,
            background: '#fff',
          }}
        >
          <strong>Last submit</strong>
          <pre style={{ marginBottom: 0, whiteSpace: 'pre-wrap' }}>
            {JSON.stringify(submitted, null, 2)}
          </pre>
        </div>
      </div>
    </div>
  )
}

export default MaskedPlaygroundWeb