/* screens-history.jsx — 历史任务，按来源分组 */
/* global React, Screen, Ic */

function Rec({ title, time }) {
  return (
    <div className="row" style={{ padding: '12px 14px' }}>
      <span className="r-ic" style={{ background: 'var(--bg-subtle)' }}><Ic.clock size={17} /></span>
      <div className="r-main">
        <div className="r-title" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
        <div className="r-meta">{time}</div>
      </div>
      <Ic.chevR size={17} className="chev" />
    </div>
  );
}

function Group({ icon: I, name, status, records }) {
  // status: 'cloud' | 'on' | 'off'
  return (
    <div style={{ marginTop: 15 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 18px 8px' }}>
        <I size={17} color={status === 'off' ? 'var(--subtle)' : 'var(--purple-dark)'} />
        <span style={{ fontSize: 14, fontWeight: 600, color: status === 'off' ? 'var(--t3)' : 'var(--t1)' }}>{name}</span>
        {status === 'on' && <span className="badge on"><span className="dot on" />在线</span>}
        {status === 'off' && <span className="badge off"><span className="dot off" />离线</span>}
        {status === 'cloud' && <span className="badge off" style={{ background: 'var(--purple-bg)', color: 'var(--purple-dark)' }}>同步</span>}
      </div>
      <div className="card" style={{ margin: '0 16px' }}>
        {records.map((r) => <Rec key={r.title} {...r} />)}
        <div style={{ padding: '11px 14px', fontSize: 13, color: 'var(--purple-dark)', fontWeight: 500, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, borderTop: '1px solid var(--border)' }}>
          展开更多 <Ic.chevD size={15} />
        </div>
      </div>
    </div>
  );
}

function HistoryScreen() {
  return (
    <Screen tinted>
      <div className="appbar" style={{ background: 'var(--bg-subtle)' }}>
        <button className="iconbtn"><Ic.back size={22} /></button>
        <div className="appbar-title">历史任务</div>
        <div className="spacer" />
        <button className="iconbtn"><Ic.search size={20} /></button>
      </div>
      <div className="body">
        <div className="scroll" style={{ paddingBottom: 16 }}>
          <Group icon={Ic.cloud} name="云端对话" status="cloud" records={[
            { title: '整理 Q2 渠道投放数据', time: '2 小时前' },
            { title: '起草周一团队同步纪要', time: '昨天' },
            { title: '生成产品发布会 PPT', time: '3 天前' },
          ]} />
          <Group icon={Ic.laptop} name="MacBook" status="on" records={[
            { title: '批量重命名设计稿文件', time: '1 小时前' },
            { title: '导出本月报销单据', time: '昨天' },
          ]} />
          <Group icon={Ic.laptop} name="iMac" status="off" records={[
            { title: '渲染年会开场视频', time: '5 天前' },
            { title: '同步项目素材到网盘', time: '1 周前' },
          ]} />
        </div>
      </div>
    </Screen>
  );
}

Object.assign(window, { HistoryScreen });