'use client';

import { useState } from 'react';
import Button from '@/components/uikit/button';
import FormField from '@/components/uikit/inputs';
import { useTranslations } from 'next-intl';
import { setContact } from '@/services/contact';

const ContactForm = ({ className = '' }) => {
  const t = useTranslations();

  const [formData, setFormData] = useState({
    first_name: '',
    last_name: '',
    email: '',
    phone: '',
    message: '',
  });

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(false);

  const validate = () => {
    const newErrors: Record<string, string> = {};

    if (!formData.first_name.trim())
      newErrors.first_name = t('com_contact_first_name_required');
    if (!formData.last_name.trim())
      newErrors.last_name = t('com_contact_last_name_required');

    if (!formData.email) {
      newErrors.email = t('com_contact_email_required');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = t('com_contact_email_error');
    }

    if (!formData.phone) {
      newErrors.phone = t('com_contact_phone_required');
    } else if (!/^09\d{9}$/.test(formData.phone)) {
      newErrors.phone = t('com_contact_phone_error');
    }

    if (!formData.message.trim()) {
      newErrors.message = t('com_contact_textarea_required');
    } else if (formData.message.trim().length < 10) {
      newErrors.message = t('com_contact_textarea_error');
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleChange = (field: string, value: string) => {
    setFormData({ ...formData, [field]: value });
    setErrors({ ...errors, [field]: '' });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setContact(formData).finally(() => {
      setLoading(false);
    });
  };

  return (
    <form
      onSubmit={handleSubmit}
      className={`z-10 w-full rounded-4xl bg-white ${className}`}
    >
      <h2 className="mt-8 mb-10 text-5xl text-gray-800">
        {t('com_contact_title')}{' '}
        <span className="text-5xl font-bold">
          {t('com_contact_title_bold')}
        </span>
      </h2>

      <div className="space-y-6">
        <div className="flex flex-col gap-6 md:flex-row md:gap-8">
          <div className="w-full">
            <FormField
              type="text"
              placeholder={t('com_contact_first_name')}
              value={formData.first_name}
              onChange={(e: any) => handleChange('first_name', e.target.value)}
            />
            {errors.first_name && (
              <p className="text-primary mt-1 text-sm">{errors.first_name}</p>
            )}
          </div>

          <div className="w-full">
            <FormField
              type="text"
              placeholder={t('com_contact_last_name')}
              value={formData.last_name}
              onChange={(e: any) => handleChange('last_name', e.target.value)}
            />
            {errors.last_name && (
              <p className="text-primary mt-1 text-sm">{errors.last_name}</p>
            )}
          </div>
        </div>

        <div>
          <FormField
            type="email"
            placeholder={t('com_contact_email')}
            value={formData.email}
            onChange={(e: any) => handleChange('email', e.target.value)}
          />
          {errors.email && (
            <p className="text-primary mt-1 text-sm">{errors.email}</p>
          )}
        </div>

        <div>
          <FormField
            type="tel"
            placeholder={t('com_contact_phone')}
            value={formData.phone}
            onChange={(e: any) => handleChange('phone', e.target.value)}
          />
          {errors.phone && (
            <p className="text-primary mt-1 text-sm">{errors.phone}</p>
          )}
        </div>

        <div>
          <FormField
            type="textarea"
            placeholder={t('com_contact_textarea')}
            value={formData.message}
            onChange={(e: any) => handleChange('message', e.target.value)}
          />
          {errors.message && (
            <p className="text-primary mt-1 text-sm">{errors.message}</p>
          )}
        </div>

        <Button disabled={loading}>{t('com_contact_button_submit')}</Button>
      </div>
    </form>
  );
};

export default ContactForm;
