import { useId, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useLang } from "@/lib/i18n";

export function NewsletterForm({
  variant = "light",
  heading,
  body,
}: {
  variant?: "light" | "dark";
  heading?: string;
  body?: string;
}) {
  const id = useId();
  const { t } = useLang();
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "error" | "done">("idle");

  const onDark = variant === "dark";

  return (
    <form
      noValidate
      onSubmit={(e) => {
        e.preventDefault();
        const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        setStatus(valid ? "done" : "error");
      }}
      className="w-full max-w-md"
    >
      {heading && <h3 className={`text-lg font-semibold ${onDark ? "text-primary-foreground" : ""}`}>{heading}</h3>}
      {body && (
        <p className={`mt-2 text-sm ${onDark ? "text-primary-foreground/80" : "text-muted-foreground"}`}>{body}</p>
      )}
      <Label htmlFor={id} className={`mt-4 block text-sm ${onDark ? "text-primary-foreground/90" : ""}`}>
        Email address
      </Label>
      <div className="mt-2 flex gap-2">
        <Input
          id={id}
          type="email"
          required
          value={email}
          onChange={(e) => {
            setEmail(e.target.value);
            setStatus("idle");
          }}
          aria-invalid={status === "error"}
          aria-describedby={`${id}-msg`}
          placeholder="you@farm.co.zw"
          className={
            onDark
              ? "border-transparent bg-background text-foreground placeholder:text-muted-foreground shadow-xs focus-visible:ring-2 focus-visible:ring-white"
              : ""
          }
        />
        <Button type="submit" variant="harvest">
          {t("subscribe")}
        </Button>
      </div>
      <p
        id={`${id}-msg`}
        role="status"
        aria-live="polite"
        className={`mt-2 min-h-5 text-sm ${
          status === "error"
            ? "text-destructive"
            : onDark
              ? "text-white"
              : "text-primary"
        }`}
      >
        {status === "error" && "Please enter a valid email address."}
        {status === "done" && "Thank you | you are subscribed to seasonal advisories."}
      </p>
    </form>
  );
}