// ============================================================
// Login screen
// ============================================================
const Login = ({ onLogin, authStatus = 'unauthenticated', onRetry }) => {
  const [selected, setSelected] = useState(null);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const isLocalDemo = window.persistenceAdapter.mode === 'local_demo'
    && window.APP_CONFIG.AUTH.ALLOW_LOCAL_DEMO;
  const listaUsuarios = isLocalDemo
    ? window.persistenceAdapter.getLocalDemoUsers()
    : [];

  const safeErrorMessage = (loginError) => {
    if (loginError?.status === 401) return 'Usuario o contraseña incorrectos.';
    if (loginError?.status === 403) return 'La cuenta se encuentra inactiva. Contacta al administrador.';
    if (loginError?.status === 422) return 'Revisa los datos de acceso e inténtalo de nuevo.';
    if (loginError?.status === 0) return 'No fue posible conectar con el servidor. Verifica que Apache y MySQL estén activos.';
    return 'No fue posible iniciar sesión. Inténtalo nuevamente.';
  };

  const handleLogin = async (e) => {
    e && e.preventDefault();
    if (authStatus !== 'unauthenticated' || isSubmitting) return;
    if (isLocalDemo && !selected) { setError('Selecciona un usuario'); return; }
    if (!isLocalDemo && !username.trim()) { setError('Ingresa tu usuario'); return; }
    if (!password) { setError('Ingresa tu contraseña'); return; }

    setIsSubmitting(true);
    setError('');
    try {
      const user = await window.persistenceAdapter.login(
        isLocalDemo ? selected.id : username.trim(),
        password
      );
      onLogin(user);
    } catch (loginError) {
      setPassword('');
      setError(safeErrorMessage(loginError));
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="login-page">
      <div className="login-hero">
        <div className="login-hero-content">
          <div className="login-brand-sub">Fondo Editorial · Proyecto 2026</div>
          <div className="login-brand">
            Sistema de Control de Digitalización de Libros
          </div>
          <div style={{ color: '#a19a8a', maxWidth: 400, marginTop: 16, fontSize: 14, lineHeight: 1.6 }}>
            Control de producción por proceso, asignación FIFO, registro de productividad y seguimiento de metas para la digitalización de fondos bibliográficos.
          </div>
        </div>
        <div className="login-meta">
          <div className="login-meta-item">
            <div className="n">409</div>
            <div className="l">Libros meta</div>
          </div>
          <div className="login-meta-item">
            <div className="n">70,000</div>
            <div className="l">Imágenes meta</div>
          </div>
          <div className="login-meta-item">
            <div className="n">12 Sep</div>
            <div className="l">Deadline 2026</div>
          </div>
        </div>
      </div>

      <div className="login-form-wrap">
        <form className="login-form" onSubmit={handleLogin}>
          <div className="login-form-title">Iniciar sesión</div>
          <div className="login-form-sub">
            {isLocalDemo ? 'Selecciona tu usuario para continuar' : 'Ingresa tus credenciales para continuar'}
          </div>

          {isLocalDemo ? (
            <div className="login-user-grid">
              {listaUsuarios.map(u => (
                <div
                  key={u.id}
                  className={`login-user ${selected?.id === u.id ? 'selected' : ''}`}
                  onClick={() => { setSelected(u); setError(''); }}
                >
                  <Avatar user={u} />
                  <div className="login-user-name">{u.nombre.split(' ')[0]}</div>
                  <div className="login-user-role">
                    {u.roles.includes('supervisor') ? 'Supervisor' :
                     u.roles.length > 2 ? 'Multi-rol' :
                     APP_DATA.ROLES[u.roles[0]].label.split(' ')[0]}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="field">
              <label className="field-label">Usuario</label>
              <input
                type="text"
                className="input"
                value={username}
                onChange={e => { setUsername(e.target.value); setError(''); }}
                autoComplete="username"
                autoFocus
                disabled={authStatus !== 'unauthenticated' || isSubmitting}
              />
            </div>
          )}

          <div className="field">
            <label className="field-label">Contraseña</label>
            <input
              type="password"
              className="input"
              placeholder="••••••••"
              value={password}
              onChange={e => { setPassword(e.target.value); setError(''); }}
              autoComplete="current-password"
              autoFocus={isLocalDemo}
              disabled={authStatus !== 'unauthenticated' || isSubmitting}
            />
            {isLocalDemo && <div className="field-help">Demo: usa cualquier texto</div>}
          </div>

          {authStatus === 'initializing' && (
            <div style={{ color: 'var(--text-2)', fontSize: 12, marginBottom: 12 }}>
              Verificando sesión…
            </div>
          )}
          {authStatus === 'unavailable' && (
            <div style={{ color: 'var(--danger)', fontSize: 12, marginBottom: 12 }}>
              El servicio de autenticación no está disponible.
            </div>
          )}
          {error && <div style={{ color: 'var(--danger)', fontSize: 12, marginBottom: 12 }}>{error}</div>}

          <button
            type="submit"
            className="btn btn-primary btn-lg"
            style={{ width: '100%', justifyContent: 'center' }}
            disabled={authStatus !== 'unauthenticated' || isSubmitting}
          >
            {isSubmitting ? 'Iniciando sesión…' : 'Entrar al sistema'}
            <Icon name="arrow_right" size={16} />
          </button>

          {authStatus === 'unavailable' && (
            <button type="button" className="btn" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }} onClick={onRetry}>
              Reintentar conexión
            </button>
          )}

          {isLocalDemo && (
            <div style={{ marginTop: 20, padding: 12, background: 'var(--surface-2)', borderRadius: 6, fontSize: 12, color: 'var(--text-2)', lineHeight: 1.5 }}>
              <strong style={{ color: 'var(--text)' }}>Perfiles disponibles:</strong><br/>
              <span style={{ color: 'var(--text-3)' }}>Supervisor</span> Oscar, Ramón · <span style={{ color: 'var(--text-3)' }}>Digitalización</span> Vivi, Oscar, José, Arturo, Ana · <span style={{ color: 'var(--text-3)' }}>Edición</span> Katy, Pao, Fernanda, Oscar, José, Arturo, Ana · <span style={{ color: 'var(--text-3)' }}>CC/Conversión</span> Ana
            </div>
          )}
        </form>
      </div>
    </div>
  );
};

Object.assign(window, { Login });