قالب جریان چندمرحله‌ای (WizardPage)

'use client'
import * as React from 'react'
import { useForm } from 'react-hook-form'
import { Input, toast } from '@partodata/ui'
import { Form, FormField } from '@partodata/ui/form'
import { FormRow, WizardPage, WizardReview } from '@partodata/ui/templates'

type NewAnalysis = { name: string; link: string; labels: string }

const STEPS = [
  { id: 'source', label: 'منبع' },
  { id: 'labels', label: 'برچسب‌ها' },
  { id: 'review', label: 'بازبینی' },
]
const FIELDS: Record<string, Array<keyof NewAnalysis>> = { source: ['name', 'link'], labels: ['labels'], review: [] }

async function createAnalysis(values: NewAnalysis): Promise<void> {
  const response = await fetch('/api/analyses', { method: 'POST', body: JSON.stringify(values) })
  if (!response.ok) throw new Error(`analyses: ${response.status}`)
}

export function NewAnalysisScreen() {
  const form = useForm<NewAnalysis>({ defaultValues: { name: '', link: '', labels: '' } })
  const [step, setStep] = React.useState('source')
  const submit = form.handleSubmit(async (values) => {
    try {
      await createAnalysis(values)
      toast.success('تحلیل ساخته شد')
    } catch {
      form.setError('root', { message: 'ساخت تحلیل انجام نشد. لحظه‌ای بعد دوباره تلاش کنید.' })
    }
  })
  return (
    <Form {...form}>
      <WizardPage
        title="تحلیل تازه"
        back={{ href: '/analyses', label: 'تحلیل‌ها' }}
        steps={STEPS}
        step={step}
        onStepChange={setStep}
        onValidateStep={(id) => form.trigger(FIELDS[id], { shouldFocus: true })}
        onSubmit={submit}
        submitLabel="ساخت تحلیل"
        submitting={form.formState.isSubmitting}
        error={form.formState.errors.root?.message}
        onCancel={() => window.history.back()}
        stepInUrl
      >
        {step === 'source' && (
          <>
            <FormField
              control={form.control}
              name="name"
              rules={{ required: 'نام تحلیل را وارد کنید' }}
              render={({ field, fieldState }) => (
                <FormRow label="نام تحلیل" required error={fieldState.error?.message}>
                  <Input {...field} />
                </FormRow>
              )}
            />
            <FormField
              control={form.control}
              name="link"
              rules={{ required: 'پیوند پست را وارد کنید' }}
              render={({ field, fieldState }) => (
                <FormRow label="پیوند پست" required error={fieldState.error?.message}>
                  <Input kind="url" {...field} />
                </FormRow>
              )}
            />
          </>
        )}
        {step === 'labels' && (
          <FormField
            control={form.control}
            name="labels"
            render={({ field }) => (
              <FormRow label="برچسب‌ها" description="با ویرگول جدا کنید">
                <Input {...field} />
              </FormRow>
            )}
          />
        )}
        {step === 'review' && (
          <WizardReview
            items={[
              { step: 'source', label: 'نام تحلیل', value: form.getValues('name') },
              { step: 'source', label: 'پیوند پست', value: form.getValues('link') },
              { step: 'labels', label: 'برچسب‌ها', value: form.getValues('labels') || '—' },
            ]}
          />
        )}
      </WizardPage>
    </Form>
  )
}