/* 業務OS — Teams embedded view */

function TeamsView() {
  const D = window.GYOMU;
  const tm = D.teams;
  const [activeChannel, setActiveChannel] = useState(tm.channels[0].id);
  const channel = tm.channels.find(c => c.id === activeChannel);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      {/* Toolbar */}
      <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Icon name="message-square" size={16} style={{ color: 'var(--stage-s0)' }} />
        <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-0)' }}>Teams</span>
        <div style={{ flex: 1 }} />
        <StatusDot status="connected" size={6} />
        <span style={{ fontSize: 9, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>最終同期 {D.integrations[1].lastSync}</span>
      </div>

      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
        {/* Channel list */}
        <div style={{ width: 200, borderRight: '1px solid var(--border-subtle)', background: 'var(--surface)', overflowY: 'auto', flexShrink: 0 }}>
          <div style={{ padding: '10px 12px 6px', fontSize: 10, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-3)' }}>CHANNELS</div>
          {tm.channels.map(ch => (
            <div key={ch.id} onClick={() => setActiveChannel(ch.id)}
              style={{
                padding: '8px 12px', cursor: 'pointer', borderRadius: 4, margin: '2px 6px',
                background: activeChannel === ch.id ? 'var(--accent-soft)' : 'transparent',
                transition: 'background .1s',
              }}
              onMouseEnter={e => { if (activeChannel !== ch.id) e.currentTarget.style.background = 'var(--bg-hover)'; }}
              onMouseLeave={e => { if (activeChannel !== ch.id) e.currentTarget.style.background = ''; }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 11, fontWeight: activeChannel === ch.id ? 600 : 400, color: activeChannel === ch.id ? 'var(--accent)' : 'var(--text-1)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  # {ch.name}
                </span>
                {ch.unread > 0 && (
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 8, background: 'var(--accent)', color: '#fff', lineHeight: 1.2 }}>{ch.unread}</span>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* Messages */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          {/* Channel header */}
          <div style={{ padding: '8px 16px', borderBottom: '1px solid var(--border-subtle)', fontSize: 12, fontWeight: 600, color: 'var(--text-0)' }}>
            # {channel.name}
          </div>

          {/* Message list */}
          <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {channel.messages.map((msg, i) => (
              <div key={i} style={{ display: 'flex', gap: 10 }}>
                {/* Avatar */}
                <div style={{
                  width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
                  background: msg.isAi ? 'rgba(46,125,214,.12)' : 'var(--bg-3)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: msg.isAi ? 10 : 11, fontWeight: 600,
                  color: msg.isAi ? 'var(--info)' : 'var(--text-2)',
                }}>
                  {msg.isAi ? <Icon name="zap" size={13} style={{ color: 'var(--info)' }} /> : msg.from[0]}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 2 }}>
                    <span style={{ fontSize: 11, fontWeight: 600, color: msg.isAi ? 'var(--info)' : 'var(--text-0)' }}>{msg.from}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-4)' }}>{msg.time}</span>
                  </div>
                  <div style={{
                    fontSize: 11, color: 'var(--text-1)', lineHeight: 1.6,
                    padding: msg.isAi ? '6px 10px' : undefined,
                    background: msg.isAi ? 'rgba(46,125,214,.06)' : undefined,
                    borderRadius: msg.isAi ? 4 : undefined,
                    borderLeft: msg.isAi ? '2px solid var(--info)' : undefined,
                  }}>{msg.text}</div>
                  {msg.file && (
                    <div style={{ marginTop: 4, display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 8px', background: 'var(--bg-3)', borderRadius: 4, fontSize: 10, color: 'var(--info)', cursor: 'pointer' }}>
                      <Icon name="file" size={11} />{msg.file}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* Input */}
          <div style={{ padding: '8px 16px', borderTop: '1px solid var(--border-subtle)', display: 'flex', gap: 6 }}>
            <input placeholder="メッセージを入力..." style={{
              flex: 1, fontSize: 11, padding: '7px 10px', border: '1px solid var(--border)', borderRadius: 4,
              background: 'var(--bg-3)', color: 'var(--text-1)', fontFamily: 'var(--font-sans)', outline: 'none',
            }} />
            <Btn primary><Icon name="send" size={12} style={{ color: '#fff' }} /></Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TeamsView = TeamsView;