'use client'

import { useState } from 'react'
import { useForm } from 'react-hook-form'

interface OrderFormProps {
  productName: string
  productSlug: string
}

interface FormData {
  phone: string
}

export default function OrderForm({ productName, productSlug }: OrderFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle')
  const [errorMessage, setErrorMessage] = useState('')

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<FormData>()

  const validatePhone = (phone: string) => {
    // Ukrainian phone format: +380XXXXXXXXX or 0XXXXXXXXX
    const phoneRegex = /^(\+380|0)[0-9]{9}$/
    const cleaned = phone.replace(/\s|-|\(|\)/g, '')
    return phoneRegex.test(cleaned) || 'Введіть коректний номер телефону (наприклад: +380501234567 або 0501234567)'
  }

  const onSubmit = async (data: FormData) => {
    setIsSubmitting(true)
    setSubmitStatus('idle')
    setErrorMessage('')

    try {
      // Use relative URL since the API is now a Next.js route on the same domain
      const response = await fetch('/api/submit-order', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          phone: data.phone,
          productName,
          productSlug,
        }),
      })

      const result = await response.json()

      if (response.ok) {
        setSubmitStatus('success')
        reset()
        setTimeout(() => {
          setSubmitStatus('idle')
        }, 5000)
      } else {
        setSubmitStatus('error')
        setErrorMessage(result.message || 'Помилка при відправці заявки. Спробуйте ще раз.')
      }
    } catch (error) {
      setSubmitStatus('error')
      setErrorMessage('Помилка з\'єднання. Перевірте інтернет-з\'єднання та спробуйте ще раз.')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className="card p-6">
      <h3 className="text-2xl font-bold text-gray-900 mb-4">Залишити заявку</h3>
      <p className="text-gray-600 mb-6">
        Товар: <span className="font-semibold">{productName}</span>
      </p>

      {submitStatus === 'success' && (
        <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
          <p className="text-green-800 font-semibold">
            ✓ Заявку успішно відправлено! Ми зв'яжемося з вами найближчим часом.
          </p>
        </div>
      )}

      {submitStatus === 'error' && (
        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
          <p className="text-red-800">{errorMessage}</p>
        </div>
      )}

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        <div>
          <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
            Номер телефону *
          </label>
          <input
            id="phone"
            type="tel"
            placeholder="+380501234567 або 0501234567"
            className={`input-field ${errors.phone ? 'border-red-500' : ''}`}
            {...register('phone', {
              required: 'Номер телефону обов\'язковий',
              validate: validatePhone,
            })}
          />
          {errors.phone && (
            <p className="mt-1 text-sm text-red-600">{errors.phone.message}</p>
          )}
        </div>

        <button
          type="submit"
          disabled={isSubmitting}
          className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isSubmitting ? 'Відправка...' : 'Відправити заявку'}
        </button>
      </form>

      <p className="mt-4 text-xs text-gray-500 text-center">
        Натискаючи кнопку, ви погоджуєтесь на обробку персональних даних
      </p>
    </div>
  )
}