"use client";

import { useEffect, useState } from "react";

type NewsletterFormProps = {
  formId?: string;
};

export default function NewsletterForm({
  formId = "8527",
}: NewsletterFormProps) {
  const [email, setEmail] = useState("");
  const [status, setStatus] =
    useState<"idle" | "loading" | "success" | "error">("idle");

  const [timestamp, setTimestamp] = useState("");

  useEffect(() => {
    setTimestamp(Math.floor(Date.now() / 1000).toString());
  }, []);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("loading");

    try {
      const res = await fetch(
        "https://www.togwe.com/backend/wp-json/mc4wp/v1/form",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: new URLSearchParams({
            EMAIL: email,
            _mc4wp_form_id: formId,
            _mc4wp_timestamp: timestamp,
            _mc4wp_honeypot: "",
          }),
        }
      );

      if (!res.ok) throw new Error("failed");

      setStatus("success");
      setEmail("");
    } catch {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-3">
      <input
        type="email"
        required
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
        className="w-full h-[56px] px-4 py-2 rounded-sm bg-[#202020] border border-white/15 text-[16px] focus:outline-none focus:border-white/15"
      />

      {/* honeypot */}
      <input
        type="text"
        name="_mc4wp_honeypot"
        value=""
        readOnly
        className="hidden"
      />

      <button
        disabled={status === "loading"}
        className="bg-white text-black px-6 py-2 rounded-md text-lg font-semibold transition cursor-pointer"
      >
        {status === "loading" ? "Subscribing..." : "Subscribe"}
      </button>

      {status === "success" && (
        <p className="text-green-500 text-sm">✅ Thanks for subscribing!</p>
      )}

      {status === "error" && (
        <p className="text-red-500 text-sm">
          ❌ Please wait 5 seconds and try again
        </p>
      )}
    </form>
  );
}