'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { bookingStep1Schema, type BookingStep1 } from '@/lib/validations/bookingSchema'
import { ArrowRight } from 'lucide-react'

const inputStyle = {
  background: 'var(--dt-bg-elevated)',
  border: '1px solid var(--dt-border-glass)',
  color: 'var(--dt-text-primary)',
}

interface BookingStep1Props {
  defaultValues?: Partial<BookingStep1>
  onNext: (data: BookingStep1) => void
}

export function BookingStep1Form({ defaultValues, onNext }: BookingStep1Props) {
  const form = useForm<BookingStep1>({
    resolver: zodResolver(bookingStep1Schema),
    defaultValues,
  })

  return (
    <form onSubmit={form.handleSubmit(onNext)} className="space-y-5">
      <div className="space-y-2">
        <Label style={{ color: 'var(--dt-text-primary)' }}>Your name *</Label>
        <Input {...form.register('name')} placeholder="Alex Johnson" style={inputStyle} />
        {form.formState.errors.name && (
          <p className="text-xs" style={{ color: '#fca5a5' }}>{form.formState.errors.name.message}</p>
        )}
      </div>

      <div className="space-y-2">
        <Label style={{ color: 'var(--dt-text-primary)' }}>Email address *</Label>
        <Input {...form.register('email')} type="email" placeholder="alex@example.com" style={inputStyle} />
        {form.formState.errors.email && (
          <p className="text-xs" style={{ color: '#fca5a5' }}>{form.formState.errors.email.message}</p>
        )}
      </div>

      <div className="space-y-2">
        <Label style={{ color: 'var(--dt-text-primary)' }}>Business name *</Label>
        <Input {...form.register('business_name')} placeholder="Your Business LLC" style={inputStyle} />
        {form.formState.errors.business_name && (
          <p className="text-xs" style={{ color: '#fca5a5' }}>{form.formState.errors.business_name.message}</p>
        )}
      </div>

      <button
        type="submit"
        className="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-white mt-2 transition-all duration-200 hover:opacity-90"
        style={{ background: 'var(--dt-gradient-accent)' }}
      >
        Continue
        <ArrowRight className="w-4 h-4" />
      </button>
    </form>
  )
}