"use client";

import Link from "next/link";
import { Suspense, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { api, ApiError } from "../../lib/api";
import { BrandMark, BrandWord } from "../../components/icons";

function ResetPasswordView() {
  const router = useRouter();
  const params = useSearchParams();
  const [token, setToken] = useState(params.get("token") ?? "");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState<string | null>(null);
  const [isError, setIsError] = useState(false);
  const [busy, setBusy] = useState(false);
  const [mode, setMode] = useState<"request" | "confirm">(params.get("token") ? "confirm" : "request");
  const [email, setEmail] = useState(params.get("email") ?? "");

  async function requestReset(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setMessage(null);
    setIsError(false);
    try {
      await api.requestPasswordReset(email.trim());
      setMessage("If that email exists, a reset link was sent (check API logs in local dev).");
      setMode("confirm");
    } catch (err) {
      setIsError(true);
      setMessage(err instanceof ApiError ? JSON.stringify(err.body) : String(err));
    } finally {
      setBusy(false);
    }
  }

  async function confirmReset(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setMessage(null);
    setIsError(false);
    try {
      await api.confirmPasswordReset(token.trim(), password);
      setMessage("Password updated. Sign in with your new password.");
      setTimeout(() => router.push("/login"), 1200);
    } catch (err) {
      setIsError(true);
      setMessage(err instanceof ApiError ? JSON.stringify(err.body) : String(err));
    } finally {
      setBusy(false);
    }
  }

  return (
    <main className="page auth-standalone">
      <div className="auth-card">
        <div className="page-brand">
          <span className="page-brand-chip"><BrandMark /></span>
          <span className="page-brand-word"><BrandWord /></span>
        </div>
        <h1 className="page-title">{mode === "request" ? "Reset password" : "Choose a new password"}</h1>

        {mode === "request" ? (
          <form className="form-stack" onSubmit={requestReset}>
            <label>
              Email
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
            </label>
            <button className="screen-btn primary" type="submit" disabled={busy}>
              {busy ? "Sending…" : "Send reset link"}
            </button>
            <button className="screen-btn" type="button" onClick={() => setMode("confirm")}>
              I already have a token
            </button>
          </form>
        ) : (
          <form className="form-stack" onSubmit={confirmReset}>
            <label>
              Reset token
              <input value={token} onChange={(e) => setToken(e.target.value)} required />
            </label>
            <label>
              New password
              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required minLength={8} />
            </label>
            <button className="screen-btn primary" type="submit" disabled={busy}>
              {busy ? "Saving…" : "Update password"}
            </button>
          </form>
        )}

        {message && <p className={isError ? "error-text" : "success-text"}>{message}</p>}
        <p className="auth-links"><Link href="/login">Back to login</Link></p>
      </div>
    </main>
  );
}

export default function ResetPasswordPage() {
  return (
    <Suspense fallback={<main className="page"><div className="empty-state">Loading…</div></main>}>
      <ResetPasswordView />
    </Suspense>
  );
}