"use client";

import * as React from "react";
import { Button } from "@/components/ui/Button";
import { Honeypot } from "@/components/ui/Honeypot";
import { submitForm } from "@/lib/submit-form";

export function NewsletterBlock() {
  const [status, setStatus] = React.useState<"idle" | "loading" | "success" | "error">("idle");
  const [email, setEmail] = React.useState("");
  const [errorMessage, setErrorMessage] = React.useState("Something went wrong. Please try again.");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("loading");
    const result = await submitForm("/api/newsletter", new FormData(e.currentTarget));
    if (result.success) {
      setStatus("success");
    } else {
      setErrorMessage(result.error);
      setStatus("error");
    }
  }

  if (status === "success") {
    return (
      <p className="text-body-sm text-ink-soft" role="status">
        Subscribed. You&apos;ll receive dated funding-landscape reports as they publish.
      </p>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-3 sm:flex-row sm:items-end">
      <Honeypot />
      <div className="flex flex-1 flex-col gap-1.5">
        <label htmlFor="newsletter-email" className="text-label font-medium uppercase text-ink-soft">
          Insights &amp; Reports
        </label>
        <input
          id="newsletter-email"
          name="email"
          type="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="you@organization.com"
          className="h-11 rounded border border-line bg-paper px-3.5 text-body-md text-ink placeholder:text-slate-muted focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30"
        />
      </div>
      <Button type="submit" variant="primary" isLoading={status === "loading"}>
        Subscribe
      </Button>
      {status === "error" && (
        <p className="text-caption text-error" role="alert">
          {errorMessage}
        </p>
      )}
    </form>
  );
}