/* eslint-disable */
// =============================================================
// 主 App + 顶部导航 + 弹层 + Tweaks
// =============================================================

// ===== 本周尖兵 Top 3(必须在 App 之前定义) =====
function Vanguards({ onPick }) {
  const top = U.vanguards();
  if (top.length === 0) return null;
  const RANK = [
    { label: '冠军', cls: 'vg-gold',   num: 1 },
    { label: '亚军', cls: 'vg-silver', num: 2 },
    { label: '季军', cls: 'vg-bronze', num: 3 },
  ];
  const RosetteBadge = ({ tone, num }) => {
    const palette = {
      gold:   { rim:'#f6d65b', mid:'#e8b73a', dark:'#8b5a07', hi:'#fff5cf', ribbon:'#c43f2a', ribbonD:'#7d1d10' },
      silver: { rim:'#eef2f6', mid:'#bfc8d1', dark:'#5f6b76', hi:'#ffffff', ribbon:'#5f6b76', ribbonD:'#3a434c' },
      bronze: { rim:'#e09b5d', mid:'#b8702c', dark:'#5b3010', hi:'#fad6a6', ribbon:'#5b3010', ribbonD:'#321907' },
    }[tone];
    const p = palette;
    // 12-petal rosette path
    const N = 12, R = 22, r = 19;
    let d = '';
    for (let i = 0; i < N * 2; i++) {
      const a = (i / (N * 2)) * Math.PI * 2 - Math.PI / 2;
      const rad = i % 2 === 0 ? R : r;
      const x = 28 + Math.cos(a) * rad;
      const y = 28 + Math.sin(a) * rad;
      d += (i === 0 ? 'M' : 'L') + x.toFixed(2) + ',' + y.toFixed(2) + ' ';
    }
    d += 'Z';
    return (
      <svg width="56" height="64" viewBox="0 0 56 64" className="vg-rosette" aria-hidden="true">
        <defs>
          <radialGradient id={`g-${tone}`} cx="50%" cy="38%" r="65%">
            <stop offset="0%" stopColor={p.hi}/>
            <stop offset="55%" stopColor={p.rim}/>
            <stop offset="100%" stopColor={p.mid}/>
          </radialGradient>
          <linearGradient id={`r-${tone}`} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={p.ribbon}/>
            <stop offset="100%" stopColor={p.ribbonD}/>
          </linearGradient>
        </defs>
        {/* ribbons */}
        <path d="M16,44 L10,62 L18,58 L22,48 Z" fill={`url(#r-${tone})`} stroke={p.ribbonD} strokeWidth="0.6"/>
        <path d="M40,44 L46,62 L38,58 L34,48 Z" fill={`url(#r-${tone})`} stroke={p.ribbonD} strokeWidth="0.6"/>
        {/* rosette */}
        <path d={d} fill={`url(#g-${tone})`} stroke={p.dark} strokeWidth="0.8" strokeLinejoin="round"/>
        {/* inner disc */}
        <circle cx="28" cy="28" r="14" fill={p.rim} stroke={p.dark} strokeWidth="0.8"/>
        <circle cx="28" cy="28" r="14" fill="none" stroke={p.hi} strokeWidth="0.6" strokeDasharray="1.5 1.5" opacity="0.6"/>
        {/* crown */}
        <path d="M22,22 L24,19 L26,21 L28,18 L30,21 L32,19 L34,22 Z" fill={p.dark} opacity="0.55"/>
        {/* number */}
        <text x="28" y="34" textAnchor="middle"
          fontFamily="Georgia, 'Times New Roman', serif"
          fontSize="16" fontWeight="700" fill={p.dark}
          style={{paintOrder:'stroke'}} stroke={p.hi} strokeWidth="0.6">{num}</text>
      </svg>
    );
  };
  return (
    <div className="vg">
      <div className="vg-head">
        <span className="vg-title">本周尖兵</span>
        <span className="vg-sub">活动量 × 高优 × 协助 − 逾期 − 僵尸</span>
      </div>
      <div className="vg-row">
        {top.map((v, i) => {
          const m = U.memberById(v.id);
          const r = RANK[i];
          return (
            <button key={v.id} className={`vg-card ${r.cls}`} onClick={() => onPick(v.id)}>
              <RosetteBadge tone={r.cls.replace('vg-','')} num={r.num} />
              <div className="vg-av-wrap">
                <Avatar id={v.id} size={40} />
              </div>
              <div className="vg-meta">
                <div className="vg-name">{m.name}</div>
                <div className="vg-stat">
                  <b>{v.active}</b> 活动
                  {v.high > 0 && <> · <b>{v.high}</b> 高优</>}
                  {v.assist > 0 && <> · <b>{v.assist}</b> 协助</>}
                  {v.overdue > 0 && <span className="vg-neg"> · {v.overdue} 逾期</span>}
                </div>
              </div>
              <div className="vg-score"><span>{v.score}</span><em>pts</em></div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function App() {
  const [view, setView] = useState('all');         // all | mine | radar
  const [asUser, setAsUser] = useState('chenfawei');// 我的任务视角下扮演哪个成员
  const [open, setOpen] = useState(null);          // 当前打开详情的任务

  const [tweakValues, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const density = tweakValues.density;     // normal | compact
  const accent = tweakValues.accent;       // blue | green | orange
  const theme = tweakValues.theme || 'light';  // light | dark

  // 同步 dark 主题到 <html data-theme>
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  // 全局指标用于顶 KPI 条
  const all = window.TASKS;
  const active = all.filter(U.isActive);
  const overdue = active.filter(t=>U.urgency(t)==='overdue').length;
  const urgent  = active.filter(t=>U.urgency(t)==='urgent').length;
  const stale   = active.filter(U.isStale).length;
  const peopleBusy = new Set(active.map(t=>t.owner)).size;

  return (
    <div className={`app accent-${accent}`}>
      <header className="topbar">
        <div className="brand">
          <div className="brand-mark"></div>
          <div>
            <h1>团队任务看板</h1>
            <span className="brand-sub">地化所喀斯特研究团队 · 17 人 · 4 月 29 日</span>
          </div>
        </div>
        <div className="kpi">
          <KPI label="活动任务" n={active.length}/>
          <KPI label="在岗" n={peopleBusy} suffix={`/ ${window.MEMBERS.length}`}/>
          <KPI label="逾期·阻塞" n={overdue} tone={overdue>0?'red':'mute'}/>
          <KPI label="临期" n={urgent} tone={urgent>0?'amber':'mute'}/>
          <KPI label="僵尸" n={stale} tone={stale>0?'gray':'mute'}/>
        </div>
      </header>

      {/* ===== 本周尖兵 Top 3 ===== */}
      <Vanguards onPick={id => { setAsUser(id); setView('mine'); }} />

      {/* ===== 全员花名册:按 5 组分块,颜色即状态 ===== */}
      <Roster onPick={id => { setAsUser(id); setView('mine'); }} />

      {/* 状态图例 */}
      <div className="ros-legend">
        <span className="lg-item"><i className="rdot rdot-red"></i>逾期/阻塞</span>
        <span className="lg-item"><i className="rdot rdot-amber"></i>临期(≤2 天)</span>
        <span className="lg-item"><i className="rdot rdot-gray"></i>有僵尸任务</span>
        <span className="lg-item"><i className="rdot rdot-ok"></i>正常</span>
        <span className="lg-item"><i className="rdot rdot-idle"></i>无活动任务</span>
        <span className="lg-sep">·</span>
        <span className="lg-item">点击成员查看其任务</span>
      </div>

      <nav className="tabs">
        <div className="tabs-l">
          <Tab v={view} k="all"   set={setView}>全员负载</Tab>
          <Tab v={view} k="mine"  set={setView}>我的任务</Tab>
          <Tab v={view} k="radar" set={setView}>紧急雷达</Tab>
        </div>
        {view==='mine' && (
          <div className="as-picker">
            <span className="as-lbl">视角:</span>
            <select value={asUser} onChange={e=>setAsUser(e.target.value)}>
              {window.MEMBERS.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
            </select>
          </div>
        )}
      </nav>

      <main className="main">
        {view==='all'   && <ViewAll   onOpen={setOpen} density={density}/>}
        {view==='mine'  && <ViewMine  onOpen={setOpen} asUser={asUser}/>}
        {view==='radar' && <ViewRadar onOpen={setOpen}/>}
      </main>

      <footer className="legend">
        <span className="lg-item"><span className="udot udot-overdue"></span>逾期/阻塞</span>
        <span className="lg-item"><span className="udot udot-urgent"></span>≤ 2 天</span>
        <span className="lg-item"><span className="udot udot-soon"></span>本周</span>
        <span className="lg-item"><span className="udot udot-later"></span>宽松</span>
        <span className="lg-sep">·</span>
        <span className="lg-item">点击任意任务查看 @提及与点评</span>
      </footer>

      {open && <TaskModal task={open} onClose={()=>setOpen(null)}/>}

      <TweaksPanel title="Tweaks">
        <TweakSection title="主题">
          <TweakRadio label="配色"
            value={theme}
            options={[{value:'light',label:'浅色'},{value:'dark',label:'深色科技'}]}
            onChange={v => setTweak('theme', v)} />
        </TweakSection>
        <TweakSection title="布局">
          <TweakRadio label="任务密度"
            value={density}
            options={[{value:'normal',label:'标准'},{value:'compact',label:'紧凑(每人最多 3)'}]}
            onChange={v => setTweak('density', v)} />
          <TweakRadio label="主题色"
            value={accent}
            options={[{value:'blue',label:'蓝'},{value:'green',label:'青'},{value:'orange',label:'橙'}]}
            onChange={v => setTweak('accent', v)} />
        </TweakSection>
        <TweakSection title="提示">
          <div style={{fontSize:12, color:'#5f6168', lineHeight:1.6}}>
            · Tab 切换视角<br/>
            · 「我的任务」可下拉切换扮演者(团队成员视角)<br/>
            · 任务行点击 → 弹出 @提及/点评
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function Tab({ v, k, set, children }) {
  return <button className={'tab ' + (v===k?'tab-on':'')} onClick={()=>set(k)}>{children}</button>;
}

// ===== 全员花名册:按 5 组分块,颜色即状态 =====
function Roster({ onPick }) {
  const members = window.MEMBERS;
  if (!members) return null;
  // 排序:有任务的按重要度排前面 → idle(灰色)在最后,
  // 同 heat 内按拼音
  const HEAT_RANK = { red:0, amber:1, gray:2, ok:3, idle:4 };
  const sorted = [...members].sort((a, b) => {
    const ra = HEAT_RANK[U.memberHeat(a.id)];
    const rb = HEAT_RANK[U.memberHeat(b.id)];
    if (ra !== rb) return ra - rb;
    return a.name.localeCompare(b.name, 'zh-Hans-CN-u-co-pinyin');
  });

  return (
    <div className="rost">
      <div className="rost-flat">
        {sorted.map(m => {
          const heat = U.memberHeat(m.id);
          const stats = U.memberStats(m.id);
          return (
            <button key={m.id} className={`rost-item rdot-${heat}`}
              onClick={()=>onPick(m.id)}
              title={`${m.name} · ${m.role}\n${stats.total} 活动 · 逾期 ${stats.overdue} · 临期 ${stats.urgent} · 僵尸 ${stats.stale}`}>
              <div className="rost-av-wrap">
                <Avatar id={m.id} size={36} gray={heat==='idle'}/>
                {stats.total > 0 && <span className="rost-badge">{stats.total}</span>}
              </div>
              <div className="rost-meta">
                <div className="rost-name">{m.name}</div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function KPI({ label, n, suffix, tone='mute' }) {
  return (
    <div className={'kpi-cell kpi-'+tone}>
      <div className="kpi-num">{n}<span className="kpi-suf">{suffix}</span></div>
      <div className="kpi-lbl">{label}</div>
    </div>
  );
}

// 云版接管 mount 时跳过本地自动 mount(window.SKIP_LOCAL_MOUNT=true)
if (!window.SKIP_LOCAL_MOUNT) {
  ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
}
window.__App = App;