"use client";

import { Button } from "@/components/ui/button";
import { buildBookDemoPayload, submitBookDemo } from "@/lib/web3forms";
import HCaptcha from "@hcaptcha/react-hcaptcha";
import {
  AlertCircle,
  CheckCircle2,
  ChevronDown,
  LoaderCircle,
} from "lucide-react";
import { useRef, useState, type FormEvent } from "react";

const WEB3FORMS_HCAPTCHA_SITE_KEY = "50b2fe65-b00b-4b9e-ad62-3ba471098be2";

const industries = [
  "EV Charging Operator",
  "Fleet & Logistics",
  "Automotive",
  "Property & Landowner",
  "Energy & Utility",
  "Government & Public Sector",
  "Investor & Financial Services",
  "Other",
] as const;

const primaryNeeds = [
  "Launch a New CPO Business",
  "Replace Existing CSMS",
  "White-Label Charging App",
  "Monetization & Analytics",
  "Payment Channel Integration",
  "Fleet Charging Management",
  "Partnership or Investment",
  "OCPP & Hardware Integration",
  "Other",
] as const;

const referralSources = [
  "Google Search",
  "LinkedIn",
  "Social Media",
  "Industry Event or Conference",
  "Referral or Business Partner",
  "Existing TIAR Customer",
  "News or Online Article",
  "Other",
] as const;

type SubmissionState =
  | { status: "idle" }
  | { status: "submitting" }
  | { status: "success"; message: string }
  | { status: "error"; message: string };

export function BookDemoForm() {
  const captchaRef = useRef<HCaptcha>(null);
  const [submissionState, setSubmissionState] = useState<SubmissionState>({
    status: "idle",
  });
  const [captchaToken, setCaptchaToken] = useState("");

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const form = event.currentTarget;
    const accessKey = process.env.NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY;

    if (!accessKey) {
      setSubmissionState({
        status: "error",
        message:
          "The demo form is not configured yet. Please contact the TIAR team directly.",
      });
      return;
    }

    if (!captchaToken) {
      setSubmissionState({
        status: "error",
        message: "Please complete the security verification before submitting.",
      });
      return;
    }

    setSubmissionState({ status: "submitting" });

    try {
      const payload = buildBookDemoPayload(new FormData(form), accessKey);
      const result = await submitBookDemo(payload);

      if (!result.success) {
        captchaRef.current?.resetCaptcha();
        setCaptchaToken("");
        setSubmissionState({ status: "error", message: result.message });
        return;
      }

      form.reset();
      captchaRef.current?.resetCaptcha();
      setCaptchaToken("");
      setSubmissionState({ status: "success", message: result.message });
    } catch {
      captchaRef.current?.resetCaptcha();
      setCaptchaToken("");
      setSubmissionState({
        status: "error",
        message:
          "We could not send your demo request. Check your connection and try again.",
      });
    }
  }

  return (
    <form
      onSubmit={handleSubmit}
      onChange={() => {
        if (submissionState.status !== "submitting") {
          setSubmissionState({ status: "idle" });
        }
      }}
      className="mt-8"
    >
      <input
        type="checkbox"
        name="botcheck"
        tabIndex={-1}
        autoComplete="off"
        className="hidden"
        aria-hidden="true"
      />
      <input type="hidden" name="h-captcha-response" value={captchaToken} />

      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <div>
          <label
            htmlFor="first-name"
            className="text-sm font-semibold text-gray-900"
          >
            First Name
          </label>
          <input
            id="first-name"
            name="firstName"
            type="text"
            autoComplete="given-name"
            required
            minLength={2}
            placeholder="First name"
            className="mt-2 h-12 w-full rounded-xl border border-gray-300 bg-white px-4 text-base text-gray-950 transition outline-none placeholder:text-gray-400 focus:border-green-600 focus:ring-3 focus:ring-green-600/15"
          />
        </div>

        <div>
          <label
            htmlFor="last-name"
            className="text-sm font-semibold text-gray-900"
          >
            Last Name
          </label>
          <input
            id="last-name"
            name="lastName"
            type="text"
            autoComplete="family-name"
            required
            minLength={2}
            placeholder="Last name"
            className="mt-2 h-12 w-full rounded-xl border border-gray-300 bg-white px-4 text-base text-gray-950 transition outline-none placeholder:text-gray-400 focus:border-green-600 focus:ring-3 focus:ring-green-600/15"
          />
        </div>
      </div>

      <div className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2">
        <div>
          <label
            htmlFor="business-email"
            className="text-sm font-semibold text-gray-900"
          >
            Business Email
          </label>
          <input
            id="business-email"
            name="businessEmail"
            type="email"
            autoComplete="email"
            inputMode="email"
            required
            placeholder="name@company.com"
            className="mt-2 h-12 w-full rounded-xl border border-gray-300 bg-white px-4 text-base text-gray-950 transition outline-none placeholder:text-gray-400 focus:border-green-600 focus:ring-3 focus:ring-green-600/15"
          />
        </div>

        <div>
          <label
            htmlFor="phone-number"
            className="text-sm font-semibold text-gray-900"
          >
            Phone Number
          </label>
          <input
            id="phone-number"
            name="phoneNumber"
            type="tel"
            autoComplete="tel"
            inputMode="tel"
            required
            minLength={6}
            maxLength={30}
            placeholder="+62 812 3456 7890"
            className="mt-2 h-12 w-full rounded-xl border border-gray-300 bg-white px-4 text-base text-gray-950 transition outline-none placeholder:text-gray-400 focus:border-green-600 focus:ring-3 focus:ring-green-600/15"
          />
        </div>
      </div>

      <div className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2">
        <div>
          <label
            htmlFor="industry"
            className="text-sm font-semibold text-gray-900"
          >
            Industry
          </label>
          <div className="relative mt-2">
            <select
              id="industry"
              name="industry"
              required
              defaultValue=""
              className="h-12 w-full appearance-none rounded-xl border border-gray-300 bg-white px-4 pr-11 text-base text-gray-950 transition outline-none focus:border-green-600 focus:ring-3 focus:ring-green-600/15"
            >
              <option value="" disabled>
                Select your industry
              </option>
              {industries.map((industry) => (
                <option key={industry} value={industry}>
                  {industry}
                </option>
              ))}
            </select>
            <ChevronDown
              aria-hidden="true"
              className="pointer-events-none absolute top-1/2 right-4 size-5 -translate-y-1/2 text-gray-500"
            />
          </div>
        </div>

        <div>
          <label
            htmlFor="primary-need"
            className="text-sm font-semibold text-gray-900"
          >
            Primary Need
          </label>
          <div className="relative mt-2">
            <select
              id="primary-need"
              name="primaryNeed"
              required
              defaultValue=""
              className="h-12 w-full appearance-none rounded-xl border border-gray-300 bg-white px-4 pr-11 text-base text-gray-950 transition outline-none focus:border-green-600 focus:ring-3 focus:ring-green-600/15"
            >
              <option value="" disabled>
                Select your primary need
              </option>
              {primaryNeeds.map((primaryNeed) => (
                <option key={primaryNeed} value={primaryNeed}>
                  {primaryNeed}
                </option>
              ))}
            </select>
            <ChevronDown
              aria-hidden="true"
              className="pointer-events-none absolute top-1/2 right-4 size-5 -translate-y-1/2 text-gray-500"
            />
          </div>
        </div>
      </div>

      <div className="mt-5">
        <label
          htmlFor="message"
          className="text-sm font-semibold text-gray-900"
        >
          Message <span className="font-normal text-gray-500">(Optional)</span>
        </label>
        <textarea
          id="message"
          name="message"
          rows={5}
          maxLength={1_000}
          placeholder="Tell us about your goals, current charging network, or any specific requirements."
          className="mt-2 w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base leading-relaxed text-gray-950 transition outline-none placeholder:text-gray-400 focus:border-green-600 focus:ring-3 focus:ring-green-600/15"
        />
      </div>

      <div className="mt-5">
        <label
          htmlFor="referral-source"
          className="text-sm font-semibold text-gray-900"
        >
          How Did You Hear About Us?
        </label>
        <div className="relative mt-2">
          <select
            id="referral-source"
            name="howDidYouHearAboutUs"
            required
            defaultValue=""
            className="h-12 w-full appearance-none rounded-xl border border-gray-300 bg-white px-4 pr-11 text-base text-gray-950 transition outline-none focus:border-green-600 focus:ring-3 focus:ring-green-600/15"
          >
            <option value="" disabled>
              Select an option
            </option>
            {referralSources.map((referralSource) => (
              <option key={referralSource} value={referralSource}>
                {referralSource}
              </option>
            ))}
          </select>
          <ChevronDown
            aria-hidden="true"
            className="pointer-events-none absolute top-1/2 right-4 size-5 -translate-y-1/2 text-gray-500"
          />
        </div>
      </div>

      <div className="mt-6">
        <p className="text-sm font-semibold text-gray-900">
          Security Verification
        </p>
        <p className="mt-1 text-sm leading-relaxed text-gray-600">
          Complete the captcha below before scheduling your demo.
        </p>

        <div className="mt-3 h-[67px] w-[258px] overflow-hidden sm:h-[78px] sm:w-[303px]">
          <div className="origin-top-left scale-[0.85] sm:scale-100">
            <HCaptcha
              ref={captchaRef}
              sitekey={WEB3FORMS_HCAPTCHA_SITE_KEY}
              reCaptchaCompat={false}
              onVerify={(token) => {
                setCaptchaToken(token);
                setSubmissionState({ status: "idle" });
              }}
              onExpire={() => {
                setCaptchaToken("");
                setSubmissionState({
                  status: "error",
                  message:
                    "The security verification expired. Please complete it again.",
                });
              }}
              onError={() => {
                setCaptchaToken("");
                setSubmissionState({
                  status: "error",
                  message:
                    "The security verification could not load. Please refresh and try again.",
                });
              }}
            />
          </div>
        </div>
      </div>

      <Button
        type="submit"
        size="lg"
        disabled={submissionState.status === "submitting"}
        className="mt-7 h-12 w-full bg-green-600 px-6 text-base text-white shadow-lg shadow-green-900/10 hover:bg-green-700"
      >
        {submissionState.status === "submitting" ? (
          <>
            <LoaderCircle aria-hidden="true" className="size-5 animate-spin" />
            Sending...
          </>
        ) : (
          "Schedule a Demo"
        )}
      </Button>

      {submissionState.status === "success" ? (
        <div
          role="status"
          className="mt-5 flex items-start gap-3 rounded-xl border border-green-200 bg-green-50 p-4 text-sm leading-relaxed text-green-900"
        >
          <CheckCircle2
            aria-hidden="true"
            className="mt-0.5 size-5 shrink-0 text-green-600"
          />
          <p>{submissionState.message}</p>
        </div>
      ) : null}

      {submissionState.status === "error" ? (
        <div
          role="alert"
          className="mt-5 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-sm leading-relaxed text-red-900"
        >
          <AlertCircle
            aria-hidden="true"
            className="mt-0.5 size-5 shrink-0 text-red-600"
          />
          <p>{submissionState.message}</p>
        </div>
      ) : null}
    </form>
  );
}