// IntakeInbox — 受付の受信トレイ(K18-47)。受付画面の右に置く枠と、空の状態だけを持つ部品。
// ==================================================================
// 池田さんの画面編集版(reference/ikeda-2026-09-16/screens/marurou/Intake.jsx)は
// 「左にウィザード・右に受信トレイ」(grid-detail)。main は左に受信トレイを置いていたので、並びを入れ替えた。
//
// 何を出すか:
//   ・見出し「受信トレイ」と件数。取り込みが無い間は件数の代わりに「取り込み未接続」と出す。
//   ・取り込みが無い間の注記(電話・メール・Slack・HP問合せの取り込みはまだ繋がっていない)。
//     **機能が入るまで消さない**(消すと、効かない取り込みが効くように見える。docs/21 K18-47)。
//   ・行: 受信(取り込みが入れば Intake.jsx の INTAKE_INBOX に実データが入る)と、最後に「手入力」。
//     行を押すと、左のウィザードがその受信の内容で始まる(Intake.jsx が key で作り直す)。
//
// 受信の中身(msg)の形は Intake.jsx の INTAKE_MANUAL と同じ:
//   { id, channel: 'phone'|'mail'|'slack'|'hp', from, meta, at, urgent, matched, body, manual }
// チャネルの印は Intake.jsx の ChannelGlyph を Glyph として受け取る(描き方を 2 か所に持たない)。
// 狭い画面(〜768px)では縦に積む(app/ui/index.html の .mr-intake-shell / .mr-intake-inbox)。

function IntakeInbox({ list, inboxCount, sel, onSelect, Glyph }) {
  const rows = Array.isArray(list) ? list : [];
  const n = Number(inboxCount) || 0;
  return (
    <section className="mr-intake-inbox" aria-label="受信トレイ"
      style={{ width: 320, borderLeft: '1px solid var(--border)', display: 'flex', flexDirection: 'column', flexShrink: 0, background: 'var(--card)' }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8 }}>
        <h3 style={{ margin: 0, fontSize: 'var(--text-display-sm)', fontWeight: 600 }}>受信トレイ</h3>
        <span data-intake-inbox-count={n} style={{ fontSize: 'var(--text-body-sm)', color: 'var(--muted-foreground)' }}>
          {n ? n + '件' : '取り込み未接続'}
        </span>
      </div>
      <div style={{ flex: 1, overflowY: 'auto' }}>
        {!n && (
          <div data-intake-inbox-empty style={{ padding: '14px 16px', fontSize: 'var(--text-body-sm)', lineHeight: 1.8, color: 'var(--muted-foreground)', borderBottom: '1px solid var(--border)' }}>
            電話・メール・Slack・HP問合せの取り込みはまだ繋がっていません。<br />
            下の「手入力」から受け付けてください。
          </div>
        )}
        {rows.map(m => {
          const active = m.id === sel;
          return (
            <button key={m.id} onClick={() => onSelect && onSelect(m.id)} aria-pressed={active} style={{
              all: 'unset', cursor: 'pointer', boxSizing: 'border-box', display: 'block', width: '100%',
              padding: '11px 16px', borderBottom: '1px solid var(--border)', borderLeft: '2px solid ' + (active ? 'var(--brand)' : 'transparent'),
              background: active ? 'var(--brand-muted)' : 'transparent',
            }}
              onMouseEnter={e => !active && (e.currentTarget.style.background = 'var(--accent)')}
              onMouseLeave={e => !active && (e.currentTarget.style.background = 'transparent')}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                {Glyph && <Glyph ch={m.channel} />}
                <span style={{ fontSize: 'var(--text-body-md)', fontWeight: 600, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.from}</span>
                {m.urgent && <AfChip tone="emergency">至急</AfChip>}
                <span style={{ fontSize: 'var(--text-caption)', color: 'var(--muted-foreground)' }} className="mono">{m.at}</span>
              </div>
              {(m.body || m.meta) && (
                <div style={{ fontSize: 'var(--text-body-sm)', color: 'var(--muted-foreground)', marginTop: 4, lineHeight: 1.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{m.body || m.meta}</div>
              )}
            </button>
          );
        })}
      </div>
    </section>
  );
}

Object.assign(window, { IntakeInbox });