const { Icon: IIcon } = window;

function Inbox({ selectedId, onSelect }) {
  const { MAILS, CATEGORIES } = window.DATA;
  const [tab, setTab] = React.useState('priority');

  const filtered = tab === 'priority'
    ? MAILS.filter(m => m.tags?.includes('priority') || m.unread).slice(0, 6)
    : tab === 'unread' ? MAILS.filter(m => m.unread)
    : tab === 'work' ? MAILS.filter(m => m.tags?.includes('work'))
    : MAILS;

  return (
    <section className="inbox">
      <header className="inbox-header">
        <div className="inbox-title">收件箱</div>
        <div className="inbox-meta">12 未读 · 127 总</div>
        <div className="inbox-actions">
          <button className="icon-btn"><IIcon name="filter" /></button>
          <button className="icon-btn"><IIcon name="sort" /></button>
        </div>
      </header>

      <div className="inbox-tabs">
        {CATEGORIES.map(c => (
          <button
            key={c.id}
            className={`inbox-tab ${tab === c.id ? 'active' : ''} ${c.kind === 'ai' ? 'ai' : ''}`}
            onClick={() => setTab(c.id)}
          >
            {c.kind === 'ai' && <IIcon name="sparkle" size={10} />}
            {c.label}
            <span className="count">{c.count}</span>
          </button>
        ))}
      </div>

      <div className="mail-list scroll">
        {tab === 'priority' && (
          <div className="ai-brief">
            <div className="ai-brief-label">
              <span className="pulse" />
              Morning brief · 09:04
            </div>
            <div className="ai-brief-title">
              <em>今天</em>有 3 件事需要你处理 — Anna 要 Friday 前确认 Q2 路线图，
              Mira 提了 onboarding 设计反馈，Amelia 约采访。
            </div>
            <div className="ai-brief-stats">
              <span><b>3</b> 待处理</span>
              <span><b>7</b> Agent 已处理</span>
              <span><b>89%</b> 信噪比</span>
            </div>
          </div>
        )}
        {filtered.map(m => {
          const isAgent = m.agentActioned || m.tags?.includes('agent');
          return (
            <div
              key={m.id}
              className={`mail-row ${m.unread ? 'unread' : ''} ${m.id === selectedId ? 'selected' : ''}`}
              onClick={() => onSelect(m.id)}
            >
              <div className="mail-from">
                <div className="avatar" style={{ background: m.avatar }}>{m.initials}</div>
                {m.from}
              </div>
              <span className="mail-time">{m.time}</span>
              <div className="mail-subject">{m.subject}</div>
              <div className="mail-preview">{m.preview}</div>
              {isAgent && (
                <div className="mail-chips">
                  <span className="chip ai dot">Agent 已处理</span>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

window.Inbox = Inbox;