"use client";

import { useState } from "react";
import { contactFormData } from "@/data/contact/contactFormData";

interface FormState {
  status: "idle" | "loading" | "success" | "error";
  message: string;
}

export default function ContactForm() {
  const [formState, setFormState] = useState<FormState>({
    status: "idle",
    message: "",
  });

  const [formData, setFormData] = useState<Record<string, string>>({});

  const handleInputChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

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

    setFormState({ status: "loading", message: "" });

    try {
      // Get form data from the event
      const formElement = e.currentTarget;
      const formDataObj = new FormData(formElement);

      // Add access key (you can make this configurable)
      formDataObj.append("access_key", "YOUR_WEB3FORMS_ACCESS_KEY");

      // Submit to web3forms
      const response = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        body: formDataObj,
      });

      const result = await response.json();

      if (result.success) {
        setFormState({
          status: "success",
          message: "Message sent successfully! We'll get back to you soon.",
        });
        formElement.reset();
        setFormData({});
      } else {
        // Handle specific error cases
        if (result.message && result.message.includes("Invalid access key")) {
          setFormState({
            status: "error",
            message:
              "Form submission is temporarily unavailable. Please contact us directly via email or phone.",
          });
        } else if (
          result.message &&
          result.message.includes("Invalid form_id/access_key format")
        ) {
          setFormState({
            status: "error",
            message:
              "You need to must put your access key after purchasing. Please contact us directly via email or phone for immediate assistance.",
          });
        } else {
          setFormState({
            status: "error",
            message:
              result.message || "Failed to send message. Please try again.",
          });
        }
      }
    } catch (error) {
      setFormState({
        status: "error",
        message: "Network error. Please check your connection and try again.",
      });
    }
  };

  return (
    <div
      className="contact-content"
      data-aos="fade-left"
      data-aos-duration={900}
      data-aos-delay={200}
    >
      <h4 className="title">{contactFormData.title}</h4>

      {/* Status Messages */}
      {formState.status !== "idle" && (
        <div
          className={`alert ${
            formState.status === "success"
              ? "alert-success"
              : formState.status === "error"
                ? "alert-danger"
                : "alert-info"
          }`}
          style={{
            padding: "10px 15px",
            marginBottom: "20px",
            borderRadius: "5px",
            backgroundColor:
              formState.status === "success"
                ? "#d4edda"
                : formState.status === "error"
                  ? "#f8d7da"
                  : "#d1ecf1",
            color:
              formState.status === "success"
                ? "#155724"
                : formState.status === "error"
                  ? "#721c24"
                  : "#0c5460",
            border: `1px solid ${
              formState.status === "success"
                ? "#c3e6cb"
                : formState.status === "error"
                  ? "#f5c6cb"
                  : "#bee5eb"
            }`,
          }}
        >
          {formState.status === "loading" && <span>Sending message...</span>}
          {formState.status === "success" && (
            <span>Success: {formState.message}</span>
          )}
          {formState.status === "error" && (
            <span>Error: {formState.message}</span>
          )}
        </div>
      )}

      <form onSubmit={handleSubmit} className="contact-form2">
        <div className="row">
          {contactFormData.fields.map((field, index) => (
            <div
              key={index}
              className={`col-lg-${field.width === "half" ? "6" : "12"}`}
            >
              <div
                className={`form-group ${field.type === "textarea" ? "mb-0" : ""}`}
              >
                <label>{field.label}</label>
                {field.type === "textarea" ? (
                  <textarea
                    name={field.name || "message"}
                    placeholder={field.placeholder}
                    value={formData[field.name || "message"] || ""}
                    onChange={handleInputChange}
                    required={field.required}
                  />
                ) : (
                  <input
                    type={field.type}
                    name={
                      field.name ||
                      field.label.toLowerCase().replace(/\s+/g, "_")
                    }
                    placeholder={field.placeholder}
                    value={
                      formData[
                        field.name ||
                          field.label.toLowerCase().replace(/\s+/g, "_")
                      ] || ""
                    }
                    onChange={handleInputChange}
                    required={field.required}
                  />
                )}
              </div>
            </div>
          ))}
          <div className="col-lg-5">
            <div className="form-group mb-0">
              <button
                type="submit"
                className="btn-style1"
                disabled={formState.status === "loading"}
                style={{
                  opacity: formState.status === "loading" ? 0.7 : 1,
                  cursor:
                    formState.status === "loading" ? "not-allowed" : "pointer",
                }}
              >
                {formState.status === "loading"
                  ? "Sending..."
                  : contactFormData.submitButton.text}
                <span>
                  <img
                    src={contactFormData.submitButton.icon.src}
                    alt={contactFormData.submitButton.icon.alt}
                  />
                </span>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
}