import { useState, type FormEvent } from "react";
import { useServerFn } from "@tanstack/react-start";
import { subscribeEmail } from "@/lib/api/subscribe.functions";

export function EmailSignup({ variant = "light" }: { variant?: "light" | "dark" }) {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "loading" | "ok" | "err">("idle");
  const [msg, setMsg] = useState<string | null>(null);
  const subscribe = useServerFn(subscribeEmail);

  async function submit(e: FormEvent) {
    e.preventDefault();
    const v = email.trim();
    if (!v) return;
    setStatus("loading");
    try {
      const res = await subscribe({ data: { email: v } });
      if (res.ok) {
        setStatus("ok");
        setMsg("You're subscribed. Watch your inbox each morning.");
        setEmail("");
      } else {
        setStatus("err");
        setMsg(res.error ?? "Something went wrong.");
      }
    } catch {
      setStatus("err");
      setMsg("Something went wrong. Please try again.");
    }
  }

  const dark = variant === "dark";

  return (
    <div>
      <h3 className={`font-serif text-2xl font-semibold ${dark ? "text-primary-foreground" : "text-primary"}`}>
        Get the Daily Bible Word
      </h3>
      <p className={`mt-2 text-sm ${dark ? "text-primary-foreground/75" : "text-muted-foreground"}`}>
        Start your day with Scripture, reflection, and prayer — delivered to your inbox.
      </p>
      <form onSubmit={submit} className="mt-4 flex flex-col gap-2 sm:flex-row">
        <label htmlFor={`email-${variant}`} className="sr-only">Email address</label>
        <input
          id={`email-${variant}`}
          type="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="you@example.com"
          className={`flex-1 rounded-full border px-5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-[var(--gold)]/60 ${
            dark
              ? "border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground placeholder:text-primary-foreground/50"
              : "border-border bg-card text-foreground placeholder:text-muted-foreground/70"
          }`}
        />
        <button
          type="submit"
          disabled={status === "loading"}
          className="gradient-gold rounded-full px-6 py-3 text-sm font-semibold text-[var(--gold-foreground)] shadow-soft transition hover:opacity-95 disabled:opacity-60"
        >
          {status === "loading" ? "Sending…" : "Send Me the Daily Word"}
        </button>
      </form>
      {msg && (
        <p
          className={`mt-3 text-sm ${
            status === "ok"
              ? dark ? "text-[var(--gold)]" : "text-sage"
              : "text-destructive"
          }`}
        >
          {msg}
        </p>
      )}
    </div>
  );
}