// sidebar.jsx
const { useState } = React;

function Sidebar({ active, onChange, counts, user }) {
  const navItems = [
    { key: "all", label: "全部线索", dot: null, count: counts.all },
    ...window.STATUS_ORDER.map(s => ({
      key: s,
      label: window.STATUS_META[s].label,
      dot: window.STATUS_META[s].dot,
      count: counts[s] || 0,
    })),
  ];

  const userInitials = user
    ? (user.email || '').split('@')[0].split(/[._-]/).map(p => p[0]?.toUpperCase() || '').join('').slice(0, 2)
    : '?';
  const userDisplayName = user
    ? (user.email || '').split('@')[0].split(/[._-]/).map(p => p.charAt(0).toUpperCase() + p.slice(1)).join(' ')
    : '';

  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="brand-logo"><img src="assets/cmlogo.png" alt="Cloudmate" /></div>
        <div className="brand-text">
          <div className="brand-name">Cloudmate</div>
          <div className="brand-sub">销售管理系统</div>
        </div>
      </div>

      <div className="sidebar-search">
        <span className="s-icon">⌕</span>
        <input placeholder="搜索线索、公司..." />
        <span className="s-kbd">⌘K</span>
      </div>

      <div className="sidebar-section">
        <div className="sec-label">工作台</div>
        <button className="nav-item active-soft">
          <SidebarIcon name="inbox" /> <span>线索收件箱</span>
          <span className="nav-count">{counts.all}</span>
        </button>
      </div>

      <div className="sidebar-section">
        <div className="sec-label">线索列表</div>
        {navItems.map((it) => (
          <button key={it.key} className={`nav-item ${active === it.key ? "active" : ""}`} onClick={() => onChange(it.key)}>
            {it.dot ? <span className="nav-dot" style={{ background: it.dot }}></span> : <SidebarIcon name="diamond" />}
            <span>{it.label}</span>
            <span className="nav-count">{it.count}</span>
          </button>
        ))}
      </div>

      <div className="sidebar-section">
        <div className="sec-label">其他</div>
        <button className="nav-item"><SidebarIcon name="check" /> <span>我的任务</span></button>
        <button className="nav-item"><SidebarIcon name="chart" /> <span>报表分析</span></button>
      </div>

      <div className="sidebar-footer">
        <div className="avatar">{userInitials}</div>
        <div className="user-meta">
          <div className="user-name">{userDisplayName}</div>
          <div className="user-email">{user?.email || ''}</div>
        </div>
        {user?.isAdmin && <span style={{ fontSize: 10, color: '#7c3aed', fontWeight: 700 }}>ADMIN</span>}
      </div>
    </aside>
  );
}

function SidebarIcon({ name }) {
  const s = { width: 14, height: 14, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    inbox: <><path d="M2 9h4l1 2h2l1-2h4v5H2z" /><path d="M2 9l2-6h8l2 6" /></>,
    diamond: <path d="M8 2l6 6-6 6-6-6z" />,
    check: <><rect x="2" y="2" width="12" height="12" rx="2" /><path d="M5 8l2 2 4-4" /></>,
    chart: <><path d="M2 13V3" /><path d="M2 13h12" /><rect x="4" y="8" width="2" height="5" /><rect x="8" y="5" width="2" height="8" /><rect x="12" y="9" width="2" height="4" /></>,
  };
  return <svg viewBox="0 0 16 16" {...s}>{paths[name]}</svg>;
}

window.Sidebar = Sidebar;