Momento/memento-note/app/(auth)/reset-password/page.tsx

'use client';

import { useState, Suspense } from 'react';
import { resetPassword } from '@/app/actions/auth-reset';
import { toast } from 'sonner';
import { useSearchParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { Lock, ArrowRight, Sparkles, AlertCircle, ArrowLeft } from 'lucide-react';
import { useLanguage } from '@/lib/i18n';

function ResetPasswordForm() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const { t } = useLanguage();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const token = searchParams.get('token');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!token) return;

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

    if (password !== confirm) {
      toast.error(t('resetPassword.passwordMismatch'));
      return;
    }

    setIsSubmitting(true);
    const result = await resetPassword(token, password);
    setIsSubmitting(false);

    if (result.error) {
      toast.error(result.error);
    } else {
      toast.success(t('resetPassword.success'));
      router.push('/login');
    }
  };

  if (!token) {
    return (
      <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
        <div className="space-y-6 text-center">
          <div className="w-12 h-12 mx-auto rounded-2xl bg-red-500/10 flex items-center justify-center">
            <AlertCircle size={24} className="text-red-500" />
          </div>
          <div className="space-y-2">
            <h1 className="text-2xl font-serif font-bold">{t('resetPassword.invalidLinkTitle')}</h1>
            <p className="text-[var(--muted-foreground)] text-sm">{t('resetPassword.invalidLinkDescription')}</p>
          </div>
          <Link href="/forgot-password" className="block">
            <button className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98]">
              {t('resetPassword.requestNewLink')}
            </button>
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
      <div className="space-y-8">
        <div className="text-center space-y-2">
          <h1 className="text-2xl md:text-3xl font-serif font-bold">
            {t('resetPassword.title')}
          </h1>
          <p className="text-[var(--muted-foreground)] text-sm font-light">
            {t('resetPassword.description')}
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-1.5">
            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
              {t('resetPassword.newPassword')}
            </label>
            <div className="relative group">
              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
                <Lock size={16} />
              </div>
              <input
                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                id="password"
                name="password"
                type="password"
                required
                minLength={6}
                autoFocus
                placeholder="••••••••"
              />
            </div>
          </div>

          <div className="space-y-1.5">
            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
              {t('resetPassword.confirmNewPassword')}
            </label>
            <div className="relative group">
              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
                <Lock size={16} />
              </div>
              <input
                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
                id="confirmPassword"
                name="confirmPassword"
                type="password"
                required
                minLength={6}
                placeholder="••••••••"
              />
            </div>
          </div>

          <button
            type="submit"
            disabled={isSubmitting}
            className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] flex items-center justify-center gap-3 transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98] disabled:opacity-50"
          >
            {isSubmitting ? (
              <Sparkles size={16} className="animate-spin" />
            ) : (
              <>
                {t('resetPassword.resetPassword')}
                <ArrowRight size={14} />
              </>
            )}
          </button>
        </form>

        <div className="text-center">
          <Link
            href="/login"
            className="text-xs text-[var(--muted-foreground)] hover:text-[var(--color-brand-accent)] transition-colors flex items-center justify-center gap-1"
          >
            <ArrowLeft size={12} />
            {t('auth.backToLogin')}
          </Link>
        </div>
      </div>
    </div>
  );
}

export default function ResetPasswordPage() {
  const { t } = useLanguage();
  return (
    <Suspense fallback={<div className="text-center text-sm text-[var(--muted-foreground)]">{t('resetPassword.loading')}</div>}>
      <ResetPasswordForm />
    </Suspense>
  );
}