"use client";

import { useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { Loader2, MailCheck } from "lucide-react";
import { Link } from "@/i18n/navigation";
import { z } from "zod";
import AuthLayout from "@/components/auth/AuthLayout";
import Input from "@/components/ui/Input";
import Button from "@/components/ui/Button";
import { readApiJson, toastError, toastPromise } from "@/lib/toast";

export default function ForgotPasswordForm() {
  const t = useTranslations("auth");
  const locale = useLocale();
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);

  const schema = z.object({
    email: z.string().min(1, t("emailRequired")).email(t("emailInvalid")),
  });

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

    const parsed = schema.safeParse({ email });
    if (!parsed.success) {
      const message = parsed.error.issues[0]?.message ?? t("emailInvalid");
      toastError(message);
      return;
    }

    setLoading(true);
    try {
      await toastPromise(
        readApiJson(
          await fetch("/api/auth/forgot-password", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              email: parsed.data.email.trim().toLowerCase(),
              locale,
            }),
          }),
          t("networkError")
        ),
        {
          loading: t("sendingResetLink"),
          success: t("resetEmailSent"),
          error: (err) =>
            err instanceof Error ? err.message : t("networkError"),
        }
      );
      setSent(true);
    } catch {
      // surfaced via toast
    } finally {
      setLoading(false);
    }
  }

  if (sent) {
    return (
      <AuthLayout title={t("checkEmailTitle")} subtitle={t("resetEmailSent")}>
        <div className="rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-6 text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--accent-muted)]">
            <MailCheck className="h-6 w-6 text-[var(--accent)]" />
          </div>
          <p className="text-sm text-[var(--text-muted)]">{t("resetEmailHint")}</p>
          <Link
            href="/login"
            className="mt-6 inline-flex cursor-pointer text-sm font-medium text-[var(--accent)] transition-colors hover:text-[var(--accent-hover)]"
          >
            {t("backToSignIn")}
          </Link>
        </div>
      </AuthLayout>
    );
  }

  return (
    <AuthLayout title={t("forgotPasswordTitle")} subtitle={t("forgotPasswordSubtitle")}>
      <form onSubmit={handleSubmit} className="space-y-5" noValidate>
        <Input
          label={t("email")}
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder={t("emailPlaceholder")}
          autoComplete="email"
          autoFocus
          disabled={loading}
        />

        <Button type="submit" disabled={loading} className="w-full" size="lg">
          {loading ? (
            <>
              <Loader2 className="h-4 w-4 animate-spin" />
              {t("sendingResetLink")}
            </>
          ) : (
            t("sendResetLink")
          )}
        </Button>
      </form>

      <p className="mt-6 text-center text-sm text-[var(--text-muted)]">
        <Link
          href="/login"
          className="cursor-pointer font-medium text-[var(--accent)] transition-colors hover:text-[var(--accent-hover)]"
        >
          {t("backToSignIn")}
        </Link>
      </p>
    </AuthLayout>
  );
}