"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 }) {

    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 (
        <>


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