var _useState = React.useState;
var _useEffect = React.useEffect;
var _useRef = React.useRef;

var ArrowR = function() {
  return React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M3 8h10M9 4l4 4-4 4' }));
};
var ArrowL = function() {
  return React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M13 8H3M7 4 3 8l4 4' }));
};
var LockIcon = function() {
  return React.createElement('svg', { width: 12, height: 12, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round' },
    React.createElement('rect', { x: 3.5, y: 7, width: 9, height: 6.5, rx: 1.2 }),
    React.createElement('path', { d: 'M5.5 7V5a2.5 2.5 0 0 1 5 0v2' }));
};
var AlertIcon = function() {
  return React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round' },
    React.createElement('circle', { cx: 8, cy: 8, r: 6 }),
    React.createElement('path', { d: 'M8 5v3.5M8 11v.5' }));
};
var Spinner = function() {
  return React.createElement('svg', { className: 'lg-spin', width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' },
    React.createElement('path', { d: 'M8 1.5a6.5 6.5 0 1 1-6.5 6.5' }));
};

function maskEmail(email) {
  if (!email || email.indexOf('@') < 0) return email;
  var parts = email.split('@');
  var user = parts[0];
  var dom = parts[1];
  var u = user.length <= 2 ? user[0] + '•' : user[0] + '•'.repeat(Math.max(1, user.length - 2)) + user[user.length - 1];
  return u + '@' + dom;
}

function LoginPage(props) {
  var onLogin = props.onLogin;
  var cfg = window.FIRMA_CONFIG;
  var step = _useState('email'); var stepVal = step[0]; var setStep = step[1];
  var email = _useState(''); var emailVal = email[0]; var setEmail = email[1];
  var sending = _useState(false); var sendingVal = sending[0]; var setSending = sending[1];
  var emailError = _useState(''); var emailErrorVal = emailError[0]; var setEmailError = emailError[1];
  var code = _useState(['', '', '', '', '', '']); var codeVal = code[0]; var setCode = code[1];
  var codeError = _useState(''); var codeErrorVal = codeError[0]; var setCodeError = codeError[1];
  var verifying = _useState(false); var verifyingVal = verifying[0]; var setVerifying = verifying[1];
  var resendIn = _useState(0); var resendInVal = resendIn[0]; var setResendIn = resendIn[1];
  var inputsRef = _useRef([]);

  _useEffect(function() {
    if (resendInVal <= 0) return;
    var t = setTimeout(function() { setResendIn(function(s) { return s - 1; }); }, 1000);
    return function() { clearTimeout(t); };
  }, [resendInVal]);

  var ALLOWED_DOMAINS = ['@grupodefensa.cl', '@astur.cl'];
  function isAllowedDomain(e) {
    var lower = e.toLowerCase();
    return ALLOWED_DOMAINS.some(function(d) { return lower.endsWith(d); });
  }

  var sendCode = function() {
    var trimmed = emailVal.trim();
    if (!trimmed) { setEmailError('Ingresa tu correo.'); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) { setEmailError('Ingresa un correo válido.'); return; }
    if (!isAllowedDomain(trimmed)) { setEmailError('Solo se permiten correos corporativos.'); return; }

    setSending(true);
    setEmailError('');
    fetch(cfg.baseUrl + '/api/DashboardAuth/RequestCode', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: trimmed }),
    }).then(function(res) {
      setSending(false);
      if (!res.ok) { setEmailError('Error al enviar código.'); return; }
      setStep('code');
      setResendIn(30);
      setCode(['', '', '', '', '', '']);
      setCodeError('');
    }).catch(function() {
      setSending(false);
      setEmailError('No se pudo conectar al servidor.');
    });
  };

  var verifyCode = function(full) {
    var v = (full || codeVal.join('')).trim();
    if (v.length !== 6) return;
    setVerifying(true);
    setCodeError('');
    fetch(cfg.baseUrl + '/api/DashboardAuth/VerifyCode', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: emailVal.trim(), code: v }),
    }).then(function(res) {
      if (res.status === 401) {
        setVerifying(false);
        setCodeError('Código incorrecto. Verifica e inténtalo de nuevo.');
        return null;
      }
      if (!res.ok) { setVerifying(false); setCodeError('Error al verificar.'); return null; }
      return res.json();
    }).then(function(data) {
      if (!data) return;
      setVerifying(false);
      setStep('success');
      sessionStorage.setItem('dashboard_token', data.token);
      setTimeout(function() { onLogin(); }, 1500);
    }).catch(function() {
      setVerifying(false);
      setCodeError('No se pudo conectar al servidor.');
    });
  };

  var handleCodeChange = function(i, raw) {
    var v = raw.replace(/\D/g, '').slice(-1);
    var next = codeVal.slice();
    next[i] = v;
    setCode(next);
    if (codeErrorVal) setCodeError('');
    if (v && i < 5) inputsRef.current[i + 1] && inputsRef.current[i + 1].focus();
    if (next.every(function(c) { return c !== ''; }) && next.join('').length === 6) {
      verifyCode(next.join(''));
    }
  };

  var handleCodeKey = function(i, e) {
    if (e.key === 'Backspace' && !codeVal[i] && i > 0) {
      var next = codeVal.slice();
      next[i - 1] = '';
      setCode(next);
      inputsRef.current[i - 1] && inputsRef.current[i - 1].focus();
    } else if (e.key === 'ArrowLeft' && i > 0) {
      inputsRef.current[i - 1] && inputsRef.current[i - 1].focus();
    } else if (e.key === 'ArrowRight' && i < 5) {
      inputsRef.current[i + 1] && inputsRef.current[i + 1].focus();
    }
  };

  var handlePaste = function(e) {
    var text = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6);
    if (!text) return;
    e.preventDefault();
    var next = codeVal.slice();
    for (var j = 0; j < 6; j++) next[j] = text[j] || '';
    setCode(next);
    setCodeError('');
    if (text.length === 6) verifyCode(text);
  };

  var onBack = function() {
    setStep('email');
    setCode(['', '', '', '', '', '']);
    setCodeError('');
  };

  var onResend = function() {
    setResendIn(30);
    setCode(['', '', '', '', '', '']);
    setCodeError('');
    fetch(cfg.baseUrl + '/api/DashboardAuth/RequestCode', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: emailVal.trim() }),
    });
  };

  var filled = codeVal.every(function(c) { return c !== ''; });

  // ── Render ──
  return (
    <div className="lg-app">
      <div className="lg-overlay">
        <div className="lg-overlay-bg" aria-hidden="true">
          <DashboardGhost />
        </div>
        <div className="lg-overlay-veil" aria-hidden="true"/>
        <div className="lg-overlay-content">
          <div className="lg-card">

            {stepVal !== 'success' && (
              <div className="lg-card-overlay-head">
                <div className="lg-card-overlay-mark">
                  <svg width="18" height="18" viewBox="0 0 22 22" fill="none">
                    <rect x="1.5" y="1.5" width="19" height="19" rx="3" stroke="currentColor" strokeWidth="1.4"/>
                    <path d="M6 13.5c2-4 4-4 5-4s2 3 5-2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                  </svg>
                </div>
                <div>
                  <div className="lg-overlay-card-title">Firma Electrónica</div>
                  <div className="lg-overlay-card-sub">Verificación de acceso</div>
                </div>
              </div>
            )}

            {stepVal === 'email' && (
              <form className="lg-step" onSubmit={function(e) { e.preventDefault(); sendCode(); }}>
                <h1 className="lg-title">Inicia sesión</h1>
                <p className="lg-sub">
                  Ingresa tu correo institucional. Te enviaremos un código de 6 dígitos para verificar tu identidad.
                </p>
                <label className="lg-field">
                  <span className="lg-field-k">Correo electrónico</span>
                  <input
                    type="email"
                    autoFocus
                    autoComplete="email"
                    className="lg-input"
                    placeholder="nombre@grupodefensa.cl"
                    value={emailVal}
                    onChange={function(e) { setEmail(e.target.value); if (emailErrorVal) setEmailError(''); }}
                  />
                </label>
                {emailErrorVal && (
                  <div className="lg-error" style={{marginBottom: 14}}>
                    <AlertIcon /> {emailErrorVal}
                  </div>
                )}
                <button
                  type="submit"
                  className={'lg-btn primary' + (sendingVal ? ' loading' : '')}
                  disabled={!emailVal.trim() || sendingVal}
                >
                  {sendingVal ? <Spinner /> : null}
                  {sendingVal ? 'Enviando código…' : 'Enviar código'}
                  {!sendingVal && <ArrowR />}
                </button>
                <div className="lg-hint">
                  <LockIcon />
                  Conexión cifrada · No almacenamos tu contraseña
                </div>
              </form>
            )}

            {stepVal === 'code' && (
              <div className="lg-step">
                <button className="lg-back" onClick={onBack} type="button">
                  <ArrowL /> Cambiar correo
                </button>
                <h1 className="lg-title">Ingresa el código</h1>
                <p className="lg-sub">
                  Enviamos un código de 6 dígitos a <strong>{maskEmail(emailVal)}</strong>. Revisa tu bandeja de entrada y spam.
                </p>
                <div className={'lg-code-row' + (codeErrorVal ? ' error' : '')} onPaste={handlePaste}>
                  {codeVal.map(function(c, i) {
                    return (
                      <input
                        key={i}
                        ref={function(el) { inputsRef.current[i] = el; }}
                        className="lg-code-input"
                        type="text"
                        inputMode="numeric"
                        maxLength={1}
                        value={c}
                        onChange={function(e) { handleCodeChange(i, e.target.value); }}
                        onKeyDown={function(e) { handleCodeKey(i, e); }}
                        disabled={verifyingVal}
                        aria-label={'Dígito ' + (i + 1)}
                      />
                    );
                  })}
                </div>
                {codeErrorVal && (
                  <div className="lg-error">
                    <AlertIcon /> {codeErrorVal}
                  </div>
                )}
                <button
                  type="button"
                  className={'lg-btn primary' + (verifyingVal ? ' loading' : '')}
                  disabled={!filled || verifyingVal}
                  onClick={function() { verifyCode(); }}
                >
                  {verifyingVal ? <Spinner /> : null}
                  {verifyingVal ? 'Verificando…' : 'Verificar y continuar'}
                  {!verifyingVal && <ArrowR />}
                </button>
                <div className="lg-resend">
                  {resendInVal > 0 ? (
                    <span>Podrás reenviar el código en <strong>{resendInVal}s</strong></span>
                  ) : (
                    <button type="button" className="lg-linkbtn" onClick={onResend}>
                      Reenviar código
                    </button>
                  )}
                </div>
              </div>
            )}

            {stepVal === 'success' && (
              <div className="lg-step lg-success">
                <div className="lg-check-wrap">
                  <svg className="lg-check" width="56" height="56" viewBox="0 0 56 56" fill="none">
                    <circle cx="28" cy="28" r="26" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M17 28.5l7 7L40 20" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <h1 className="lg-title">Acceso verificado</h1>
                <p className="lg-sub">
                  Sesión iniciada como <strong>{emailVal}</strong>. Redirigiendo al panel…
                </p>
              </div>
            )}

          </div>
        </div>
      </div>
    </div>
  );
}