useFormBridgeWizard()

import { useState } from 'react'
import type { FormSchema } from '@runilib/react-formbridge'
import { field, useFormBridgeWizard } from '@runilib/react-formbridge'

const steps = [
  {
    id: 'account',
    label: 'Account',
    schema: {
      email: field.email('Email').required(),
      password: field.password('Password').required(),
    } satisfies FormSchema,
  },
  {
    id: 'profile',
    label: 'Profile',
    schema: {
      firstName: field.text('First name').required(),
      country: field.select('Country').options(['FR','US','GB']).required(),
    } satisfies FormSchema,
    condition: (values) => values.email?.endsWith('@company.com'),
    optional: true,
  },
  {
    id: 'review',
    label: 'Review',
    schema: {} satisfies FormSchema,
  },
]

export function WizardPlayground() {
  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(null)

  const wizard = useFormBridgeWizard(steps, {
    validateOn: 'onBlur',
    revalidateOn: 'onChange',
    onSubmit: async (allValues) => {
      setSubmitted(allValues)
    },
  })

  if (!wizard.step) return null

  const { Form, fields } = wizard.currentStep

  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20, background: '#f5f7fb' }}>
      <p style={{ marginTop: 0, color: '#4b5563' }}>
        Step <strong>{wizard.currentStepIndex + 1}</strong> / {wizard.totalSteps}
        {' · '}
        {wizard.step.label}
        {' · '}
        Progress: {wizard.progress}%
      </p>

      <p style={{ color: '#4b5563' }}>
        Visible steps: {wizard.visibleSteps.map((step) => step.id).join(' → ')}
      </p>

      <Form
        onSubmit={async () => {
          if (wizard.isLastStep) await wizard.submit()
          else await wizard.next()
        }}
      >
        {'email' in fields && <fields.email />}
        {'password' in fields && <fields.password />}
        {'firstName' in fields && <fields.firstName />}
        {'country' in fields && <fields.country />}
        {wizard.step.id === 'review' ? (
          <pre
            style={{
              marginTop: 0,
              padding: 12,
              borderRadius: 12,
              border: '1px solid #d6d9e0',
              background: '#fff',
              whiteSpace: 'pre-wrap',
            }}
          >
            {JSON.stringify(wizard.allValues, null, 2)}
          </pre>
        ) : null}

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {!wizard.isFirstStep && (
            <button type="button" onClick={wizard.prev}>
              Back
            </button>
          )}
          {wizard.step.optional ? (
            <button type="button" onClick={() => wizard.skip()}>
              Skip optional step
            </button>
          ) : null}
          <Form.Submit>{wizard.isLastStep ? 'Finish' : 'Next'}</Form.Submit>
        </div>
      </Form>

      <div
        style={{
          marginTop: 16,
          border: '1px solid #d6d9e0',
          borderRadius: 12,
          padding: 12,
          background: '#fff',
        }}
      >
        <strong>Completed steps</strong>
        <p style={{ marginBottom: 8 }}>
          {Array.from(wizard.completedSteps).join(', ') || 'None yet'}
        </p>
        <strong>Last submit</strong>
        <pre style={{ marginBottom: 0, whiteSpace: 'pre-wrap' }}>
          {JSON.stringify(submitted, null, 2)}
        </pre>
      </div>
    </div>
  )
}

export default WizardPlayground