"use client";

import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import { motion } from "framer-motion";
import { Spinner } from "../ui/Spinner";
import { subscribe, type SubscribeState } from "@/app/actions/subscribe";
import { EASE_OUT_EXPO } from "@/lib/motion";

const initialState: SubscribeState = { status: "idle", message: "" };

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="sheen relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden bg-accent px-6 py-3 font-display text-sm tracking-widest text-background transition duration-200 ease-out hover:-translate-y-0.5 hover:bg-foreground hover:shadow-[0_14px_30px_-14px_rgba(196,184,150,0.6)] active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:translate-y-0 disabled:hover:shadow-none"
    >
      {pending && <Spinner />}
      {pending ? "SENDING…" : "SUBSCRIBE"}
    </button>
  );
}

type Props = {
  variant?: "default" | "compact";
};

export function Newsletter({ variant = "default" }: Props) {
  const [state, formAction] = useActionState(subscribe, initialState);

  const wrapperClass =
    variant === "compact"
      ? "w-full max-w-lg"
      : "w-full max-w-lg mx-auto";

  return (
    <form
      action={formAction}
      className={wrapperClass}
      aria-describedby="newsletter-status"
    >
      {/* honeypot for bots */}
      <input
        type="text"
        name="website"
        tabIndex={-1}
        autoComplete="off"
        className="hidden"
        aria-hidden
      />
      <label htmlFor="newsletter-email" className="sr-only">
        Email address
      </label>
      <div className="flex flex-col sm:flex-row gap-3">
        <input
          id="newsletter-email"
          type="email"
          name="email"
          required
          placeholder="your@email.com"
          className="flex-1 min-w-0 bg-surface border border-border px-4 py-3 text-sm text-foreground placeholder:text-foreground-muted focus:outline-none focus:border-accent transition-colors duration-200"
        />
        <SubmitButton />
      </div>

      {/* The paragraph itself never unmounts — a live region that is replaced
          on every state change is one a screen reader may not announce. Only
          the text inside it is keyed, and that is what animates. */}
      <p
        id="newsletter-status"
        role="status"
        aria-live="polite"
        className={`text-xs tracking-widest mt-3 ${
          variant === "compact" ? "" : "text-center"
        } ${
          state.status === "success"
            ? "text-accent"
            : state.status === "error"
              ? "text-red-400"
              : "text-foreground-muted"
        }`}
      >
        <motion.span
          key={state.message || "idle"}
          initial={{ opacity: 0, y: -4 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, ease: EASE_OUT_EXPO }}
          className="inline-block"
        >
          {state.message ||
            "No spam. One devblog email per major update. Unsubscribe anytime."}
        </motion.span>
      </p>
    </form>
  );
}