"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { authApi } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { Field, FormError, Input, SubmitButton } from "@/components/ui/form";

type Step = "request" | "confirm" | "done";

export default function ResetPasswordPage() {
  const router = useRouter();
  const [step, setStep] = useState<Step>("request");
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [password, setPassword] = useState("");
  const [password2, setPassword2] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const requestCode = async () => {
    setError(null);
    if (!email.trim()) {
      setError("Enter the email you registered with.");
      return;
    }
    setBusy(true);
    try {
      // Always report success (we exist) to avoid account enumeration.
      await authApi.resetRequest(email.trim());
      setStep("confirm");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not send the reset code.");
    } finally {
      setBusy(false);
    }
  };

  const confirmReset = async () => {
    setError(null);
    if (!code.trim()) return setError("Enter the 6-digit code from the email.");
    if (password.length < 10) return setError("Password must be at least 10 characters.");
    if (password !== password2) return setError("Passwords do not match.");
    setBusy(true);
    try {
      await authApi.resetConfirm(email.trim(), code.trim(), password);
      toast("success", "Password updated", "Sign in with your new password.");
      setStep("done");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Reset failed. Check the code and try again.");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-xl font-semibold">Reset password</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          {step === "request" && "We'll email you a one-time code."}
          {step === "confirm" && `Enter the code sent to ${email || "your email"} and choose a new password.`}
          {step === "done" && "Your password has been reset."}
        </p>
      </div>

      <FormError message={error} />

      {step === "request" && (
        <form
          className="space-y-4"
          noValidate
          onSubmit={(e) => {
            e.preventDefault();
            void requestCode();
          }}
        >
          <Field label="Email" htmlFor="reset-email">
            <Input
              id="reset-email"
              type="email"
              autoComplete="email"
              placeholder="you@company.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </Field>
          <SubmitButton busy={busy}>Send reset code</SubmitButton>
        </form>
      )}

      {step === "confirm" && (
        <form
          className="space-y-4"
          noValidate
          onSubmit={(e) => {
            e.preventDefault();
            void confirmReset();
          }}
        >
          <Field label="Code" htmlFor="reset-code">
            <Input
              id="reset-code"
              inputMode="numeric"
              autoComplete="one-time-code"
              placeholder="123456"
              value={code}
              onChange={(e) => setCode(e.target.value)}
            />
          </Field>
          <Field label="New password" htmlFor="reset-password" hint="At least 10 characters.">
            <Input
              id="reset-password"
              type="password"
              autoComplete="new-password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </Field>
          <Field label="Repeat password" htmlFor="reset-password2">
            <Input
              id="reset-password2"
              type="password"
              autoComplete="new-password"
              value={password2}
              onChange={(e) => setPassword2(e.target.value)}
            />
          </Field>
          <SubmitButton busy={busy}>Reset password</SubmitButton>
          <button
            type="button"
            onClick={() => {
              setStep("request");
              setError(null);
            }}
            className="w-full text-center text-xs text-muted-foreground hover:text-foreground"
          >
            Use a different email
          </button>
        </form>
      )}

      {step === "done" && (
        <button
          type="button"
          onClick={() => router.replace("/login")}
          className="h-9 w-full rounded-md bg-primary text-sm font-medium text-primary-foreground hover:opacity-90"
        >
          Back to sign in
        </button>
      )}

      <p className="text-center text-sm">
        <Link href="/login" className="text-muted-foreground hover:text-foreground">
          Back to sign in
        </Link>
      </p>
    </div>
  );
}