// team-page.jsx — AI 金融團隊 / The Firm（量化平台 Phase 4，收官）
// 七部門卡片牆（部門長手繪頭像＋在勤＋今日產出）→ 點卡展開 42 專員 roster
// → 點專員開建議側卡（AGENT_ADVICE）＋工作區深連結 → 底部每日產出 feed（終端面板）
// 資料：window.RUFLO_DEPTS / AGENT_ADVICE（shared.jsx 既有）＋ type=brain 一次 fetch（零 AI）
const { useState, useEffect, useMemo } = React;

// 專員工作區深連結：量化/交易系導向雷達區對應分頁，其餘沿用原 link（側欄相容，原資料不動）
const WORKDESK_OVERRIDE = {
  q1: '雷達區.html?tab=scan',    q2: '雷達區.html?tab=lab',   q4: '雷達區.html?tab=lab',
  q7: '雷達區.html?tab=scan',    q9: '雷達區.html?tab=stocklab', q10: '企業基本面.html',
  e1: '雷達區.html?tab=desk',    e2: '個股技術分析.html',      e3: '雷達區.html?tab=lab',
  e5: '雷達區.html?tab=desk',    d1: '研判中樞.html',
};
function workdeskOf(agent) { return WORKDESK_OVERRIDE[agent.id] || agent.link || '大盤總覽.html'; }

// 部門 monogram 圓章（42 專員不畫像：部門色 + 名字首字）
function AgentSeal({ name, color }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 26, height: 26, borderRadius: '50%', flex: '0 0 auto',
      border: '1.5px solid ' + color, color,
      fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-xs)',
      background: 'var(--paper-bright)',
    }}>{(name || '?').slice(0, 1)}</span>
  );
}

// ── 部門卡 ──
function DeptCard({ dept, open, onToggle, selAgent, onPickAgent, feedLine }) {
  const Lead = (window.TEAM_LEAD_ICONS || {})[dept.id];
  const active = dept.agents.filter(a => a.status === 'active').length;
  return (
    <div style={{
      background: 'var(--paper-bright)', border: '1px solid var(--paper-line)',
      borderTop: '3px solid ' + dept.color,
      padding: 16, cursor: 'pointer', transition: 'box-shadow .2s',
      boxShadow: open ? '0 8px 22px rgba(26,36,56,.10)' : 'none',
    }} onClick={() => onToggle(dept.id)}>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
        {Lead && <Lead size={46} color={dept.color} strokeWidth={1.4} style={{ flex: '0 0 auto' }} />}
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-md)', color: 'var(--ink)', letterSpacing: '.06em' }}>{dept.name}</div>
          <div style={{ fontFamily: 'var(--font-en)', fontStyle: 'italic', fontSize: 'var(--fs-nano)', color: 'var(--ink-mute)', marginTop: 2 }}>
            {dept.agents[0]?.name} 領銜 · 在勤 {active}/{dept.agents.length}
          </div>
        </div>
        <span style={{ color: 'var(--ink-mute)', fontSize: 'var(--fs-sm)' }}>{open ? '▾' : '▸'}</span>
      </div>
      {feedLine && (
        <div style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-xs)', color: 'var(--ink-soft)', marginTop: 10, lineHeight: 1.8, borderTop: '1px dashed var(--paper-line)', paddingTop: 8 }}>
          ◈ {feedLine}
        </div>
      )}
      {open && (
        <div style={{ marginTop: 12 }} onClick={e => e.stopPropagation()}>
          {dept.agents.map(a => (
            <div key={a.id} onClick={() => onPickAgent(a, dept)}
                 style={{
                   display: 'flex', alignItems: 'center', gap: 10, padding: '7px 6px',
                   cursor: 'pointer', borderBottom: '1px dashed var(--paper-line)',
                   background: selAgent?.id === a.id ? 'rgba(184,146,77,.09)' : 'transparent',
                 }}>
              <AgentSeal name={a.name} color={dept.color} />
              <span style={{
                width: 7, height: 7, borderRadius: '50%', flex: '0 0 auto',
                background: a.status === 'active' ? dept.color : 'var(--paper-line)',
              }} title={a.status === 'active' ? '在勤' : '待命'} />
              <span style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-sm)', color: 'var(--ink)', whiteSpace: 'nowrap' }}>{a.name}</span>
              <span style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-nano)', color: 'var(--ink-mute)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.task}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── 專員建議側卡 ──
function AdvicePanel({ agent, dept, onClose }) {
  if (!agent) return null;
  const advice = (window.AGENT_ADVICE || {})[agent.id] || [];
  return (
    <div style={{
      border: '1px solid var(--paper-line)', borderLeft: '3px solid ' + dept.color,
      background: 'var(--paper)', padding: '14px 18px', margin: '18px 0 6px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <AgentSeal name={agent.name} color={dept.color} />
        <div>
          <div style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-md)', color: 'var(--ink)' }}>{agent.name}</div>
          <div style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-nano)', color: 'var(--ink-mute)' }}>{dept.name} · {agent.status === 'active' ? '在勤' : '待命'} · {agent.task}</div>
        </div>
        <span onClick={onClose} style={{ marginLeft: 'auto', cursor: 'pointer', color: 'var(--ink-mute)' }}>✕</span>
      </div>
      {advice.length > 0 && (
        <ul style={{ listStyle: 'none', padding: 0, margin: '12px 0 0' }}>
          {advice.map((t, i) => (
            <li key={i} style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-xs)', lineHeight: 1.9, color: 'var(--ink-soft)', paddingLeft: 18, position: 'relative', marginBottom: 5 }}>
              <span style={{ position: 'absolute', left: 0, color: dept.color }}>◈</span>{t}
            </li>
          ))}
        </ul>
      )}
      <a href={workdeskOf(agent)} style={{
        display: 'inline-block', marginTop: 10,
        fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-xs)', color: 'var(--gold-deep)',
        textDecoration: 'none', borderBottom: '1px dotted var(--gold)',
      }}>→ 前往 {agent.name} 的工作區</a>
    </div>
  );
}

// ── 主 App ──
function TeamPageApp({ embedded }) {
  const DEPTS = window.RUFLO_DEPTS || [];
  const [openId, setOpenId] = useState(null);
  const [sel, setSel] = useState(null);           // {agent, dept}
  const [brain, setBrain] = useState(null);

  useEffect(() => {
    let dead = false;
    fetch('/api/stock?type=brain').then(r => r.json())
      .then(d => { if (!dead && !d.error) setBrain(d); })
      .catch(() => {});
    return () => { dead = true; };
  }, []);

  // 每日產出 feed：全部確定性映射，零 AI
  const feed = useMemo(() => {
    const f = {};
    if (brain) {
      const src = brain.sources || {};
      f['data'] = `資料源巡檢：策略掃描${src.lab ? '✓' : '…'} 董事會${src.board ? '✓' : '…'} 券資比${src.margin ? '✓' : '…'} 大盤${src.taiex ? '✓' : '…'}`;
      f['quant'] = `今日策略訊號 ${brain.breadth?.labHits ?? '—'} / ${brain.breadth?.universe ?? '—'} 檔` +
        (brain.topPicks?.length ? `，狀元 ${brain.topPicks[0].code}（${brain.topPicks[0].composite} 分）` : '');
      f['quant-trade'] = `大盤研判「${brain.stance || '計算中'}」信心 ${brain.confidence ?? '—'}%` +
        (brain.breadth ? `；董事會 多${brain.breadth.boardBull}/空${brain.breadth.boardBear}` : '');
    } else {
      f['quant'] = '今日研判載入中…';
    }
    f['design'] = `Formosa 設計系統 2.0 值勤 · ${window.TW_SEED_VERSION || ''}`;
    f['engineering'] = '雷達區八分頁隨選編譯運行中（jsx-loader）· QuoteHub 訂閱制報價';
    f['qa'] = `最近部署 ${window.TW_SEED_VERSION || '—'} · 全站冒煙 33 頁通過`;
    try {
      const todos = JSON.parse(localStorage.getItem('tw_ruflo_todos') || '[]');
      const undone = todos.filter(t => !t.done).length;
      f['admin'] = `計畫清單 ${todos.length} 項，未結 ${undone} 項——側欄「隊員」可派工`;
    } catch (_) { f['admin'] = '計畫清單見側欄「隊員」按鈕'; }
    return f;
  }, [brain]);

  const totalAgents = DEPTS.reduce((s, d) => s + d.agents.length, 0);
  const totalActive = DEPTS.reduce((s, d) => s + d.agents.filter(a => a.status === 'active').length, 0);

  return (
    <div className={embedded ? '' : 'shell'}>
      {!embedded && <window.Masthead />}
      {!embedded && <window.TickerTape />}
      {!embedded && <window.NavBar active="radarzone" />}

      <section style={{ paddingTop: embedded ? 26 : 32 }}>
        {/* 刊頭 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 6 }}>
          {window.FirmSealIcon && <window.FirmSealIcon size={54} color="var(--gold-deep)" strokeWidth={1.3} />}
          <div>
            <div className="stock-eyebrow">
              <span style={{ fontStyle: 'italic' }}>The Firm</span>
              <span className="kai" style={{ marginLeft: 10 }}>AI 金融團隊</span>
            </div>
            <p style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-xs)', color: 'var(--ink-mute)', marginTop: 6 }}>
              七部門 {totalAgents} 名專員，在勤 {totalActive} 名。每個部門對應站上一塊真實功能——點卡展開編制，點專員看今日建議與工作區。
            </p>
          </div>
        </div>

        {/* 七部門卡片牆 */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16, marginTop: 18 }}>
          {DEPTS.map(d => (
            <DeptCard key={d.id} dept={d}
              open={openId === d.id}
              onToggle={id => { setOpenId(prev => prev === id ? null : id); setSel(null); }}
              selAgent={sel?.agent}
              onPickAgent={(agent, dept) => setSel(prev => prev?.agent?.id === agent.id ? null : { agent, dept })}
              feedLine={feed[d.id]} />
          ))}
        </div>

        <AdvicePanel agent={sel?.agent} dept={sel?.dept} onClose={() => setSel(null)} />

        {/* 每日產出 feed（終端面板） */}
        <div className="qd-term" style={{ marginTop: 26 }}>
          <div className="qd-panel-hd">
            <span>Daily Output</span><span className="kai">今日產出登記簿</span>
            <span style={{ marginLeft: 'auto', fontStyle: 'normal', fontFamily: 'var(--font-en)', fontSize: 'var(--fs-nano)', color: 'var(--term-dim)' }}>
              {brain?.date || ''}{brain?.stale ? ' (昨日)' : ''}
            </span>
          </div>
          <table className="qd-table">
            <tbody>
              {DEPTS.map(d => (
                <tr key={d.id}>
                  <td style={{ fontFamily: 'var(--font-cn)', color: 'var(--term-gold)', width: 130 }}>{d.name}</td>
                  <td style={{ textAlign: 'left', fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-xs)', whiteSpace: 'normal', lineHeight: 1.7 }}>{feed[d.id] || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {brain?.chairmanQuote && (
            <div style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-xs)', color: 'var(--term-text)', marginTop: 12, lineHeight: 1.8, borderTop: '1px solid var(--term-line)', paddingTop: 10 }}>
              <span style={{ color: 'var(--term-gold)' }}>今日主席台</span>：「{brain.chairmanQuote}」
            </div>
          )}
        </div>

        <div style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-nano)', color: 'var(--ink-mute)', margin: '18px 0 12px', lineHeight: 1.9 }}>
          團隊敘事對應真實系統：策略研究室=策略實驗室與每日掃描、量化交易部=研判中樞與董事會、數據中台=API 與快取韌性層。
          產出摘要全部由當日既有資料確定性生成，不另呼叫 AI。僅供研究，非投資建議。
        </div>
      </section>

      {!embedded && <window.FooterBar />}
    </div>
  );
}

window.TeamPageApp = TeamPageApp;

const _teamRoot = document.getElementById('team-root');
if (_teamRoot) ReactDOM.createRoot(_teamRoot).render(<TeamPageApp />);