gruperly/apps/web/src/features/groups/GroupForm.tsx

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import type { BillingType, CreateFirstGroup, WeekDay } from '@gruperly/shared'
import { CreateFirstGroupSchema } from '@gruperly/shared'
import { ArrowLeft, Check, Loader2 } from 'lucide-react'
import { cn } from '../../lib/utils'
import { Button, Input, Label } from '../../components/ui'
import { BILLING_TYPES, WEEK_DAY_CHIPS } from '../onboarding/constants'

const defaultValues: CreateFirstGroup = {
  name: '',
  days: [],
  time: '09:00',
  capacity: 1,
  price: 0,
  billingType: 'MONTHLY',
  dueDay: 1,
}

type GroupFormProps = {
  heading: string
  description: string
  submitLabel: string
  isSubmitting: boolean
  errorMessage?: string | null
  onSubmit: (values: CreateFirstGroup) => void
  onBack?: () => void
}

export function GroupForm({
  heading,
  description,
  submitLabel,
  isSubmitting,
  errorMessage,
  onSubmit,
  onBack,
}: GroupFormProps) {
  const {
    register,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<CreateFirstGroup>({
    resolver: zodResolver(CreateFirstGroupSchema),
    defaultValues,
    mode: 'onTouched',
  })

  const days = watch('days')
  const billingType = watch('billingType')
  const dueDay = watch('dueDay')

  const toggleDay = (day: WeekDay) => {
    const next = days.includes(day) ? days.filter((d) => d !== day) : [...days, day]
    setValue('days', next, { shouldValidate: true })
  }

  const selectBillingType = (type: BillingType) => {
    setValue('billingType', type, { shouldValidate: true })
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-5">
      <header className="space-y-1">
        <h2 className="text-2xl font-bold text-primary">{heading}</h2>
        <p className="text-sm text-foreground/60">{description}</p>
      </header>

      <div>
        <Label htmlFor="name">Nombre del grupo</Label>
        <Input
          id="name"
          placeholder="Ej: Yoga Vinyasa · Nivel 1"
          invalid={!!errors.name}
          {...register('name')}
        />
        {errors.name ? <p className="mt-1 text-sm text-danger">{errors.name.message}</p> : null}
      </div>

      <div>
        <Label>Días de clase</Label>
        <div className="flex flex-wrap gap-2">
          {WEEK_DAY_CHIPS.map(({ value, label }) => {
            const isActive = days.includes(value)
            return (
              <button
                key={value}
                type="button"
                aria-pressed={isActive}
                onClick={() => toggleDay(value)}
                className={cn(
                  'h-9 rounded-full border px-3.5 text-sm font-medium transition-colors',
                  isActive
                    ? 'border-accent bg-accent text-on-accent'
                    : 'border-border bg-surface text-primary hover:bg-primary-soft',
                )}
              >
                {label}
              </button>
            )
          })}
        </div>
        {errors.days ? <p className="mt-1 text-sm text-danger">{errors.days.message}</p> : null}
      </div>

      <div>
        <Label htmlFor="time">Horario</Label>
        <Input
          id="time"
          type="time"
          invalid={!!errors.time}
          {...register('time')}
        />
        {errors.time ? <p className="mt-1 text-sm text-danger">{errors.time.message}</p> : null}
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label htmlFor="capacity">Cupo máximo</Label>
          <Input
            id="capacity"
            type="number"
            inputMode="numeric"
            min={1}
            step={1}
            invalid={!!errors.capacity}
            {...register('capacity', { valueAsNumber: true })}
          />
          {errors.capacity ? (
            <p className="mt-1 text-sm text-danger">{errors.capacity.message}</p>
          ) : null}
        </div>

        <div>
          <Label htmlFor="price">Precio</Label>
          <div className="relative">
            <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-foreground/50">
              $
            </span>
            <Input
              id="price"
              type="number"
              inputMode="decimal"
              min={0}
              step="0.01"
              placeholder="0.00"
              className="pl-7"
              invalid={!!errors.price}
              {...register('price', { valueAsNumber: true })}
            />
          </div>
          {errors.price ? (
            <p className="mt-1 text-sm text-danger">{errors.price.message}</p>
          ) : null}
        </div>
      </div>

      <div>
        <Label>Tipo de cobro</Label>
        <div className="grid grid-cols-2 gap-2">
          {BILLING_TYPES.map(({ value, label, hint }) => {
            const isActive = billingType === value
            return (
              <button
                key={value}
                type="button"
                aria-pressed={isActive}
                onClick={() => selectBillingType(value)}
                className={cn(
                  'rounded-xl border px-3 py-2.5 text-left transition-colors',
                  isActive
                    ? 'border-accent bg-accent-soft'
                    : 'border-border bg-surface hover:bg-primary-soft',
                )}
              >
                <span
                  className={cn(
                    'block text-sm font-semibold',
                    isActive ? 'text-accent' : 'text-primary',
                  )}
                >
                  {label}
                </span>
                <span className="block text-xs text-foreground/50">{hint}</span>
              </button>
            )
          })}
        </div>
      </div>

      <div>
        <Label htmlFor="dueDay">Día de vencimiento</Label>
        <Input
          id="dueDay"
          type="number"
          inputMode="numeric"
          min={1}
          max={28}
          step={1}
          invalid={!!errors.dueDay}
          {...register('dueDay', { valueAsNumber: true })}
        />
        <p className="mt-1 text-xs text-foreground/50">
          Los cobros vencerán el día {isFinite(dueDay) && dueDay ? dueDay : '1'} de cada mes.
        </p>
        {errors.dueDay ? (
          <p className="mt-1 text-sm text-danger">{errors.dueDay.message}</p>
        ) : null}
      </div>

      {errorMessage ? (
        <p className="rounded-xl bg-danger-soft px-4 py-3 text-sm text-danger">{errorMessage}</p>
      ) : null}

      <div className="flex items-center gap-3">
        {onBack ? (
          <Button variant="outline" onClick={onBack} disabled={isSubmitting}>
            <ArrowLeft className="size-4" />
            Volver
          </Button>
        ) : null}
        <Button type="submit" variant="primary" className="flex-1" disabled={isSubmitting}>
          {isSubmitting ? <Loader2 className="size-4 animate-spin" /> : <Check className="size-4" />}
          {isSubmitting ? 'Creando…' : submitLabel}
        </Button>
      </div>
    </form>
  )
}