"use client";

import { useState } from "react";
import { useTranslation } from "next-i18next";

export default function NotifyMeForm() {
  const { t } = useTranslation("expat");

  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState<"idle" | "ok" | "error" | "invalid">(
    "idle"
  );

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (!/\S+@\S+\.\S+/.test(email)) {
      setStatus("invalid");
      return;
    }

    setLoading(true);
    setStatus("idle");
    try {
      const res = await fetch("/api/sendEmail", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          firstName: "Expat Benefits waitlist",
          lastName: "-",
          phone: "-",
          email,
          message: `New waitlist signup for Expat Benefits: ${email}`,
        }),
      });
      if (!res.ok) throw new Error("failed");

      setStatus("ok");
      setEmail("");
    } catch {
      setStatus("error");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="mx-auto mt-8 max-w-md">
      <form
        onSubmit={onSubmit}
        className="flex flex-col gap-3 sm:flex-row sm:gap-2"
      >
        <input
          type="email"
          value={email}
          onChange={(e) => {
            setEmail(e.target.value);
            setStatus("idle");
          }}
          placeholder={t("benefits.waitlist.emailPh")}
          className="h-11 flex-1 rounded-xl border border-white/30 bg-white/10 px-4 text-sm text-white placeholder:text-white/60 outline-none backdrop-blur focus:border-white/60"
        />
        <button
          type="submit"
          disabled={loading}
          className="h-11 shrink-0 rounded-xl bg-[#19D2FF] px-6 text-sm font-semibold text-main shadow transition hover:brightness-95 disabled:opacity-60"
        >
          {loading ? t("benefits.waitlist.sending") : t("benefits.waitlist.submit")}
        </button>
      </form>

      {status === "ok" && (
        <p className="mt-3 text-sm text-white/90">{t("benefits.waitlist.ok")}</p>
      )}
      {status === "invalid" && (
        <p className="mt-3 text-sm text-red-200">
          {t("benefits.waitlist.emailInvalid")}
        </p>
      )}
      {status === "error" && (
        <p className="mt-3 text-sm text-red-200">
          {t("benefits.waitlist.serverError")}
        </p>
      )}
    </div>
  );
}