"use client"; // Ensure this is a Client Component

import { X } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import { toast } from "react-toastify";
import graphql from "src/utils/graphql";

const gql = `
mutation CreateInbox($data: InboxInput!,$locale:I18NLocaleCode) {
    createInbox(data: $data, locale: $locale) {
        documentId
    }
}
`

export default function ContactModal({ close, open }) {



    return (
        <>


            {/* Modal Overlay */}
            {open && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                    {/* Modal Content */}
                    <ContactBody />
                </div>
            )}
        </>
    );
}


export const ContactBody = () => {
    const t = useTranslations("ContactModal");
    const locale = useLocale()

    const submitForm = async (e) => {
        e.preventDefault();
        const email = e.target.email.value;
        const companyName = e.target.company.value;
        const message = e.target.message.value;
        if (!email || !companyName || !message) {
            toast.error(t("error.fillAllFields"));
            return;
        }
        if (!email.includes("@")) {
            toast.error(t("error.invalidEmail"));
            return;
        }

        const { createInbox } = await graphql(gql, {
            data: {
                email,
                companyName,
                message,

            },
            locale
        })
        if (createInbox.documentId) {
            toast.success(t("success"));
            close();
        }
    }
    return (
        <div className="bg-white rounded-lg shadow-lg w-full max-w-md p-6">
            <div className="flex justify-between items-center mb-4">
                <h2 className="text-xl font-semibold">{t("title")}</h2>
                <button
                    onClick={close}
                    className="text-gray-500 hover:text-gray-700"
                >
                    <X className="h-6 w-6" />
                </button>
            </div>

            {/* Form */}
            <form onSubmit={submitForm} className="space-y-4">
                {/* Email Field */}
                <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                        {t("email")}
                    </label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        placeholder={t("emailPlaceholder")}
                        className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                        required
                    />
                </div>

                {/* Company Field */}
                <div>
                    <label htmlFor="company" className="block text-sm font-medium text-gray-700">
                        {t("company")}
                    </label>
                    <input
                        type="text"
                        id="company"
                        name="company"
                        placeholder={t("companyPlaceholder")}
                        className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                        required
                    />
                </div>

                {/* Message Field */}
                <div>
                    <label htmlFor="message" className="block text-sm font-medium text-gray-700">
                        {t("message")}
                    </label>
                    <textarea
                        id="message"
                        name="message"
                        rows={4}
                        placeholder={t("messagePlaceholder")}
                        className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                        required
                    />
                </div>

                {/* Submit Button */}
                <div className="flex gap-2">
                    <button
                        type="submit"
                        className="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors"
                    >
                        {t("sendButton")}
                    </button>
                    <button
                        onClick={close}
                        type="button"
                        className="w-fit border px-4 py-2 bg-white text-gray-500 rounded-md hover:bg-primary-dark transition-colors"
                    >
                        {t("closeButton")}
                    </button>
                </div>
            </form>
        </div>
    )
}