"use client";

import { FormEvent, useState } from "react";
import Image from "next/image";
import { contactFormData } from "@/data/contact/contactFormData";

interface ContactFormValues {
  name: string;
  email: string;
  phone: string;
  service: string;
  message: string;
}

const initialValues: ContactFormValues = {
  name: "",
  email: "",
  phone: "",
  service: "",
  message: "",
};

export default function ContactForm() {
  const [formValues, setFormValues] = useState<ContactFormValues>(initialValues);
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
  const [statusMessage, setStatusMessage] = useState<string>("");
  const [statusType, setStatusType] = useState<"success" | "error" | "idle">("idle");

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const accessKey = process.env.NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY;
    if (!accessKey) {
      setStatusType("error");
      setStatusMessage(
        "Web3Forms access key is missing. Set NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY. After purchase, you need to add your Web3Forms access key.",
      );
      return;
    }

    setIsSubmitting(true);
    setStatusType("idle");
    setStatusMessage("");

    try {
      const response = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({
          access_key: accessKey,
          subject: "New contact form submission",
          from_name: formValues.name,
          ...formValues,
        }),
      });

      const result: { success?: boolean; message?: string } = await response.json();

      if (response.ok && result.success) {
        setStatusType("success");
        setStatusMessage("Message sent successfully. We'll get back to you soon.");
        setFormValues(initialValues);
      } else {
        setStatusType("error");
        setStatusMessage(result.message || "Failed to send message. Please try again.");
      }
    } catch {
      setStatusType("error");
      setStatusMessage("Something went wrong while sending your message.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <section className="form-sec space">
      <div className="carousel-container">
        <div className="row">
          <div className="col-lg-5">
            {contactFormData.intro.map((intro) => (
              <div
                className="form-content"
                data-aos={intro.aosAnimation}
                data-aos-duration={intro.aosDuration}
                data-aos-delay={intro.aosDelay}
                key={intro.id}
              >
                <div className="sec-title">
                  <h2 className="title">{intro.title}</h2>
                  <p>{intro.description}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="col-lg-7">
            {contactFormData.formShell.map((shell) => (
              <form
                className="contact-form"
                data-aos={shell.aosAnimation}
                data-aos-duration={shell.aosDuration}
                data-aos-delay={shell.aosDelay}
                onSubmit={handleSubmit}
                key={shell.id}
              >
                <div className="row">
                  {contactFormData.inputFields.map((field) => (
                    <div className={field.wrapperClass} key={field.id}>
                      <div className="form-group">
                        <input
                          type={field.type}
                          name={field.name}
                          placeholder={field.placeholder}
                          required={field.required}
                          value={formValues[field.name as keyof ContactFormValues]}
                          onChange={(event) =>
                            setFormValues((prev) => ({
                              ...prev,
                              [field.name]: event.target.value,
                            }))
                          }
                        />
                      </div>
                    </div>
                  ))}

                  {contactFormData.textareaFields.map((field) => (
                    <div className={field.wrapperClass} key={field.id}>
                      <div className="form-group v3">
                        <textarea
                          name={field.name}
                          placeholder={field.placeholder}
                          required={field.required}
                          value={formValues[field.name as keyof ContactFormValues]}
                          onChange={(event) =>
                            setFormValues((prev) => ({
                              ...prev,
                              [field.name]: event.target.value,
                            }))
                          }
                        />
                      </div>
                    </div>
                  ))}

                  {contactFormData.submitButtons.map((button) => (
                    <div className="col-lg-12" key={button.id}>
                      <div className="form-group v2 mb-0">
                        <button type="submit" className="btn-style1" disabled={isSubmitting}>
                          {isSubmitting ? "Sending..." : button.label}
                          <span>
                            <Image src={button.icon} alt={button.iconAlt} width={14} height={14} />
                          </span>
                        </button>
                      </div>
                    </div>
                  ))}

                  {[statusMessage].map((message) =>
                    message ? (
                      <div className="col-lg-12" key={message}>
                        <p className={statusType === "success" ? "text-success" : "text-danger"}>
                          {message}
                        </p>
                      </div>
                    ) : null,
                  )}
                </div>
              </form>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}