"use client";

import { useState } from "react";
import Link from "next/link";
import { motion } from "framer-motion";
import { Mail, AlertCircle, MailCheck } from "lucide-react";
import { AuthShell } from "@/components/auth/AuthShell";
import { TextField } from "@/components/ui/TextField";
import { Button } from "@/components/ui/Button";
import { apiPost } from "@/lib/api/client";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

export default function ForgotPasswordPage() {
  const { t } = useTranslation();
  const [email, setEmail] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);

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

    if (!email.trim()) {
      setError(t("forgotPassword.emailRequired"));
      return;
    }

    setLoading(true);
    try {
      await apiPost("/api/auth/forgot-password", { email: email.trim() });
    } catch (err) {
      // Always show the success state, even on error — this avoids
      // confirming/denying whether an email is registered (matches
      // what the API itself does — see the route's own comment).
      // eslint-disable-next-line no-console
      console.error(err);
    } finally {
      setLoading(false);
      setSent(true);
    }
  }

  if (sent) {
    return (
      <AuthShell title={t("forgotPassword.checkEmailTitle")} backHref="/login">
        <div className="flex flex-col items-center gap-5 text-center">
          <motion.div
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ type: "spring", stiffness: 260, damping: 18 }}
            className="flex h-20 w-20 items-center justify-center rounded-full bg-gold/15"
          >
            <MailCheck size={36} strokeWidth={1.8} className="text-gold-bright" />
          </motion.div>
          <p className="text-sm leading-relaxed text-paper/70">
            {t("forgotPassword.checkEmailDesc", { email })}
          </p>
          <Link href="/login">
            <Button size="lg">{t("forgotPassword.backToLogin")}</Button>
          </Link>
        </div>
      </AuthShell>
    );
  }

  return (
    <AuthShell
      title={t("forgotPassword.title")}
      subtitle={t("forgotPassword.subtitle")}
      backHref="/login"
    >
      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
        <TextField
          label={t("forgotPassword.email")}
          type="email"
          autoComplete="email"
          icon={Mail}
          placeholder="you@example.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />

        {error && (
          <div className="flex items-start gap-2 rounded-xl bg-danger/10 px-3.5 py-3 text-sm text-danger">
            <AlertCircle size={16} className="mt-0.5 shrink-0" />
            {error}
          </div>
        )}

        <Button type="submit" size="lg" fullWidth disabled={loading}>
          {loading ? t("forgotPassword.sending") : t("forgotPassword.sendResetLink")}
        </Button>
      </form>

      <p className="mt-6 text-center text-sm text-paper/60">
        {t("forgotPassword.rememberedIt")}{" "}
        <Link href="/login" className="font-semibold text-gold-bright">
          {t("forgotPassword.logIn")}
        </Link>
      </p>
    </AuthShell>
  );
}