/* 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 done    = window.TASKS
    .filter(t => t.owner===asUser && t.status==='done')
    .sort((a,b) => (a.updatedAt||0) - (b.updatedAt||0));
  // 暂缓任务也单独亮一下(彭韬给挂起的),让本人知道为什么不在活动列表
  const paused  = window.TASKS.filter(t => t.owner===asUser && t.status==='paused');
  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>}
            {done.length>0   && <span className="ok"> · 已完成 {done.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>
      {paused.length>0 && (
        <Section title={`暂缓 · ${paused.length}`} hint="由彭韬挂起" muted>
          {paused.map(t => <TaskRow key={t.id} task={t} onOpen={onOpen}/>)}
        </Section>
      )}
      <Section title={`已完成 · ${done.length}`} hint="历史归档,默认按更新时间倒序" muted>
        {done.length===0 ? <Empty type="empty"/> :
          done.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>
  );
}

// =============================================================
// 视图 4:团队活跃度(老板每日体检 · 谁今天有动、谁拖着不动)
// 数据来源:task_updates 表里过去 30 天的所有操作记录
// =============================================================
function ViewPulse({ onPickMember }) {
  const [activity, setActivity] = React.useState(null);
  const [err, setErr] = React.useState(null);

  React.useEffect(() => {
    if (!window.SB?.fetchActivity) {
      setErr('当前环境没有云端连接,活跃度视图仅在云协作版可用');
      return;
    }
    let alive = true;
    window.SB.fetchActivity(30).then(d => { if (alive) setActivity(d); })
      .catch(e => { if (alive) setErr(e.message || String(e)); });
    return () => { alive = false; };
  }, []);

  if (err) return <div className="pulse-err">加载活跃度失败:{err}</div>;
  if (!activity) return <div className="pulse-loading">加载团队活跃度…</div>;

  const now = Date.now();
  const dayMs = 86400000;

  // 按成员聚合
  const stats = window.MEMBERS.map(m => {
    const mine = activity.filter(a => a.member_id === m.id);
    const todayCount = mine.filter(a => now - new Date(a.created_at).getTime() < dayMs).length;
    const weekCount  = mine.filter(a => now - new Date(a.created_at).getTime() < 7 * dayMs).length;
    const monthCount = mine.length;
    const last = mine[0]; // 已按时间倒序
    const lastMs = last ? new Date(last.created_at).getTime() : null;
    const daysSinceLast = lastMs === null ? Infinity : Math.max(0, (now - lastMs) / dayMs);
    return { m, todayCount, weekCount, monthCount, lastMs, daysSinceLast };
  });

  // 默认排序:最久没动的排最前(老板视角想第一眼看到掉队的)
  stats.sort((a, b) => b.daysSinceLast - a.daysSinceLast);

  function lastLabel(s) {
    if (s.lastMs === null) return '过去 30 天未动';
    const diffMin = (now - s.lastMs) / 60000;
    if (diffMin < 1)    return '刚刚';
    if (diffMin < 60)   return Math.round(diffMin) + ' 分钟前';
    if (diffMin < 1440) return Math.round(diffMin / 60) + ' 小时前';
    return Math.round(diffMin / 1440) + ' 天前';
  }
  function heatClass(s) {
    if (s.lastMs === null) return 'pulse-idle';
    if (s.daysSinceLast < 1)  return 'pulse-green';
    if (s.daysSinceLast <= 3) return 'pulse-yellow';
    return 'pulse-red';
  }

  const totalToday  = stats.reduce((sum, s) => sum + s.todayCount, 0);
  const activeToday = stats.filter(s => s.todayCount > 0).length;
  const stalled     = stats.filter(s => s.daysSinceLast > 3).length;

  return (
    <div className="pulse">
      <div className="pulse-head">
        <div className="pulse-title">
          <span>团队活跃度</span>
          <span className="pulse-sub">过去 30 天内所有任务操作 · 进度笔记 + 状态变更 + 转交 + 协助调整</span>
        </div>
        <div className="pulse-kpi">
          <span className="pulse-kpi-item"><b>{activeToday}</b><span>/ {stats.length} 今日活跃</span></span>
          <span className="pulse-kpi-item"><b>{totalToday}</b><span>今日操作总数</span></span>
          <span className={`pulse-kpi-item ${stalled > 0 ? 'hot' : ''}`}><b>{stalled}</b><span>超 3 天没动</span></span>
        </div>
      </div>
      <div className="pulse-grid">
        {stats.map(s => (
          <div className={`pulse-row ${heatClass(s)}`}
               key={s.m.id}
               onClick={() => onPickMember && onPickMember(s.m.id)}
               title={onPickMember ? `点击查看 ${s.m.name} 的任务` : ''}>
            <div className="pulse-dot"></div>
            <Avatar id={s.m.id} size={32}/>
            <div className="pulse-who">
              <div className="pulse-mname">{s.m.name}</div>
              <div className="pulse-mrole">{s.m.role}</div>
            </div>
            <div className="pulse-counts">
              <span className="pulse-c-today">今天 +{s.todayCount}</span>
              <span className="pulse-c-week">本周 +{s.weekCount}</span>
              <span className="pulse-c-month">30 天 +{s.monthCount}</span>
            </div>
            <div className="pulse-last">{lastLabel(s)}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// =============================================================
// 视图 5:周月报表(谁干了多少 · 完成了什么 · 新建了什么)
// 本周 = 过去 7 天;本月 = 过去 30 天
// =============================================================
function ViewReports({ onOpen, onPickMember }) {
  const [period, setPeriod] = React.useState('week');
  const [activity, setActivity] = React.useState(null);
  const [err, setErr] = React.useState(null);

  const days = period === 'week' ? 7 : 30;
  const periodLabel = period === 'week' ? '本周' : '本月';

  React.useEffect(() => {
    if (!window.SB?.fetchActivity) {
      setErr('当前环境没有云端连接,报表仅在云协作版可用');
      return;
    }
    let alive = true;
    setActivity(null);
    window.SB.fetchActivity(days).then(d => { if (alive) setActivity(d); })
      .catch(e => { if (alive) setErr(e.message || String(e)); });
    return () => { alive = false; };
  }, [days]);

  if (err) return <div className="rep-err">加载报表失败:{err}</div>;
  if (!activity) return <div className="rep-loading">加载{periodLabel}报表…</div>;

  const tasksMap = new Map((window.TASKS || []).map(t => [t.id, t]));
  // KPI 计算
  const totalOps = activity.length;
  const completedRows = activity.filter(a => a.kind === 'status' && a.new_value === 'done');
  const completedTaskIds = Array.from(new Set(completedRows.map(a => a.task_id)));
  const createdRows = activity.filter(a => a.kind === 'create');
  const createdTaskIds = Array.from(new Set(createdRows.map(a => a.task_id)));
  const progressCount = activity.filter(a => a.kind === 'progress').length;
  const statusCount   = activity.filter(a => a.kind === 'status').length;
  const transferCount = activity.filter(a => a.kind === 'transfer').length;
  const revokeCount   = activity.filter(a => a.kind === 'revoke').length;
  const editCount     = activity.filter(a => a.kind === 'edit').length;
  const deleteCount   = activity.filter(a => a.kind === 'delete').length;

  // 成员明细
  const byMember = (window.MEMBERS || []).map(m => {
    const mine = activity.filter(a => a.member_id === m.id);
    return {
      m,
      total: mine.length,
      progress: mine.filter(a => a.kind === 'progress').length,
      status:   mine.filter(a => a.kind === 'status').length,
      created:  mine.filter(a => a.kind === 'create').length,
      completedByMe: mine.filter(a => a.kind === 'status' && a.new_value === 'done').length,
    };
  }).filter(x => x.total > 0);
  byMember.sort((a, b) => b.total - a.total);

  // Top 3 最活跃
  const top3 = byMember.slice(0, 3);
  const topPerson = top3[0];

  // 日期范围标签
  const now = new Date();
  const from = new Date(now.getTime() - days * 86400000);
  const fmtDate = d => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;

  return (
    <div className="rep">
      <div className="rep-head">
        <div className="rep-toggle">
          <button className={period==='week'  ? 'on' : ''} onClick={()=>setPeriod('week')}>本周(过去 7 天)</button>
          <button className={period==='month' ? 'on' : ''} onClick={()=>setPeriod('month')}>本月(过去 30 天)</button>
        </div>
        <div className="rep-range">
          {fmtDate(from)} → {fmtDate(now)}
        </div>
      </div>

      {/* ---- KPI 卡 ---- */}
      <div className="rep-kpi-row">
        <div className="rep-kpi">
          <div className="rep-kpi-n">{createdTaskIds.length}</div>
          <div className="rep-kpi-l">{periodLabel}新建任务</div>
        </div>
        <div className="rep-kpi rep-kpi-done">
          <div className="rep-kpi-n">{completedTaskIds.length}</div>
          <div className="rep-kpi-l">{periodLabel}完成任务</div>
        </div>
        <div className="rep-kpi">
          <div className="rep-kpi-n">{progressCount}</div>
          <div className="rep-kpi-l">进度笔记</div>
        </div>
        <div className="rep-kpi">
          <div className="rep-kpi-n">{statusCount}</div>
          <div className="rep-kpi-l">状态变更</div>
        </div>
        <div className="rep-kpi">
          <div className="rep-kpi-n">{totalOps}</div>
          <div className="rep-kpi-l">操作总数</div>
        </div>
        <div className="rep-kpi rep-kpi-star">
          <div className="rep-kpi-n">
            {topPerson ? (topPerson.m.short || topPerson.m.name) : '—'}
          </div>
          <div className="rep-kpi-l">{periodLabel}最活跃 {topPerson ? `(+${topPerson.total})` : ''}</div>
        </div>
      </div>

      {(transferCount + revokeCount + editCount + deleteCount > 0) && (
        <div className="rep-mini-stats">
          {transferCount > 0 && <span>转交 <b>{transferCount}</b> 次</span>}
          {revokeCount > 0   && <span>撤回完成 <b>{revokeCount}</b> 次</span>}
          {editCount > 0     && <span>任务编辑 <b>{editCount}</b> 次</span>}
          {deleteCount > 0   && <span>任务删除 <b>{deleteCount}</b> 次</span>}
        </div>
      )}

      {/* ---- 成员明细 ---- */}
      <Section title={`成员明细 · ${byMember.length} 人${periodLabel}有操作`}>
        {byMember.length === 0 ? <Empty type="empty"/> : (
          <div className="rep-table">
            <div className="rep-tr rep-thead">
              <span className="rep-th-who">成员</span>
              <span className="rep-th-n">总操作</span>
              <span className="rep-th-n">写进度</span>
              <span className="rep-th-n">改状态</span>
              <span className="rep-th-n">完成数</span>
              <span className="rep-th-n">新建数</span>
            </div>
            {byMember.map((s, i) => (
              <div key={s.m.id} className="rep-tr"
                   onClick={() => onPickMember && onPickMember(s.m.id)}
                   title={onPickMember ? `查看 ${s.m.name} 的任务` : ''}>
                <span className="rep-td-who">
                  <span className="rep-rank">{i+1}</span>
                  <Avatar id={s.m.id} size={22}/>
                  <span>{s.m.name}</span>
                </span>
                <span className="rep-td-n rep-strong">{s.total}</span>
                <span className="rep-td-n">{s.progress}</span>
                <span className="rep-td-n">{s.status}</span>
                <span className="rep-td-n">{s.completedByMe || ''}</span>
                <span className="rep-td-n">{s.created || ''}</span>
              </div>
            ))}
          </div>
        )}
      </Section>

      {/* ---- 完成任务列表 ---- */}
      <Section title={`✓ ${periodLabel}完成 · ${completedTaskIds.length} 条`}>
        {completedTaskIds.length === 0 ? <Empty type="empty"/> : (
          <div className="rep-task-list">
            {completedRows
              .filter((row, idx, arr) => arr.findIndex(r => r.task_id === row.task_id) === idx)
              .map(row => {
                const t = tasksMap.get(row.task_id);
                const by = U.memberById(row.member_id);
                return (
                  <div key={row.task_id} className="rep-task-row"
                       onClick={() => t && onOpen && onOpen(t)}
                       title={t ? `点击查看任务` : '此任务已被删除或不在当前看板'}>
                    <span className="rep-task-id">{(row.task_id||'').toUpperCase()}</span>
                    <span className="rep-task-name">{t?.name || '(任务已删除)'}</span>
                    <span className="rep-task-by"><Avatar id={row.member_id} size={18}/>{by?.name || row.member_id}</span>
                    <span className="rep-task-at">{new Date(row.created_at).toLocaleDateString('zh-CN')}</span>
                  </div>
                );
              })}
          </div>
        )}
      </Section>

      {/* ---- 新建任务列表 ---- */}
      <Section title={`+ ${periodLabel}新建 · ${createdTaskIds.length} 条`} muted>
        {createdTaskIds.length === 0 ? <Empty type="empty"/> : (
          <div className="rep-task-list">
            {createdRows.map(row => {
              const t = tasksMap.get(row.task_id);
              const by = U.memberById(row.member_id);
              return (
                <div key={row.task_id} className="rep-task-row"
                     onClick={() => t && onOpen && onOpen(t)}
                     title={t ? `点击查看任务` : ''}>
                  <span className="rep-task-id">{(row.task_id||'').toUpperCase()}</span>
                  <span className="rep-task-name">{t?.name || '(任务已删除)'}</span>
                  <span className="rep-task-by"><Avatar id={row.member_id} size={18}/>{by?.name || row.member_id}</span>
                  <span className="rep-task-at">{new Date(row.created_at).toLocaleDateString('zh-CN')}</span>
                </div>
              );
            })}
          </div>
        )}
      </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, ViewPulse, ViewReports, Section, Empty });