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

'use client'

import { useState, Suspense } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { resetPassword } from '@/app/actions/auth-reset'
import { toast } from 'sonner'
import { useSearchParams, useRouter } from 'next/navigation'
import Link from 'next/link'
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 (
      <Card className="w-full max-w-[400px]">
        <CardHeader>
          <CardTitle>{t('resetPassword.invalidLinkTitle')}</CardTitle>
          <CardDescription>{t('resetPassword.invalidLinkDescription')}</CardDescription>
        </CardHeader>
        <CardFooter>
          <Link href="/forgot-password" title={t('resetPassword.requestNewLink')} className="w-full">
            <Button variant="outline" className="w-full">{t('resetPassword.requestNewLink')}</Button>
          </Link>
        </CardFooter>
      </Card>
    )
  }

  return (
    <Card className="w-full max-w-[400px]">
      <CardHeader>
        <CardTitle>{t('resetPassword.title')}</CardTitle>
        <CardDescription>{t('resetPassword.description')}</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <label htmlFor="password">{t('resetPassword.newPassword')}</label>
            <Input id="password" name="password" type="password" required minLength={6} autoFocus />
          </div>
          <div className="space-y-2">
            <label htmlFor="confirmPassword">{t('resetPassword.confirmNewPassword')}</label>
            <Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} />
          </div>
        </CardContent>
        <CardFooter>
          <Button type="submit" className="w-full" disabled={isSubmitting}>
            {isSubmitting ? t('resetPassword.resetting') : t('resetPassword.resetPassword')}
          </Button>
        </CardFooter>
      </form>
    </Card>
  )
}

export default function ResetPasswordPage() {
  const { t } = useLanguage()
  return (
    <main className="flex items-center justify-center md:h-screen p-4">
      <Suspense fallback={<div>{t('resetPassword.loading')}</div>}>
        <ResetPasswordForm />
      </Suspense>
    </main>
  )
}