tessera-ctl/apps/web/src/app/(auth)/reset-password/[token]/page.tsx

'use client';

import { useState, useTransition, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { TesseraLogo } from '@/components/brand/tessera-logo';

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';

/**
 * Password reset form with token validation (D-03 self-service).
 * User arrives here from the reset email link.
 * On success, redirects to /login after 3 seconds.
 * Part of (auth) route group -- no sidebar/header (D-04).
 */
export default function ResetPasswordTokenPage() {
  const t = useTranslations('auth');
  const router = useRouter();
  const params = useParams();
  const token = params.token as string;

  const [isPending, startTransition] = useTransition();
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [passwordMismatch, setPasswordMismatch] = useState(false);

  // Redirect to login after successful reset
  useEffect(() => {
    if (!success) return;
    const timer = setTimeout(() => {
      router.push('/login');
    }, 3000);
    return () => clearTimeout(timer);
  }, [success, router]);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setPasswordMismatch(false);

    const formData = new FormData(e.currentTarget);
    const newPassword = formData.get('newPassword') as string;
    const confirmPassword = formData.get('confirmPassword') as string;

    if (newPassword !== confirmPassword) {
      setPasswordMismatch(true);
      return;
    }

    startTransition(async () => {
      try {
        const response = await fetch(`${API_URL}/auth/reset-password`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ token, newPassword }),
        });

        if (!response.ok) {
          const data = await response.json().catch(() => null);
          const message = data?.message || '';

          if (message.includes('expired')) {
            setError('tokenExpired');
          } else if (message.includes('used')) {
            setError('tokenUsed');
          } else {
            setError('tokenInvalid');
          }
          return;
        }

        setSuccess(true);
      } catch {
        setError('networkError');
      }
    });
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
      <div className="w-full max-w-sm space-y-8">
        {/* Heading */}
        <div className="text-center">
          <TesseraLogo variant="horizontal" size={32} />
          <h2 className="mt-4 text-2xl font-semibold text-foreground">
            {t('resetPassword.newPasswordTitle')}
          </h2>
        </div>

        {success ? (
          /* Success message with redirect notice */
          <div className="space-y-4">
            <div className="rounded-md bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 px-4 py-3 text-sm text-green-800 dark:text-green-200">
              {t('resetPassword.resetSuccess')}
            </div>
            <p className="text-sm text-muted-foreground text-center">
              {t('resetPassword.redirecting')}
            </p>
            <Link
              href="/login"
              className="btn btn-primary w-full"
            >
              {t('resetPassword.backToLogin')}
            </Link>
          </div>
        ) : (
          <>
            {/* Error message */}
            {error && (
              <div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
                {t(`resetPassword.${error}`)}
              </div>
            )}

            {/* Password mismatch */}
            {passwordMismatch && (
              <div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
                {t('resetPassword.passwordMismatch')}
              </div>
            )}

            <form onSubmit={handleSubmit} className="space-y-5">
              {/* New password */}
              <div className="space-y-2">
                <label
                  htmlFor="newPassword"
                  className="text-sm font-medium text-foreground"
                >
                  {t('resetPassword.newPassword')}
                </label>
                <input
                  id="newPassword"
                  name="newPassword"
                  type="password"
                  required
                  minLength={8}
                  autoComplete="new-password"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                  placeholder={t('resetPassword.newPassword')}
                />
              </div>

              {/* Confirm password */}
              <div className="space-y-2">
                <label
                  htmlFor="confirmPassword"
                  className="text-sm font-medium text-foreground"
                >
                  {t('resetPassword.confirmPassword')}
                </label>
                <input
                  id="confirmPassword"
                  name="confirmPassword"
                  type="password"
                  required
                  minLength={8}
                  autoComplete="new-password"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                  placeholder={t('resetPassword.confirmPassword')}
                />
              </div>

              <button
                type="submit"
                disabled={isPending}
                className="btn btn-primary w-full"
              >
                {isPending ? (
                  <svg
                    className="animate-spin h-4 w-4"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    />
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                    />
                  </svg>
                ) : (
                  t('resetPassword.submitReset')
                )}
              </button>
            </form>

            <div className="text-center">
              <Link
                href="/login"
                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                {t('resetPassword.backToLogin')}
              </Link>
            </div>
          </>
        )}
      </div>
    </div>
  );
}