Scrum4Me/components/products/product-form.tsx

'use client'

import { useActionState } from 'react'
import { useFormStatus } from 'react-dom'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

type FieldErrors = Record<string, string[]>
type ActionResult = { error?: string | FieldErrors; success?: boolean } | undefined

function SubmitButton({ label }: { label: string }) {
  const { pending } = useFormStatus()
  return (
    <Button type="submit" disabled={pending}>
      {pending ? 'Even wachten…' : label}
    </Button>
  )
}

function getFieldError(error: string | FieldErrors | undefined, field: string): string | undefined {
  if (!error || typeof error === 'string') return undefined
  return (error as FieldErrors)[field]?.[0]
}

function getGlobalError(error: string | FieldErrors | undefined): string | undefined {
  if (typeof error === 'string') return error
  return undefined
}

interface ProductFormProps {
  action: (_prevState: unknown, formData: FormData) => Promise<ActionResult>
  submitLabel: string
  defaultValues?: {
    id?: string
    name?: string
    description?: string
    repo_url?: string
    definition_of_done?: string
  }
}

export function ProductForm({ action, submitLabel, defaultValues }: ProductFormProps) {
  const [state, formAction] = useActionState(action, undefined)

  const fieldError = (field: string) => getFieldError(state?.error, field)
  const globalError = getGlobalError(state?.error)

  return (
    <form action={formAction} className="space-y-5">
      {defaultValues?.id && (
        <input type="hidden" name="id" value={defaultValues.id} />
      )}

      <div className="space-y-1.5">
        <label htmlFor="name" className="text-sm font-medium text-foreground">
          Naam <span className="text-error">*</span>
        </label>
        <Input
          id="name"
          name="name"
          required
          defaultValue={defaultValues?.name}
          placeholder="bijv. DevPlanner"
          className={fieldError('name') ? 'border-error' : ''}
        />
        {fieldError('name') && (
          <p className="text-xs text-error">{fieldError('name')}</p>
        )}
      </div>

      <div className="space-y-1.5">
        <label htmlFor="description" className="text-sm font-medium text-foreground">
          Beschrijving
        </label>
        <Textarea
          id="description"
          name="description"
          rows={3}
          defaultValue={defaultValues?.description}
          placeholder="Korte omschrijving van het product…"
          className={fieldError('description') ? 'border-error' : ''}
        />
        {fieldError('description') && (
          <p className="text-xs text-error">{fieldError('description')}</p>
        )}
      </div>

      <div className="space-y-1.5">
        <label htmlFor="repo_url" className="text-sm font-medium text-foreground">
          Git-repo URL
        </label>
        <Input
          id="repo_url"
          name="repo_url"
          type="url"
          defaultValue={defaultValues?.repo_url ?? ''}
          placeholder="https://github.com/..."
          className={fieldError('repo_url') ? 'border-error' : ''}
        />
        {fieldError('repo_url') && (
          <p className="text-xs text-error">{fieldError('repo_url')}</p>
        )}
      </div>

      <div className="space-y-1.5">
        <label htmlFor="definition_of_done" className="text-sm font-medium text-foreground">
          Definition of Done <span className="text-error">*</span>
        </label>
        <Textarea
          id="definition_of_done"
          name="definition_of_done"
          required
          rows={4}
          defaultValue={defaultValues?.definition_of_done}
          placeholder="Bijv. code gereviewd, tests groen, gedeployed naar staging…"
          className={fieldError('definition_of_done') ? 'border-error' : ''}
        />
        {fieldError('definition_of_done') && (
          <p className="text-xs text-error">{fieldError('definition_of_done')}</p>
        )}
      </div>

      {globalError && (
        <div className="bg-error-container text-error-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-error">
          {globalError}
        </div>
      )}

      <div className="flex gap-3 pt-1">
        <SubmitButton label={submitLabel} />
      </div>
    </form>
  )
}