'use client'

import { useState } 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 { forgotPassword } from '@/app/actions/auth-reset'
import { toast } from 'sonner'
import Link from 'next/link'
import { useLanguage } from '@/lib/i18n'

export default function ForgotPasswordPage() {
  const { t } = useLanguage()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isDone, setIsSubmittingDone] = useState(false)

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)
    const formData = new FormData(e.currentTarget)
    const result = await forgotPassword(formData.get('email') as string)
    setIsSubmitting(false)

    if (result.error) {
      toast.error(result.error)
    } else {
      setIsSubmittingDone(true)
    }
  }

  if (isDone) {
    return (
      <main className="flex items-center justify-center md:h-screen p-4">
        <Card className="w-full max-w-[400px]">
          <CardHeader>
            <CardTitle>{t('auth.checkYourEmail')}</CardTitle>
            <CardDescription>
              {t('auth.resetEmailSent')}
            </CardDescription>
          </CardHeader>
          <CardFooter>
            <Link href="/login" className="w-full">
              <Button variant="outline" className="w-full">{t('auth.returnToLogin')}</Button>
            </Link>
          </CardFooter>
        </Card>
      </main>
    )
  }

  return (
    <main className="flex items-center justify-center md:h-screen p-4">
      <Card className="w-full max-w-[400px]">
        <CardHeader>
          <CardTitle>{t('auth.forgotPasswordTitle')}</CardTitle>
          <CardDescription>
            {t('auth.forgotPasswordDescription')}
          </CardDescription>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="email" className="text-sm font-medium">{t('auth.email')}</label>
              <Input id="email" name="email" type="email" required placeholder="name@example.com" />
            </div>
          </CardContent>
          <CardFooter className="flex flex-col gap-4">
            <Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? t('auth.sending') : t('auth.sendResetLink')}
            </Button>
            <Link href="/login" className="text-sm text-center underline">
              {t('auth.backToLogin')}
            </Link>
          </CardFooter>
        </form>
      </Card>
    </main>
  )
}