const { useState, useEffect } = React;

function Recuperar() {
  const [step, setStep] = useState(1);
  const [correo, setCorreo] = useState('');
  const [codigo, setCodigo] = useState(['', '', '', '', '', '']);
  const [nuevaPassword, setNuevaPassword] = useState('');
  const [confirmarPassword, setConfirmarPassword] = useState('');
  const [error, setError] = useState('');
  const [mensaje, setMensaje] = useState('');
  const [loading, setLoading] = useState(false);
  const [timeLeft, setTimeLeft] = useState(600);

  useEffect(() => {
    initParticles();
    let interval;
    if (step === 2 && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft(prev => {
          if (prev <= 1) {
            clearInterval(interval);
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [step, timeLeft]);

  const initParticles = () => {
    const particles = document.querySelector('.particles');
    if (!particles) return;
    particles.innerHTML = '';
    for (let i = 0; i < 15; i++) {
      const p = document.createElement('div');
      p.className = 'particle';
      p.style.width = Math.random() * 20 + 10 + 'px';
      p.style.height = p.style.width;
      p.style.left = Math.random() * 100 + '%';
      p.style.animationDelay = Math.random() * 10 + 's';
      p.style.animationDuration = Math.random() * 10 + 10 + 's';
      particles.appendChild(p);
    }
  };

  const handleEnviarCodigo = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const res = await fetch('/api/auth/recuperar', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ correo })
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.message);
      setMensaje(data.message);
      setStep(2);
      setTimeLeft(600);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleVerificarCodigo = async (e) => {
    e.preventDefault();
    setError('');
    const codigoCompleto = codigo.join('');
    if (codigoCompleto.length !== 6) {
      setError('Ingresa los 6 dígitos del código');
      return;
    }
    setLoading(true);
    try {
      const res = await fetch('/api/auth/verificar-codigo', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ correo, codigo: codigoCompleto })
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.message);
      setMensaje(data.message);
      setStep(3);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleCambiarPassword = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const res = await fetch('/api/auth/cambiar-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ correo, nueva_password: nuevaPassword, confirmar_password: confirmarPassword })
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.message);
      setMensaje(data.message);
      setStep(4);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleCodigoChange = (index, value) => {
    if (!/^\d*$/.test(value)) return;
    const newCodigo = [...codigo];
    newCodigo[index] = value.slice(-1);
    setCodigo(newCodigo);
    if (value && index < 5) {
      document.querySelector(`input[data-index="${index + 1}"]`)?.focus();
    }
  };

  const handleCodigoKeyDown = (index, e) => {
    if (e.key === 'Backspace' && !codigo[index] && index > 0) {
      document.querySelector(`input[data-index="${index - 1}"]`)?.focus();
    }
  };

  const formatTime = (seconds) => {
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    return `${m}:${s.toString().padStart(2, '0')}`;
  };

  return (
    <>
      <a href="/Login/index.html" className="back-button" title="Volver al login">
        <i className="fas fa-arrow-left"></i>
      </a>

      <button className="theme-toggle" onClick={() => {
        document.body.classList.toggle('dark-mode');
        const isDark = document.body.classList.contains('dark-mode');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
      }} title="Cambiar tema">
        <i className={`fas ${document.body.classList.contains('dark-mode') ? 'fa-sun' : 'fa-moon'}`}></i>
      </button>

      <div className="particles"></div>

      <div className="recovery-container">
        <div className="progress-bar">
          <div className={`progress-step ${step >= 1 ? 'active' : ''} ${step > 1 ? 'completed' : ''}`}>
            <div className="step-icon"><i className="fas fa-envelope"></i></div>
            <span>Email</span>
          </div>
          <div className={`progress-line ${step > 1 ? 'active' : ''}`}></div>
          <div className={`progress-step ${step >= 2 ? 'active' : ''} ${step > 2 ? 'completed' : ''}`}>
            <div className="step-icon"><i className="fas fa-key"></i></div>
            <span>Código</span>
          </div>
          <div className={`progress-line ${step > 2 ? 'active' : ''}`}></div>
          <div className={`progress-step ${step >= 3 ? 'active' : ''} ${step > 3 ? 'completed' : ''}`}>
            <div className="step-icon"><i className="fas fa-lock"></i></div>
            <span>Nueva</span>
          </div>
        </div>

        <div className="logo-container">
          <div className="logo"><i className="fas fa-shield-alt"></i></div>
          <h1>Recuperar Contraseña</h1>
          <p>Sistema POS - Recuperación Segura</p>
        </div>

        {error && (
          <div className="alert alert-error">
            <i className="fas fa-exclamation-circle"></i> {error}
          </div>
        )}
        {mensaje && (
          <div className="alert alert-success">
            <i className="fas fa-check-circle"></i> {mensaje}
          </div>
        )}

        {step === 1 && (
          <form onSubmit={handleEnviarCodigo}>
            <div className="step-info">
              <i className="fas fa-info-circle"></i>
              <p>Ingresa tu email registrado y te enviaremos un código de verificación</p>
            </div>
            <div className="form-group">
              <label>Correo Electrónico</label>
              <div className="input-wrapper">
                <input type="email" className="form-control" value={correo} onChange={e => setCorreo(e.target.value)} placeholder="usuario@ejemplo.com" required />
                <i className="fas fa-envelope"></i>
              </div>
            </div>
            <button type="submit" className="btn-submit" disabled={loading}>
              <i className="fas fa-paper-plane"></i> {loading ? 'Enviando...' : 'Enviar Código'}
            </button>
          </form>
        )}

        {step === 2 && (
          <form onSubmit={handleVerificarCodigo}>
            <div className="step-info">
              <i className="fas fa-info-circle"></i>
              <p>Ingresa el código de 6 dígitos enviado a <strong>{correo}</strong></p>
            </div>
            <div className="code-inputs">
              {codigo.map((digit, idx) => (
                <input key={idx} type="text" maxLength="1" className="code-input" data-index={idx} value={digit} onChange={e => handleCodigoChange(idx, e.target.value)} onKeyDown={e => handleCodigoKeyDown(idx, e)} inputMode="numeric" autoFocus={idx === 0} />
              ))}
            </div>
            <div className="resend-code">
              <p>¿No recibiste el código? <a href="#" onClick={e => { e.preventDefault(); setStep(1); }}>Solicitar nuevo código</a></p>
              <p className="timer">Tiempo restante: <span>{formatTime(timeLeft)}</span></p>
            </div>
            <button type="submit" className="btn-submit" disabled={loading}>
              <i className="fas fa-check"></i> {loading ? 'Verificando...' : 'Verificar Código'}
            </button>
          </form>
        )}

        {step === 3 && (
          <form onSubmit={handleCambiarPassword}>
            <div className="step-info">
              <i className="fas fa-info-circle"></i>
              <p>Crea una contraseña segura (mínimo 6 caracteres)</p>
            </div>
            <div className="form-group">
              <label>Nueva Contraseña</label>
              <div className="input-wrapper">
                <input type="password" className="form-control" value={nuevaPassword} onChange={e => setNuevaPassword(e.target.value)} placeholder="Mínimo 6 caracteres" required minLength="6" />
                <i className="fas fa-lock"></i>
              </div>
            </div>
            <div className="form-group">
              <label>Confirmar Contraseña</label>
              <div className="input-wrapper">
                <input type="password" className="form-control" value={confirmarPassword} onChange={e => setConfirmarPassword(e.target.value)} placeholder="Repite la contraseña" required />
                <i className="fas fa-lock"></i>
              </div>
            </div>
            <button type="submit" className="btn-submit" disabled={loading}>
              <i className="fas fa-save"></i> {loading ? 'Cambiando...' : 'Cambiar Contraseña'}
            </button>
          </form>
        )}

        {step === 4 && (
          <div className="success-message">
            <div className="success-icon"><i className="fas fa-check-circle"></i></div>
            <h2>¡Contraseña Actualizada!</h2>
            <p>Tu contraseña ha sido cambiada exitosamente</p>
            <a href="/Login/index.html" className="btn-submit">
              <i className="fas fa-sign-in-alt"></i> Iniciar Sesión
            </a>
          </div>
        )}

        <div className="security-info">
          <i className="fas fa-shield-alt"></i>
          <p>Tu información está protegida con encriptación de nivel empresarial</p>
        </div>
      </div>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Recuperar />);