// ─── 屏：行动 & 笔记中心（GTD） ───
function GtdScreen() {
  const T = useT();
  const { back, openSheet, notes, tasks, toggleTask } = useApp();

  const todo = tasks.filter(t => !t.done && t.section !== 'done');
  const todayT = tasks.filter(t => !t.done && t.section === 'today');
  const upT = tasks.filter(t => !t.done && t.section === 'upcoming');
  const doneT = tasks.filter(t => t.done);

  const Task = ({ t }) => (
    <div style={{ display: 'flex', gap: 11, padding: '12px 14px', alignItems: 'flex-start' }}>
      <button onClick={() => toggleTask(t.id)} style={{ width: 21, height: 21, borderRadius: 7, flexShrink: 0, marginTop: 1, border: `1.8px solid ${t.done ? T.good : T.line2}`, background: t.done ? T.good : 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {t.done && <Icon name="check" size={13} color="#fff" stroke={2.6} />}
      </button>
      <div onClick={() => openSheet('task', { task: t })} style={{ flex: 1, minWidth: 0, cursor: 'pointer' }}>
        <div style={{ fontSize: 13.2, fontWeight: 600, color: t.done ? T.faint : T.text, lineHeight: 1.4, textDecoration: t.done ? 'line-through' : 'none' }}>{t.text}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 5 }}>
          <Tag tone="plain" style={{ fontSize: 9.5 }}>{t.cust}</Tag>
          <span style={{ fontSize: 10.5, color: T.faint }}>· {t.due}</span>
          {t.src === 'AI' && <span style={{ fontSize: 9.5, color: T.accent, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 3 }}><Sparkle size={9} />AI 派生</span>}
        </div>
      </div>
      <Icon name="edit" size={14} color={T.faint} />
    </div>
  );

  const Group = ({ title, items, right, empty }) => (
    <div style={{ marginBottom: 18 }}>
      <SectionLabel right={right}>{title}</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden' }}>
        {items.length === 0
          ? <div style={{ padding: '16px', textAlign: 'center', fontSize: 12, color: T.faint }}>{empty}</div>
          : items.map((t, i) => (
            <div key={t.id} style={{ borderBottom: i < items.length - 1 ? `1px solid ${T.line}` : 'none' }}><Task t={t} /></div>
          ))}
      </Card>
    </div>
  );

  return (
    <div style={{ padding: '4px 16px 28px' }}>
      <ScreenHeader title="行动 & 笔记" sub="你的销售过程，一处掌握" onBack={back} />

      {/* 概览 */}
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        <div style={{ display: 'flex' }}>
          {[['待办', todo.length, T.accent], ['本周到期', upT.length, T.warn], ['笔记', notes.length, T.good]].map(([k, v, c], i) => (
            <div key={i} style={{ flex: 1, padding: '14px 0', textAlign: 'center', borderRight: i < 2 ? `1px solid ${T.line}` : 'none' }}>
              <div style={{ fontFamily: NUMF, fontSize: 23, fontWeight: 800, color: c, lineHeight: 1 }}>{v}</div>
              <div style={{ fontSize: 10.5, color: T.sub, marginTop: 5 }}>{k}</div>
            </div>
          ))}
        </div>
      </Card>

      {/* 记一笔 / 新建任务 */}
      <div style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
        <PrimaryButton icon="edit" style={{ flex: 2 }} onClick={() => openSheet('note')}>记一笔</PrimaryButton>
        <GhostButton icon="check" style={{ flex: 1 }} onClick={() => openSheet('task')}>加任务</GhostButton>
      </div>

      <Group title="今日要做" items={todayT} right={<Tag tone="accent" style={{ fontSize: 10 }}>{todayT.length} 项</Tag>} empty="今天清零了 ✓" />
      <Group title="即将到期" items={upT} empty="本周无到期任务" />

      {/* 笔记流 */}
      <SectionLabel right={<Tag tone="good" style={{ fontSize: 10 }}>{notes.length} 条 · 点击编辑</Tag>}>我的笔记</SectionLabel>
      {notes.length === 0
        ? <Card style={{ marginBottom: 18, textAlign: 'center', padding: '22px 16px' }}><div style={{ fontSize: 12.5, color: T.sub }}>还没有笔记。点上方「记一笔」，可关联到客户、人物或机会。</div></Card>
        : <div style={{ marginBottom: 18 }}>{notes.map(n => <NoteCard key={n.id} note={n} onClick={() => openSheet('note', { note: n })} />)}</div>}

      <Group title="已完成 · 历史" items={doneT} right={<Tag tone="plain" style={{ fontSize: 10 }}>回顾</Tag>} empty="还没有已完成的任务" />
    </div>
  );
}
window.GtdScreen = GtdScreen;