import { useState } from 'react';
import LoadingSpinner from '../components/partials/LoadingSpinner';
import MetaTags from '../components/partials/MetaTags';
import endpoints from '../config/apiEndpoints';

export default function ContactUs() {
    const {contactUsStore: contactUsStoreApi} = endpoints;

    const [formData, setFormData] = useState({
        name: '',
        phone: '',
        email: '',
        subject: '',
        description: ''
    });
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [submitStatus, setSubmitStatus] = useState<{message: string, isError: boolean} | null>(null);

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

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);
        setSubmitStatus(null);
        
        try {
            const response = await fetch(contactUsStoreApi, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData),
            });
            
            if (response.ok) {
                setSubmitStatus({
                    message: 'Your message has been sent successfully!',
                    isError: false
                });
                
                // Reset form after successful submission
                setFormData({
                    name: '',
                    phone: '',
                    email: '',
                    subject: '',
                    description: ''
                });
            } else {
                setSubmitStatus({
                    message: 'Failed to send message. Please try again later.',
                    isError: true
                });
            }
        } catch (error) {
            setSubmitStatus({
                message: 'An error occurred. Please try again later.',
                isError: true
            });
            console.log(error);
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <>
            <MetaTags title="Contact With Matrimonial" />
            {isSubmitting && <LoadingSpinner text="Sending" />}
            
            <div className="max-w-3xl mx-auto px-6 py-12">
                {submitStatus && (
                    <div className={`p-4 mb-6 rounded-md ${submitStatus.isError ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`}>
                        {submitStatus.message}
                    </div>
                )}
                
                <form onSubmit={handleSubmit} className="space-y-6">
                    <div>
                        <label className="block text-black mb-1">
                            Name <span className="text-red-500">*</span>
                        </label>
                        <input 
                            type="text" 
                            name="name"
                            value={formData.name}
                            onChange={handleChange}
                            placeholder="Enter your full name" 
                            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" 
                            required 
                        />
                    </div>

                    <div>
                        <label className="block text-black mb-1">
                            Phone <span className="text-red-500">*</span>
                        </label>
                        <input 
                            type="tel" 
                            name="phone"
                            value={formData.phone}
                            onChange={handleChange}
                            placeholder="Enter Your Phone" 
                            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" 
                            required 
                        />
                    </div>

                    <div>
                        <label className="block text-black mb-1">
                            Email 
                        </label>
                        <input 
                            type="email" 
                            name="email"
                            value={formData.email}
                            onChange={handleChange}
                            placeholder="Enter Your E-mail" 
                            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" 
                        />
                        <p className="text-sm text-gray-500 mt-1">
                            Please, enter the email address where you wish to receive our answer.
                        </p>
                    </div>

                    <div>
                        <label className="block text-black mb-1">
                            Subject 
                        </label>
                        <input 
                            type="text" 
                            name="subject"
                            value={formData.subject}
                            onChange={handleChange}
                            placeholder="Write the subject here" 
                            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" 
                        />
                    </div>

                    <div>
                        <label className="block text-black mb-1">
                            Description <span className="text-red-500">*</span>
                        </label>
                        <textarea 
                            name="description"
                            value={formData.description}
                            onChange={handleChange}
                            placeholder="Write your description here" 
                            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500 h-32" 
                            required 
                        />
                    </div>

                    {/* ReCAPTCHA would go here */}
                    <div className="g-recaptcha" data-sitekey="6Lfte3oqAAAAAFHK1ZKYPXBxaJdjSxF2kiEyDjIj"></div>

                    <button type="submit" className="w-full bg-primary text-white font-bold py-3 rounded-md hover:bg-pink-600 transition">
                        Send
                    </button>
                </form>
            </div>
        </>
    );
}