/* eslint-disable */
// =============================================================
// 视图 1:全员负载(老板默认首屏)
// =============================================================
function ViewAll({ onOpen, density }) {
  const tasks = window.TASKS;
  const members = window.MEMBERS;

  const byMember = members.map(m => {
    const mine = tasks.filter(t => t.owner===m.id && U.isActive(t));
    const overdue = mine.filter(t => U.urgency(t)==='overdue').length;
    const urgent  = mine.filter(t => U.urgency(t)==='urgent').length;
    const soon    = mine.filter(t => U.urgency(t)==='soon').length;
    const stale   = mine.filter(t => U.isStale(t)).length;
    return { m, mine: U.sortByUrgency(mine), overdue, urgent, soon, stale, total: mine.length };
  });
  const maxLoad = Math.max(1, ...byMember.map(x=>x.total));

  return (
    <div className="grid">
      {byMember.map(({m, mine, overdue, urgent, soon, stale, total}) => {
        const heat = total===0 ? 'idle'
                   : overdue>0 ? 'hot'
                   : urgent>=2 ? 'warm'
                   : 'normal';
        return (
          <div className={`mcard mcard-${heat}`} key={m.id}>
            <div className="mbar" title="逾期 / 临期 / 本周 占比">
              <div style={{flex: overdue, background:'var(--c-red)'}}></div>
              <div style={{flex: urgent,  background:'var(--c-amber)'}}></div>
              <div style={{flex: soon,    background:'var(--c-amber-soft)'}}></div>
              <div style={{flex: Math.max(0,total-overdue-urgent-soon), background:'var(--c-track)'}}></div>
            </div>
            <div className="mhead">
              <Avatar id={m.id} size={32}/>
              <div className="minfo">
                <div className="mname">{m.name}</div>
                <div className="mrole">{m.role}</div>
              </div>
              <div className="mbig" title={`${total} 个活动任务`}>
                <span className="mbig-n">{total}</span>
                <span className="mbig-l">活动</span>
              </div>
            </div>
            <div className="mload" title={`相对负载 ${Math.round(total/maxLoad*100)}%`}>
              <div className="mload-fill" style={{width: (total/maxLoad*100)+'%'}}></div>
            </div>
            {(overdue+stale>0) && (
              <div className="mchips">
                {overdue>0 && <span className="mchip mchip-red">逾期 {overdue}</span>}
                {stale>0   && <span className="mchip mchip-gray">僵尸 {stale}</span>}
              </div>
            )}
            <div className="tlist">
              {mine.length===0 && <Empty type="member"/>}
              {mine.slice(0, density==='compact'?3:99).map(t => (
                <TaskRow key={t.id} task={t} dense={density==='compact'} onOpen={onOpen}/>
              ))}
              {density==='compact' && mine.length>3 && (
                <div className="more">还有 {mine.length-3} 个</div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// =============================================================
// 视图 2:我的任务(团队成员视角)
// =============================================================
function ViewMine({ asUser, onOpen }) {
  const tasks = window.TASKS.filter(t => t.owner===asUser && U.isActive(t));
  const overdue = tasks.filter(t=>U.urgency(t)==='overdue');
  const urgent  = tasks.filter(t=>U.urgency(t)==='urgent');
  const soon    = tasks.filter(t=>U.urgency(t)==='soon');
  const later   = tasks.filter(t=>U.urgency(t)==='later');
  const me = U.memberById(asUser);
  const today = [...overdue, ...urgent].slice(0,3);

  return (
    <div className="mine">
      <div className="mine-hero">
        <Avatar id={asUser} size={48}/>
        <div className="mine-greet">
          <div className="mine-hello">嗨,{me.name.replace('(负责人)','')}</div>
          <div className="mine-sum">
            手上 <b>{tasks.length}</b> 个活动任务
            {overdue.length>0 && <span className="hot"> · 逾期 {overdue.length}</span>}
            {urgent.length>0 && <span className="warn"> · 临期 {urgent.length}</span>}
          </div>
        </div>
      </div>
      <Section title="今日重点" hint="逾期 + 2 天内到期" emphasis>
        {today.length===0
          ? <Empty type="today"/>
          : today.map(t => <TaskRow key={t.id} task={t} onOpen={onOpen}/>)}
      </Section>
      <Section title={`本周到期 · ${soon.length}`}>
        {soon.length===0 ? <Empty type="empty"/> :
          soon.map(t => <TaskRow key={t.id} task={t} onOpen={onOpen}/>)}
      </Section>
      <Section title={`其余 · ${later.length}`} muted>
        {later.length===0 ? <Empty type="empty"/> :
          later.map(t => <TaskRow key={t.id} task={t} onOpen={onOpen}/>)}
      </Section>
    </div>
  );
}

// =============================================================
// 视图 3:紧急雷达(老板看危险 + 僵尸)
// =============================================================
function ViewRadar({ onOpen }) {
  const all = window.TASKS.filter(U.isActive);
  const overdue = all.filter(t=>U.urgency(t)==='overdue');
  const urgent  = all.filter(t=>U.urgency(t)==='urgent');
  const stale   = all.filter(t=>U.isStale(t));
  return (
    <div className="radar">
      <Section title={`🚨 逾期 / 阻塞 · ${overdue.length}`} emphasis>
        {overdue.length===0 ? <Empty type="ok"/> :
          U.sortByUrgency(overdue).map(t => <TaskRow key={t.id} task={t} showOwner onOpen={onOpen}/>)}
      </Section>
      <Section title={`⚡ 2 天内到期 · ${urgent.length}`}>
        {urgent.length===0 ? <Empty type="ok"/> :
          U.sortByUrgency(urgent).map(t => <TaskRow key={t.id} task={t} showOwner onOpen={onOpen}/>)}
      </Section>
      <Section title={`🧟 僵尸任务(>10 天未动)· ${stale.length}`} muted>
        {stale.length===0 ? <Empty type="ok"/> :
          stale.map(t => <TaskRow key={t.id} task={t} showOwner onOpen={onOpen}/>)}
      </Section>
    </div>
  );
}

function Section({ title, hint, children, emphasis, muted }) {
  return (
    <div className={'section ' + (emphasis?'sec-em ':'') + (muted?'sec-muted ':'')}>
      <div className="sec-head">
        <span className="sec-title">{title}</span>
        {hint && <span className="sec-hint">{hint}</span>}
      </div>
      <div className="sec-body">{children}</div>
    </div>
  );
}

function Empty({ type }) {
  const map = {
    today:  { emoji:'☀️', text:'今天没有紧急任务,稳!' },
    empty:  { emoji:'·',  text:'空' },
    ok:     { emoji:'✓',  text:'一切正常' },
    member: { emoji:'·',  text:'当前无活动任务' },
  };
  const e = map[type] || map.empty;
  return <div className="empty"><span className="empty-icon">{e.emoji}</span><span>{e.text}</span></div>;
}

Object.assign(window, { ViewAll, ViewMine, ViewRadar, Section, Empty });