const { Icon: RIcon } = window;

function Reader({ mailId, onOpenAgent }) {
  const { MAILS } = window.DATA;
  const m = MAILS.find(x => x.id === mailId) || MAILS[0];

  return (
    <section className="reader">
      <div className="reader-topbar">
        <button className="icon-btn" title="返回"><RIcon name="chevron" style={{ transform: 'rotate(90deg)' }} /></button>
        <div className="divider" />
        <button className="icon-btn" title="归档"><RIcon name="archive" /></button>
        <button className="icon-btn" title="删除"><RIcon name="trash" /></button>
        <button className="icon-btn" title="置顶"><RIcon name="pin" /></button>
        <div className="divider" />
        <button className="icon-btn" title="回复"><RIcon name="reply" /></button>
        <button className="icon-btn" title="全部回复"><RIcon name="replyAll" /></button>
        <button className="icon-btn" title="转发"><RIcon name="forward" /></button>
        <div className="spacer" />
        <span className="kbd-hint">
          <span className="kbd">J</span><span className="kbd">K</span> 切换
        </span>
        <div className="divider" />
        <button className="icon-btn"><RIcon name="more" /></button>
      </div>

      <div className="reader-body scroll">
        <div className="mail-head">
          <div className="mail-head-subject">{m.subject}</div>
          <div className="mail-head-meta">
            <div className="avatar lg" style={{ background: m.avatar }}>{m.initials}</div>
            <div className="mail-head-who">
              <span className="mail-head-from">{m.from} <span style={{ color: 'var(--ink-4)', fontWeight: 400 }}>&lt;{m.fromEmail}&gt;</span></span>
              <span className="mail-head-to">to me, jun@relay.mail · {m.date} {m.time}</span>
            </div>
            <div className="mail-head-time">
              {m.date}<br/>{m.time}
            </div>
          </div>
        </div>

        {m.summary && (
          <div className="ai-card">
            <div className="ai-card-header">
              <span className="live-dot" />
              AI Summary
              <span className="model">Relay · haiku-4</span>
            </div>
            <h3>三个要点</h3>
            <ul className="ai-summary-list">
              {m.summary.bullets.map((b, i) => (
                <li key={i} dangerouslySetInnerHTML={{ __html: b.text }} />
              ))}
            </ul>
            <div className="ai-actions">
              <button className="ai-action primary" onClick={onOpenAgent}>
                <RIcon name="sparkle" size={12} />
                让 Agent 接管
              </button>
              {m.summary.actions.map((a, i) => (
                <button key={i} className="ai-action">
                  <RIcon name={i === 0 ? 'wand' : i === 1 ? 'calendar' : 'forward'} size={12} />
                  {a}
                </button>
              ))}
            </div>
          </div>
        )}

        <div className="mail-body" dangerouslySetInnerHTML={{ __html: m.body || '<p>' + (m.preview || '') + '</p>' }} />

        {m.attachments && (
          <div className="attachments">
            {m.attachments.map((a, i) => (
              <div key={i} className="att">
                <div className="att-icon">{a.kind}</div>
                <div className="att-meta">
                  <span className="att-name">{a.name}</span>
                  <span className="att-size">{a.size}</span>
                </div>
              </div>
            ))}
          </div>
        )}

        <div className="reply-dock">
          <div style={{ flex: 1 }}>
            <div className="reply-suggest">
              <button className="reply-chip"><RIcon name="sparkle" /> 同意推迟 Dashboard v2</button>
              <button className="reply-chip"><RIcon name="sparkle" /> 想先聊一下</button>
              <button className="reply-chip"><RIcon name="sparkle" /> 需要更多信息</button>
            </div>
            <input className="reply-input" placeholder={`回复 ${m.from.split(' ')[0]}… (⌘↵ 发送)`} />
          </div>
          <button className="icon-btn" title="附件"><RIcon name="paperclip" /></button>
          <button className="icon-btn" title="AI 重写"><RIcon name="wand" /></button>
        </div>
      </div>
    </section>
  );
}

window.Reader = Reader;