'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Label } from '@/components/ui/label'
import { Slider } from '@/components/ui/slider'
import { bookingStep3Schema, type BookingStep3 } from '@/lib/validations/bookingSchema'
import { ArrowRight, ArrowLeft, Loader2 } from 'lucide-react'

interface BookingStep3Props {
  defaultValues?: Partial<BookingStep3>
  onNext: (data: BookingStep3) => void
  onBack: () => void
  isLoading?: boolean
}

export function BookingStep3Form({ defaultValues, onNext, onBack, isLoading }: BookingStep3Props) {
  const form = useForm<BookingStep3>({
    resolver: zodResolver(bookingStep3Schema),
    defaultValues: { manual_hours_per_week: 10, ...defaultValues },
  })

  const hours = form.watch('manual_hours_per_week')

  return (
    <form onSubmit={form.handleSubmit(onNext)} className="space-y-6">
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <Label style={{ color: 'var(--dt-text-primary)' }}>
            Manual admin hours per week
          </Label>
          <span
            className="text-xl font-bold"
            style={{
              background: 'var(--dt-gradient-accent)',
              WebkitBackgroundClip: 'text',
              backgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
            }}
          >
            {hours}h
          </span>
        </div>
        <Slider
          min={0}
          max={60}
          step={1}
          value={[hours ?? 0]}
          onValueChange={(v) => form.setValue('manual_hours_per_week', Array.isArray(v) ? v[0] : v)}
        />
        <div className="flex justify-between text-xs" style={{ color: 'var(--dt-text-muted)' }}>
          <span>0 hrs</span>
          <span>60 hrs/week</span>
        </div>
      </div>

      <div className="space-y-2">
        <Label style={{ color: 'var(--dt-text-primary)' }}>
          Anything else? <span style={{ color: 'var(--dt-text-muted)' }}>(optional)</span>
        </Label>
        <textarea
          {...form.register('notes')}
          rows={3}
          placeholder="Describe your situation, goals, or questions..."
          className="w-full rounded-lg px-3 py-2 text-sm outline-none resize-none"
          style={{
            background: 'var(--dt-bg-elevated)',
            border: '1px solid var(--dt-border-glass)',
            color: 'var(--dt-text-primary)',
          }}
        />
      </div>

      <div className="flex gap-3">
        <button
          type="button"
          onClick={onBack}
          disabled={isLoading}
          className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
          style={{ color: 'var(--dt-text-secondary)', border: '1px solid var(--dt-border-subtle)' }}
        >
          <ArrowLeft className="w-4 h-4" />
          Back
        </button>
        <button
          type="submit"
          disabled={isLoading}
          className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60"
          style={{ background: 'var(--dt-gradient-accent)' }}
        >
          {isLoading ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              Submitting...
            </>
          ) : (
            <>
              Book My Strategy Call
              <ArrowRight className="w-4 h-4" />
            </>
          )}
        </button>
      </div>
    </form>
  )
}