park-desktop/src/pages/TaskDisplay.jsx

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { useTasks } from '../utils/taskData';
import '../styles/task-display.css';

/* 任务展示页：轮播卡片 + 二维码扫码接单。
   · 数据：useTasks() 轮询 /park/api/tasks（系统任务中心上墙任务）
   · 卡片：分类/状态徽标、标题、摘要(2行)、标签、预算、任务ID + 二维码(扫码即领)
   · 自适应：一屏 4 或 6 张（按容器/视口宽度计算，宽≥1600→6，否则 4）
   · 轮播：每页 cols 张，自动翻页；MQTT task_refresh 可触发刷新 */

const ROTATE_MS = 14_000;

/* 按宽度计算每屏列数：只取 4 或 6。 */
export function columnsFor(width) {
  const w = width || (typeof window !== 'undefined' ? window.innerWidth : 1280);
  return w >= 1600 ? 6 : 4;
}

export default function TaskDisplay() {
  const { tasks, loading, error } = useTasks();
  const [page, setPage] = useState(0);
  const [refreshTick, setRefreshTick] = useState(0);
  const [cols, setCols] = useState(() => columnsFor());
  const tickRef = useRef(0);

  // 视口宽度 → 列数（4 或 6），随屏幕大小自适应
  useEffect(() => {
    const update = () => setCols(columnsFor());
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);

  // 接受 MQTT task_refresh → 触发重新轮询
  useEffect(() => {
    const onRefresh = () => { tickRef.current += 1; setRefreshTick(tickRef.current); };
    window.addEventListener('dpm:task-control', onRefresh);
    return () => window.removeEventListener('dpm:task-control', onRefresh);
  }, []);

  const pageSize = cols;
  const pageCount = Math.max(1, Math.ceil(tasks.length / pageSize));
  useEffect(() => {
    if (pageCount <= 1) { setPage(0); return; }
    const t = setInterval(() => setPage((p) => (p + 1) % pageCount), ROTATE_MS);
    return () => clearInterval(t);
  }, [pageCount]);

  const visible = useMemo(() => {
    if (tasks.length === 0) return [];
    const start = page * pageSize;
    return Array.from({ length: pageSize }, (_, i) => tasks[(start + i) % tasks.length]);
  }, [tasks, page, pageSize]);

  return (
    <div className="tasks-screen">
      <div className="tasks-head">
        <span className="tasks-head-dot" />
        <span className="tasks-head-title">系统任务中心</span>
        <span className="tasks-head-sub">扫码即可接单 · 园区企业发标 · 合伙人接单</span>
        <span className="tasks-head-count">{tasks.length} 个任务</span>
      </div>

      {loading && tasks.length === 0 ? (
        <div className="tasks-loading">正在加载任务…</div>
      ) : error && tasks.length === 0 ? (
        <div className="tasks-loading">{error}</div>
      ) : (
        <>
          <div className="tasks-grid" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
            {visible.map((t) => (
              <TaskCard key={t.key} task={t} />
            ))}
          </div>
          {pageCount > 1 && (
            <div className="tasks-dots">
              {Array.from({ length: pageCount }).map((_, i) => (
                <span key={i} className={i === page ? 'tasks-dot on' : 'tasks-dot'} />
              ))}
            </div>
          )}
        </>
      )}
    </div>
  );
}

function TaskCard({ task }) {
  const qrValue = task.scan_payload || task.task_code;
  return (
    <div className={task.claimed ? 'task-card claimed' : 'task-card'}>
      <div className="task-top">
        <span className="task-cat">{task.category}</span>
        {task.claimed ? (
          <span className="task-status taken">已接单</span>
        ) : (
          <span className="task-status open">可接单</span>
        )}
      </div>

      <div className="task-title">{task.title}</div>
      {task.summary ? <p className="task-summary">{task.summary}</p> : null}

      <div className="task-tags">
        {task.tags.slice(0, 4).map((tg) => (
          <span key={tg} className="task-tag">{tg}</span>
        ))}
      </div>

      <div className="task-budget">预算 {task.budgetLabel} · {task.modeLabel}</div>

      <div className="task-meta-row">
        {task.deadline && <span className="task-meta-item">接单截止 {task.deadline}</span>}
        {task.deliveryDays > 0 && <span className="task-meta-item">交付时限 {task.deliveryDays} 天</span>}
        {task.exclusive
          ? <span className="task-meta-item">独占接单</span>
          : task.headcount > 0 ? <span className="task-meta-item">限 {task.headcount} 人</span> : null}
      </div>

      <div className="task-foot">
        <div className="task-meta">
          <span className="task-id-label">任务ID · {task.publisherName ? `${task.publisherName} 发包` : '园区发包'}</span>
          <span className="task-id">{task.task_code || task.id}</span>
        </div>
        <div className="task-qr">
          <QRCodeSVG value={qrValue || 'TASK'} size={72} fgColor="#1d2c44" level="M" />
          <span className="task-qr-hint">扫码接单</span>
        </div>
      </div>
    </div>
  );
}