// ════════════════════════════════════════════════════════════════
// LoginPage — публичный экран входа
// /login → POST /api/auth/login → session cookie + redirect to /
// ════════════════════════════════════════════════════════════════

function LoginPage({ onLoggedIn, onGoToCorpus }) {
  const [email, setEmail] = React.useState('virtualarch.marketing@gmail.com');
  const [password, setPassword] = React.useState('');
  const [remember, setRemember] = React.useState(true);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  async function submit(e) {
    e.preventDefault();
    if (!email || !password) {
      setError('Заполните email и пароль');
      return;
    }
    setError(null);
    setSubmitting(true);

    // ── API mode: real backend ──
    if (window.SDH_USE_API && window.SDH_HYDRATE) {
      try {
        const resp = await window.SDH_HYDRATE.login(email, password);
        onLoggedIn && onLoggedIn(resp.id);
      } catch (err) {
        const msg = err && err.message
          ? (err.status === 401 ? 'Неверный email или пароль' : err.message)
          : 'Ошибка входа';
        setError(msg);
        setSubmitting(false);
      }
      return;
    }

    // ── Mock mode (default for design preview) ──
    setTimeout(() => {
      const user = window.SDH_ADMIN.users.find(u => u.email.toLowerCase() === email.toLowerCase());
      if (!user) {
        setError('Пользователь не найден. Запросите приглашение у super-admin.');
        setSubmitting(false);
        return;
      }
      if (user.status !== 'active') {
        setError('Аккаунт неактивен. Свяжитесь с super-admin.');
        setSubmitting(false);
        return;
      }
      onLoggedIn && onLoggedIn(user.id);
    }, 350);
  }

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(180deg, var(--brand-bronze-subtle), var(--surface-canvas) 60%)',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* mini-wordmark on top */}
      <div style={{
        padding: 'var(--space-6) var(--space-8)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline' }}>
          <span style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, fontWeight: 600,
            color: 'var(--text-primary)', letterSpacing: '-0.01em',
          }}>Symbiosis</span>
          <span style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, fontWeight: 600,
            color: 'var(--brand-bronze-deep)', letterSpacing: '-0.01em',
          }}>.DataHub</span>
        </div>
        <button className="sdh-btn sdh-btn--ghost" onClick={onGoToCorpus} style={{ fontSize: 12 }}>
          обзор тарифов
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M3 6h6m-3-3 3 3-3 3" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>

      {/* center */}
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 'var(--space-8)',
      }}>
        <div style={{
          width: '100%', maxWidth: 460,
          background: 'var(--surface-elevated)',
          borderRadius: 'var(--radius-2xl)',
          border: '1px solid var(--border-subtle)',
          boxShadow: 'var(--shadow-lg)',
          padding: 'var(--space-8)',
        }}>
          <span className="sdh-section-label">вход в систему</span>
          <h1 style={{
            margin: '0 0 var(--space-2)',
            fontSize: 32, fontWeight: 600, letterSpacing: '-0.025em',
            color: 'var(--text-primary)', lineHeight: 1.15,
          }}>
            С <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--brand-bronze-deep)', fontWeight: 600 }}>возвращением</em>
          </h1>
          <p className="sdh-quote" style={{ margin: '0 0 var(--space-6)' }}>
            Войдите в свою рабочую область Symbiosis.DataHub. Доступ только по приглашению. Если у вас его ещё нет, запросите у super-admin.
          </p>

          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <Field label="Email">
              <input type="email" autoFocus required value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="ваш@email.ru"
                style={fieldStyle} />
            </Field>

            <Field label="Пароль">
              <input type="password" required value={password}
                onChange={e => setPassword(e.target.value)}
                placeholder="минимум 12 символов"
                style={fieldStyle} />
            </Field>

            <label style={{
              display: 'flex', alignItems: 'center', gap: 8,
              fontSize: 13, color: 'var(--text-secondary)',
              cursor: 'pointer',
            }}>
              <input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)}
                style={{ accentColor: 'var(--brand-bronze)' }} />
              Запомнить меня на этом устройстве
            </label>

            {error && (
              <div style={{
                padding: '10px 12px',
                background: 'var(--hue-rose-subtle)',
                border: '1px solid var(--hue-rose)',
                borderRadius: 'var(--radius-md)',
                fontSize: 13, color: 'var(--hue-rose)',
              }}>
                {error}
              </div>
            )}

            <button type="submit" className="sdh-btn sdh-btn--bronze"
              disabled={submitting}
              style={{
                justifyContent: 'center', padding: '12px',
                fontSize: 14, fontWeight: 600,
                opacity: submitting ? 0.5 : 1,
              }}>
              {submitting ? 'входим...' : 'Войти'}
            </button>
          </form>

          <div style={{
            marginTop: 'var(--space-6)', paddingTop: 'var(--space-4)',
            borderTop: '1px solid var(--border-subtle)',
            fontSize: 12, color: 'var(--text-tertiary)', lineHeight: 1.5,
          }}>
            Нет учётной записи? Symbiosis.DataHub работает только по приглашению — обратитесь к super-admin (Орлов Е.В.) для получения доступа.
          </div>

          {/* mock helper */}
          <div style={{
            marginTop: 'var(--space-4)',
            padding: '8px 10px',
            background: 'var(--surface-sunken)',
            borderRadius: 'var(--radius-sm)',
            fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-tertiary)',
          }}>
            демо-вход: любой пароль подойдёт; смените email чтобы войти как другая роль (см. словарь в Tweaks)
          </div>
        </div>
      </div>

      <footer style={{
        padding: 'var(--space-4) var(--space-8)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 11, color: 'var(--text-tertiary)',
      }}>
        <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>Symbiosis Lab · 2026</span>
        <span className="sdh-mono-label" style={{ marginBottom: 0 }}>analytics.simbiosislab.online</span>
      </footer>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: 'block' }}>
      <div className="sdh-mono-label" style={{ marginBottom: 4 }}>{label}</div>
      {children}
    </label>
  );
}

const fieldStyle = {
  width: '100%', padding: '10px 12px',
  fontSize: 14, fontFamily: 'var(--font-sans)',
  background: 'var(--surface-elevated)',
  color: 'var(--text-primary)',
  border: '1px solid var(--border-default)',
  borderRadius: 'var(--radius-md)',
  outline: 'none', transition: 'border-color .15s',
};

window.LoginPage = LoginPage;
window.AuthField = Field;
window.authFieldStyle = fieldStyle;