'use client';

import { useState, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
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';

function ResetPasswordContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { locale: language } = useLanguage();
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [formData, setFormData] = useState({
    password: '',
    confirmPassword: '',
  });

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

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

    if (!token) {
      toast.error(language === 'es' ? 'Token no válido' : 'Invalid token');
      return;
    }

    if (formData.password !== formData.confirmPassword) {
      toast.error(language === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
      return;
    }

    if (formData.password.length < 10) {
      toast.error(
        language === 'es'
          ? 'La contraseña debe tener al menos 10 caracteres'
          : 'Password must be at least 10 characters'
      );
      return;
    }

    setLoading(true);

    try {
      await authApi.confirmPasswordReset(token, formData.password);
      setSuccess(true);
      toast.success(language === 'es' ? 'Contraseña actualizada' : 'Password updated');
    } catch (error: any) {
      toast.error(error.message || (language === 'es' ? 'Error' : 'Failed'));
    } finally {
      setLoading(false);
    }
  };

  if (!token) {
    return (
      <div className="section-padding min-h-[70vh] flex items-center">
        <div className="container-page">
          <div className="max-w-md mx-auto">
            <Card className="p-8 text-center">
              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </div>
              <h2 className="text-xl font-semibold mb-2">
                {language === 'es' ? 'Enlace Inválido' : 'Invalid Link'}
              </h2>
              <p className="text-gray-600 mb-6">
                {language === 'es'
                  ? 'Este enlace de restablecimiento no es válido o ha expirado.'
                  : 'This reset link is invalid or has expired.'}
              </p>
              <Link href="/auth/forgot-password">
                <Button>
                  {language === 'es' ? 'Solicitar Nuevo Enlace' : 'Request New Link'}
                </Button>
              </Link>
            </Card>
          </div>
        </div>
      </div>
    );
  }

  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' ? 'Nueva Contraseña' : 'New Password'}
            </h1>
            <p className="mt-2 text-gray-600">
              {language === 'es'
                ? 'Ingresa tu nueva contraseña'
                : 'Enter your new password'}
            </p>
          </div>

          <Card className="p-8">
            {success ? (
              <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="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <h3 className="text-lg font-semibold mb-2">
                  {language === 'es' ? '¡Contraseña Actualizada!' : 'Password Updated!'}
                </h3>
                <p className="text-gray-600 text-sm mb-6">
                  {language === 'es'
                    ? 'Tu contraseña ha sido cambiada exitosamente.'
                    : 'Your password has been successfully changed.'}
                </p>
                <Link href="/login">
                  <Button>
                    {language === 'es' ? 'Iniciar Sesión' : 'Log In'}
                  </Button>
                </Link>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <Input
                  id="password"
                  label={language === 'es' ? 'Nueva Contraseña' : 'New Password'}
                  type="password"
                  value={formData.password}
                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                  required
                />
                <p className="text-xs text-gray-500 -mt-4">
                  {language === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
                </p>
                
                <Input
                  id="confirmPassword"
                  label={language === 'es' ? 'Confirmar Contraseña' : 'Confirm Password'}
                  type="password"
                  value={formData.confirmPassword}
                  onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
                  required
                />
                
                <Button type="submit" className="w-full" size="lg" isLoading={loading}>
                  {language === 'es' ? 'Actualizar Contraseña' : 'Update Password'}
                </Button>
              </form>
            )}
          </Card>
        </div>
      </div>
    </div>
  );
}

function LoadingFallback() {
  return (
    <div className="section-padding min-h-[70vh] flex items-center justify-center">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-secondary-blue"></div>
    </div>
  );
}

export default function ResetPasswordPage() {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <ResetPasswordContent />
    </Suspense>
  );
}
