ledgerone_frontend/app/reset-password/page.tsx

"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useState } from "react";
import { SiteFooter } from "../../components/site-footer";
import { SiteHeader } from "../../components/site-header";

type ApiResponse<T> = {
  data: T;
  meta: { timestamp: string; version: "v1" };
  error: null | { message: string; code?: string };
};

function ResetPasswordForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const token = searchParams.get("token") ?? "";

  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [status, setStatus] = useState("");
  const [isError, setIsError] = useState(false);

  const onSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    if (password !== confirm) {
      setStatus("Passwords do not match.");
      setIsError(true);
      return;
    }
    if (password.length < 8) {
      setStatus("Password must be at least 8 characters.");
      setIsError(true);
      return;
    }
    if (!token) {
      setStatus("Missing reset token. Please use the link from your email.");
      setIsError(true);
      return;
    }
    setStatus("Resetting password...");
    setIsError(false);
    try {
      const res = await fetch("/api/auth/reset-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token, password }),
      });
      const payload = (await res.json()) as ApiResponse<{ message: string }>;
      if (!res.ok || payload.error) {
        setStatus(payload.error?.message ?? "Reset failed. The link may have expired.");
        setIsError(true);
        return;
      }
      setStatus("Password reset successfully! Redirecting to sign in...");
      setTimeout(() => router.push("/login"), 2000);
    } catch {
      setStatus("Something went wrong. Please try again.");
      setIsError(true);
    }
  };

  if (!token) {
    return (
      <div className="text-center space-y-4">
        <p className="text-sm text-muted-foreground">Invalid reset link. Please request a new one.</p>
        <Link href="/forgot-password" className="text-primary hover:underline text-sm">Request password reset</Link>
      </div>
    );
  }

  return (
    <form className="space-y-6" onSubmit={onSubmit}>
      <div>
        <label htmlFor="password" className="block text-sm font-medium text-foreground">
          New Password
        </label>
        <div className="mt-1">
          <input
            id="password" name="password" type="password" autoComplete="new-password" required minLength={8}
            value={password} onChange={(e) => setPassword(e.target.value)}
            className="block w-full appearance-none rounded-lg border border-border bg-background/50 px-3 py-2 placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-primary sm:text-sm transition-all"
          />
        </div>
        <p className="mt-1 text-xs text-muted-foreground">Minimum 8 characters</p>
      </div>
      <div>
        <label htmlFor="confirm" className="block text-sm font-medium text-foreground">
          Confirm Password
        </label>
        <div className="mt-1">
          <input
            id="confirm" name="confirm" type="password" autoComplete="new-password" required
            value={confirm} onChange={(e) => setConfirm(e.target.value)}
            className="block w-full appearance-none rounded-lg border border-border bg-background/50 px-3 py-2 placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-primary sm:text-sm transition-all"
          />
        </div>
      </div>
      <button
        type="submit"
        className="flex w-full justify-center rounded-lg border border-transparent bg-primary py-2.5 px-4 text-sm font-bold text-primary-foreground shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all hover:-translate-y-0.5"
      >
        Reset Password
      </button>
      {status && (
        <div className={`rounded-lg p-4 ${isError ? "bg-red-500/10 border border-red-500/20" : "bg-accent/10 border border-accent/20"}`}>
          <p className="text-sm text-center">{status}</p>
        </div>
      )}
    </form>
  );
}

export default function ResetPasswordPage() {
  return (
    <div className="min-h-screen bg-background font-sans text-foreground">
      <SiteHeader />
      <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8 mt-16 relative">
        <div className="absolute inset-0 mesh-gradient -z-10 opacity-30" />
        <div className="sm:mx-auto sm:w-full sm:max-w-md">
          <div className="flex justify-center">
            <div className="h-12 w-12 rounded-xl bg-primary flex items-center justify-center text-primary-foreground font-bold text-xl shadow-glow-teal">
              L1
            </div>
          </div>
          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-foreground">
            Set new password
          </h2>
          <p className="mt-2 text-center text-sm text-muted-foreground">
            <Link href="/login" className="font-medium text-primary hover:text-primary/80 transition-colors">
              Back to sign in
            </Link>
          </p>
        </div>
        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
          <div className="glass-panel py-8 px-4 shadow-xl sm:rounded-xl sm:px-10">
            <Suspense fallback={<div className="text-center text-sm text-muted-foreground">Loading...</div>}>
              <ResetPasswordForm />
            </Suspense>
          </div>
        </div>
      </div>
      <SiteFooter />
    </div>
  );
}