"use client";

import { ChangeEvent, useEffect, useState } from "react";
import { getAboutUs, sendInvitationEmail } from "./actions";
import Image from "next/image";
import heroImage from "@/assets/about-hero.jpg";

const Loading = () => {
    return (
        <>
            <p className="text-4xl py-4 grid justify-center items-center min-h-[50vh]">
                <svg className="lucide lucide-loader-circle animate-spin" xmlns="http://www.w3.org/2000/svg" width="74" height="74" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
            </p>
        </>
    );
}
const About = () => {
    const [data, setdata] = useState("");

    const [formData, setFormData] = useState({
        reason: "Feedback",
        email: "",
        subject: "",
        message: "",
    })

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

    const handleSubmit = async () => {
        await sendInvitationEmail(formData)
    }

    useEffect(() => {
        const getData = async () => {
            const response = await getAboutUs();
            setdata(response?.aboutContent || "")
        }
        getData();
    }, [])

    return (
        <>
            <header className="relative h-[60vh] flex items-center justify-center">
                {/* Background Image */}
                <Image
                    src={heroImage}
                    alt="Hero Background"
                    fill
                    className="object-cover"
                    priority
                />

                {/* Dark Overlay */}
                <div className="absolute inset-0 bg-black/50" />

                {/* Header Content */}
                <h1 className="text-5xl z-10 relative text-white text-center font-bold">Contact Us</h1>
            </header>

            <section className="flex justify-between items-start gap-x-10 px-12 py-4 mt-14">
                <div className="w-[100%] grid justify-center">
                    <h1 className="pb-3 text-3xl font-bold text-start text-primary pl-14">About us</h1>
                    <div className="grid justify-center w-[80%] mx-auto text-md mb-24">
                        {data ?
                            <div className="text-start grid justify-center" dangerouslySetInnerHTML={{ __html: data }}></div>
                            : <Loading />}
                    </div>
                </div>


                <div className="text-md w-[100%] mb-12">
                    <form className="py-2">
                        <div>
                            <label className="text-md font-bold block mb-1" htmlFor="subject">Subject:</label>
                            <input name="subject" value={formData.subject} onChange={handleChange} placeholder="Reason for Contact" className="w-full mb-4 border border-gray-300 p-1 py-2 rounded" type="text" />
                        </div>

                        <div>
                            <label className="text-md font-bold block mb-1" htmlFor="email">Email:</label>
                            <input name="email" value={formData.email} onChange={handleChange} placeholder="Enter your email" className="w-full mb-4 border border-gray-300 p-1 py-2 rounded" type="email" />
                        </div>

                        <div>
                            <label className="text-md font-bold block mb-1" htmlFor="Reason">Reason:</label>
                            <select name="reason" value={formData.reason} onChange={handleChange} className="mb-4 border border-gray-300 py-2 rounded w-full pr-1">
                                <option value="feedback">Feedback</option>
                                <option value="inquiry">Inquiry</option>
                                <option value="support">Support Request</option>
                                <option value="partnership">Partnership Opportunity</option>
                                <option value="suggestion">Suggestion</option>
                                <option value="technical">Technical Issue</option>
                                <option value="billing">Billing Issue</option>
                                <option value="account">Account Assistance</option>
                                <option value="service">Service Request</option>
                                <option value="general">General Question</option>
                            </select>
                        </div>

                        <div className="pt-1">
                            <label className="text-md font-bold mb-1" htmlFor="message">Message:</label>
                            <textarea value={formData.message} onChange={handleChange} className="w-full min-h-[30vh] mb-4 border border-gray-300 p-1 rounded" name="message" id="" placeholder="Type your message here"></textarea>
                        </div>
                        <div className="flex justify-between">
                            <button onClick={() => { setFormData({ reason: "Feedback", email: "", subject: "", message: "" }) }} className="border border-gray-500 px-4 py-2 rounded text-gray-700 hover:bg-gray-500 hover:text-white focus:ring-2 focus:ring-gray-300 transition duration-200">
                                Cancel
                            </button>

                            <button onClick={(e) => {
                                e.preventDefault()

                                try {
                                    handleSubmit();
                                    alert("Email sent successfully")
                                    setFormData({ reason: "Feedback", email: "", subject: "", message: "" })
                                } catch (error) {
                                    console.log(error);
                                    alert("Something went wrong")
                                }
                            }} className="bg-primary hover:bg-secondary text-white py-2 px-4 rounded">
                                Submit
                            </button>
                        </div>
                    </form>
                </div>
            </section>

        </>
    );
};

export default About;