/* global React */
// Pantalla de inicio de sesión (multiusuario) — diseño split estilo CGR.
// Izquierda: marca + accesos de demostración (autocompletan credenciales).
// Derecha: formulario con validación, ver/ocultar contraseña y ruteo por rol.

const { useState: useStateLog } = React;

// Iconos no incluidos en window.Icons (candado / ojo tachado) como SVG inline.
function LockGlyph({ size = 15 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="11" width="18" height="11" rx="2" />
      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
    </svg>
  );
}
function EyeOffGlyph({ size = 15 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
      <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
      <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
      <line x1="2" x2="22" y1="2" y2="22" />
    </svg>
  );
}

function LoginScreen({ onLogin }) {
  const I = window.Icons;
  const accounts = window.DEMO_ACCOUNTS || [];
  const ROLES = window.ROLES || {};

  const [email, setEmail] = useStateLog('');
  const [password, setPassword] = useStateLog('');
  const [showPwd, setShowPwd] = useStateLog(false);
  const [remember, setRemember] = useStateLog(true);
  const [error, setError] = useStateLog('');
  const [selected, setSelected] = useStateLog(null);
  const [touched, setTouched] = useStateLog(false);

  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim());
  const canSubmit = emailOk && password.length > 0;

  const fill = (acc) => {
    setEmail(acc.email);
    setPassword(acc.password);
    setSelected(acc.role);
    setError('');
    setTouched(false);
  };

  const submit = (e) => {
    if (e) e.preventDefault();
    setTouched(true);
    if (!canSubmit) return;
    const acc = accounts.find(
      a => a.email.toLowerCase() === email.trim().toLowerCase() && a.password === password
    );
    if (!acc) {
      setError('Correo o contraseña incorrectos. Usa una de las cuentas de demostración de la izquierda.');
      return;
    }
    onLogin && onLogin(acc);
  };

  return (
    <div className="login">
      <div className="login__card">
        {/* ---------- Panel izquierdo: marca + accesos demo ---------- */}
        <aside className="login__aside">
          <div className="login__brand">
            <img src="assets/cgr-logo.png" alt="Contraloría General de la República · Paraguay" />
          </div>

          <div className="login__hero">
            <h1>Plataforma de Compromisos Internacionales</h1>
            <p>Seguimiento país de las recomendaciones de MESICIC, UNCAC y OCDE — un solo lugar, en tiempo real.</p>
          </div>

          <div className="login__roles">
            <div className="login__roles-h"><I.Users size={14} /> Accesos de demostración</div>
            <p className="login__roles-sub">Elige un perfil para autocompletar las credenciales y luego pulsa “Iniciar sesión”.</p>
            <div className="login__roles-list">
              {accounts.map(acc => {
                const r = ROLES[acc.role] || {};
                const on = selected === acc.role;
                return (
                  <button
                    type="button"
                    key={acc.role}
                    className={`login-role${on ? ' is-selected' : ''}`}
                    onClick={() => fill(acc)}
                  >
                    <span className={`login-role__avatar login-role__avatar--${acc.role}`}>{r.initials}</span>
                    <span className="login-role__main">
                      <strong>{r.role}</strong>
                      <small>{acc.email}</small>
                    </span>
                    <span className="login-role__use">{on ? <I.CheckCircle2 size={16} /> : 'Usar'}</span>
                  </button>
                );
              })}
            </div>
            <div className="login__roles-pwd">
              <LockGlyph size={12} /> Contraseña para todas: <code>{window.DEMO_PASSWORD || 'cgr2026'}</code>
            </div>
          </div>

          <div className="login__aside-foot">
            <span>v.1.0</span><span className="dot">·</span><span>Sinapsis × CGR · BID</span>
          </div>
        </aside>

        {/* ---------- Panel derecho: formulario ---------- */}
        <main className="login__main">
          <form className="login__form" onSubmit={submit} noValidate>
            <div className="login__form-head">
              <h2 className="login__title">Iniciar sesión</h2>
              <p className="login__subtitle">Ingresa con tu cuenta institucional.</p>
            </div>

            {error && (
              <div className="login__error" role="alert">
                <I.AlertCircle size={15} /> <span>{error}</span>
              </div>
            )}

            <label className="login__field">
              <span className="login__label">Correo institucional</span>
              <div className={`login__input${touched && !emailOk ? ' is-invalid' : ''}`}>
                <I.Mail size={16} />
                <input
                  type="email"
                  autoComplete="username"
                  placeholder="nombre.apellido@institucion.gov.py"
                  value={email}
                  onChange={e => { setEmail(e.target.value); setError(''); }}
                  onBlur={() => setTouched(true)}
                />
              </div>
              {touched && !emailOk && <span className="login__hint is-err">Ingresa un correo electrónico válido.</span>}
            </label>

            <label className="login__field">
              <span className="login__label">Contraseña</span>
              <div className="login__input">
                <LockGlyph size={16} />
                <input
                  type={showPwd ? 'text' : 'password'}
                  autoComplete="current-password"
                  placeholder="••••••••"
                  value={password}
                  onChange={e => { setPassword(e.target.value); setError(''); }}
                />
                <button
                  type="button"
                  className="login__eye"
                  aria-label={showPwd ? 'Ocultar contraseña' : 'Mostrar contraseña'}
                  title={showPwd ? 'Ocultar' : 'Mostrar'}
                  onClick={() => setShowPwd(s => !s)}
                >
                  {showPwd ? <EyeOffGlyph size={16} /> : <I.Eye size={16} />}
                </button>
              </div>
            </label>

            <div className="login__row">
              <label className="login__check">
                <input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} />
                <span>Recordarme</span>
              </label>
              <button
                type="button"
                className="login__link"
                onClick={() => window.alert('En esta demostración, usa una de las cuentas del panel izquierdo.')}
              >
                ¿Olvidaste tu contraseña?
              </button>
            </div>

            <button type="submit" className="login__submit" disabled={!canSubmit}>
              Iniciar sesión <I.ArrowRight size={17} />
            </button>

            <p className="login__foot">
              ¿Problemas para entrar? Contacta a la Dirección de Análisis de Datos de la CGR.
            </p>
          </form>
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });