/* Me Hub — 對齊 MeHubPage.vue */

function MePage({ navigate, tweaks }) {
  const toast = useToast();
  const loggedIn = tweaks.loggedIn;
  const user = loggedIn ? SEED_USER : null;
  const avatarLetter = user ? user.displayName.slice(0, 1) : "訪";

  return (
    <div className="zen-page">
      <PageHeader title="我的" />
      <div className="zen-content">
        <div className="content-wrapper content-wrapper--tab">
          <ZenCard className="account-card">
            <div className="account-main">
              <div className="user-avatar">{avatarLetter}</div>
              <div className="account-info">
                <p className="user-name">{user ? user.displayName : "訪客"}</p>
                <p className="user-email">{user ? user.email : "登入後同步學習資料"}</p>
              </div>
            </div>
            {user ? (
              <ZenButton
                variant="outline"
                block
                onClick={() => toast.push("（Mock）已登出", "success")}
              >
                <Icon name="logout" size={16} /> 登出
              </ZenButton>
            ) : (
              <ZenButton
                variant="primary"
                block
                onClick={() => toast.push("（Mock）開啟登入", "success")}
              >
                <Icon name="login" size={16} /> 登入
              </ZenButton>
            )}
          </ZenCard>

          <ZenCard className="points-card">
            <div className="points-head">
              <div>
                <span className="points-label">我的點數</span>
                <div className="points-value">
                  {SEED_POINTS.toLocaleString()}
                  <small>點</small>
                </div>
              </div>
              <div className="points-icon"><Icon name="wallet" size={22} /></div>
            </div>
            <div className="points-actions">
              <button type="button" className="points-action" onClick={() => navigate("/topup")}>
                <Icon name="card" size={20} />
                <span>加值</span>
              </button>
              <button type="button" className="points-action" onClick={() => navigate("/usage")}>
                <Icon name="stats" size={20} />
                <span>使用紀錄</span>
              </button>
            </div>
          </ZenCard>

          <HubRow
            icon="settings"
            title="設定"
            subtitle="應用程式設定"
            onClick={() => navigate("/settings")}
          />

          <div className="hub-footer">
            <div className="zen-decoration">
              <span className="zen-circle" />
              <span className="zen-line" />
              <span className="zen-circle" />
            </div>
            <p className="version-text">v0.1.0 · 學日文</p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MePage });