'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 { bookingStep2Schema, type BookingStep2 } from '@/lib/validations/bookingSchema'
import { ArrowRight, ArrowLeft } from 'lucide-react'
import { cn } from '@/lib/utils'

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

const industries = [
  'Roofing / Construction', 'Cleaning Services', 'Landscaping', 'Consulting',
  'Logistics / Transportation', 'Tours / Travel', 'Retail', 'Restaurant / Food',
  'Healthcare / Wellness', 'Real Estate', 'Other',
]

const painOptions = [
  { value: 'design', label: 'Design', desc: 'Website, branding, UX' },
  { value: 'data', label: 'Data', desc: 'Spreadsheets, reports, analytics' },
  { value: 'time', label: 'Time', desc: 'Manual work, repetitive admin' },
] as const

interface BookingStep2Props {
  defaultValues?: Partial<BookingStep2>
  onNext: (data: BookingStep2) => void
  onBack: () => void
}

export function BookingStep2Form({ defaultValues, onNext, onBack }: BookingStep2Props) {
  const form = useForm<BookingStep2>({
    resolver: zodResolver(bookingStep2Schema),
    defaultValues,
  })

  const selectedPain = form.watch('pain_category')

  return (
    <form onSubmit={form.handleSubmit(onNext)} className="space-y-5">
      <div className="space-y-2">
        <Label style={{ color: 'var(--dt-text-primary)' }}>Your industry *</Label>
        <select
          {...form.register('industry')}
          className="w-full rounded-lg px-3 py-2 text-sm outline-none"
          style={{
            ...inputStyle,
            appearance: 'none',
            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239090a8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'right 12px center',
          }}
        >
          <option value="">Select your industry</option>
          {industries.map((ind) => (
            <option key={ind} value={ind} style={{ background: '#1a1a24' }}>
              {ind}
            </option>
          ))}
        </select>
        {form.formState.errors.industry && (
          <p className="text-xs" style={{ color: '#fca5a5' }}>{form.formState.errors.industry.message}</p>
        )}
      </div>

      <div className="space-y-2">
        <Label style={{ color: 'var(--dt-text-primary)' }}>Biggest bottleneck right now *</Label>
        <div className="grid grid-cols-3 gap-2">
          {painOptions.map((opt) => (
            <button
              key={opt.value}
              type="button"
              onClick={() => form.setValue('pain_category', opt.value, { shouldValidate: true })}
              className={cn('p-3 rounded-xl text-left transition-all duration-200')}
              style={{
                background: selectedPain === opt.value ? 'rgba(99,102,241,0.15)' : 'var(--dt-bg-elevated)',
                border: selectedPain === opt.value ? '1px solid var(--dt-border-accent)' : '1px solid var(--dt-border-subtle)',
              }}
            >
              <p
                className="text-sm font-semibold"
                style={{ color: selectedPain === opt.value ? 'var(--dt-accent-bright)' : 'var(--dt-text-primary)' }}
              >
                {opt.label}
              </p>
              <p className="text-xs mt-0.5" style={{ color: 'var(--dt-text-muted)' }}>
                {opt.desc}
              </p>
            </button>
          ))}
        </div>
        {form.formState.errors.pain_category && (
          <p className="text-xs" style={{ color: '#fca5a5' }}>{form.formState.errors.pain_category.message}</p>
        )}
      </div>

      <div className="space-y-2">
        <Label style={{ color: 'var(--dt-text-primary)' }}>Tools you currently use *</Label>
        <Input
          {...form.register('current_tools')}
          placeholder="e.g., Excel, QuickBooks, Google Docs, nothing"
          style={inputStyle}
        />
        {form.formState.errors.current_tools && (
          <p className="text-xs" style={{ color: '#fca5a5' }}>{form.formState.errors.current_tools.message}</p>
        )}
      </div>

      <div className="flex gap-3">
        <button
          type="button"
          onClick={onBack}
          className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
          style={{ color: 'var(--dt-text-secondary)', border: '1px solid var(--dt-border-subtle)' }}
        >
          <ArrowLeft className="w-4 h-4" />
          Back
        </button>
        <button
          type="submit"
          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"
          style={{ background: 'var(--dt-gradient-accent)' }}
        >
          Continue
          <ArrowRight className="w-4 h-4" />
        </button>
      </div>
    </form>
  )
}