import React, { useMemo, useState } from 'react';
import {
  AlertTriangle,
  CalendarClock,
  CheckCircle2,
  ChevronDown,
  ChevronUp,
  Circle,
  ClipboardList,
  Code2,
  Download,
  Flag,
  FlaskConical,
  Layers,
  MessageSquareQuote,
  Scale,
  Target,
} from 'lucide-react';
import {
  EXECUTIVE_DECISIONS,
  EXECUTIVE_KPIS,
  EXECUTIVE_SUMMARY,
  KEY_ISSUES,
  MILESTONES,
  MINOR_ISSUES,
  NEXT_WEEK_PLAN,
  REPORT_META,
  TRACK_PROGRESS,
  type ExecutiveDecision,
  type ExecutiveHealth,
  type ExecutiveKpi,
  type IssueStatus,
  type PhaseWorkItem,
  type RequirementItem,
  type RequirementPriority,
  type TrackKey,
  type TrackPhase,
  type WeeklyIssue,
} from './weekly-report-data';

const STATUS_LABEL: Record<IssueStatus, string> = {
  open: '待处理',
  in_progress: '处理中',
  resolved: '已闭环',
  pending_feedback: '待反馈',
};

const STATUS_TONE: Record<IssueStatus, string> = {
  open: 'wr-badge--gray',
  in_progress: 'wr-badge--blue',
  resolved: 'wr-badge--green',
  pending_feedback: 'wr-badge--amber',
};

const TRACK_ICON: Record<TrackKey, React.ReactNode> = {
  product: <Layers size={20} strokeWidth={2.25} aria-hidden />,
  dev: <Code2 size={20} strokeWidth={2.25} aria-hidden />,
  qa: <FlaskConical size={20} strokeWidth={2.25} aria-hidden />,
};

const MILESTONE_STATUS: Record<string, { label: string; tone: string }> = {
  on_track: { label: '正常', tone: 'wr-badge--green' },
  at_risk: { label: '有风险', tone: 'wr-badge--amber' },
  done: { label: '已完成', tone: 'wr-badge--green' },
  delayed: { label: '延期', tone: 'wr-badge--red' },
};

function WorkReportCard(props: { items: PhaseWorkItem[]; title?: string; emptyText?: string }) {
  if (!props.items.length && !props.emptyText) {
    return null;
  }
  return (
    <div className="wr-work-report">
      <h5 className="wr-work-report__title">{props.title || '工作汇报'}</h5>
      {props.items.length ? (
        <ul className="wr-work-report__list">
          {props.items.map(function (item) {
            return (
              <li key={item.id} className={'wr-work-report__item' + (item.done ? ' wr-work-report__item--done' : '')}>
                <span className="wr-work-report__icon" aria-hidden>
                  {item.done ? <CheckCircle2 size={16} strokeWidth={2.25} /> : <Circle size={16} strokeWidth={2.25} />}
                </span>
                <div className="wr-work-report__body">
                  <span className="wr-work-report__text">{item.title}</span>
                  {item.note ? <span className="wr-work-report__note">{item.note}</span> : null}
                </div>
              </li>
            );
          })}
        </ul>
      ) : (
        <p className="wr-work-report__empty">{props.emptyText}</p>
      )}
    </div>
  );
}

function requirementPriorityRank(priority: RequirementPriority): number {
  if (priority === '高优先级') {
    return 0;
  }
  if (priority === '中优先级') {
    return 1;
  }
  return 2;
}

function requirementPriorityTone(priority: RequirementPriority): string {
  if (priority === '高优先级') {
    return 'wr-req-tag--high';
  }
  if (priority === '中优先级') {
    return 'wr-req-tag--mid';
  }
  return 'wr-req-tag--low';
}

function CircularProgressRing(props: { value: number; label: string }) {
  var size = 36;
  var stroke = 3;
  var radius = (size - stroke) / 2;
  var circumference = 2 * Math.PI * radius;
  var clamped = Math.max(0, Math.min(100, props.value));
  var offset = circumference - (clamped / 100) * circumference;
  var center = size / 2;

  return (
    <svg
      className="wr-req-progress"
      width={size}
      height={size}
      viewBox={'0 0 ' + size + ' ' + size}
      role="img"
      aria-label={props.label + '，完成 ' + clamped + '%'}
    >
      <circle
        className="wr-req-progress__track"
        cx={center}
        cy={center}
        r={radius}
        fill="none"
        strokeWidth={stroke}
      />
      <circle
        className={'wr-req-progress__fill' + (clamped >= 100 ? ' wr-req-progress__fill--done' : '')}
        cx={center}
        cy={center}
        r={radius}
        fill="none"
        strokeWidth={stroke}
        strokeLinecap="round"
        strokeDasharray={circumference}
        strokeDashoffset={offset}
        transform={'rotate(-90 ' + center + ' ' + center + ')'}
      />
      <text
        className="wr-req-progress__text tabular-nums"
        x={center}
        y={center}
        dominantBaseline="middle"
        textAnchor="middle"
      >
        {clamped}%
      </text>
    </svg>
  );
}

function RequirementWorkReportCard(props: { title: string; items: RequirementItem[] }) {
  if (!props.items.length) {
    return null;
  }
  var sortedItems = [...props.items].sort(function (a, b) {
    return requirementPriorityRank(a.priority) - requirementPriorityRank(b.priority);
  });
  return (
    <div className="wr-work-report">
      <h5 className="wr-work-report__title">{props.title}</h5>
      <ul className="wr-req-list">
        {sortedItems.map(function (item) {
          return (
            <li key={item.id} className="wr-req-item">
              <CircularProgressRing value={item.progress} label={item.title} />
              <div className="wr-req-item__body">
                <div className="wr-req-item__tags">
                  <span className="wr-req-tag wr-req-tag--stage">{item.stage}</span>
                  <span className={'wr-req-tag wr-req-tag--priority ' + requirementPriorityTone(item.priority)}>
                    {item.priority}
                  </span>
                </div>
                <p className="wr-req-item__text">{item.title}</p>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

const EXEC_HEALTH_TONE: Record<ExecutiveHealth, string> = {
  green: 'wr-exec-health--green',
  amber: 'wr-exec-health--amber',
  red: 'wr-exec-health--red',
};

function ExecutiveKpiCard(props: { kpi: ExecutiveKpi }) {
  var kpi = props.kpi;
  return (
    <article className={'wr-kpi-card wr-kpi-card--' + (kpi.tone || 'default')}>
      <div className="wr-kpi-card__body">
        <div className="wr-kpi-card__value tabular-nums">{kpi.value}</div>
        <div className="wr-kpi-card__title">{kpi.label}</div>
        {kpi.hint ? <div className="wr-kpi-card__desc">{kpi.hint}</div> : null}
      </div>
    </article>
  );
}

function ExecutiveSummarySection() {
  var summary = EXECUTIVE_SUMMARY;
  return (
    <section className="wr-exec-summary" aria-labelledby="wr-exec-summary-title">
      <div className="wr-exec-summary__head">
        <div>
          <h2 id="wr-exec-summary-title" className="wr-section__title">本周执行结论</h2>
          <p className="wr-section__desc">面向管理层的一页摘要，可直接用于周会汇报</p>
        </div>
        <span className={'wr-exec-health ' + EXEC_HEALTH_TONE[summary.health]}>{summary.healthLabel}</span>
      </div>
      <p className="wr-exec-summary__headline">{summary.headline}</p>
      <div className="wr-exec-summary__grid">
        <div className="wr-exec-summary__block">
          <h3 className="wr-exec-summary__block-title">
            <CheckCircle2 size={16} strokeWidth={2.25} aria-hidden />
            本周成效
          </h3>
          <ul className="wr-exec-summary__list">
            {summary.achievements.map(function (item, index) {
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </div>
        <div className="wr-exec-summary__block wr-exec-summary__block--risk">
          <h3 className="wr-exec-summary__block-title">
            <AlertTriangle size={16} strokeWidth={2.25} aria-hidden />
            主要风险
          </h3>
          <ul className="wr-exec-summary__list">
            {summary.risks.map(function (item, index) {
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </div>
      </div>
    </section>
  );
}

function ExecutiveDecisionCard(props: { decision: ExecutiveDecision }) {
  var decision = props.decision;
  return (
    <article className={'wr-exec-decision' + (decision.urgency === 'high' ? ' wr-exec-decision--urgent' : '')}>
      <header className="wr-exec-decision__head">
        <h3 className="wr-exec-decision__title">{decision.title}</h3>
        <span className={'wr-badge ' + (decision.urgency === 'high' ? 'wr-badge--red' : 'wr-badge--amber')}>
          {decision.urgency === 'high' ? '紧急' : '一般'}
        </span>
      </header>
      <dl className="wr-exec-decision__meta">
        <div>
          <dt>业务影响</dt>
          <dd>{decision.impact}</dd>
        </div>
        <div>
          <dt>建议决策</dt>
          <dd>{decision.recommendation}</dd>
        </div>
        <div>
          <dt>期望时限</dt>
          <dd className="tabular-nums">{decision.deadline}</dd>
        </div>
      </dl>
    </article>
  );
}

function NextWeekPanel() {
  var goals = NEXT_WEEK_PLAN.filter(function (item) { return item.type === 'goal'; });
  var risks = NEXT_WEEK_PLAN.filter(function (item) { return item.type === 'risk'; });
  return (
    <div className="wr-exec-next">
      <div className="wr-exec-next__col">
        <h3 className="wr-exec-next__title">
          <Flag size={16} strokeWidth={2.25} aria-hidden />
          下周必达
        </h3>
        <ul className="wr-exec-next__list">
          {goals.map(function (item) {
            return (
              <li key={item.id} className="wr-exec-next__item">
                <strong>{item.title}</strong>
                <span>{item.detail}</span>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="wr-exec-next__col wr-exec-next__col--risk">
        <h3 className="wr-exec-next__title">
          <AlertTriangle size={16} strokeWidth={2.25} aria-hidden />
          下周风险
        </h3>
        <ul className="wr-exec-next__list">
          {risks.map(function (item) {
            return (
              <li key={item.id} className="wr-exec-next__item">
                <strong>{item.title}</strong>
                <span>{item.detail}</span>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}

function ProgressBar(props: { value: number; label: string }) {
  return (
    <div className="wr-progress" role="group" aria-label={props.label}>
      <div className="wr-progress__head">
        <span className="wr-progress__label">{props.label}</span>
        <span className="wr-progress__pct tabular-nums">{props.value}%</span>
      </div>
      <div className="wr-progress__track" aria-hidden>
        <div className="wr-progress__fill" style={{ width: props.value + '%' }} />
      </div>
    </div>
  );
}

function FourRGrid(props: { fourR: WeeklyIssue['fourR'] }) {
  return (
    <dl className="wr-four-r-grid">
      <div className="wr-four-r-item">
        <dt><Target size={15} strokeWidth={2.25} aria-hidden /> 原因</dt>
        <dd>{props.fourR.reason}</dd>
      </div>
      <div className="wr-four-r-item">
        <dt><ClipboardList size={15} strokeWidth={2.25} aria-hidden /> 措施</dt>
        <dd>{props.fourR.measure}</dd>
      </div>
      <div className="wr-four-r-item">
        <dt><CheckCircle2 size={15} strokeWidth={2.25} aria-hidden /> 结果</dt>
        <dd>{props.fourR.result}</dd>
      </div>
      <div className="wr-four-r-item wr-four-r-item--feedback">
        <dt><MessageSquareQuote size={15} strokeWidth={2.25} aria-hidden /> 反馈</dt>
        <dd>{props.fourR.feedback}</dd>
      </div>
    </dl>
  );
}

function PhaseCard(props: { phase: TrackPhase }) {
  var phase = props.phase;
  var tabs = phase.tabs || [];
  var tabState = useState(tabs[0] ? tabs[0].key : '');
  var activeTabKey = tabState[0];
  var setActiveTabKey = tabState[1];

  var activeTab = useMemo(function () {
    return tabs.find(function (t) { return t.key === activeTabKey; }) || tabs[0];
  }, [tabs, activeTabKey]);

  if (!tabs.length) {
    return (
      <article className="wr-phase-card" role="listitem">
        <h4 className="wr-phase-card__title">{phase.label}</h4>
        <div className="wr-phase-card__stats tabular-nums">
          <span><strong>{phase.done}</strong> / {phase.count}</span>
        </div>
        {phase.note ? <p className="wr-phase-card__note">{phase.note}</p> : null}
      </article>
    );
  }

  return (
    <article className="wr-phase-card" role="listitem">
      <h4 className="wr-phase-card__title">{phase.label}</h4>
      <div className="wr-phase-tabs" role="tablist" aria-label={phase.label + '分类'}>
        {tabs.map(function (tab) {
          return (
            <button
              key={tab.key}
              type="button"
              role="tab"
              aria-selected={activeTabKey === tab.key}
              className={'wr-phase-tab' + (activeTabKey === tab.key ? ' wr-phase-tab--active' : '')}
              onClick={function () { setActiveTabKey(tab.key); }}
            >
              {tab.label}
            </button>
          );
        })}
      </div>
      {activeTab ? (
        <div className="wr-phase-panel" role="tabpanel">
          {phase.key === 'prototype' && activeTab.requirementSections ? (
            activeTab.requirementSections.map(function (section) {
              return (
                <RequirementWorkReportCard
                  key={section.title}
                  title={section.title}
                  items={section.items}
                />
              );
            })
          ) : phase.key === 'prototype' ? (
            <>
              <WorkReportCard
                items={activeTab.workReport || []}
                title="PC"
                emptyText={activeTab.emptyText ?? (!(activeTab.workReport && activeTab.workReport.length) ? '无' : undefined)}
              />
              <WorkReportCard
                items={activeTab.miniProgramWorkReport || []}
                title="小程序"
                emptyText={activeTab.miniProgramEmptyText ?? '无'}
              />
            </>
          ) : (activeTab.workReport?.length || activeTab.emptyText) ? (
            <WorkReportCard
              items={activeTab.workReport || []}
              title={phase.workReportTitle}
              emptyText={activeTab.emptyText}
            />
          ) : null}
        </div>
      ) : null}
    </article>
  );
}

function PhaseModuleCards(props: { phases: TrackPhase[] }) {
  return (
    <div className="wr-phase-grid" role="list" aria-label="产品阶段模块">
      {props.phases.map(function (phase) {
        return <PhaseCard key={phase.key} phase={phase} />;
      })}
    </div>
  );
}

function TrackSummaryCard(props: {
  track: (typeof TRACK_PROGRESS)[number];
  active: boolean;
  onSelect: () => void;
}) {
  var track = props.track;
  var subLabel = track.lines ? 'OneOS · BI' : track.phases ? track.planned + ' 项需求' : null;
  return (
    <button
      type="button"
      role="tab"
      aria-selected={props.active}
      aria-controls={'wr-track-panel-' + track.key}
      id={'wr-track-tab-' + track.key}
      className={'wr-track-tab' + (props.active ? ' wr-track-tab--active' : '')}
      onClick={props.onSelect}
    >
      <span className="wr-track-tab__icon" aria-hidden>{TRACK_ICON[track.key]}</span>
      <span className="wr-track-tab__body">
        <span className="wr-track-tab__title">{track.label}</span>
        <span className="wr-track-tab__stats tabular-nums">
          计划 {track.planned} · 完成 {track.done} · 阻塞 {track.blocked}
        </span>
        {subLabel ? <span className="wr-track-tab__hint">{subLabel}</span> : null}
      </span>
    </button>
  );
}

function TrackDetailPanel(props: { track: (typeof TRACK_PROGRESS)[number] }) {
  var track = props.track;
  if (track.phases) {
    return <PhaseModuleCards phases={track.phases} />;
  }
  return (
    <div className="wr-track-detail">
      <div className="wr-track-detail__head">
        <h3 className="wr-track-detail__title">{track.label} · 详细进展</h3>
        <ProgressBar value={track.progress} label={track.label + '完成度'} />
      </div>
      {track.lines ? (
        <div className="wr-track-lines">
          {track.lines.map(function (line) {
            return (
              <div key={line.key} className="wr-track-line">
                <h4 className="wr-track-line__title">{line.label}</h4>
                <ProgressBar value={line.progress} label={line.label + '完成度'} />
                <ul className="wr-track-stats">
                  <li><span>计划</span><strong className="tabular-nums">{line.planned}</strong></li>
                  <li><span>完成</span><strong className="tabular-nums">{line.done}</strong></li>
                  <li><span>阻塞</span><strong className={'tabular-nums' + (line.blocked > 0 ? ' wr-text-warning' : '')}>{line.blocked}</strong></li>
                </ul>
                <p className="wr-track-card__highlight">{line.highlight}</p>
              </div>
            );
          })}
        </div>
      ) : (
        <>
          <ul className="wr-track-stats">
            <li><span>计划</span><strong className="tabular-nums">{track.planned}</strong></li>
            <li><span>完成</span><strong className="tabular-nums">{track.done}</strong></li>
            <li><span>阻塞</span><strong className={'tabular-nums' + (track.blocked > 0 ? ' wr-text-warning' : '')}>{track.blocked}</strong></li>
          </ul>
          {track.highlight ? <p className="wr-track-card__highlight">{track.highlight}</p> : null}
        </>
      )}
    </div>
  );
}

function KeyIssueCard(props: { issue: WeeklyIssue }) {
  var issue = props.issue;
  return (
    <article className={'wr-issue-card wr-issue-card--' + issue.priority.toLowerCase()}>
      <header className="wr-issue-card__head">
        <div className="wr-issue-card__tags">
          <span className={'wr-badge wr-badge--priority-' + issue.priority.toLowerCase()}>{issue.priority}</span>
          <span className={'wr-badge ' + STATUS_TONE[issue.status]}>{STATUS_LABEL[issue.status]}</span>
          <span className="wr-badge wr-badge--track">{issue.track === 'product' ? '产品' : issue.track === 'dev' ? '开发' : '测试'}</span>
        </div>
        <h3 className="wr-issue-card__title">{issue.title}</h3>
        <p className="wr-issue-card__meta">
          <span>{issue.module}</span>
          <span aria-hidden>·</span>
          <span>{issue.owner}</span>
          <span aria-hidden>·</span>
          <span>更新 {issue.updatedAt}</span>
        </p>
      </header>
      <FourRGrid fourR={issue.fourR} />
    </article>
  );
}

export default function WeeklyReportPage() {
  var minorOpenState = useState(false);
  var minorOpen = minorOpenState[0];
  var setMinorOpen = minorOpenState[1];

  var activeTrackState = useState<TrackKey>('product');
  var activeTrack = activeTrackState[0];
  var setActiveTrack = activeTrackState[1];

  var activeTrackData = useMemo(function () {
    return TRACK_PROGRESS.find(function (t) { return t.key === activeTrack; }) || TRACK_PROGRESS[0];
  }, [activeTrack]);

  return (
    <div className="wr-page">
      <header className="wr-hero">
        <div className="wr-hero__main">
          <p className="wr-hero__eyebrow">{REPORT_META.department} · OneOS</p>
          <h1 className="wr-hero__title">每周工作汇报</h1>
          <p className="wr-hero__sub">
            {REPORT_META.weekLabel}
            <span aria-hidden> · </span>
            {REPORT_META.weekRange}
          </p>
        </div>
        <div className="wr-hero__aside">
          <div className="wr-hero__meta">
            <span>汇报：{REPORT_META.reporter}</span>
            <span>生成：{REPORT_META.reportDate}</span>
          </div>
          <button type="button" className="wr-btn wr-btn--primary" onClick={function () { window.print(); }}>
            <Download size={16} strokeWidth={2.25} aria-hidden />
            导出 PDF
          </button>
        </div>
      </header>

      <section className="wr-kpi-row wr-kpi-row--exec" aria-label="关键指标">
        {EXECUTIVE_KPIS.map(function (item) {
          return <ExecutiveKpiCard key={item.key} kpi={item} />;
        })}
      </section>

      <ExecutiveSummarySection />

      <section className="wr-section" aria-labelledby="wr-track-title">
        <div className="wr-section__head">
          <h2 id="wr-track-title" className="wr-section__title">各条线进度</h2>
        </div>
        <div className="wr-track-switcher" role="tablist" aria-label="产品、开发、测试进度切换">
          {TRACK_PROGRESS.map(function (track) {
            return (
              <TrackSummaryCard
                key={track.key}
                track={track}
                active={activeTrack === track.key}
                onSelect={function () { setActiveTrack(track.key); }}
              />
            );
          })}
        </div>
        <div
          role="tabpanel"
          id={'wr-track-panel-' + activeTrack}
          aria-labelledby={'wr-track-tab-' + activeTrack}
          className={'wr-track-detail-wrap' + (activeTrackData.phases ? ' wr-track-detail-wrap--flat' : '')}
        >
          <TrackDetailPanel track={activeTrackData} />
        </div>
      </section>

      <section className="wr-section" aria-labelledby="wr-exec-decision-title">
        <div className="wr-section__head">
          <h2 id="wr-exec-decision-title" className="wr-section__title">
            <Scale size={20} strokeWidth={2.25} aria-hidden className="wr-section__title-icon" />
            需董事长 / 高管决策
          </h2>
          <p className="wr-section__desc">需在本周期内明确方向或授权的事项，附建议方案与时限</p>
        </div>
        <div className="wr-exec-decision-list">
          {EXECUTIVE_DECISIONS.map(function (decision) {
            return <ExecutiveDecisionCard key={decision.id} decision={decision} />;
          })}
        </div>
      </section>

      <section className="wr-section" aria-labelledby="wr-exec-next-title">
        <div className="wr-section__head">
          <h2 id="wr-exec-next-title" className="wr-section__title">
            <CalendarClock size={20} strokeWidth={2.25} aria-hidden className="wr-section__title-icon" />
            下周工作重点与风险
          </h2>
          <p className="wr-section__desc">项目经理视角的下周执行焦点</p>
        </div>
        <NextWeekPanel />
      </section>

      <section className="wr-section" aria-labelledby="wr-key-issues-title">
        <div className="wr-section__head">
          <h2 id="wr-key-issues-title" className="wr-section__title">重点问题（P0 / P1）</h2>
        </div>
        <div className="wr-issue-list">
          {KEY_ISSUES.map(function (issue) {
            return <KeyIssueCard key={issue.id} issue={issue} />;
          })}
        </div>
      </section>

      <section className="wr-section" aria-labelledby="wr-milestone-title">
        <div className="wr-section__head">
          <h2 id="wr-milestone-title" className="wr-section__title">里程碑进度</h2>
          <p className="wr-section__desc">OneOS 各模块关键节点与完成度</p>
        </div>
        <div className="wr-table-wrap">
          <table className="wr-table">
            <thead>
              <tr>
                <th scope="col">模块</th>
                <th scope="col">里程碑</th>
                <th scope="col">负责人</th>
                <th scope="col">计划完成</th>
                <th scope="col">实际完成</th>
                <th scope="col">进度</th>
                <th scope="col">状态</th>
              </tr>
            </thead>
            <tbody>
              {MILESTONES.map(function (row) {
                var st = MILESTONE_STATUS[row.status];
                return (
                  <tr key={row.id}>
                    <td>{row.module}</td>
                    <td>{row.milestone}</td>
                    <td>{row.owner}</td>
                    <td className="tabular-nums">{row.planDate}</td>
                    <td className="tabular-nums">{row.actualDate || '—'}</td>
                    <td>
                      <div className="wr-table-progress">
                        <div className="wr-progress__track wr-progress__track--sm" aria-hidden>
                          <div className="wr-progress__fill" style={{ width: row.progress + '%' }} />
                        </div>
                        <span className="tabular-nums">{row.progress}%</span>
                      </div>
                    </td>
                    <td><span className={'wr-badge ' + st.tone}>{st.label}</span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </section>

      <section className="wr-section wr-section--minor" aria-labelledby="wr-minor-title">
        <button
          type="button"
          className="wr-minor-toggle"
          aria-expanded={minorOpen}
          aria-controls="wr-minor-panel"
          onClick={function () { setMinorOpen(!minorOpen); }}
        >
          <div className="wr-section__head wr-section__head--inline">
            <h2 id="wr-minor-title" className="wr-section__title">次要问题（P2）</h2>
            <p className="wr-section__desc">共 {MINOR_ISSUES.length} 项 · 仅统计与简要列表，不展开四要素</p>
          </div>
          {minorOpen ? <ChevronUp size={22} strokeWidth={2.25} aria-hidden /> : <ChevronDown size={22} strokeWidth={2.25} aria-hidden />}
        </button>
        {minorOpen ? (
          <div id="wr-minor-panel" className="wr-table-wrap">
            <table className="wr-table wr-table--compact">
              <thead>
                <tr>
                  <th scope="col">编号</th>
                  <th scope="col">模块</th>
                  <th scope="col">问题</th>
                  <th scope="col">条线</th>
                  <th scope="col">负责人</th>
                  <th scope="col">状态</th>
                  <th scope="col">更新</th>
                </tr>
              </thead>
              <tbody>
                {MINOR_ISSUES.map(function (issue) {
                  return (
                    <tr key={issue.id}>
                      <td className="tabular-nums">{issue.id}</td>
                      <td>{issue.module}</td>
                      <td>{issue.title}</td>
                      <td>{issue.track === 'product' ? '产品' : issue.track === 'dev' ? '开发' : '测试'}</td>
                      <td>{issue.owner}</td>
                      <td><span className={'wr-badge ' + STATUS_TONE[issue.status]}>{STATUS_LABEL[issue.status]}</span></td>
                      <td className="tabular-nums">{issue.updatedAt}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        ) : (
          <div id="wr-minor-panel" className="wr-minor-summary" aria-live="polite">
            {MINOR_ISSUES.map(function (issue) {
              return (
                <span key={issue.id} className="wr-minor-chip">
                  {issue.module}：{issue.title.slice(0, 12)}{issue.title.length > 12 ? '…' : ''}
                </span>
              );
            })}
          </div>
        )}
      </section>

      <footer className="wr-footer">
        <p>OneOS 数智部 · 每周汇报 · 数据为原型演示，正式环境对接项目管理与缺陷平台</p>
      </footer>
    </div>
  );
}
