"use client"

import { useState } from "react"
import type { HospitalityInquiryData } from "@/lib/strapi/types"
import { submitForm } from "@/lib/forms/submitForm"
import FallbackImage from "./FallbackImage"

export default function HospitalityInquiry({ data }: { data: HospitalityInquiryData }) {
  const [form, setForm] = useState({
    fullName: "",
    email: "",
    enquiryType: "",
    message: "",
    company: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle")
  const [submitMessage, setSubmitMessage] = useState("")

  const update =
    (field: string) =>
    (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) =>
      setForm((prev) => ({ ...prev, [field]: e.target.value }))

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSubmitStatus("idle")
    setSubmitMessage("")
    setIsSubmitting(true)
    try {
      const res = await submitForm("/api/hospitality-inquiry", form)
      if (res.ok) {
        setSubmitStatus("success")
        setForm({ fullName: "", email: "", enquiryType: "", message: "", company: "" })
      } else {
        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 (
    <section className="hi-section w-full px-5 md:px-[72px] pb-[40px] md:pb-[80px]">
      <div className="flex flex-col md:flex-row gap-5 md:gap-[30px] md:h-[595px] max-w-[1297px] mx-auto">
        <div className="w-full md:flex-1 h-[338px] md:h-full rounded-[15px] md:rounded-[12px] overflow-hidden">
          <FallbackImage
            src={data.image}
            fallbackSrc="/assets/hospitality/enquiry-img.jpg"
            alt="Resort poolside loungers"
            loading="lazy"
            className="w-full h-full object-cover"
          />
        </div>

        <div className="hi-form relative w-full md:w-[659px] bg-[#f9f9f9] rounded-[16px] px-4 py-5 md:p-8 overflow-hidden flex flex-col gap-5 md:gap-6">
          <h2 className="font-heading relative z-10 text-[#20262b] md:text-[#2a3036] text-[32px] md:text-[54px] leading-[36px] md:leading-normal tracking-[0px] md:tracking-[-1.08px]">
            {data.heading}
          </h2>

          <form onSubmit={handleSubmit} className="relative z-10 flex flex-col gap-10 md:gap-0 md:justify-between md:flex-1">
            <input
              type="text"
              name="company"
              value={form.company}
              onChange={update("company")}
              tabIndex={-1}
              autoComplete="off"
              aria-hidden="true"
              className="absolute -left-[9999px] w-px h-px opacity-0"
            />

            <div className="flex flex-col gap-[37px]">
              <div className="border-b border-[rgba(42,48,54,0.2)] pb-8 pt-3 pr-5">
                <input
                  type="text"
                  placeholder={`${data.fullNamePlaceholder} *`}
                  value={form.fullName}
                  onChange={update("fullName")}
                  className="w-full bg-transparent text-[16px] text-black/60 placeholder:text-black/60 outline-none"
                />
              </div>

              <div className="flex flex-col gap-[37px] md:gap-0 md:flex-row md:gap-x-6">
                <div className="md:flex-1 border-b border-[rgba(42,48,54,0.2)] pb-8 pt-3 pr-5">
                  <input
                    type="email"
                    placeholder={`${data.emailPlaceholder} *`}
                    value={form.email}
                    onChange={update("email")}
                    className="w-full bg-transparent text-[16px] text-black/60 placeholder:text-black/60 outline-none"
                  />
                </div>
                <div className="md:flex-1 border-b border-[rgba(42,48,54,0.2)] pb-8 pt-3 pr-5 flex items-start justify-between">
                  <select
                    value={form.enquiryType}
                    onChange={update("enquiryType")}
                    className="w-full bg-transparent text-[16px] text-black/60 outline-none appearance-none cursor-pointer"
                  >
                    <option value="" disabled>
                      {data.enquiryTypePlaceholder}
                    </option>
                    {data.enquiryTypes.map((t, i) => (
                      <option key={i} value={t}>
                        {t}
                      </option>
                    ))}
                  </select>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="flex-shrink-0 rotate-90">
                    <path
                      d="M9 6C9 6 15 10.169 15 12C15 13.831 9 18 9 18"
                      stroke="#2a3036"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      opacity="0.6"
                    />
                  </svg>
                </div>
              </div>

              <div className="border-b border-[rgba(42,48,54,0.2)] pb-8 pt-3 pr-5 h-[113px]">
                <textarea
                  placeholder={`${data.messagePlaceholder} *`}
                  value={form.message}
                  onChange={update("message")}
                  className="w-full h-full bg-transparent text-[16px] text-black/60 placeholder:text-black/60 outline-none resize-none"
                />
              </div>
            </div>

            <div className="flex flex-col gap-3 md:gap-0 md:items-end">
              <button
                type="submit"
                disabled={isSubmitting}
                className="inline-flex w-max self-start md:self-auto items-center bg-[#d20010] rounded-[66px] pl-[2px] py-[2px] h-[40px] md:h-auto group hover:bg-[#b8000e] transition-colors disabled:opacity-70"
              >
                <span className="flex items-center justify-center bg-white px-6 py-[7px] md:py-3 rounded-[44px]">
                  <span className="font-medium text-[14px] md:text-[16px] leading-[22px] text-[#20262b] tracking-[0.28px] md:tracking-[0.32px] uppercase whitespace-nowrap">
                    {isSubmitting ? "Sending..." : data.ctaLabel}
                  </span>
                </span>
                <span className="flex items-center justify-center w-6 h-6 mx-2">
                  <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="text-green-600 text-sm">
                  Thank you! Your inquiry has been received.
                </p>
              ) : null}
              {submitStatus === "error" ? (
                <p className="text-red-600 text-sm">
                  {submitMessage || "Something went wrong. Please try again later."}
                </p>
              ) : null}
            </div>
          </form>
        </div>
      </div>
    </section>
  )
}