'use client';

import {useTranslations} from 'next-intl';
import { FormEvent, useState } from 'react';
import toast from 'react-hot-toast'; // <-- Import toast

export default function Contact() {
  const t = useTranslations('contact');
  const [formData, setFormData] = useState<{ name: string; email: string; message: string }>({ name: '', email: '', message: '' });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    if (!formData.name || !formData.email || !formData.message) {
      toast.error(t('status_error_all_fields'));
      setIsSubmitting(false);
      return;
    }
    if (!/\S+@\S+\.\S+/.test(formData.email)) {
      toast.error(t('status_error_invalid_email'));
      setIsSubmitting(false);
      return;
    }

    const submissionPromise = async () => {
      try {
        const response = await fetch(`/api/email/send`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData),
        });

        if (!response.ok) {
          const body = await response.json();
          throw new Error(body.errorKey || 'status_error_generic');
        }

        return await response.json();

      } catch (error: any) {
        if (error instanceof TypeError) {
          throw new Error('status_error_generic');
        }
        throw error;
      }
    };

    toast.promise(submissionPromise(), {
      loading: t('status_sending'),
      success: () => {
        setFormData({ name: '', email: '', message: '' });
        setIsSubmitting(false);
        return t('status_success');
      },
      error: (err: Error) => {
        setIsSubmitting(false);
        return t(err.message as any);
      },
    });
  };

  return (
    <section id="contact" className="container mx-auto py-24 md:py-32 lg:py-48">
      <div className="text-center max-w-2xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] mb-4">{t('title')}</h2>
        <p className="text-[var(--color-text-secondary)] mb-10">{t('subtitle')}</p>
      </div>
      <form onSubmit={handleSubmit} className="max-w-xl mx-auto">
        <div className="mb-4">
          <label htmlFor="name" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_name')}</label>
          <input type="text" name="name" id="name" value={formData.name} onChange={handleChange} required
           className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" />
        </div>
        <div className="mb-4">
          <label htmlFor="email" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_email')}</label>
          <input type="email" name="email" id="email" value={formData.email} onChange={handleChange} required
           className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" />
        </div>
        <div className="mb-6">
          <label htmlFor="message" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_message')}</label>
          <textarea name="message" id="message" rows={5} value={formData.message} onChange={handleChange} required
            className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5"></textarea>
        </div>
        <div className="text-center">
          <button type="submit" className="bg-[var(--color-primary)] hover:bg-[var(--color-primary)]/90 text-white font-bold py-3 px-8 rounded-full transition-colors">
            {t('submit_button')}
          </button>
        </div>
      </form>
    </section>
  );
}