field.otp()

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

const schema = {
  code: field.otp('Verification code')
    .groups([3, 3], '-')
    .digitsOnly()
    .required(),
  plainCode: field.otp('Verification code without groups')
    .length(6)
    .digitsOnly()
    .required(),
}

function OtpField({ form, name, groups = [6], separator = '-' }) {
  const otp = form.fieldController(name)
  const inputRefs = useRef([])

  if (!otp.visible) return null

  let offset = 0

  const setCharacters = (startIndex, input) => {
    const characters = input.replace(/\D/g, '').slice(0, otp.otpLength - startIndex)

    characters.split('').forEach((character, localIndex) => {
      otp.setDigit(startIndex + localIndex, character)
    })

    if (characters.length > 0) {
      const nextIndex = Math.min(startIndex + characters.length, otp.otpLength - 1)
      queueMicrotask(() => inputRefs.current[nextIndex]?.focus())
    }
  }

  return (
    <fieldset style={{ border: 0, padding: 0, margin: 0 }}>
      <legend style={{ marginBottom: 8 }}>
        {otp.label}{otp.required ? ' *' : ''}
      </legend>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {groups.map((size, groupIndex) => {
          const start = offset
          offset += size

          return (
            <div key={groupIndex} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              {groupIndex > 0 ? <span aria-hidden>{separator}</span> : null}
              {Array.from({ length: size }, (_, localIndex) => {
                const index = start + localIndex

                return (
                  <input
                    key={index}
                    ref={(node) => {
                      inputRefs.current[index] = node
                      if (index === 0) otp.registerFocusable(node)
                    }}
                    aria-label={`Character ${index + 1} of ${otp.otpLength}`}
                    value={otp.digits[index] ?? ''}
                    inputMode="numeric"
                    autoComplete={index === 0 ? 'one-time-code' : 'off'}
                    maxLength={1}
                    disabled={otp.disabled}
                    onChange={(event) => setCharacters(index, event.target.value)}
                    onKeyDown={(event) => {
                      if (
                        event.key === 'Backspace' &&
                        !otp.digits[index] &&
                        index > 0
                      ) {
                        inputRefs.current[index - 1]?.focus()
                      }
                    }}
                    onPaste={(event) => {
                      event.preventDefault()
                      setCharacters(index, event.clipboardData.getData('text'))
                    }}
                    onBlur={otp.onBlur}
                    style={{
                      width: 42,
                      height: 48,
                      boxSizing: 'border-box',
                      textAlign: 'center',
                      fontSize: 20,
                      border: `1px solid ${otp.error ? '#dc2626' : '#9ca3af'}`,
                      borderRadius: 8,
                    }}
                  />
                )
              })}
            </div>
          )
        })}
      </div>
      {otp.error ? <p role="alert" style={{ color: '#dc2626' }}>{otp.error}</p> : null}
    </fieldset>
  )
}

export function OtpPlaygroundWeb() {
  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(null)
  const form = useFormBridge(schema, {
    validateOn: 'onChange',
  })
  const { Form, fieldController, state } = form
  const code = String(state.values.code ?? '')
  const plainCode = String(state.values.plainCode ?? '')

  return (
    <div
      style={{
        fontFamily: 'sans-serif',
        padding: 20,
        background: '#f5f7fb',
        display: 'grid',
        gap: 16,
      }}
    >
      <div>
        <h3 style={{ margin: '0 0 8px' }}>Interactive OTP field</h3>
        <p style={{ margin: 0, color: '#4b5563' }}>
          Type a 6-digit code to see grouped cells, live validation, and the submitted payload.
        </p>
      </div>

      <Form
        onSubmit={async (values) => {
          setSubmitted(values)
        }}
      >
        <div style={{ display: 'grid', gap: 12 }}>
          <OtpField form={form} name="code" groups={[3, 3]} />
          <p style={{ margin: 0, color: '#4b5563' }}>
            Grouped progress: <strong>{code.length}</strong> / 6
          </p>
          <OtpField form={form} name="plainCode" />
          <p style={{ margin: 0, color: '#4b5563' }}>
            Plain progress: <strong>{plainCode.length}</strong> / 6
          </p>
          <button type="submit">Verify code</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 OtpPlaygroundWeb