"use client";

import Image from "next/image";
import { useState } from "react";
import {
  contactFormData,
  contactFormWeb3Settings,
  type ContactFormInputRow,
  type ContactFormSubmitRow,
  type ContactFormTextareaRow,
} from "@/data/contact/contactFormData";

const accessKey = process.env.NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY ?? "";

export default function ContactForm() {
  const { formAos, secTitle, fields } = contactFormData;
  const web3 = contactFormWeb3Settings;
  const inputFields = fields.filter(
    (f): f is ContactFormInputRow | ContactFormTextareaRow =>
      f.fieldKind !== "submit",
  );
  const submitRow = fields.find(
    (f): f is ContactFormSubmitRow => f.fieldKind === "submit",
  );
  const [formData, setFormData] = useState<Record<string, string>>({});
  const [status, setStatus] = useState<"idle" | "sending" | "success" | "error">(
    "idle",
  );

  const submitLabel =
    status === "sending"
      ? web3.sendingLabel
      : (submitRow?.buttonLabel ?? "Send");

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

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!accessKey.trim()) {
      setStatus("error");
      return;
    }
    const formEl = e.currentTarget;
    const payload: Record<string, string> = {
      access_key: accessKey.trim(),
      ...formData,
    };

    // Keep fallback subject for forms where subject input is left blank.
    const subject = String(payload.subject ?? "").trim();
    if (!subject) {
      payload.subject = web3.defaultSubject;
    }

    setStatus("sending");
    try {
      const res = await fetch(web3.submitUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(payload),
      });
      const data = (await res.json()) as { success?: boolean };
      setStatus(data.success === true ? "success" : "error");
      if (data.success === true) {
        setFormData({});
        formEl.reset();
      }
    } catch {
      setStatus("error");
    }
  }

  const feedback =
    status === "success"
      ? web3.successMessage
      : status === "error"
        ? !accessKey.trim()
          ? web3.missingAccessKeyMessage
          : web3.errorMessage
        : null;

  return (
    <div className="form-content space-md-top">
      <div className="sec-title">
        <span
          className="sub-title"
          data-aos="fade-up"
          data-aos-duration={secTitle.subTitleAos.duration}
          data-aos-delay={secTitle.subTitleAos.delay}
        >
          {secTitle.subTitle}
        </span>
        <h2
          className="title"
          data-aos="fade-up"
          data-aos-duration={secTitle.titleAos.duration}
          data-aos-delay={secTitle.titleAos.delay}
        >
          {secTitle.title}
        </h2>
      </div>
      {feedback ? (
        <div
          className={`alert mb-3 ${status === "success" ? "alert-success" : "alert-danger"}`}
          role="status"
          aria-live="polite"
        >
          {feedback}
        </div>
      ) : null}
      <form
        className="contact-form"
        data-aos="fade-up"
        data-aos-duration={formAos.duration}
        data-aos-delay={formAos.delay}
        onSubmit={handleSubmit}
      >
        <div className="row">
          {inputFields.map((field) => (
            <div key={field.id} className={field.colClass}>
              <div className="form-group">
                <label htmlFor={field.name}>{field.label}</label>
                {field.fieldKind === "textarea" ? (
                  <textarea
                    id={field.name}
                    name={field.name}
                    placeholder={field.placeholder}
                    onChange={handleInputChange}
                    disabled={status === "sending"}
                  />
                ) : (
                  <input
                    id={field.name}
                    name={field.name}
                    type={field.type}
                    placeholder={field.placeholder}
                    required={field.required}
                    onChange={handleInputChange}
                    disabled={status === "sending"}
                  />
                )}
              </div>
            </div>
          ))}

          {submitRow ? (
            <div className={submitRow.colClass}>
              <div className={submitRow.groupClass}>
                <button
                  type="submit"
                  className="btn-style1"
                  disabled={status === "sending"}
                >
                  {submitLabel}
                  <span>
                    <Image
                      src={submitRow.iconSrc}
                      alt={submitRow.iconAlt}
                      width={14}
                      height={14}
                    />
                  </span>
                </button>
              </div>
            </div>
          ) : null}
        </div>
      </form>
    </div>
  );
}