// LoginGate — 极简版.
//
// 设计原则: 进站第一屏的信息密度往下压一档. 旧版有顶/底 mono header strip +
// brutalist 白块 slogan + 主/次两档按钮, 视觉看起来"很有设计" 但其实让用户
// 在做决定前多读了三段字. 评测场景 30 秒内必须做决定, 我们只保留:
//
//   小 icon → 镜像回答 → MIRROR ANSWERS → 一行口号 → 两个等位按钮 → 一行提示
//
// 两个按钮**地位平等**, 一个填充蓝 (知乎登录), 一个描边 (模拟登录). 不分主次,
// 评测用任一入口都合法. hint 一行说明万一知乎那边抽风可以走模拟登录.
//
// 整个 LoginGate 装进 .stage-host > .canvas.login-canvas, 跟 demo 主页享用
// 同一套等比缩放, 任何尺寸下视觉比例都跟 MBP 14 设计稿一致.

function LoginGate({ phase = 'idle', error = null, onLogin }) {
  return (
    <div className="stage-host">
      <div className="canvas login-canvas">
        {/* 底层背景 (模糊蓝印图) + vignette */}
        <div className="login-bg" />
        <div className="login-bg-vignette" />

        <div className="login-center">
          <img
            className="login-mark"
            src="assets/generated/login-icon-final.png"
            alt=""
            onError={(e) => { e.currentTarget.style.display = 'none'; }}
          />
          <div className="login-zh">镜像回答</div>
          <div className="login-en">Mirror Answers</div>
          <div className="login-tagline">
            把创作的意义归还给人类.
          </div>

          {phase === 'exchanging' ? (
            <ExchangingState/>
          ) : phase === 'error' ? (
            <ErrorState error={error} onLogin={onLogin}/>
          ) : (
            <IdleState onLogin={onLogin}/>
          )}
        </div>
      </div>
    </div>
  );
}

// 两个等位按钮: 知乎登录 + 模拟登录.
function IdleState({ onLogin }) {
  return (
    <>
      <div className="login-buttons">
        <button className="login-btn login-btn-primary" onClick={onLogin}>
          <ZhihuMark/>
          <span>使用知乎账号登录</span>
        </button>
        <button className="login-btn login-btn-mock" onClick={_loginAsBaishuijun}>
          模拟账号登录
        </button>
      </div>
      <div className="login-hint">
        如登录遇到问题, 可使用 <code>白水君</code> 模拟账号登录, 跳过 OAuth 链路.
      </div>
    </>
  );
}

// 以「白水君」身份直接进 demo — 不走 OAuth, 把白水君信息写到 localStorage.
// 给评委碰到知乎偶发 "出错了" 红字时的备用入口, 也让评委能"以创作者身份" 体验产品.
function _loginAsBaishuijun() {
  if (typeof saveUser !== 'function') return;
  saveUser({
    uid:          'baishuijun',
    hash_id:      'baishuijun',
    fullname:     '白水君',
    gender:       'male',
    headline:     '知乎 2026 黑客松评审官',
    description:  '逆流而上',
    avatar_path:  'assets/baishuijun-avatar.png',
    url:          '',
    email:        '',
    phone_no:     '',
    access_token: '',
    _fetchedAt:   Date.now(),
    _devBypass:   true,
  });
  location.reload();
}

function ExchangingState() {
  return (
    <div className="login-exchanging">
      <Spinner/>
      <div className="login-exchanging-text">正在跟知乎换 access_token…</div>
      <div className="login-exchanging-sub">通常 1-3 秒</div>
    </div>
  );
}

function ErrorState({ error, onLogin }) {
  const errText = error || '(未知错误)';
  const handleCopy = () => {
    try { navigator.clipboard.writeText(errText); } catch {}
  };
  return (
    <div className="login-error">
      <div className="login-error-tag">登录失败</div>
      <div className="login-error-body">{errText}</div>
      <div className="login-error-actions">
        <button className="login-btn login-btn-primary" onClick={onLogin}
                style={{ width: 180, padding: '12px 18px', fontSize: 13 }}>
          重试知乎登录
        </button>
        <button className="login-btn login-btn-mock" onClick={_loginAsBaishuijun}
                style={{ width: 180, padding: '12px 18px', fontSize: 13 }}>
          改用模拟登录
        </button>
        <button className="login-btn-ghost" onClick={handleCopy}>
          复制错误信息
        </button>
      </div>
    </div>
  );
}

function Spinner() {
  return <div className="login-spinner" />;
}

// 小的知乎 logo mark — 给按钮加一点品牌色质感
function ZhihuMark() {
  return (
    <svg className="login-zhihu-mark" width="16" height="16" viewBox="0 0 24 24" fill="none">
      <path d="M5 5h6.5v3H8v8h3.5v3H5V5zm9 0h5v3h-1.5v8L19 13l1.5 2.5L17 19h-3V5z"
        fill="currentColor"/>
    </svg>
  );
}

Object.assign(window, { LoginGate });