"use client";

import { useActionState, useEffect, useRef } from "react";
import { useRouter } from "next/navigation";
import { subscribeNewsletter, type LeadState } from "@/app/actions";
import FloatInput from "./FloatInput";

const initial: LeadState = { ok: false, message: "" };

export default function NewsletterForm() {
  const [state, action, pending] = useActionState(subscribeNewsletter, initial);
  const router = useRouter();
  const statusRef = useRef<HTMLDivElement>(null);
  const wasPending = useRef(false);

  // On success, hand off to the Thank You page.
  useEffect(() => {
    if (wasPending.current && !pending && state.ok) {
      router.push("/thank-you?source=newsletter");
    }
    wasPending.current = pending;
  }, [pending, state.ok, router]);
  return (
    <form
      action={action}
      aria-label="Subscribe to guides newsletter"
      className="w-full lg:max-w-[480px]"
      onSubmit={(e) => {
        if (pending) e.preventDefault();
      }}
    >
      <div className="flex flex-col gap-3 sm:flex-row">
        <FloatInput
          id="nl-email"
          name="email"
          type="email"
          label="Work Email"
          autoComplete="email"
          required
          className="flex-1"
          error={state.ok ? undefined : state.errors?.email}
        />
        <button
          type="submit"
          disabled={pending}
          className="inline-flex h-12 items-center justify-center rounded-lg bg-brand px-6 text-sm font-semibold text-white hover:bg-brand-dark disabled:opacity-60"
        >
          {pending ? "Subscribing…" : "Subscribe"}
        </button>
      </div>
      <div ref={statusRef} aria-live="polite" className="mt-3 min-h-[20px] text-[13px] scroll-mt-24">
        {state.message && (
          <p className={state.ok ? "text-green-300" : "text-red-300"}>{state.message}</p>
        )}
      </div>
    </form>
  );
}