"use client"

import { useState } from "react"
import type { ContactFormData } from "@/lib/strapi/types"
import { submitForm } from "@/lib/forms/submitForm"

export default function ContactForm({ data }: { data: ContactFormData }) {
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    subject: "",
    message: "",
    company: "",
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle")
  const [submitMessage, setSubmitMessage] = useState("")

  function validateForm() {
    const newErrors: Record<string, string> = {}
    if (!formData.fullName.trim()) {
      newErrors.fullName = "Full name is required"
    }
    if (!formData.email.trim()) {
      newErrors.email = "Email is required"
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = "Please enter a valid email address"
    }
    if (!formData.subject.trim()) {
      newErrors.subject = "Subject is required"
    }
    if (!formData.message.trim()) {
      newErrors.message = "Message is required"
    } else if (formData.message.trim().length < 10) {
      newErrors.message = "Message must be at least 10 characters"
    }
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
    if (errors[name]) {
      setErrors((prev) => {
        const next = { ...prev }
        delete next[name]
        return next
      })
    }
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSubmitStatus("idle")
    setSubmitMessage("")
    if (!validateForm()) return
    setIsSubmitting(true)
    try {
      const res = await submitForm("/api/contact", formData)
      if (res.ok) {
        setSubmitStatus("success")
        setFormData({ fullName: "", email: "", subject: "", message: "", company: "" })
      } else {
        if (res.errors) setErrors((prev) => ({ ...prev, ...res.errors }))
        setSubmitMessage(res.message ?? "Something went wrong. Please try again later.")
        setSubmitStatus("error")
      }
    } catch {
      setSubmitMessage("Something went wrong. Please try again later.")
      setSubmitStatus("error")
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div
      className="relative flex-1 rounded-[16px] p-[20px] lg:p-[32px] overflow-hidden"
      style={{
        background:
          "radial-gradient(103.16% 88.37% at 41.64% 83.93%, rgba(255, 232, 233, 0.00) 0%, #FFE8E9 100%), #F9F9F9",
      }}
    >
      <img
        src={data.bgVector}
        alt=""
        loading="lazy"
        className="absolute top-0 right-0 w-[800px] h-[770px] opacity-[100.15] pointer-events-none select-none"
        aria-hidden="true"
        style={{ right: "-182px", top: "-115px" }}
      />

      <div className="relative z-10 flex flex-col gap-[24px]">
        <div className="flex flex-col gap-[24px]">
          <h2 className="font-heading text-[#2a3036] text-[32px] lg:text-[54px] leading-[41px] lg:leading-[normal] tracking-[-0.64px] lg:tracking-[-1.08px]">
            {data.heading}
          </h2>
          <p className="font-sans text-[#4a5565] text-[14px] leading-[24px] lg:hidden">
            {data.mobileDescription}
          </p>
        </div>

        <img
          src={data.overlayVector}
          alt=""
          loading="lazy"
          className="absolute top-0 right-[-130px] w-[120px] h-[120px] lg:w-[200px] lg:h-[200px] object-contain pointer-events-none select-none opacity-90"
          aria-hidden="true"
        />

        <form
          onSubmit={handleSubmit}
          className="flex flex-col h-auto lg:h-[435px] justify-between items-end gap-[28px] lg:gap-0"
        >
          <input
            type="text"
            name="company"
            value={formData.company}
            onChange={handleChange}
            tabIndex={-1}
            autoComplete="off"
            aria-hidden="true"
            className="absolute -left-[9999px] w-px h-px opacity-0"
          />
          <div className="flex flex-col gap-[25px] lg:gap-[37px] w-full">
            <div className="relative">
              <input
                type="text"
                name="fullName"
                placeholder={`${data.fullNamePlaceholder} *`}
                value={formData.fullName}
                onChange={handleChange}
                disabled={isSubmitting}
                className={`w-full bg-transparent border-b pt-[12px] pb-[32px] pr-[20px] text-[16px] text-[#2a3036] placeholder:text-[rgba(0,0,0,0.6)] outline-none transition-colors ${
                  errors.fullName ? "border-red-500" : "border-[rgba(42,48,54,0.2)] focus:border-[#d20010]"
                }`}
              />
              {errors.fullName ? (
                <p className="absolute text-red-500 text-xs mt-1">{errors.fullName}</p>
              ) : null}
            </div>

            <div className="flex flex-col lg:flex-row gap-[25px] lg:gap-[24px]">
              <div className="relative flex-1">
                <input
                  type="email"
                  name="email"
                  placeholder={`${data.emailPlaceholder} *`}
                  value={formData.email}
                  onChange={handleChange}
                  disabled={isSubmitting}
                  className={`w-full bg-transparent border-b pt-[12px] pb-[32px] pr-[20px] text-[16px] text-[#2a3036] placeholder:text-[rgba(0,0,0,0.6)] outline-none transition-colors ${
                    errors.email ? "border-red-500" : "border-[rgba(42,48,54,0.2)] focus:border-[#d20010]"
                  }`}
                />
                {errors.email ? (
                  <p className="absolute text-red-500 text-xs mt-1">{errors.email}</p>
                ) : null}
              </div>
              <div className="relative flex-1">
                <input
                  type="text"
                  name="subject"
                  placeholder={`${data.subjectPlaceholder} *`}
                  value={formData.subject}
                  onChange={handleChange}
                  disabled={isSubmitting}
                  className={`w-full bg-transparent border-b pt-[12px] pb-[32px] pr-[20px] text-[16px] text-[#2a3036] placeholder:text-[rgba(0,0,0,0.6)] outline-none transition-colors ${
                    errors.subject ? "border-red-500" : "border-[rgba(42,48,54,0.2)] focus:border-[#d20010]"
                  }`}
                />
                {errors.subject ? (
                  <p className="absolute text-red-500 text-xs mt-1">{errors.subject}</p>
                ) : null}
              </div>
            </div>

            <div className="relative">
              <textarea
                name="message"
                placeholder={`${data.messagePlaceholder} *`}
                value={formData.message}
                onChange={handleChange}
                disabled={isSubmitting}
                className={`w-full h-[167px] lg:h-[113px] bg-transparent border-b pt-[12px] pb-[32px] pr-[20px] text-[16px] text-[#2a3036] placeholder:text-[rgba(0,0,0,0.6)] outline-none resize-none transition-colors ${
                  errors.message ? "border-red-500" : "border-[rgba(42,48,54,0.2)] focus:border-[#d20010]"
                }`}
              />
              {errors.message ? (
                <p className="absolute text-red-500 text-xs mt-1">{errors.message}</p>
              ) : null}
            </div>
          </div>

          <button
            type="submit"
            disabled={isSubmitting}
            className="font-sans flex items-center self-start lg:self-auto bg-[#d20010] rounded-[66px] pl-[2px] py-[2px] group hover:bg-[#b8000e] transition-colors disabled:opacity-70"
          >
            <span className="flex items-center justify-center bg-white px-[24px] py-[7px] lg:py-[12px] rounded-[44px]">
              <span className="font-sans font-medium text-[14px] lg:text-[16px] leading-[22px] text-[#20262b] lg:text-[#1c2023] tracking-[0.28px] lg:tracking-[0.32px] uppercase whitespace-nowrap">
                {isSubmitting ? "Sending..." : data.ctaLabel}
              </span>
            </span>
            <span className="flex items-center justify-center w-[24px] h-[24px] mx-[8px]">
              <svg width="8" height="14" viewBox="0 0 7.5 13.5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M0.75 0.75C0.75 0.75 6.75 5.169 6.75 6.75C6.75 8.331 0.75 12.75 0.75 12.75"
                  stroke="#FAFAFA"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </span>
          </button>
          {submitStatus === "success" ? (
            <p className="font-sans text-green-600 text-sm mt-2">
              Thank you! Your message has been sent successfully.
            </p>
          ) : null}
          {submitStatus === "error" ? (
            <p className="font-sans text-red-600 text-sm mt-2">
              {submitMessage || "Something went wrong. Please try again later."}
            </p>
          ) : null}
        </form>
      </div>
    </div>
  )
}