/* 業務OS — Outlook embedded view */

function OutlookView() {
  const D = window.GYOMU;
  const ol = D.outlook;
  const [selectedMail, setSelectedMail] = useState(null);
  const [subview, setSubview] = useState('inbox');
  const sel = ol.inbox.find(m => m.id === selectedMail);

  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="mail" size={16} style={{ color: 'var(--info)' }} />
        <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-0)' }}>Outlook</span>
        <div style={{ display: 'flex', background: 'var(--bg)', borderRadius: 5, padding: 2, marginLeft: 12 }}>
          {['inbox', 'calendar'].map(v => (
            <div key={v} onClick={() => setSubview(v)} style={{
              fontSize: 10, fontWeight: 500, padding: '4px 12px', borderRadius: 3, cursor: 'pointer',
              background: subview === v ? 'var(--surface)' : 'transparent',
              color: subview === v ? 'var(--text-1)' : 'var(--text-3)',
              boxShadow: subview === v ? 'var(--shadow-sm)' : 'none',
            }}>{{ inbox: '受信トレイ', calendar: 'カレンダー' }[v]}</div>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <StatusDot status="connected" size={6} />
        <span style={{ fontSize: 9, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>最終同期 {D.integrations[0].lastSync}</span>
      </div>

      {subview === 'inbox' ? (
        <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
          {/* Mail list */}
          <div style={{ width: sel ? '45%' : '100%', borderRight: sel ? '1px solid var(--border-subtle)' : 'none', overflowY: 'auto', transition: 'width .2s' }}>
            {ol.inbox.map(mail => (
              <div key={mail.id} onClick={() => setSelectedMail(mail.id)}
                style={{
                  padding: '10px 16px', borderBottom: '1px solid var(--border-subtle)', cursor: 'pointer',
                  background: selectedMail === mail.id ? 'var(--accent-soft)' : mail.unread ? 'var(--surface)' : 'transparent',
                  transition: 'background .1s',
                }}
                onMouseEnter={e => { if (selectedMail !== mail.id) e.currentTarget.style.background = 'var(--surface-hover)'; }}
                onMouseLeave={e => { if (selectedMail !== mail.id) e.currentTarget.style.background = mail.unread ? 'var(--surface)' : ''; }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                  {mail.unread && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--info)', flexShrink: 0 }} />}
                  <span style={{ fontSize: 11, fontWeight: mail.unread ? 600 : 400, color: 'var(--text-0)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{mail.from}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-3)', flexShrink: 0 }}>{mail.time}</span>
                </div>
                <div style={{ fontSize: 11, fontWeight: mail.unread ? 600 : 500, color: 'var(--text-1)', marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{mail.subject}</div>
                <div style={{ fontSize: 10, color: 'var(--text-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{mail.preview}</div>
              </div>
            ))}
          </div>
          {/* Mail detail */}
          {sel && (
            <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
              <div style={{ marginBottom: 16 }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text-0)', marginBottom: 8 }}>{sel.subject}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600, color: 'var(--text-2)' }}>{sel.from[0]}</div>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-0)' }}>{sel.from}</div>
                    <div style={{ fontSize: 9, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>{sel.time}</div>
                  </div>
                </div>
                <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: 12, marginTop: 12, fontSize: 12, color: 'var(--text-1)', lineHeight: 1.7 }}>
                  {sel.preview}
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <Btn><Icon name="reply" size={12} />返信</Btn>
                <Btn><Icon name="forward" size={12} />転送</Btn>
                <Btn><Icon name="zap" size={12} />AIで要約</Btn>
              </div>
            </div>
          )}
        </div>
      ) : (
        /* Calendar week view */
        <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
            {ol.calendarWeek.map((day, di) => (
              <div key={di} style={{ background: 'var(--surface)', border: '1px solid var(--border-subtle)', borderRadius: 6, overflow: 'hidden' }}>
                <div style={{
                  padding: '6px 10px', fontSize: 10, fontWeight: 600, letterSpacing: '.04em',
                  background: di === 0 ? 'var(--accent-soft)' : 'var(--bg-3)',
                  color: di === 0 ? 'var(--accent)' : 'var(--text-2)',
                  borderBottom: '1px solid var(--border-subtle)',
                }}>{day.day}</div>
                <div style={{ padding: 6, display: 'flex', flexDirection: 'column', gap: 4, minHeight: 100 }}>
                  {day.events.map((ev, ei) => (
                    <div key={ei} style={{
                      padding: '4px 8px', borderRadius: 4, fontSize: 10,
                      background: ev.important ? 'var(--accent-soft)' : 'var(--bg-3)',
                      borderLeft: '2px solid ' + (ev.important ? 'var(--accent)' : 'var(--border)'),
                    }}>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600, color: ev.important ? 'var(--accent)' : 'var(--text-3)', marginBottom: 1 }}>{ev.time}</div>
                      <div style={{ fontWeight: 500, color: 'var(--text-1)', lineHeight: 1.3 }}>{ev.title}</div>
                    </div>
                  ))}
                  {day.events.length === 0 && <div style={{ fontSize: 9, color: 'var(--text-4)', padding: 4 }}>予定なし</div>}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.OutlookView = OutlookView;