// ── LOGIN — Navarro ERP ───────────────────────────────

// ── Seguridad de acceso (sin tocar las claves existentes) ────────────────
// Bloqueo temporal tras intentos fallidos repetidos + bitácora de accesos.
const LOGIN_MAX_INTENTOS = 5;
const LOGIN_BLOQUEO_MS   = 5 * 60 * 1000;     // 5 minutos de bloqueo
const SESION_MAX_MS      = 12 * 60 * 60 * 1000; // sesión expira tras 12h de inactividad

function getIntentos() { return lsGet('login_intentos', {}); }
function setIntentos(v) { lsSet('login_intentos', v); }
function registrarAcceso(entry) {
  const log = lsGet('login_bitacora', []);
  log.unshift(entry);
  lsSet('login_bitacora', log.slice(0, 200)); // conserva los últimos 200 eventos
}

function Login({ onLogin }) {
  const { useState } = React;
  const [usuario, setUsuario] = useState('');
  const [clave,   setClave]   = useState('');
  const [error,   setError]   = useState('');
  const [ver,     setVer]     = useState(false);
  const [, forceTick]         = useState(0);

  const usuarios = lsGet('usuarios', USUARIOS_DEFAULT);

  function estadoBloqueo(usr) {
    const intentos = getIntentos();
    const reg = intentos[usr];
    if (!reg || reg.fallos < LOGIN_MAX_INTENTOS) return null;
    const restante = (reg.bloqueadoHasta||0) - Date.now();
    if (restante <= 0) return null;
    return restante;
  }

  function intentarLogin(e) {
    e.preventDefault();
    const usr = usuario.trim();
    const bloqueoMs = estadoBloqueo(usr);
    if (bloqueoMs) {
      const min = Math.ceil(bloqueoMs / 60000);
      setError(`Cuenta bloqueada temporalmente por seguridad. Intenta de nuevo en ${min} min.`);
      setTimeout(() => setError(''), 4000);
      return;
    }
    const u = usuarios.find(u => u.usuario === usr && u.clave === clave);
    const intentos = getIntentos();
    if (u) {
      // Login correcto: limpiar contador de fallos y registrar acceso
      delete intentos[usr];
      setIntentos(intentos);
      registrarAcceso({ usuario: usr, nombre: u.nombre, rol: u.rol, ts: new Date().toISOString(), resultado: 'ok' });
      lsSet('session', { id: u.id, nombre: u.nombre, rol: u.rol, tienda: u.tienda, loginTs: Date.now() });
      onLogin(u);
    } else {
      // Login fallido: incrementar contador y bloquear si corresponde
      const reg = intentos[usr] || { fallos: 0, bloqueadoHasta: 0 };
      reg.fallos = (reg.fallos||0) + 1;
      if (reg.fallos >= LOGIN_MAX_INTENTOS) reg.bloqueadoHasta = Date.now() + LOGIN_BLOQUEO_MS;
      intentos[usr] = reg;
      setIntentos(intentos);
      registrarAcceso({ usuario: usr, ts: new Date().toISOString(), resultado: 'fallido' });
      if (reg.fallos >= LOGIN_MAX_INTENTOS) {
        setError(`Demasiados intentos fallidos. Cuenta bloqueada ${LOGIN_BLOQUEO_MS/60000} minutos por seguridad.`);
      } else {
        setError(`Usuario o contraseña incorrectos (intento ${reg.fallos}/${LOGIN_MAX_INTENTOS})`);
      }
      setTimeout(() => setError(''), 4000);
      forceTick(t => t+1);
    }
  }

  return (
    <div style={{
      position:'fixed', inset:0,
      background:'var(--bg)',
      display:'flex', alignItems:'center', justifyContent:'center',
      flexDirection:'column',
    }}>
      {/* Fondo decorativo */}
      <div style={{
        position:'absolute', inset:0, overflow:'hidden', pointerEvents:'none',
        background:'radial-gradient(ellipse at 30% 40%, rgba(201,168,76,0.06) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(139,58,58,0.05) 0%, transparent 60%)'
      }}/>

      {/* Logo */}
      <div style={{ textAlign:'center', marginBottom:'36px', position:'relative', zIndex:1 }}>
        <div style={{ color:'var(--gold)', fontSize:'36px', marginBottom:'8px', lineHeight:1 }}>✦</div>
        <div style={{
          fontFamily:'Cormorant Garamond,serif', fontSize:'34px', fontWeight:300,
          color:'var(--cream)', letterSpacing:'10px',
        }}>NAVARRO</div>
        <div style={{ fontSize:'10px', color:'var(--cream-3)', letterSpacing:'4px', marginTop:'4px' }}>
          JOYERÍA · SISTEMA ERP
        </div>
      </div>

      {/* Card login */}
      <form onSubmit={intentarLogin} style={{
        background:'var(--bg-card)', border:'1px solid var(--border)',
        borderRadius:'18px', padding:'32px', width:'320px',
        position:'relative', zIndex:1,
        boxShadow:'0 20px 60px rgba(0,0,0,0.5)',
      }}>
        <div style={{
          fontFamily:'Cormorant Garamond,serif', fontSize:'18px',
          color:'var(--cream)', marginBottom:'24px', textAlign:'center',
        }}>
          Iniciar sesión
        </div>

        <div style={{ marginBottom:'14px' }}>
          <div style={{ fontSize:'10px', color:'var(--cream-3)', marginBottom:'5px', letterSpacing:'0.5px' }}>
            USUARIO
          </div>
          <input
            type="text" autoFocus autoComplete="username"
            value={usuario} onChange={e => setUsuario(e.target.value)}
            placeholder="Ej: admin"
            style={{
              width:'100%', background:'var(--surface)', border:'1px solid var(--border)',
              borderRadius:'8px', padding:'10px 13px', color:'var(--cream)',
              fontSize:'13px', outline:'none', boxSizing:'border-box',
            }}
          />
        </div>

        <div style={{ marginBottom:'20px' }}>
          <div style={{ fontSize:'10px', color:'var(--cream-3)', marginBottom:'5px', letterSpacing:'0.5px' }}>
            CONTRASEÑA
          </div>
          <div style={{ position:'relative' }}>
            <input
              type={ver ? 'text' : 'password'} autoComplete="current-password"
              value={clave} onChange={e => setClave(e.target.value)}
              placeholder="••••••••"
              style={{
                width:'100%', background:'var(--surface)', border:'1px solid var(--border)',
                borderRadius:'8px', padding:'10px 38px 10px 13px', color:'var(--cream)',
                fontSize:'13px', outline:'none', boxSizing:'border-box',
              }}
            />
            <button type="button" onClick={() => setVer(v => !v)}
              style={{
                position:'absolute', right:'10px', top:'50%', transform:'translateY(-50%)',
                background:'none', border:'none', color:'var(--cream-3)', cursor:'pointer',
                fontSize:'12px', padding:'2px',
              }}>
              {ver ? '🙈' : '👁'}
            </button>
          </div>
        </div>

        {error && (
          <div style={{
            background:'rgba(192,57,43,0.12)', border:'1px solid rgba(192,57,43,0.3)',
            borderRadius:'8px', padding:'8px 12px', fontSize:'12px', color:'#e74c3c',
            marginBottom:'14px', textAlign:'center',
          }}>
            {error}
          </div>
        )}

        <button type="submit" style={{
          width:'100%', padding:'12px',
          background:'var(--gold)', border:'none', borderRadius:'10px',
          color:'#0c0908', fontWeight:700, fontSize:'14px', cursor:'pointer',
          fontFamily:'Cormorant Garamond,serif', letterSpacing:'1px',
          transition:'opacity 0.15s',
        }}>
          ✦ Entrar
        </button>

        {/* Hint usuarios */}
        <div style={{
          marginTop:'20px', background:'var(--surface)', borderRadius:'8px',
          padding:'10px 12px', fontSize:'10px', color:'var(--cream-3)',
        }}>
          <div style={{ fontWeight:600, marginBottom:'5px', color:'var(--cream-2)' }}>Cuentas predeterminadas:</div>
          {(lsGet('usuarios', USUARIOS_DEFAULT)).map(u => (
            <div key={u.id} onClick={() => { setUsuario(u.usuario); setClave(u.clave); }}
              style={{
                padding:'3px 0', cursor:'pointer', borderBottom:'1px solid var(--border)',
                display:'flex', justifyContent:'space-between', alignItems:'center',
              }}>
              <span style={{ color:'var(--cream)' }}>{u.usuario}</span>
              <span style={{
                fontSize:'9px', padding:'1px 6px', borderRadius:'10px',
                background: u.rol==='admin' ? 'rgba(201,168,76,0.2)' : 'rgba(41,128,185,0.2)',
                color: u.rol==='admin' ? 'var(--gold)' : '#2980b9',
              }}>{u.rol}</span>
            </div>
          ))}
          <div style={{ marginTop:'5px', fontSize:'9px', color:'var(--cream-3)', fontStyle:'italic' }}>
            Click en una cuenta para autocompletar
          </div>
        </div>
      </form>

      <div style={{ marginTop:'20px', fontSize:'10px', color:'var(--cream-3)', position:'relative', zIndex:1 }}>
        Santa Cruz · Valle de Colchagua · v5.0
      </div>
    </div>
  );
}

Object.assign(window, { Login, SESION_MAX_MS, registrarAcceso });