'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import { authApi } from '@/lib/api';
import toast from 'react-hot-toast';

export default function ForgotPasswordPage() {
  const { locale: language } = useLanguage();
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const [email, setEmail] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      await authApi.requestPasswordReset(email);
      setSent(true);
      toast.success(
        language === 'es'
          ? 'Revisa tu correo para el enlace de restablecimiento'
          : 'Check your email for the reset link'
      );
    } catch (error: any) {
      toast.error(error.message || (language === 'es' ? 'Error' : 'Failed'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="section-padding min-h-[70vh] flex items-center">
      <div className="container-page">
        <div className="max-w-md mx-auto">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold">
              {language === 'es' ? 'Restablecer Contraseña' : 'Reset Password'}
            </h1>
            <p className="mt-2 text-gray-600">
              {language === 'es'
                ? 'Ingresa tu email para recibir un enlace de restablecimiento'
                : 'Enter your email to receive a reset link'}
            </p>
          </div>

          <Card className="p-8">
            {sent ? (
              <div className="text-center py-4">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                </div>
                <h3 className="text-lg font-semibold mb-2">
                  {language === 'es' ? 'Revisa tu Email' : 'Check Your Email'}
                </h3>
                <p className="text-gray-600 text-sm mb-4">
                  {language === 'es'
                    ? `Si existe una cuenta con ${email}, recibirás un enlace para restablecer tu contraseña.`
                    : `If an account exists with ${email}, you'll receive a password reset link.`}
                </p>
                <button
                  onClick={() => setSent(false)}
                  className="text-secondary-blue hover:underline text-sm"
                >
                  {language === 'es' ? 'Intentar con otro email' : 'Try a different email'}
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <Input
                  id="email"
                  label="Email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
                
                <Button type="submit" className="w-full" size="lg" isLoading={loading}>
                  {language === 'es' ? 'Enviar Enlace' : 'Send Reset Link'}
                </Button>
              </form>
            )}

            <p className="mt-6 text-center text-sm text-gray-600">
              {language === 'es' ? '¿Recordaste tu contraseña?' : 'Remember your password?'}{' '}
              <Link href="/login" className="text-secondary-blue hover:underline font-medium">
                {language === 'es' ? 'Iniciar Sesión' : 'Log In'}
              </Link>
            </p>
          </Card>
        </div>
      </div>
    </div>
  );
}
