import React, {useEffect, useState} from "react";
import {sendEmail} from "@/app/utils/send-email";

export type FormData = {
    name: string;
    email: string;
    message: string;
}

export default function Contact() {
    const [isVisible, setIsVisible] = useState(false);
    const [banner, setBanner] = useState<{ show: boolean, message: string, type: 'success' | 'error' }>({
        show: false,
        message: '',
        type: 'success'
    });

    useEffect(() => {
        setTimeout(() => {
            setIsVisible(true);
        }, 350); // Delay to start the animation after Projects
    }, []);

    async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault();
        const form = e.currentTarget;
        const data: FormData = {
            name: (form.elements.namedItem('name') as HTMLInputElement).value,
            email: (form.elements.namedItem('email') as HTMLInputElement).value,
            message: (form.elements.namedItem('message') as HTMLTextAreaElement).value,
        };
        const response = await sendEmail(data);
        if (response.success) {
            form.reset();
        }
        setBanner({show: true, message: response.message, type: response.success ? 'success' : 'error'});
        setTimeout(() => {
            setBanner({...banner, show: false});
        }, 3000); // Hide banner after 3 seconds
    }

    return (
        <section id="contact" className={`p-10 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
            <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
                Contact Me
            </h2>
            <div
                className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto mt-6 relative">
                {banner.show && (
                    <div
                        className={`absolute top-0 left-0 right-0 text-white text-center py-2 rounded-2xl animate-fade-out ${banner.type === 'success' ? 'bg-green-500' : 'bg-red-500'}`}>
                        {banner.message}
                    </div>
                )}
                <form className="w-full space-y-4" onSubmit={onSubmit}>
                    <input
                        type="text"
                        name="name"
                        placeholder="Name"
                        className="w-full p-2 border rounded dark:text-white"
                        required
                    />
                    <input
                        type="email"
                        name="email"
                        placeholder="Email"
                        className="w-full p-2 border rounded dark:text-white"
                        required
                    />
                    <textarea
                        name="message"
                        placeholder="Message"
                        className="w-full p-2 border rounded dark:text-white"
                        rows={5}
                        required
                    ></textarea>
                    <button
                        type="submit"
                        className="w-full p-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded hover:from-blue-600 hover:to-purple-600 transition"
                    >
                        Send
                    </button>
                </form>
            </div>
        </section>
    );
}