import { RefreshCw } from "lucide-react";
import { useDocumentStatistics } from "./statisticsState";

const NAVY = "#1A5299";
const BLUE = "#3191eb";

export function DocumentStatisticsCards() {
  const state = useDocumentStatistics();

  if (state.loading && !state.data) {
    return (
      <div
        className="mb-2 p-3 text-sm font-black"
        style={{ background: "#fff", color: NAVY }}
      >
        <RefreshCw size={14} className="inline mr-2 animate-spin" />
        正在加载文档统计…
      </div>
    );
  }

  if (state.error) {
    return (
      <div
        className="mb-2 px-4 py-3 flex items-center text-sm font-bold"
        style={{ background: "#fff", color: NAVY }}
      >
        <span>
          统计数据加载失败
          {state.error.requestId
            ? `（错误编号：${state.error.requestId}）`
            : ""}
        </span>
        <button
          onClick={state.refresh}
          className="ml-auto px-3 py-1.5 text-xs font-black text-white"
          style={{ background: BLUE }}
        >
          重试
        </button>
      </div>
    );
  }

  const cards = state.data
    ? [
        ["方案文档总数", state.data.planDocumentCount],
        ["主案数量", state.data.mainPlanCount],
        ["子方案数量", state.data.subPlanCount],
        ["共享附件数量", state.data.attachmentCount],
        ["今日查看人数", state.data.todayViewerCount],
      ]
    : [];

  return (
    <div
      className="mb-2 grid grid-cols-5 gap-px"
      style={{ background: "rgba(40,118,193,.18)" }}
      aria-label="文档统计"
    >
      {cards.map(([label, value]) => (
        <div key={String(label)} className="bg-white px-4 py-2">
          <div className="text-xs font-bold opacity-60" style={{ color: NAVY }}>
            {label}
          </div>
          <div className="text-xl font-black" style={{ color: BLUE }}>
            {value}
          </div>
        </div>
      ))}
    </div>
  );
}
