/* screens-nav.jsx — 侧边栏抽屉（展开态，含遮罩） */
/* global React, Screen, Raccoon, Ic, AppBar, Switcher, Shortcuts, Dock */
const { useState } = React;

/* 叶子动作项（如「新建任务」）—— 仅高亮态，无折叠三角 */
function NavItem({ icon: I, label, active }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 11,
      padding: '11px 12px', borderRadius: 10,
      background: active ? 'var(--purple-bg)' : 'transparent',
    }}>
      <I size={18} color={active ? 'var(--purple-dark)' : 'var(--t3)'} />
      <span style={{ fontSize: 15, fontWeight: active ? 600 : 500, color: active ? 'var(--purple-dark)' : 'var(--t2)' }}>{label}</span>
    </div>
  );
}

/* 可折叠分组头（如「历史任务」「知识源」）—— 右侧 chevron，点击展开/收起 */
function NavGroup({ icon: I, label, defaultOpen = true, children }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div style={{ marginTop: 2 }}>
      <div
        onClick={() => setOpen((o) => !o)}
        style={{
          display: 'flex', alignItems: 'center', gap: 11,
          padding: '11px 12px', borderRadius: 10, cursor: 'pointer',
          WebkitTapHighlightColor: 'transparent', userSelect: 'none',
        }}
      >
        <I size={18} color="var(--t3)" />
        <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--t2)', flex: 1 }}>{label}</span>
        <Ic.chevR
          size={16}
          color="var(--subtle)"
          style={{ flex: '0 0 auto', transform: open ? 'rotate(90deg)' : 'none', transition: 'transform 0.18s ease' }}
        />
      </div>
      {open && <div>{children}</div>}
    </div>
  );
}

function SubItem({ icon: I, label, meta }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '8px 12px 8px 30px' }}>
      {I ? <I size={15} color="var(--muted)" /> : <span style={{ width: 7, height: 7, borderRadius: 2, background: 'var(--bg-soft)', flex: '0 0 auto' }} />}
      <span style={{ fontSize: 13.5, color: 'var(--t3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{label}</span>
      {meta && <span style={{ fontSize: 11, color: 'var(--subtle)', flex: '0 0 auto' }}>{meta}</span>}
    </div>
  );
}

function Drawer() {
  return (
    <div style={{ width: 290, height: '100%', background: '#fff', display: 'flex', flexDirection: 'column', boxShadow: '2px 0 24px rgba(10,10,6,0.12)', flex: '0 0 auto' }}>
      {/* logo 头 */}
      <div style={{ padding: '8px 16px 4px', display: 'flex', alignItems: 'center', gap: 9 }}>
        <Raccoon size="md" brand />
        <span style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.2px' }}>办公小浣熊</span>
      </div>

      <div style={{ flex: 1, overflow: 'hidden', padding: '8px 8px 0' }}>
        <NavItem icon={Ic.plus} label="新建任务" active />

        <NavGroup icon={Ic.clock} label="历史任务">
          <SubItem label="整理 Q2 渠道投放数据" />
          <SubItem label="起草周一团队同步纪要" />
          <SubItem label="生成产品发布会 PPT" />
          <div style={{ padding: '4px 12px 4px 30px', fontSize: 12, color: 'var(--purple-dark)', fontWeight: 500 }}>展开更多</div>
        </NavGroup>

        <NavGroup icon={Ic.books} label="知识源">
          <SubItem icon={Ic.books} label="内置知识库" />
          <SubItem icon={Ic.doc} label="我的文档" />
          <SubItem icon={Ic.cal} label="本地日历" />
          <SubItem icon={Ic.heart} label="Apple Health" />
        </NavGroup>
      </div>

      {/* 账户入口，固定底部 */}
      <div style={{ borderTop: '1px solid var(--border)', padding: 14, display: 'flex', alignItems: 'center', gap: 11 }}>
        <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'linear-gradient(135deg,#a98ef6,#8e6bf2)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 600, flex: '0 0 auto' }}>林</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14.5, fontWeight: 600 }}>林晚</div>
          <div style={{ fontSize: 12, color: 'var(--muted)' }}>Hi，下午好！</div>
        </div>
        <Ic.chevR size={18} color="var(--subtle)" />
      </div>
    </div>
  );
}

/* 抽屉展开态：抽屉 + 半透明遮罩盖住底层（底层用云端首页缩影） */
function SidebarExpanded() {
  return (
    <Screen>
      <div style={{ flex: 1, minHeight: 0, display: 'flex', position: 'relative' }}>
        <Drawer />
        {/* 半透明遮罩，点击收起 */}
        <div style={{ flex: 1, background: 'rgba(10,10,6,0.32)' }} />
      </div>
    </Screen>
  );
}

Object.assign(window, { SidebarExpanded, Drawer, NavItem, NavGroup, SubItem });