hyb-oa/client/src/pages/MobileCapturePage.tsx

import { useEffect, useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { uploadInvoice } from "../api/invoicePool";
import { mapApiErrorMessage } from "../api/errorMessages";
import { isApiError } from "../api/types";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { Spinner } from "../components/ui/spinner";
import {
  enqueueInvoiceUpload,
  listQueuedInvoiceUploads,
  queuedItemToFile,
  removeQueuedInvoiceUpload,
  type MobileUploadQueueItem,
} from "../mobile/uploadQueue";

function formatTime(value: string) {
  try {
    return new Date(value).toLocaleString("zh-CN");
  } catch {
    return value;
  }
}

function isLikelyNetworkError(error: unknown) {
  if (isApiError(error)) {
    return error.status >= 500;
  }

  return true;
}

export function MobileCapturePage() {
  const queryClient = useQueryClient();
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);

  const queueQuery = useQuery({
    queryKey: ["mobile", "invoice-upload-queue"],
    queryFn: () => listQueuedInvoiceUploads(),
  });

  const uploadMutation = useMutation({
    mutationFn: async (file: File) => uploadInvoice(file, "vat"),
    onSuccess: () => {
      setSelectedFile(null);
      setError("");
      setMessage("");
      toast.success("上传成功");
    },
    onError: (err) => {
      if (isApiError(err)) {
        const msg = `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`;
        setError(msg);
        toast.error(msg);
        return;
      }

      const msg = err instanceof Error ? err.message : "上传失败";
      setError(msg);
      toast.error(msg);
    },
  });

  const syncMutation = useMutation({
    mutationFn: async (items: MobileUploadQueueItem[]) => {
      let succeeded = 0;
      let failed = 0;

      for (const item of items) {
        try {
          const file = queuedItemToFile(item);
          await uploadInvoice(file, "vat");
          await removeQueuedInvoiceUpload(item.id);
          succeeded += 1;
        } catch {
          failed += 1;
        }
      }

      return { succeeded, failed };
    },
    onSuccess: async (result) => {
      await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
      setError("");
      setMessage("");
      toast.success(`同步完成：成功 ${result.succeeded}，失败 ${result.failed}`);
    },
    onError: (err) => {
      const msg = err instanceof Error ? err.message : "队列同步失败";
      setError(msg);
      toast.error(msg);
    },
  });

  const queuedItems = queueQuery.data ?? [];

  const queuedCountLabel = useMemo(() => {
    if (!queuedItems.length) return "无待上传项";
    return `待上传 ${queuedItems.length} 项`;
  }, [queuedItems.length]);

  useEffect(() => {
    const onOnline = () => {
      setIsOnline(true);
      if (queuedItems.length) {
        syncMutation.mutate(queuedItems);
      }
    };

    const onOffline = () => {
      setIsOnline(false);
    };

    window.addEventListener("online", onOnline);
    window.addEventListener("offline", onOffline);

    return () => {
      window.removeEventListener("online", onOnline);
      window.removeEventListener("offline", onOffline);
    };
  }, [queuedItems, syncMutation]);

  return (
    <div className="space-y-4">
      <PageHeader
        title="移动拍照上传"
        subtitle="支持离线缓存与联网自动重放。"
      />

      {error ? (
        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
      ) : null}

      {message ? (
        <p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{message}</p>
      ) : null}

      <div className="card-std space-y-3 p-4">
        <div className="flex items-center justify-between">
          <h3 className="text-base font-semibold text-zinc-900">拍照/选择文件</h3>
          <span className={isOnline ? "text-emerald-600" : "text-orange-600"}>
            {isOnline ? "在线" : "离线"}
          </span>
        </div>

        <input
          accept="image/*,application/pdf"
          capture="environment"
          className="w-full text-sm"
          data-testid="mobile-capture-file"
          onChange={(event) => {
            const file = event.target.files?.[0] ?? null;
            setSelectedFile(file);
          }}
          type="file"
        />

        <div className="text-sm text-zinc-600">
          当前文件：{selectedFile ? `${selectedFile.name} (${Math.ceil(selectedFile.size / 1024)} KB)` : "未选择"}
        </div>

        <div className="flex flex-wrap gap-2">
          <Button
            data-testid="mobile-capture-upload"
            disabled={uploadMutation.isPending || !selectedFile}
            onClick={async () => {
              if (!selectedFile) return;

              setMessage("");
              setError("");

              if (!isOnline) {
                await enqueueInvoiceUpload(selectedFile);
                await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
                setSelectedFile(null);
                setMessage("当前离线，已加入待上传队列");
                return;
              }

              try {
                await uploadMutation.mutateAsync(selectedFile);
              } catch (err) {
                if (isLikelyNetworkError(err)) {
                  await enqueueInvoiceUpload(selectedFile);
                  await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
                  setSelectedFile(null);
                  setError("");
                  setMessage("上传失败，已加入离线队列等待重试");
                  return;
                }

                throw err;
              }
            }}
            type="button"
          >
            {uploadMutation.isPending ? "上传中..." : "立即上传"}
          </Button>

          <Button
            data-testid="mobile-capture-sync-queue"
            disabled={!queuedItems.length || syncMutation.isPending || !isOnline}
            onClick={() => syncMutation.mutate(queuedItems)}
            type="button"
            variant="secondary"
          >
            {syncMutation.isPending ? "同步中..." : "同步队列"}
          </Button>
        </div>
      </div>

      <div className="card-std space-y-3 p-4" data-testid="mobile-capture-queue">
        <div className="flex items-center justify-between">
          <h3 className="text-base font-semibold text-zinc-900">离线上传队列</h3>
          <span className="text-sm text-zinc-500">{queuedCountLabel}</span>
        </div>

        {queueQuery.isLoading ? <div className="flex items-center gap-2 text-sm text-zinc-500"><Spinner size="sm" />加载中...</div> : null}

        {!queueQuery.isLoading && queuedItems.length === 0 ? (
          <p className="text-sm text-zinc-500">暂无待上传文件。</p>
        ) : null}

        {queuedItems.map((item) => (
          <div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-2 text-sm">
            <div className="font-medium text-zinc-800">{item.fileName}</div>
            <div className="text-zinc-500">创建时间：{formatTime(item.createdAt)}</div>
            <div className="mt-2">
              <Button
                data-testid={`mobile-capture-remove-${item.id}`}
                onClick={async () => {
                  await removeQueuedInvoiceUpload(item.id);
                  await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
                }}
                size="sm"
                type="button"
                variant="secondary"
              >
                移除
              </Button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}