import { useEffect, useRef, useState } from 'react';
import Button from '../../components/Button';
import { exportApi, errMsg } from '../../api';
import { exportToExcel, exportTableToImage, utc8DateStamp, utc8DateTimeStamp } from '../../utils/export';
import type { FourHourExportHistoryItem, FourHourPreviewResult } from '../../types';
import {
  IconFourHour,
  IconFileExcel,
  IconFileImage,
  IconEye,
  IconCheck,
  IconUsers,
  IconClock,
  IconUndo,
  IconHistory,
} from '../../components/Icons';

function MiniTable({ heads, rows }: { heads: string[]; rows: any[][] }) {
  return (
    <div className="w-full overflow-x-auto border border-gray-200 bg-white rounded-lg">
      <table className="w-full text-sm border-collapse">
        <thead>
          <tr className="bg-gray-100 border-b border-gray-200">
            {heads.map((h, i) => (
              <th key={i} className="px-3 py-2.5 text-left font-semibold whitespace-nowrap text-gray-800">
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, ri) => (
            <tr key={ri} className={`border-b border-gray-200 ${ri % 2 ? 'bg-gray-50' : 'bg-white'} hover:bg-primary-50 transition-colors`}>
              {r.map((c, ci) => (
                <td key={ci} className="px-3 py-2 whitespace-nowrap text-gray-700">
                  {c}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function CellHours({ v, truncated, remark }: { v: number; truncated: boolean; remark?: string }) {
  const numStr = v > 0 ? Number(v).toFixed(1) : '—';
  const color = v > 0 ? 'text-primary-700 font-semibold bg-primary-50/40' : 'text-gray-400';
  return (
    <div className="leading-snug text-xs" style={{ minWidth: 180, verticalAlign: 'top' }}>
      <div className={`text-sm font-semibold ${v > 0 ? 'text-primary-700' : 'text-gray-400'}`}>
        {numStr}
        {truncated ? (
          <span className="ml-1.5 text-[11px] font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded px-1.5 py-0.5 align-middle tracking-wide">
            截断
          </span>
        ) : null}
      </div>
      {remark ? (
        <div className="mt-1.5 mx-auto max-w-[88%] text-[11px] font-normal text-gray-500 text-left bg-white/95 rounded-sm border border-gray-200/80 px-2 py-1 leading-relaxed break-words shadow-[0_1px_2px_rgba(15,23,42,0.04)]" title={remark}>
          {remark}
        </div>
      ) : null}
    </div>
  );
}

export default function FourHourExport() {
  const [loading, setLoading] = useState(false);
  const [confirming, setConfirming] = useState(false);
  const [preview, setPreview] = useState<FourHourPreviewResult | null>(null);
  const [confirmedMsg, setConfirmedMsg] = useState<string | null>(null);
  const [history, setHistory] = useState<FourHourExportHistoryItem[]>([]);
  const [historyLoading, setHistoryLoading] = useState(false);
  const [voidingId, setVoidingId] = useState<number | null>(null);
  const previewRef = useRef<HTMLDivElement>(null);

  const loadHistory = () => {
    setHistoryLoading(true);
    (async () => {
      try {
        const r = await exportApi.fourHourHistory();
        setHistory(Array.isArray(r?.list) ? r.list : []);
      } catch (e) {
        console.error(e);
      } finally {
        setHistoryLoading(false);
      }
    })();
  };

  useEffect(() => {
    loadHistory();
  }, []);

  const loadPreview = () => {
    setLoading(true);
    setConfirmedMsg(null);
    (async () => {
      try {
        const d = await exportApi.fourHourPreview();
        setPreview(d);
      } catch (e) {
        alert(errMsg(e));
      } finally {
        setLoading(false);
      }
    })();
  };

  const doConfirm = () => {
    if (!preview || !preview.confirm_plan?.length) {
      alert('无可确认的导出记录，请先生成预览');
      return;
    }
    const msg =
      `确认后将把本次预览显示的 ${preview.summary.eligible_count} 位部员合计 ` +
      `${Number(preview.summary.eligible_hours_total).toFixed(1)}h 标记为「已通过四小时导出核销」，\n` +
      `下次四小时导出时不会再重复计算这些时长。\n\n` +
      `注：原始义工时登记不会改变，仅影响「四小时导出」功能本身。\n\n` +
      `是否继续？`;
    if (!window.confirm(msg)) return;
    setConfirming(true);
    (async () => {
      try {
        const r = await exportApi.fourHourConfirm(preview.confirm_plan, {
          eligible_count: preview.summary.eligible_count,
          eligible_hours_total: preview.summary.eligible_hours_total,
        });
        if (r?.ok) {
          const msg2 =
            `确认成功！\n\n` +
            `批次编号：#${r.export_id || '—'}\n` +
            `计划处理明细条数：${r.total_processed}\n` +
            `实际更新成功：${r.updated}\n` +
            `跳过（并发冲突/已结算）：${r.skipped}\n` +
            `本次实际核销合计：${Number(r.total_applied || 0).toFixed(1)} h\n\n` +
            `请点击下方「重新生成预览」以查看核销后的最新数据。`;
          setConfirmedMsg(msg2);
          alert(msg2);
          loadHistory();
        } else {
          alert('确认失败：服务器未返回成功状态');
        }
      } catch (e) {
        alert(errMsg(e));
      } finally {
        setConfirming(false);
      }
    })();
  };

  const doVoid = (it: FourHourExportHistoryItem) => {
    const prefix =
      `即将撤回批次 #${it.id}（${String(it.created_at || '').slice(0, 19)}）\n` +
      `该批次：${it.eligible_count} 人 / ${Number(it.eligible_hours_total || 0).toFixed(1)} h / ${it.items_updated} 条明细\n` +
      `操作人：${it.admin_username || '—'}\n\n` +
      `撤回后将：\n` +
      ` 1. 把该批次核销掉的小时数逐条加回「未核销余额」；\n` +
      ` 2. 标记该批次状态为 voided（不可再次撤回）。\n\n` +
      `请在输入框内输入 "撤回批次 #${it.id}"（不含引号）以继续。`;
    const input = window.prompt(prefix, '');
    if (input === null) return;
    if (input.trim() !== `撤回批次 #${it.id}`) {
      alert('确认文本不匹配，已取消');
      return;
    }
    setVoidingId(it.id);
    (async () => {
      try {
        const r = await exportApi.fourHourVoid(it.id);
        if (r?.ok) {
          alert(
            `撤回成功！\n\n` +
            `批次：#${r.export_id}\n` +
            `成功回退明细：${r.rolled}\n` +
            `跳过：${r.skipped}\n` +
            `累计回退小时数：${Number(r.rolled_hours || 0).toFixed(1)} h`
          );
          loadHistory();
          if (preview) loadPreview();
        }
      } catch (e) {
        alert(errMsg(e));
      } finally {
        setVoidingId(null);
      }
    })();
  };

  const eligibleCount = preview?.summary?.eligible_count || 0;
  const eligibleHours = Number(preview?.summary?.eligible_hours_total || 0).toFixed(1);

  const doExcel = () => {
    if (!preview) { alert('请先生成预览'); return; }
    const sheets: Parameters<typeof exportToExcel>[0] = [];

    const flatRows = (preview.hours || []).map((h: any, i: number) => {
      const hoursTxt = Number(h.hours || 0).toFixed(1) + (h.truncated ? '（截断）' : '');
      return {
        '序号': i + 1,
        '班级': h.class,
        '姓名': h.name,
        '义工号': h.volunteer_no || '-',
        '工作组': h.group_name || '-',
        '活动名称': h.activity_title,
        '活动时间': String(h.activity_start_time || '').replace('T', ' ').slice(0, 16),
        '本次计时长(小时)': hoursTxt,
        '备注': h.remark || '-',
      };
    });
    sheets.push({ name: '总合明细（4h核销）', data: flatRows });

    if (preview.user_totals?.length) {
      sheets.push({
        name: '部员核销汇总',
        data: preview.user_totals.map((u: any) => ({
          '排名': u.rank,
          '班级': u.class,
          '姓名': u.name,
          '义工号': u.volunteer_no || '-',
          '工作组': u.group_name || '-',
          '本次核销(h)': Number(u.exported_total || 0).toFixed(1),
          '核销后剩余未导出(h)': Number(u.unexported_remaining || 0).toFixed(1),
        })),
      });
    }

    if (preview.activity_matrix?.activities?.length && preview.activity_matrix?.users?.length) {
      const { activities, users } = preview.activity_matrix;
      const data = users.map((u: any) => {
        const row: any = { '部员': u.name, '义工号': u.volunteer_no || '-' };
        for (const a of activities) {
          const h = Number(u[String(a.id)] || 0);
          const rmk = (u as any)?._remarks?.[String(a.id)] as string | undefined;
          const tr = (u as any)?._truncated?.[String(a.id)] as boolean | undefined;
          let cell = h > 0 ? h.toFixed(1) : '—';
          if (tr) cell = cell + '（截断）';
          if (rmk) cell = cell + '\n备注：' + rmk;
          row[a.title] = cell;
        }
        row['本次核销合计'] = Number(u._total || 0).toFixed(1);
        return row;
      });
      const firstAct = preview.activity_matrix.activities[0];
      sheets.push({
        name: '活动矩阵（4h核销）',
        data,
        hint: firstAct ? {
          matrixColStart: String(firstAct.title),
          matrixColEnd: '本次核销合计',
        } : undefined,
      });
    }

    exportToExcel(sheets, `义工时长-四小时导出-${utc8DateStamp()}.xlsx`);
  };

  const doImage = async () => {
    if (!previewRef.current) return;
    await exportTableToImage(previewRef.current, `义工时长-四小时导出-${utc8DateStamp()}.png`);
  };

  return (
    <div className="space-y-6">
      <header className="mb-2">
        <div className="flex items-start gap-3">
          <div className="shrink-0 p-3 bg-primary-50 text-primary-600 rounded-lg shadow-sm">
            <IconFourHour size={28} />
          </div>
          <div className="flex-1">
            <h1 className="section-title">四小时导出核销</h1>
            <p className="muted mt-1 leading-relaxed">
              按部员维度：每位部员「尚未核销的累计义工时」≥ 4h 即列入当次导出。
              单次活动若剩余时长超过 4h，显示时自动截断为 4.0（并标注「截断」），但原始登记时长不变。
              点击「确认核销」后，本次合计小时数将写入核销记录，下次自动扣除、不会重复统计。
            </p>
          </div>
        </div>
      </header>

      <section className="card p-4 md:p-5 bg-gradient-to-r from-primary-50/60 to-white border border-primary-100">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-5">
          <div className="flex items-center gap-3 md:gap-4">
            <div className="shrink-0 w-11 h-11 rounded-lg bg-white border border-primary-200 text-primary-600 grid place-items-center shadow-sm">
              <IconUsers size={22} />
            </div>
            <div>
              <div className="text-xs text-gray-500 tracking-wide">当次达标部员</div>
              <div className="text-2xl font-bold text-primary-700 leading-tight">
                {preview ? eligibleCount : '—'}
                <span className="ml-1 text-sm font-medium text-gray-500">人</span>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-3 md:gap-4">
            <div className="shrink-0 w-11 h-11 rounded-lg bg-white border border-primary-200 text-primary-600 grid place-items-center shadow-sm">
              <IconClock size={22} />
            </div>
            <div>
              <div className="text-xs text-gray-500 tracking-wide">当次核销总小时数</div>
              <div className="text-2xl font-bold text-primary-700 leading-tight">
                {preview ? eligibleHours : '—'}
                <span className="ml-1 text-sm font-medium text-gray-500">h</span>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-3 md:gap-4">
            <div className="shrink-0 w-11 h-11 rounded-lg bg-white border border-primary-200 text-primary-600 grid place-items-center shadow-sm">
              <IconCheck size={22} />
            </div>
            <div>
              <div className="text-xs text-gray-500 tracking-wide">核销状态</div>
              <div className="text-base md:text-lg font-semibold leading-tight mt-0.5">
                {!preview ? (
                  <span className="text-gray-500">尚未生成预览</span>
                ) : confirmedMsg ? (
                  <span className="text-emerald-700">已确认核销</span>
                ) : (
                  <span className="text-amber-700">已预览 · 待确认</span>
                )}
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mt-5 pt-4 border-t border-primary-100/70">
          <div className="muted text-sm">
            建议流程：<span className="font-semibold text-gray-700">生成预览 → 核对数据 → 导出 Excel/图片留档 → 确认核销</span>。
          </div>
          <div className="flex gap-2 flex-wrap justify-end">
            <Button variant="secondary" onClick={loadPreview} disabled={loading}>
              <span className="inline-flex items-center gap-2">
                <IconEye size={18} />
                {loading ? '生成中...' : (preview ? '重新生成预览' : '生成预览')}
              </span>
            </Button>
            <Button variant="secondary" onClick={doExcel} disabled={!preview}>
              <span className="inline-flex items-center gap-2"><IconFileExcel size={18} />导出 Excel</span>
            </Button>
            <Button variant="secondary" onClick={doImage} disabled={!preview}>
              <span className="inline-flex items-center gap-2"><IconFileImage size={18} />导出为图片</span>
            </Button>
            <Button onClick={doConfirm} disabled={!preview || confirming || !!confirmedMsg}>
              <span className="inline-flex items-center gap-2">
                <IconCheck size={18} />
                {confirming ? '确认中...' : '确认核销（写入记录）'}
              </span>
            </Button>
          </div>
        </div>
      </section>

      {confirmedMsg ? (
        <div className="card p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm leading-relaxed whitespace-pre-line">
          {confirmedMsg}
        </div>
      ) : null}

      <section className="card p-4 md:p-5">
        <div className="flex items-start justify-between gap-3 flex-wrap mb-4">
          <div className="inline-flex items-center gap-2">
            <div className="shrink-0 p-2.5 bg-gray-50 text-primary-600 rounded-lg border border-gray-200 shadow-sm">
              <IconHistory size={20} />
            </div>
            <div>
              <h3 className="font-semibold text-lg text-gray-800 leading-tight">核销批次历史</h3>
              <p className="muted text-sm mt-0.5">
                最近 {Math.min(200, history.length || 0)} 条 · 状态为「active」的批次可一键撤回（把小时数加回未核销余额）
              </p>
            </div>
          </div>
          <Button variant="secondary" size="sm" onClick={loadHistory} disabled={historyLoading}>
            <span className="inline-flex items-center gap-2">
              <IconHistory size={16} />
              {historyLoading ? '刷新中...' : '刷新历史'}
            </span>
          </Button>
        </div>
        {history.length === 0 ? (
          <div className="py-10 text-center text-sm text-gray-500 border border-dashed border-gray-200 rounded-lg bg-gray-50/50">
            暂无核销批次记录
          </div>
        ) : (
          <div className="overflow-x-auto border border-gray-200 rounded-lg bg-white">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-100 border-b border-gray-200">
                  {['批次', '时间', '状态', '操作人', '达标部员', '核销合计', '明细条数', '撤回时间', '操作'].map((h) => (
                    <th key={h} className="px-3 py-2.5 text-left font-semibold whitespace-nowrap text-gray-800">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {history.map((it, i) => {
                  const isVoided = it.status === 'voided';
                  return (
                    <tr
                      key={it.id}
                      className={`border-b border-gray-200 ${i % 2 ? 'bg-gray-50' : 'bg-white'} hover:bg-primary-50 transition-colors`}
                    >
                      <td className="px-3 py-2 whitespace-nowrap font-mono text-xs text-gray-600">#{it.id}</td>
                      <td className="px-3 py-2 whitespace-nowrap">{String(it.created_at || '').slice(0, 19)}</td>
                      <td className="px-3 py-2 whitespace-nowrap">
                        {isVoided ? (
                          <span className="text-xs font-medium text-gray-600 bg-gray-100 border border-gray-200 rounded px-2 py-0.5">
                            已撤回
                          </span>
                        ) : (
                          <span className="text-xs font-medium text-emerald-700 bg-emerald-50 border border-emerald-200 rounded px-2 py-0.5">
                            active
                          </span>
                        )}
                      </td>
                      <td className="px-3 py-2 whitespace-nowrap">{it.admin_username || '—'}</td>
                      <td className="px-3 py-2 whitespace-nowrap text-center font-medium">{it.eligible_count}</td>
                      <td className="px-3 py-2 whitespace-nowrap text-center font-semibold text-primary-700">
                        {Number(it.eligible_hours_total || 0).toFixed(1)} h
                      </td>
                      <td className="px-3 py-2 whitespace-nowrap text-center">{it.items_updated}</td>
                      <td className="px-3 py-2 whitespace-nowrap text-xs text-gray-500">
                        {isVoided ? String(it.voided_at || '').slice(0, 19) : '—'}
                      </td>
                      <td className="px-3 py-2 whitespace-nowrap">
                        <Button
                          size="sm"
                          variant={isVoided ? 'ghost' : 'danger'}
                          disabled={!it.can_void || voidingId === it.id}
                          onClick={() => doVoid(it)}
                          className="!px-3"
                        >
                          <span className="inline-flex items-center gap-1.5">
                            <IconUndo size={15} />
                            {voidingId === it.id ? '撤回中...' : '撤回'}
                          </span>
                        </Button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </section>

      {preview ? (
        <div ref={previewRef} className="card bg-white p-3 md:p-6 space-y-8">
          <div className="border-b border-gray-200 pb-4 text-center">
            <div className="text-xl md:text-2xl font-semibold tracking-tight text-gray-800">
              宣传部义工时长记录系统 · 四小时导出核销报告
            </div>
            <div className="muted mt-1.5">
              达标部员 {preview.summary.eligible_count} 人 · 本次核销合计 {Number(preview.summary.eligible_hours_total).toFixed(1)}h
              {' | '}生成时间：{utc8DateTimeStamp()}
            </div>
          </div>

          {preview.hours?.length ? (
            <section className="animate-fade-in-up">
              <h3 className="font-semibold text-lg mb-3 border-l-4 border-primary-500 pl-3 inline-flex items-center gap-2 text-gray-800">
                <span className="chip-primary">A</span>
                四小时核销 · 总合明细平铺（{preview.hours.length} 条）
              </h3>
              <div className="text-xs text-gray-500 mb-2 leading-relaxed">
                每行对应「部员 × 活动」的本次核销小时数，超过单条上限 4h 的单元格会标注「截断」，剩余未核销部分留待下次四小时导出继续统计。
              </div>
              <MiniTable
                heads={['序号', '班级', '姓名', '义工号', '工作组', '活动名称', '活动时间', '本次核销(h)', '备注']}
                rows={preview.hours.map((h: any, i) => [
                  i + 1,
                  h.class,
                  h.name,
                  <span key="vn" className="font-mono text-[12px] tracking-wider text-gray-700">{h.volunteer_no || '-'}</span>,
                  h.group_name || '-',
                  h.activity_title,
                  String(h.activity_start_time || '').replace('T', ' ').slice(0, 16),
                  <span key="h" className="inline-flex items-center gap-1.5">
                    <span className={h.truncated ? 'text-amber-700 font-semibold' : 'text-primary-700 font-semibold'}>
                      {Number(h.hours || 0).toFixed(1)}
                    </span>
                    {h.truncated ? (
                      <span className="text-[11px] font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded px-1.5 py-0.5">
                        截断
                      </span>
                    ) : null}
                  </span>,
                  h.remark || '-',
                ])}
              />
            </section>
          ) : null}

          {preview.user_totals?.length ? (
            <section className="animate-fade-in-up">
              <h3 className="font-semibold text-lg mb-3 border-l-4 border-primary-500 pl-3 inline-flex items-center gap-2 text-gray-800">
                <span className="chip-primary">B</span>
                部员核销汇总（{preview.user_totals.length} 人）
              </h3>
              <MiniTable
                heads={['排名', '班级', '姓名', '义工号', '工作组', '本次核销(h)', '核销后剩余未导出(h)']}
                rows={preview.user_totals.map((u) => [
                  u.rank,
                  u.class,
                  u.name,
                  <span key="vn" className="font-mono text-[12px] tracking-wider text-gray-700">{u.volunteer_no || '-'}</span>,
                  u.group_name || '-',
                  <span key="t" className="font-semibold text-primary-700">{Number(u.exported_total || 0).toFixed(1)}</span>,
                  <span key="r" className="font-medium text-gray-600">{Number(u.unexported_remaining || 0).toFixed(1)}</span>,
                ])}
              />
            </section>
          ) : null}

          {preview.activity_matrix?.activities?.length ? (
            <section className="card p-5 animate-fade-in-up">
              <h3 className="font-semibold text-lg mb-3 border-l-4 border-primary-500 pl-3 inline-flex items-center gap-2 text-gray-800">
                <span className="chip-primary">C</span>
                活动矩阵 · 四小时核销视图
                <span className="chip ml-2">
                  {preview.activity_matrix.users.length} 人 × {preview.activity_matrix.activities.length} 活动
                </span>
                <span className="ml-3 inline-flex items-center gap-1.5 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded px-2 py-0.5">
                  「截断」= 剩余未核销超过当次单活动上限，下次四小时导出可继续使用
                </span>
              </h3>
              <div className="overflow-x-auto">
                <table className="min-w-full text-sm border-collapse border border-gray-200 rounded-lg bg-white">
                  <thead>
                    <tr className="bg-gray-100 border-b border-gray-200">
                      <th className="px-3 py-2.5 text-left font-semibold whitespace-nowrap border-r border-gray-200 text-gray-800 sticky left-0 bg-gray-100 z-10">
                        部员
                      </th>
                      <th className="px-3 py-2.5 text-left font-semibold whitespace-nowrap border-r border-gray-200 text-gray-800 sticky left-[96px] bg-gray-100 z-10">
                        义工号
                      </th>
                      {preview.activity_matrix.activities.map((a, i) => {
                        const last = i < preview.activity_matrix!.activities!.length - 1;
                        return (
                          <th
                            key={a.id}
                            className={`px-3 py-2.5 text-center font-semibold whitespace-nowrap text-gray-800 ${last ? 'border-r border-gray-200' : ''}`}
                            style={{ minWidth: 180 }}
                            title={`${a.title}\n${String(a.start_time || '').slice(0, 16)}`}
                          >
                            <div className="font-semibold">{a.title}</div>
                            <div className="mt-0.5 text-[11px] text-gray-500 font-normal">本次核销 / 备注</div>
                            <div className="mt-0.5 text-[11px] text-gray-500 font-normal">{String(a.start_time || '').slice(0, 10)}</div>
                          </th>
                        );
                      })}
                      <th className="px-3 py-2.5 text-center font-semibold whitespace-nowrap border-l border-gray-200 text-gray-800 bg-primary-50/60">
                        本次合计
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {preview.activity_matrix.users.map((u: any, ri) => {
                      const bg = ri % 2 ? '#f9fafb' : '#fff';
                      return (
                        <tr
                          key={u.id}
                          className={`border-b border-gray-200 ${ri % 2 ? 'bg-gray-50' : 'bg-white'} hover:bg-primary-50 transition-colors`}
                        >
                          <td
                            className="px-3 py-2 whitespace-nowrap border-r border-gray-200 font-medium text-gray-800 sticky left-0 z-10"
                            style={{ background: bg }}
                          >
                            {u.name}
                          </td>
                          <td
                            className="px-3 py-2 whitespace-nowrap border-r border-gray-200 font-mono text-xs text-gray-600 sticky left-[96px] z-10"
                            style={{ background: bg }}
                          >
                            {u.volunteer_no || '-'}
                          </td>
                          {preview.activity_matrix!.activities!.map((a, i) => {
                            const last = i < preview.activity_matrix!.activities!.length - 1;
                            const v = Number(u[String(a.id)] || 0);
                            const r = (u as any)?._remarks?.[String(a.id)];
                            const tr = !!(u as any)?._truncated?.[String(a.id)];
                            return (
                              <td
                                key={a.id}
                                className={`px-2 py-2 whitespace-normal text-center align-top ${last ? 'border-r border-gray-200/70' : ''}`}
                                style={{ verticalAlign: 'top' }}
                              >
                                <CellHours v={v} truncated={tr} remark={r} />
                              </td>
                            );
                          })}
                          <td className="px-3 py-2 whitespace-nowrap text-center border-l border-gray-200 font-semibold bg-primary-50/70 text-primary-700">
                            {Number(u._total || 0).toFixed(1)}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </section>
          ) : null}

          {!preview.hours?.length && !preview.activity_matrix?.activities?.length ? (
            <div className="py-14 text-center text-gray-500">
              <div className="text-base font-medium text-gray-700 mb-1">目前没有部员的未核销累计时长达到或超过 4.0 小时</div>
              <div className="text-sm">请先在「时长登记」中登记义工时，或等待部员累计到满足门槛后再次生成预览。</div>
            </div>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}