import { useState, type FormEvent } from "react";
import { useServerFn } from "@tanstack/react-start";
import { toast } from "sonner";
import { subscribeNewsletter } from "@/lib/forms.functions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

/** Newsletter signup — handled server-side, stored in the database. */
export function NewsletterForm({ compact = false }: { compact?: boolean }) {
  const subscribeFn = useServerFn(subscribeNewsletter);
  const [email, setEmail] = useState("");
  const [busy, setBusy] = useState(false);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setBusy(true);
    const res = await subscribeFn({ data: { email } });
    setBusy(false);
    if (!res.ok) {
      toast.error(res.error);
      return;
    }
    toast.success("Welcome to the journey — you're on the list.");
    setEmail("");
  }

  return (
    <form
      onSubmit={onSubmit}
      className={
        compact ? "flex flex-col gap-3 sm:flex-row" : "mx-auto flex max-w-xl flex-col gap-3 sm:flex-row"
      }
    >
      <label
        htmlFor={compact ? "newsletter-email-compact" : "newsletter-email"}
        className="sr-only"
      >
        Email address
      </label>
      <Input
        id={compact ? "newsletter-email-compact" : "newsletter-email"}
        type="email"
        required
        placeholder="Your email address"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="h-12 flex-1 rounded-full border-ivory/30 bg-ivory/10 text-ivory placeholder:text-ivory/50 focus-visible:ring-gold"
      />
      <Button type="submit" variant="gold" size="xl" disabled={busy} className="rounded-full">
        {busy ? "Subscribing…" : "Join the journey"}
      </Button>
    </form>
  );
}