const { Icon: CIcon } = window;

function Compose({ onClose }) {
  return (
    <div className="compose-win">
      <div className="compose-head">
        <span className="compose-head-title">新邮件</span>
        <div className="compose-head-controls">
          <button className="icon-btn"><CIcon name="minimize" /></button>
          <button className="icon-btn"><CIcon name="maximize" /></button>
          <button className="icon-btn" onClick={onClose}><CIcon name="close" /></button>
        </div>
      </div>

      <div className="compose-field">
        <label>To</label>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
          <span className="recipient-pill">
            <span className="avatar" style={{ background: '#7c3aed' }}>AC</span>
            Anna Chen
          </span>
          <input placeholder="添加收件人…" style={{ minWidth: 120 }} />
        </div>
        <button className="icon-btn" style={{ fontSize: 11, width: 'auto', padding: '0 6px' }}>Cc · Bcc</button>
      </div>

      <div className="compose-field compose-subject">
        <label>Subj</label>
        <input placeholder="邮件主题…" defaultValue="Re: Q2 product roadmap — review by Friday" />
      </div>

      <div className="compose-body scroll">
        <p>Hi Anna,</p>
        <p>Agreed — let's push <strong>Dashboard v2</strong> into Q3 so we can land AI workflows cleanly. The trade-off makes sense given the shifts you flagged.</p>
        <p className="ghost">I'll block Friday 4PM for the review…</p>

        <div className="compose-ai">
          <div className="compose-ai-label">
            <CIcon name="sparkle" size={11} style={{ color: 'var(--accent)' }} />
            AI 补全 · 基于邮件上下文
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.6 }}>
            …并把 Mira 拉进来一起看 mobile 排期。另外周二的 1:1 我们可以再聊一下 AI workflow 的具体分工。
          </div>
          <div className="compose-ai-suggestions">
            <button className="reply-chip"><CIcon name="check" /> 采纳</button>
            <button className="reply-chip">重写：更正式</button>
            <button className="reply-chip">重写：更简短</button>
            <button className="reply-chip">翻译为英文</button>
          </div>
        </div>
      </div>

      <div className="compose-foot">
        <button className="send-btn">
          发送
          <span className="kbd">⌘↵</span>
        </button>
        <button className="icon-btn"><CIcon name="paperclip" /></button>
        <button className="icon-btn"><CIcon name="calendar" /></button>
        <button className="icon-btn"><CIcon name="wand" /></button>
        <div style={{ flex: 1 }} />
        <button className="icon-btn"><CIcon name="trash" /></button>
      </div>
    </div>
  );
}

window.Compose = Compose;