"use client";

import { useState, useRef, type FormEvent } from "react";
import { trackEvent } from "@/components/Tracking";
import RecaptchaV2, { type RecaptchaHandle } from "@/components/RecaptchaV2";

declare global {
  interface Window {
    fbq?: (...args: unknown[]) => void;
    gtag?: (...args: unknown[]) => void;
    trustedFormCertUrl?: string;
  }
}

const WP_SUBMIT_URL =
  (process.env.NEXT_PUBLIC_WORDPRESS_URL || "") +
  "/wp-json/sigma/v1/submit-demo";

type Status = "idle" | "sending" | "sent" | "error";

/** slug services/sigma-1040-{product}-{web|desktop}-demo -> "Sigma 1040-{PRODUCT} {Web|Desktop} Demo". */
function pageNameFromPath(pathname: string): string {
  const demo = pathname.match(/sigma-1040-([a-z]+)-(web|desktop)-demo/i);
  if (demo) {
    const product = demo[1].toUpperCase();
    const type = demo[2].charAt(0).toUpperCase() + demo[2].slice(1);
    return `Sigma 1040-${product} ${type} Demo`;
  }
  const prod = pathname.match(/sigma-1040-([a-z]+)\/?$/i);
  if (prod) {
    const product = prod[1].toUpperCase();
    return `Sigma 1040-${product} Web Demo`;
  }
  return "";
}

function getCookie(name: string): string {
  const match = document.cookie.match(
    new RegExp("(^|; )" + name + "=([^;]+)"),
  );
  return match ? decodeURIComponent(match[2]) : "";
}

function getGaValues(): { clientId: string; sessionId: string } {
  const ga = getCookie("_ga");
  if (ga) {
    const parts = ga.split(".");
    if (parts.length >= 4) {
      return { clientId: parts[2], sessionId: parts[3] };
    }
  }
  return { clientId: "", sessionId: "" };
}

function getGclid(search: URLSearchParams): string {
  const param = search.get("gclid");
  if (param) return param;
  const gclaw = getCookie("_gcl_aw");
  if (gclaw) {
    const m = gclaw.match(/GCL\.\d+\.\d+\.(\d+)/);
    if (m) return m[1];
  }
  return "";
}

export default function DemoLeadForm({
  submitLabel = "Submit",
}: {
  submitLabel?: string;
}) {
  const [status, setStatus] = useState<Status>("idle");
  const [error, setError] = useState<string>("");
  const [formStarted, setFormStarted] = useState(false);
  const recaptchaRef = useRef<RecaptchaHandle>(null);

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!formStarted) setFormStarted(true);
    const form = e.currentTarget;
    const data = new FormData(form);
    setStatus("sending");
    setError("");

    const recaptchaToken = recaptchaRef.current?.getToken() ?? "";
    if (!recaptchaToken) {
      setStatus("error");
      setError("Please complete the reCAPTCHA verification.");
      return;
    }

    const pageName = pageNameFromPath(window.location.pathname);
    const search = new URLSearchParams(window.location.search);
    const ga = getGaValues();

    const payload: Record<string, string> = {
      firstName: String(data.get("firstName") || "").trim(),
      lastName: String(data.get("lastName") || "").trim(),
      company: String(data.get("company") || "").trim(),
      email: String(data.get("email") || "").trim(),
      phone: String(data.get("phone") || "").trim(),
      pageName,
      utm_source: search.get("utm_source") || "",
      utm_medium: search.get("utm_medium") || "",
      utm_campaign: search.get("utm_campaign") || "",
      utm_term: search.get("utm_term") || "",
      utm_content: search.get("utm_content") || "",
      gclid: getGclid(search),
      ga_client_id: ga.clientId,
      ga_session_id: ga.sessionId,
      lead_source: search.get("lead_source") || "",
      ppc_keyword: search.get("ppc_keyword") || "",
      xxTrustedFormCertUrl: window.trustedFormCertUrl || "",
      recaptcha_token: recaptchaToken,
    };

    try {
      const res = await fetch(WP_SUBMIT_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const raw = await res.text();
      const brace = raw.lastIndexOf("{");
      const json = (
        brace >= 0 ? JSON.parse(raw.slice(brace)) : { ok: false }
      ) as {
        ok: boolean;
        message?: string;
        duplicate?: boolean;
        entry_id?: number;
      };

      if (json.ok) {
        setStatus("sent");
        form.reset();
        trackEvent("form_submit", {
          form_name: "Demo Request",
          page_name: pageName,
        });
        trackEvent("lead_submit", {
          entry_id: json.entry_id ?? 0,
          is_duplicate: !!json.duplicate,
        });
        if (typeof window.fbq !== "undefined") window.fbq("track", "Lead");
        if (typeof window.gtag !== "undefined") {
          window.gtag("event", "conversion", {
            send_to: "AW-979437692/QNq2CJXIoG0Q_JCE0wM",
          });
        }
      } else {
        setStatus("error");
        setError(json.message ?? "Something went wrong. Please call us instead.");
      }
    } catch {
      setStatus("error");
      setError("Network error. Please try again or call us.");
    }
  }

  if (status === "sent") {
    return (
      <div
        style={{
          marginTop: 18,
          padding: "16px 18px",
          borderRadius: 12,
          background: "rgba(19,163,166,.12)",
          color: "#02474b",
          fontFamily: "Lato, sans-serif",
          fontSize: 15,
          fontWeight: 700,
        }}
      >
        Thanks — your demo link is on the way to your email.
      </div>
    );
  }

  return (
    <form
      onSubmit={onSubmit}
      style={{
        marginTop: 18,
        display: "flex",
        flexDirection: "column",
        gap: 10,
      }}
    >
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        <input
          name="firstName"
          type="text"
          placeholder="First name"
          required
          onFocus={() => {
            if (!formStarted) {
              setFormStarted(true);
              trackEvent("form_start", { form_name: "Demo Request" });
            }
          }}
          style={{
            padding: "11px 14px",
            border: "1px solid rgba(2,47,49,.14)",
            borderRadius: 10,
            fontFamily: "Lato, sans-serif",
            fontSize: 14,
            background: "#fff",
            outline: "none",
          }}
        />
        <input
          name="lastName"
          type="text"
          placeholder="Last name"
          required
          style={{
            padding: "11px 14px",
            border: "1px solid rgba(2,47,49,.14)",
            borderRadius: 10,
            fontFamily: "Lato, sans-serif",
            fontSize: 14,
            background: "#fff",
            outline: "none",
          }}
        />
      </div>
      <input
        name="company"
        type="text"
        placeholder="Company"
        style={{
          padding: "11px 14px",
          border: "1px solid rgba(2,47,49,.14)",
          borderRadius: 10,
          fontFamily: "Lato, sans-serif",
          fontSize: 14,
          background: "#fff",
          outline: "none",
        }}
      />
      <input
        name="email"
        type="email"
        placeholder="Email"
        required
        style={{
          padding: "11px 14px",
          border: "1px solid rgba(2,47,49,.14)",
          borderRadius: 10,
          fontFamily: "Lato, sans-serif",
          fontSize: 14,
          background: "#fff",
          outline: "none",
        }}
      />
      <input
        name="phone"
        type="tel"
        placeholder="Phone"
        required
        style={{
          padding: "11px 14px",
          border: "1px solid rgba(2,47,49,.14)",
          borderRadius: 10,
          fontFamily: "Lato, sans-serif",
          fontSize: 14,
          background: "#fff",
          outline: "none",
        }}
      />
      {formStarted && <RecaptchaV2 ref={recaptchaRef} />}
      <button
        type="submit"
        disabled={status === "sending"}
        style={{
          marginTop: 4,
          background: "linear-gradient(135deg,#13a3a6,#006568)",
          color: "#fff",
          fontFamily: "Lato, sans-serif",
          fontWeight: 700,
          fontSize: 14,
          padding: 13,
          borderRadius: 999,
          cursor: "pointer",
          border: "none",
          boxShadow: "0 10px 22px rgba(0,101,104,.26)",
        }}
      >
        {status === "sending" ? "Sending…" : submitLabel}
      </button>
      {status === "error" && (
        <p
          style={{
            margin: "2px 0 0",
            color: "#b00020",
            fontFamily: "Lato, sans-serif",
            fontSize: 13,
          }}
        >
          {error}
        </p>
      )}
    </form>
  );
}