const kindIcon = {
  quantity: 'ruler',
  quote: 'search-check',
  combined: 'layers',
  compare: 'scale',
};

const groupLabels = { today: '今天', yesterday: '昨天', earlier: '更早', demo: '演示数据' };

const Sidebar = ({
  currentSessionId,
  onSelectSession,
  onNewSession,
  onClose,
  mobile,
  createdSessions = [],
  sessionTitleOverrides = {},
  account,
  onOpenLogin,
  onOpenProfile,
  onOpenSubscribe,
}) => {
  const { SESSIONS } = window.BB_DATA;
  const accountState = window.BB_ACCOUNT
    ? window.BB_ACCOUNT.normalize(account || {})
    : { user: null, plan: 'free', usage: { used: 0 } };
  const plan = window.BB_ACCOUNT
    ? (window.BB_ACCOUNT.PLANS[accountState.plan] || window.BB_ACCOUNT.PLANS.free)
    : { name: 'Free', monthlyLimit: 5 };
  const usage = window.BB_ACCOUNT
    ? window.BB_ACCOUNT.usageView(accountState)
    : { used: 0, limit: 5, remaining: 5, percent: 0 };
  const user = accountState.user;
  const displayName = user ? (user.name || user.email || '用户') : '登录 / 注册';
  const displaySub = user ? `${plan.name} · 剩余 ${usage.remaining}/${usage.limit}` : '保存历史与订阅额度';
  const avatarText = user ? String(displayName).slice(0, 1).toUpperCase() : '登';

  const grouped = React.useMemo(() => {
    const g = { today: [], yesterday: [], earlier: [], demo: [] };
    [...createdSessions, ...SESSIONS]
      .map(s => sessionTitleOverrides[s.id] ? { ...s, ...sessionTitleOverrides[s.id] } : s)
      .forEach(s => (g[s.group] || g.today).push(s));
    return g;
  }, [createdSessions, sessionTitleOverrides]);

  const openProfileOrLogin = () => {
    if (user) onOpenProfile?.();
    else onOpenLogin?.();
  };

  return (
    <>
      <aside className="sidebar">
        <div className="sb-head">
          <div className="sb-brand">
            <div className="sb-logo">
              <Icon name="triangle" className="icon" size={16} strokeWidth={2.5} />
            </div>
            <div className="sb-brand-text">
              <div className="sb-brand-name">BitBuild</div>
              <div className="sb-brand-sub">AI 智能工程</div>
            </div>
          </div>
          <button className="sb-collapse-btn" onClick={onClose} title="折叠侧栏">
            <Icon name="panel-left-close" size={16} />
          </button>
        </div>

        <button className="sb-new" onClick={onNewSession}>
          <Icon name="plus" size={16} strokeWidth={2} />
          新建项目会话
        </button>

        <div className="sb-list">
          {['today','yesterday','earlier','demo'].map(g => grouped[g].length > 0 && (
            <div key={g}>
              <div className="sb-group-label">{groupLabels[g]}</div>
              {grouped[g].map(s => (
                <div
                  key={s.id}
                  className={`sb-item ${currentSessionId === s.id ? 'active' : ''}`}
                  onClick={() => onSelectSession(s.id)}
                >
                  <div className="sb-item-icon">
                    <Icon name={kindIcon[s.kind]} size={13} />
                  </div>
                  <div className="sb-item-text">{s.title}</div>
                  {s.isNew && <span className="sb-item-new">新</span>}
                </div>
              ))}
            </div>
          ))}
          <div className="sb-more">
            <Icon name="folder-open" size={14} />
            查看更多历史
          </div>
        </div>

        <div className="sb-credits">
          <div className="sb-credits-row">
            <span className="sb-credits-label">本月额度 · {plan.name}</span>
            <span className="sb-credits-value">{usage.used} <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>/ {usage.limit}</span></span>
          </div>
          <div className="sb-credits-bar"><div className="sb-credits-fill" style={{ width: `${usage.percent}%` }} /></div>
          <div className="sb-credits-actions">
            <button className="sb-upgrade-btn" title="升级订阅" onClick={onOpenSubscribe}>
              <Icon name="sparkles" size={14} />
              升级
            </button>
            <button title="个人中心" onClick={openProfileOrLogin}><Icon name="settings" size={14} /></button>
            <button title="使用记录" onClick={openProfileOrLogin}><Icon name="check-square" size={14} /></button>
          </div>
        </div>

        <div className="sb-user" onClick={openProfileOrLogin} role="button" tabIndex={0}>
          <div className="sb-avatar">{avatarText}</div>
          <div className="sb-user-meta">
            <div className="sb-user-name">{displayName}</div>
            <div className="sb-user-plan">
              <Icon name={user ? 'sparkles' : 'log-in'} size={10} />
              {displaySub}
            </div>
          </div>
          <button
            className="sb-user-gear"
            onClick={(e) => {
              e.stopPropagation();
              openProfileOrLogin();
            }}
          >
            <Icon name="chevron-right" size={14} />
          </button>
        </div>
      </aside>
      {mobile && <div className="sidebar-backdrop" onClick={onClose} />}
    </>
  );
};

window.Sidebar = Sidebar;