function Communications({ ctx }) {
  const [activeMsg, setActiveMsg] = React.useState(COMMUNICATIONS[0]);
  const [tab, setTab] = React.useState('semua');
  return (
    <div className="stack">
      <div className="row between">
        <span className="eyebrow">UNIFIED INBOX · 4 channel terkoneksi</span>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn ghost"><Icon name="filter" size={14} /> Filter</button>
          <button className="btn primary"><Icon name="plus" size={14} /> Compose</button>
        </div>
      </div>

      <div className="inbox">
        <div className="inbox-list">
          <div className="inbox-tabs">
            {[['semua', 'Semua', COMMUNICATIONS.length], ['unread', 'Belum dibaca', 2], ['email', 'Email', 2], ['wa', 'WhatsApp', 2]].map(([id, l, n]) => (
              <button key={id} className={`inbox-tab ${tab === id ? 'active' : ''}`} onClick={() => setTab(id)}>{l} <span style={{ opacity: .6, marginLeft: 4 }}>{n}</span></button>
            ))}
          </div>
          <div style={{ overflowY: 'auto', flex: 1 }}>
            {COMMUNICATIONS.map(m => (
              <div key={m.id} className={`inbox-item ${m.unread ? 'unread' : ''} ${activeMsg.id === m.id ? 'active' : ''}`} onClick={() => setActiveMsg(m)}>
                <Avatar name={m.from} tone={m.channel === 'wa' ? 'green' : m.channel === 'email' ? 'indigo' : 'blue'} />
                <div className="msg-meta">
                  <div className="row between"><b>{m.from}</b><span className="msg-time">{m.when}</span></div>
                  <small>{m.company}</small>
                  <p>{m.subject !== 'WhatsApp' ? m.subject + ' · ' : ''}{m.preview}</p>
                  <div className="row" style={{ gap: 6, marginTop: 6 }}>
                    <span className="status-pill slate" style={{ padding: '2px 6px', fontSize: 10.5 }}><ChannelIcon ch={m.channel} /> {m.channel}</span>
                    <span className={`status-pill ${m.sentiment === 'positive' ? 'green' : 'slate'}`} style={{ padding: '2px 6px', fontSize: 10.5 }}>{m.sentiment}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="inbox-body">
          <div className="row between">
            <div className="row" style={{ gap: 12 }}>
              <Avatar name={activeMsg.from} tone="indigo" size={42} />
              <div>
                <b style={{ fontSize: 15, color: 'var(--text)' }}>{activeMsg.from}</b>
                <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{activeMsg.company} · via {activeMsg.channel}</div>
              </div>
            </div>
            <div className="row" style={{ gap: 6 }}>
              <button className="icon-btn"><Icon name="star" size={15} /></button>
              <button className="icon-btn"><Icon name="pin" size={15} /></button>
              <button className="btn ghost sm">Assign</button>
            </div>
          </div>

          <div style={{ padding: '14px 0', borderBottom: '1px solid var(--line2)' }}>
            <h3 style={{ fontSize: 17, marginBottom: 8 }}>{activeMsg.subject}</h3>
            <div className="row" style={{ gap: 8 }}>
              <StatusPill tone={activeMsg.sentiment === 'positive' ? 'green' : 'slate'}>Sentiment: {activeMsg.sentiment}</StatusPill>
              <StatusPill tone="indigo">Suggested: Reply dengan pricing breakdown</StatusPill>
            </div>
          </div>

          <div className="inbox-content">
            <p style={{ marginBottom: 14 }}>Halo Rina,</p>
            <p style={{ marginBottom: 14 }}>{activeMsg.preview}</p>
            <p style={{ marginBottom: 14 }}>Tim kami sangat antusias dengan demo kemarin, terutama fitur integrasi multi-outlet dan dashboard real-time. Beberapa poin yang ingin kami klarifikasi sebelum signing kontrak:</p>
            <ul style={{ paddingLeft: 20, marginBottom: 14, color: 'var(--text2)' }}>
              <li style={{ marginBottom: 6 }}>Apakah ada opsi pembayaran tahunan dengan diskon?</li>
              <li style={{ marginBottom: 6 }}>SLA support untuk implementasi 30 hari pertama bagaimana?</li>
              <li>Bisa share case study klien retail sejenis di Indonesia?</li>
            </ul>
            <p style={{ marginBottom: 14 }}>Mohon di-follow up segera ya. Terima kasih!</p>
            <p style={{ color: 'var(--muted)' }}>Best regards,<br/><b style={{ color: 'var(--text)' }}>{activeMsg.from}</b></p>
          </div>

          <div className="composer">
            <div className="row" style={{ gap: 8 }}>
              <button className="chip-filter active">Reply</button>
              <button className="chip-filter">Reply All</button>
              <button className="chip-filter">Forward</button>
              <button className="chip-filter">Schedule</button>
            </div>
            <textarea placeholder="Tulis balasan…" defaultValue="Halo Bayu, terima kasih atas feedback positifnya! Berikut jawaban poin per poin yang Anda tanyakan…"></textarea>
            <div className="composer-actions">
              <div className="row" style={{ gap: 6 }}>
                <button className="icon-btn" style={{ width: 32, height: 32 }}><Icon name="mail" size={14} /></button>
                <button className="icon-btn" style={{ width: 32, height: 32 }}><Icon name="link" size={14} /></button>
                <button className="icon-btn" style={{ width: 32, height: 32 }}><Icon name="sparkle" size={14} /></button>
                <span style={{ fontSize: 11.5, color: 'var(--muted)', marginLeft: 8 }}>✨ Smart compose tersedia</span>
              </div>
              <button className="btn primary" onClick={() => ctx.notify('Balasan terkirim ke ' + activeMsg.from)}>Kirim balasan</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Communications });