"use client";

import Image from "next/image";
import { CSSProperties, FormEvent, useState } from "react";

type FormValues = {
  name: string;
  email: string;
  subject: string;
  message: string;
  companyWebsite: string; // honeypot field
};

type FormErrors = Partial<
  Record<keyof Omit<FormValues, "companyWebsite">, string>
>;

const initialValues: FormValues = {
  name: "",
  email: "",
  subject: "",
  message: "",
  companyWebsite: "",
};

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const errorInputStyle: CSSProperties = {
  borderColor: "#dc2626",
};
const errorTextStyle: CSSProperties = {
  color: "#dc2626",
};
const statusTextStyle: CSSProperties = {
  color: "#16a34a",
  marginTop: "10px",
};

const ContactForm = () => {
  const [values, setValues] = useState<FormValues>(initialValues);
  const [errors, setErrors] = useState<FormErrors>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitMessage, setSubmitMessage] = useState<string | null>(null);

  const validate = (): FormErrors => {
    const nextErrors: FormErrors = {};

    if (!values.name.trim()) nextErrors.name = "Full name is required.";
    else if (values.name.trim().length < 2)
      nextErrors.name = "Name is too short.";

    if (!values.email.trim()) nextErrors.email = "Email address is required.";
    else if (!emailRegex.test(values.email.trim()))
      nextErrors.email = "Enter a valid email address.";

    if (!values.subject.trim()) nextErrors.subject = "Subject is required.";
    else if (values.subject.trim().length < 3)
      nextErrors.subject = "Subject is too short.";

    if (!values.message.trim()) nextErrors.message = "Message is required.";
    else if (values.message.trim().length < 10)
      nextErrors.message = "Message must be at least 10 characters.";

    return nextErrors;
  };

  const handleChange =
    (field: keyof FormValues) =>
    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
      const value = event.target.value;
      setValues((prev) => ({ ...prev, [field]: value }));

      if (field !== "companyWebsite") {
        setErrors((prev) => ({ ...prev, [field]: undefined }));
      }
    };

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

    // Honeypot check
    if (values.companyWebsite) {
      setSubmitMessage("Submission blocked.");
      return;
    }

    const nextErrors = validate();
    setErrors(nextErrors);

    if (Object.keys(nextErrors).length > 0) return;

    try {
      setIsSubmitting(true);

      await new Promise((resolve) => setTimeout(resolve, 900));

      setSubmitMessage("Thanks! Your message has been sent.");
      setValues(initialValues);
      setErrors({});
    } catch {
      setSubmitMessage("Something went wrong. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div
      className="contact-form2"
      data-aos="fade-left"
      data-aos-duration={900}
      data-aos-delay={300}
    >
      <h3 className="title">Get in Touch</h3>
      <p>Let&apos;s build something impactful together.</p>

      <form
        noValidate
        onSubmit={handleSubmit}
        aria-describedby="contact-form-status"
      >
        {/* Honeypot (hidden from users, visible to bots) */}
        <input
          type="text"
          name="companyWebsite"
          tabIndex={-1}
          autoComplete="off"
          value={values.companyWebsite}
          onChange={handleChange("companyWebsite")}
          style={{ position: "absolute", left: "-9999px" }}
          aria-hidden="true"
        />

        <div className="form-group">
          <label htmlFor="contact-name">Full Name*</label>
          <input
            id="contact-name"
            type="text"
            name="name"
            placeholder="Steven L. Manzo"
            autoComplete="name"
            value={values.name}
            onChange={handleChange("name")}
            aria-invalid={Boolean(errors.name)}
            aria-describedby={errors.name ? "contact-name-error" : undefined}
            style={errors.name ? errorInputStyle : undefined}
            required
          />
          {errors.name && (
            <small id="contact-name-error" role="alert" style={errorTextStyle}>
              {errors.name}
            </small>
          )}
        </div>

        <div className="form-group">
          <label htmlFor="contact-email">Email Address*</label>
          <input
            id="contact-email"
            type="email"
            name="email"
            placeholder="enter your email"
            autoComplete="email"
            inputMode="email"
            value={values.email}
            onChange={handleChange("email")}
            aria-invalid={Boolean(errors.email)}
            aria-describedby={errors.email ? "contact-email-error" : undefined}
            style={errors.email ? errorInputStyle : undefined}
            required
          />
          {errors.email && (
            <small id="contact-email-error" role="alert" style={errorTextStyle}>
              {errors.email}
            </small>
          )}
        </div>

        <div className="form-group">
          <label htmlFor="contact-subject">Subject*</label>
          <input
            id="contact-subject"
            type="text"
            name="subject"
            placeholder="I would like to discuss"
            autoComplete="on"
            value={values.subject}
            onChange={handleChange("subject")}
            aria-invalid={Boolean(errors.subject)}
            aria-describedby={
              errors.subject ? "contact-subject-error" : undefined
            }
            style={errors.subject ? errorInputStyle : undefined}
            required
          />
          {errors.subject && (
            <small
              id="contact-subject-error"
              role="alert"
              style={errorTextStyle}
            >
              {errors.subject}
            </small>
          )}
        </div>

        <div className="form-group">
          <label htmlFor="contact-message">Message*</label>
          <textarea
            id="contact-message"
            name="message"
            placeholder="Write message"
            rows={5}
            value={values.message}
            onChange={handleChange("message")}
            aria-invalid={Boolean(errors.message)}
            aria-describedby={
              errors.message ? "contact-message-error" : undefined
            }
            style={errors.message ? errorInputStyle : undefined}
            required
          />
          {errors.message && (
            <small
              id="contact-message-error"
              role="alert"
              style={errorTextStyle}
            >
              {errors.message}
            </small>
          )}
        </div>

        <div className="form-group mb-0">
          <button type="submit" className="btn-style1" disabled={isSubmitting}>
            {isSubmitting ? "Sending..." : "Send Message"}
            <span>
              <Image
                src="/assets/images/icon/arrow.svg"
                alt=""
                aria-hidden="true"
                width={14}
                height={14}
              />
            </span>
          </button>
        </div>

        <p
          id="contact-form-status"
          role="status"
          aria-live="polite"
          style={statusTextStyle}
        >
          {submitMessage}
        </p>
      </form>
    </div>
  );
};

export default ContactForm;