'use client'

import React, { useState } from 'react'
import { SectionLabel, Text } from '@/components/ui'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { submitContactForm } from '@/lib/api'
import { cn } from '@/lib/utils'
import type { ContactInfoItem, FormFieldLabel } from '@/types/about'

interface GetInTouchProps {
  badge: string
  title: string
  description: string
  contactInfo: ContactInfoItem[]
  formTitle: string
  formDescription: string
  formFieldLabels: FormFieldLabel[]
  submitButtonText: string
}

type FormValues = {
  name: string
  email: string
  mobile_number: string
  subject: string
  message: string
}

type FormErrors = Partial<Record<keyof FormValues, string>>

const initialFormValues: FormValues = {
  name: '',
  email: '',
  mobile_number: '',
  subject: '',
  message: '',
}

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
const phoneNumberOnly = (value: string) => {
  const trimmedValue = value.trimStart()
  const prefix = trimmedValue.startsWith('+') ? '+' : ''

  return `${prefix}${trimmedValue.replace(/\D/g, '')}`
}

function validateForm(values: FormValues): FormErrors {
  const errors: FormErrors = {}

  if (!values.name.trim()) errors.name = 'Name is required.'
  if (!values.email.trim()) {
    errors.email = 'Email is required.'
  } else if (!emailPattern.test(values.email.trim())) {
    errors.email = 'Enter a valid email address.'
  }
  if (!values.mobile_number.trim()) errors.mobile_number = 'Mobile number is required.'
  if (!values.subject.trim()) errors.subject = 'Subject is required.'
  if (!values.message.trim()) errors.message = 'Message is required.'

  return errors
}

export const GetInTouch = ({ badge, title, description, contactInfo, formTitle, formDescription, formFieldLabels, submitButtonText }: GetInTouchProps) => {
  const [formValues, setFormValues] = useState<FormValues>(initialFormValues)
  const [errors, setErrors] = useState<FormErrors>({})
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null)

  const isFormValid = Object.keys(validateForm(formValues)).length === 0
  const getPlaceholder = (index: number) => formFieldLabels[index]?.field_label ?? ''

  const updateField = (field: keyof FormValues, value: string) => {
    const nextValues = { ...formValues, [field]: value }
    setFormValues(nextValues)
    setSubmitStatus(null)

    if (errors[field]) {
      setErrors((currentErrors) => ({
        ...currentErrors,
        [field]: validateForm(nextValues)[field],
      }))
    }
  }

  const validateField = (field: keyof FormValues) => {
    setErrors((currentErrors) => ({
      ...currentErrors,
      [field]: validateForm(formValues)[field],
    }))
  }

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()

    const validationErrors = validateForm(formValues)
    setErrors(validationErrors)
    setSubmitStatus(null)

    if (Object.keys(validationErrors).length > 0) return

    const body = new FormData()
    Object.entries(formValues).forEach(([key, value]) => body.append(key, value.trim()))

    setIsSubmitting(true)

    try {
      const result = await submitContactForm(body)

      setFormValues(initialFormValues)
      setErrors({})
      setSubmitStatus({
        type: 'success',
        message: result.message || 'Your message has been sent successfully.',
      })
    } catch (error) {
      setSubmitStatus({
        type: 'error',
        message: error instanceof Error ? error.message : 'Unable to send your message. Please try again.',
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <section id='getintouch' className='stack'>
      <div className='bg-primary py-20 md:py-24 xl:py-[150px]'>
        <div className='container'>
          <div className='flex flex-col lg:flex-row gap-10 xl:gap-16 justify-between lg:items-end'>
            <div className='space-y-[30px] md:space-y-10 xl:space-y-[50px]'>
              <SectionLabel
                label={badge}
                    textclass='text-white'
                title={<span dangerouslySetInnerHTML={{ __html: title.replace('<span>', '<span class="gradient-text">') }} />}
                description={description}
                titleClassName='max-w-[40rem]'
                descriptionClassName='max-w-[38rem]'
              />

              <div className='space-y-5 xl:space-y-[30px]'>
                <div className='grid grid-cols-1 md:grid-cols-2 gap-5 xl:gap-[30px]'>
                  {contactInfo.slice(0, 4).map((item, i) => (
                    <div key={`${item.contact_info_title}-${i}`} className='space-y-0.5'>
                      <Text size='body' fontWeight={700} className='text-[#39B574]'>{item.contact_info_title}</Text>
                      {item.contact_info_link ? (
                        <a href={item.contact_info_link} className='block text-sm lg:text-base xl:text-lg text-white max-w-[20rem]'>
                          {item.contact_info_value}
                        </a>
                      ) : (
                        <Text size='subtitle' className='text-white  max-w-[20rem]'>{item.contact_info_value}</Text>
                      )}
                    </div>
                  ))}
                </div>
                {contactInfo[4] && (
                  <div className='space-y-0.5'>
                    <Text size='body' fontWeight={700} className='text-[#39B574]'>{contactInfo[4].contact_info_title}</Text>
                    {contactInfo[4].contact_info_link ? (
                      <a href={contactInfo[4].contact_info_link} className='block text-sm lg:text-base xl:text-lg text-white  max-w-[20rem]'>
                        {contactInfo[4].contact_info_value}
                      </a>
                    ) : (
                      <Text size='subtitle' className='text-white '>{contactInfo[4].contact_info_value}</Text>
                    )}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full   lg:min-w-[510px] lg:w-[510px]  xl:min-w-[650px] xl:w-[650px] 2xl:min-w-[752px] 2xl:w-[752px] bg-[#2D643A] rounded-[30px] p-5 lg:p-7 xl:p-10 2xl:p-[50px] space-y-[30px] xl:space-y-[50px]'>
              <div className='space-y-2.5'>
                <Text size='h3' className='text-white' fontWeight={600}>{formTitle}</Text>
                <Text size='normal' className='text-white'>{formDescription}</Text>
              </div>

              <form className='flex flex-col gap-5' onSubmit={handleSubmit} noValidate>
                <div className='flex flex-col sm:flex-row gap-5'>
                  <div className='w-full'>
                    <Input
                      type='text'
                      name='name'
                      value={formValues.name}
                      onChange={(event) => updateField('name', event.target.value)}
                      onBlur={() => validateField('name')}
                      placeholder={getPlaceholder(0)}
                      aria-invalid={Boolean(errors.name)}
                      aria-describedby={errors.name ? 'contact-name-error' : undefined}
                      required
                    />
                    {errors.name && <p id='contact-name-error' className='mt-1.5 text-sm text-red-600'>{errors.name}</p>}
                  </div>
                  <div className='w-full'>
                    <Input
                      type='email'
                      name='email'
                      value={formValues.email}
                      onChange={(event) => updateField('email', event.target.value)}
                      onBlur={() => validateField('email')}
                      placeholder={getPlaceholder(1)}
                      aria-invalid={Boolean(errors.email)}
                      aria-describedby={errors.email ? 'contact-email-error' : undefined}
                      required
                    />
                    {errors.email && <p id='contact-email-error' className='mt-1.5 text-sm text-red-600'>{errors.email}</p>}
                  </div>
                </div>
                <div>
                  <Input
                    type='tel'
                    name='mobile_number'
                    value={formValues.mobile_number}
                    onChange={(event) => updateField('mobile_number', phoneNumberOnly(event.target.value))}
                    onBlur={() => validateField('mobile_number')}
                    placeholder={getPlaceholder(2)}
                    inputMode='tel'
                    pattern='^\+?[0-9]*$'
                    aria-invalid={Boolean(errors.mobile_number)}
                    aria-describedby={errors.mobile_number ? 'contact-mobile-error' : undefined}
                    required
                  />
                  {errors.mobile_number && <p id='contact-mobile-error' className='mt-1.5 text-sm text-red-600'>{errors.mobile_number}</p>}
                </div>
                <div>
                  <Input
                    type='text'
                    name='subject'
                    value={formValues.subject}
                    onChange={(event) => updateField('subject', event.target.value)}
                    onBlur={() => validateField('subject')}
                    placeholder={getPlaceholder(3)}
                    aria-invalid={Boolean(errors.subject)}
                    aria-describedby={errors.subject ? 'contact-subject-error' : undefined}
                    required
                  />
                  {errors.subject && <p id='contact-subject-error' className='mt-1.5 text-sm text-red-600'>{errors.subject}</p>}
                </div>
                <div>
                  <textarea
                    name='message'
                    value={formValues.message}
                    onChange={(event) => updateField('message', event.target.value)}
                    onBlur={() => validateField('message')}
                    rows={4}
                    placeholder={getPlaceholder(4)}
                    aria-invalid={Boolean(errors.message)}
                    aria-describedby={errors.message ? 'contact-message-error' : undefined}
                    required
                    className={cn(
                      'bg-white w-full rounded-[16px] px-6 py-[15px] text-base outline-none border border-transparent resize-none',
                      'placeholder:text-[#6D6D6D80] aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',
                    )}
                  />
                  {errors.message && <p id='contact-message-error' className='mt-1.5 text-sm text-red-600'>{errors.message}</p>}
                </div>
                {submitStatus && (
                  <p
                    role='status'
                    className={submitStatus.type === 'success' ? 'text-sm text-[#017A43]' : 'text-sm text-red-600'}
                  >
                    {submitStatus.message}
                  </p>
                )}
                <div>
                  <Button type='submit' disabled={!isFormValid || isSubmitting}>
                    {submitButtonText}
                  </Button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}