// Research / Market Intelligence shell — header, sidebar, view glue.
// Mirrors academy-shell.jsx but for the intel desk persona.
// Tablet-sized: 1180 × 820.

const { useState: rUseState } = React;

// — Shared atoms ————————————————————————————————————————

function RPill({ tone = 'neutral', children }) {
  const tones = {
    neutral:  { bg: 'rgba(20,20,20,0.06)',  fg: '#333' },
    critical: { bg: '#141414',              fg: '#FFE003' },
    warning:  { bg: 'rgba(255,224,3,0.18)', fg: '#5A4A00' },
    ok:       { bg: 'rgba(46,125,50,0.10)', fg: '#1B5E20' },
    info:     { bg: 'rgba(33,99,141,0.10)', fg: '#0D3B5A' },
    grey:     { bg: 'rgba(20,20,20,0.04)',  fg: '#A0A0A0' },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '3px 8px', background: t.bg, color: t.fg,
      fontFamily: TL_FONTS.mono, fontSize: 9.5, letterSpacing: '0.1em',
      textTransform: 'uppercase',
    }}>{children}</span>
  );
}

function RDot({ tone }) {
  const c = { critical: '#D81E1E', warning: '#E6A800', ok: '#1B5E20', info: '#0D3B5A', neutral: '#A0A0A0' }[tone] || '#A0A0A0';
  return <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: c }} />;
}

function RKPI({ label, value, sub, accent }) {
  return (
    <div style={{ flex: 1, padding: '18px 20px', background: '#FFFFFF', border: '1px solid rgba(20,20,20,0.08)' }}>
      <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#A0A0A0' }}>{label}</div>
      <div style={{ fontFamily: TL_FONTS.serif, fontSize: 36, fontWeight: 500, lineHeight: 1.05, marginTop: 8, letterSpacing: '-0.02em', color: accent || '#141414' }}>{value}</div>
      {sub && <div style={{ fontFamily: TL_FONTS.sans, fontSize: 11.5, color: '#6B6B6B', marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

function RSectionHead({ no, title, subtitle, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 14, paddingBottom: 10, borderBottom: '1px solid rgba(20,20,20,0.08)' }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          {no && <span style={{ fontFamily: TL_FONTS.mono, fontSize: 10, color: '#A0A0A0', letterSpacing: '0.1em' }}>{no}</span>}
          <h3 style={{ fontFamily: TL_FONTS.serif, fontSize: 20, fontWeight: 500, margin: 0, letterSpacing: '-0.02em', color: '#141414' }}>{title}</h3>
        </div>
        {subtitle && <div style={{ fontFamily: TL_FONTS.sans, fontSize: 12, color: '#6B6B6B', marginTop: 4 }}>{subtitle}</div>}
      </div>
      {right}
    </div>
  );
}

// — Header ————————————————————————————————————————

function RHeader({ lang, onLangChange, lastSync }) {
  return (
    <div style={{
      height: 56, background: '#141414', color: '#F8F8F8',
      display: 'flex', alignItems: 'center', padding: '0 24px',
      borderBottom: '1px solid rgba(255,255,255,0.08)', flexShrink: 0,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          background: '#FFE003', color: '#141414',
          padding: '4px 9px', fontFamily: TL_FONTS.sans, fontSize: 12, fontWeight: 700, letterSpacing: '0.04em',
        }}>TOM LEE</div>
        <span style={{ fontFamily: TL_FONTS.serif, fontStyle: 'italic', fontSize: 15, color: '#F8F8F8', letterSpacing: '-0.01em' }}>Music</span>
      </div>
      <div style={{ width: 1, height: 22, background: 'rgba(255,255,255,0.2)', margin: '0 18px' }} />
      <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#FFE003' }}>
        {lang === 'zh' ? '市場情報' : 'Market Intelligence'}
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)' }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ADE80' }} />
        <span style={{ fontFamily: TL_FONTS.mono, fontSize: 10, color: '#A0A0A0', letterSpacing: '0.1em' }}>
          {lang === 'zh' ? '上次同步' : 'LAST SYNC'}
        </span>
        <span style={{ fontFamily: TL_FONTS.mono, fontSize: 11, color: '#F8F8F8' }}>{lastSync}</span>
      </div>

      <div style={{ width: 16 }} />
      <button onClick={() => onLangChange && onLangChange(lang === 'en' ? 'zh' : 'en')} style={{
        background: 'transparent', color: '#F8F8F8', border: '1px solid rgba(255,255,255,0.12)',
        padding: '6px 12px', cursor: 'pointer', fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.1em',
      }}>
        {lang === 'zh' ? 'EN' : '中'}
      </button>

      <div style={{ width: 16 }} />
      <div style={{
        width: 28, height: 28, borderRadius: '50%', background: '#FFE003', color: '#141414',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: TL_FONTS.mono, fontSize: 10, fontWeight: 600,
      }}>ET</div>
    </div>
  );
}

// — Sidebar ————————————————————————————————————————

function RSidebar({ tab, setTab, lang }) {
  const items = [
    { id: 'overview', en: 'Overview',       zh: '總覽',       icon: 'home',  badge: null },
    { id: 'prices',   en: 'SKU Prices',     zh: '價格監察',   icon: 'chart', badge: 3 },
    { id: 'news',     en: 'News & PR',      zh: '新聞輿情',   icon: 'msg',   badge: null },
    { id: 'tenders',  en: 'School Tenders', zh: '學校招標',   icon: 'note',  badge: 4 },
  ];
  const meta = [
    { en: 'Sources',      zh: '來源管理',  icon: 'lock' },
    { en: 'Stakeholders', zh: '通知對象',  icon: 'user' },
    { en: 'Export',       zh: '匯出報表',  icon: 'send' },
  ];
  return (
    <div style={{
      width: 200, background: '#F8F8F8', borderRight: '1px solid rgba(20,20,20,0.08)',
      padding: '20px 0', flexShrink: 0, display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#A0A0A0', padding: '0 24px 14px' }}>
        {lang === 'zh' ? '情報模組' : 'Intel modules'}
      </div>
      {items.map(it => {
        const active = tab === it.id;
        return (
          <button key={it.id} onClick={() => setTab(it.id)} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            width: '100%', padding: '11px 24px',
            background: active ? '#141414' : 'transparent',
            color: active ? '#F8F8F8' : '#333',
            border: 'none', cursor: 'pointer', textAlign: 'left',
            fontFamily: TL_FONTS.sans, fontSize: 13,
            borderLeft: active ? '3px solid #FFE003' : '3px solid transparent',
          }}>
            <TLIcon name={it.icon} size={16} color={active ? '#FFE003' : '#6B6B6B'} stroke={1.6} />
            <span style={{ fontWeight: active ? 500 : 400, flex: 1 }}>{lang === 'zh' ? it.zh : it.en}</span>
            {it.badge ? (
              <span style={{
                background: active ? '#FFE003' : '#141414',
                color: active ? '#141414' : '#FFE003',
                fontFamily: TL_FONTS.mono, fontSize: 9, fontWeight: 600,
                padding: '2px 6px', minWidth: 18, textAlign: 'center',
              }}>{it.badge}</span>
            ) : null}
          </button>
        );
      })}

      <div style={{ height: 1, background: 'rgba(20,20,20,0.08)', margin: '20px 24px' }} />
      <div style={{ padding: '0 24px' }}>
        <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#A0A0A0', marginBottom: 10 }}>
          {lang === 'zh' ? '管理' : 'Admin'}
        </div>
        {meta.map((x, i) => (
          <div key={i} style={{
            fontFamily: TL_FONTS.sans, fontSize: 12, color: '#6B6B6B',
            padding: '7px 0', display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <TLIcon name={x.icon} size={13} color="#A0A0A0" stroke={1.5} />
            <span>{lang === 'zh' ? x.zh : x.en}</span>
          </div>
        ))}
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ padding: '0 20px 16px' }}>
        <div style={{ padding: 14, background: '#141414', color: '#F8F8F8' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
            <span style={{ fontFamily: TL_FONTS.mono, fontSize: 9, color: '#FFE003', letterSpacing: '0.16em' }}>AI · LIVE</span>
          </div>
          <div style={{ fontFamily: TL_FONTS.serif, fontSize: 13, lineHeight: 1.4, fontStyle: 'italic' }}>
            {lang === 'zh'
              ? '今早抓取 535 條來源，發現 4 個值得關注的訊號。'
              : '535 sources crawled this morning. 4 signals worth your attention.'}
          </div>
        </div>
      </div>
    </div>
  );
}

window.RHeader = RHeader;
window.RSidebar = RSidebar;
window.RPill = RPill;
window.RDot = RDot;
window.RKPI = RKPI;
window.RSectionHead = RSectionHead;