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 { PageScaffold } from "../components/patterns/PageScaffold";
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;
}

type CaptureUploadResult = {
  succeeded: number;
  queued: number;
  failed: Array<{ file: File; message: string }>;
};

export function MobileCapturePage() {
  const queryClient = useQueryClient();
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [uploadProgress, setUploadProgress] = useState({ completed: 0, total: 0 });
  const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);

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

  const uploadMutation = useMutation({
    mutationFn: async (files: File[]) => {
      const result: CaptureUploadResult = { succeeded: 0, queued: 0, failed: [] };
      setUploadProgress({ completed: 0, total: files.length });

      for (const [index, file] of files.entries()) {
        try {
          await uploadInvoice(file, "vat");
          result.succeeded += 1;
        } catch (err) {
          if (isLikelyNetworkError(err)) {
            await enqueueInvoiceUpload(file);
            result.queued += 1;
          } else {
            result.failed.push({
              file,
              message: isApiError(err)
                ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`
                : err instanceof Error ? err.message : "上传失败",
            });
          }
        }

        setUploadProgress({ completed: index + 1, total: files.length });
      }

      return result;
    },
    onSuccess: async (result) => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] }),
        queryClient.invalidateQueries({ queryKey: ["invoice-pool"] }),
      ]);
      setSelectedFiles(result.failed.map((item) => item.file));
      setError("");
      setMessage("");
      if (result.failed.length) {
        const msg = result.failed.map((item) => `${item.file.name}: ${item.message}`).join("；");
        setError(msg);
        toast.error(`上传完成：成功 ${result.succeeded}，待重试 ${result.queued}，失败 ${result.failed.length}`);
        return;
      }
      toast.success(`上传完成：成功 ${result.succeeded}，待重试 ${result.queued}`);
    },
    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);
    },
    onSettled: () => setUploadProgress({ completed: 0, total: 0 }),
  });

  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 (
    <PageScaffold 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-4 p-4">
        <div className="flex items-center justify-between gap-3">
          <div>
            <h3 className="text-base font-semibold text-zinc-900">选择票据</h3>
            <p className="mt-1 text-sm leading-5 text-zinc-500">图片或 PDF。</p>
          </div>
          <span className={isOnline ? "shrink-0 text-sm text-emerald-600" : "shrink-0 text-sm text-orange-600"}>
            {isOnline ? "在线" : "离线"}
          </span>
        </div>

        <label
          htmlFor="mobile-capture-file"
          className="flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-2xl border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-center transition-colors hover:border-zinc-400 hover:bg-white"
        >
          <span className="material-symbols-outlined text-[32px] text-zinc-700">add_photo_alternate</span>
          <span className="mt-2 text-sm font-semibold text-zinc-900">拍照或选择文件</span>
          <span className="mt-1 text-xs leading-5 text-zinc-500">JPG、PNG、PDF 均可上传</span>
        </label>
        <input
          id="mobile-capture-file"
          accept="image/*,application/pdf"
          capture="environment"
          className="sr-only"
          data-testid="mobile-capture-file"
          onChange={(event) => {
            setSelectedFiles(Array.from(event.target.files ?? []));
          }}
          multiple
          type="file"
        />

        <div className="rounded-xl border border-zinc-200 bg-white px-3 py-3 text-sm text-zinc-600">
          <span className="font-medium text-zinc-800">当前文件：</span>
          {selectedFiles.length ? `已选择 ${selectedFiles.length} 个` : "未选择"}
          {selectedFiles.length ? (
            <div className="mt-2 space-y-1 text-xs">
              {selectedFiles.slice(0, 5).map((file) => (
                <div key={`${file.name}-${file.size}`} className="truncate">
                  {file.name} ({Math.ceil(file.size / 1024)} KB)
                </div>
              ))}
              {selectedFiles.length > 5 ? <div>另有 {selectedFiles.length - 5} 个文件</div> : null}
            </div>
          ) : null}
        </div>

        <div className="grid gap-2 sm:grid-cols-2">
          <Button
            className="min-h-12 w-full"
            data-testid="mobile-capture-upload"
            disabled={uploadMutation.isPending || selectedFiles.length === 0}
            onClick={async () => {
              if (!selectedFiles.length) return;

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

              if (!isOnline) {
                const enqueuedItems: MobileUploadQueueItem[] = [];
                for (const file of selectedFiles) {
                  enqueuedItems.push(await enqueueInvoiceUpload(file));
                }
                queryClient.setQueryData<MobileUploadQueueItem[]>(["mobile", "invoice-upload-queue"], (current) =>
                  [...(current ?? []), ...enqueuedItems].sort((a, b) => a.createdAt.localeCompare(b.createdAt)),
                );
                setSelectedFiles([]);
                setMessage(`当前离线，已加入待上传队列 ${selectedFiles.length} 项`);
                return;
              }

              uploadMutation.mutate(selectedFiles);
            }}
            type="button"
          >
            {uploadMutation.isPending
              ? `上传中 ${uploadProgress.completed}/${uploadProgress.total}`
              : "立即上传"}
          </Button>

          <Button
            className="min-h-12 w-full"
            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 gap-3">
          <h3 className="text-base font-semibold text-zinc-900">离线上传队列</h3>
          <span className="shrink-0 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-xl border border-zinc-200 bg-white px-3 py-3 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
                className="min-h-11 w-full sm:w-auto"
                data-testid={`mobile-capture-remove-${item.id}`}
                onClick={async () => {
                  await removeQueuedInvoiceUpload(item.id);
                  queryClient.setQueryData<MobileUploadQueueItem[]>(["mobile", "invoice-upload-queue"], (current) =>
                    (current ?? []).filter((queuedItem) => queuedItem.id !== item.id),
                  );
                }}
                size="sm"
                type="button"
                variant="secondary"
              >
                移除
              </Button>
            </div>
          </div>
        ))}
      </div>
    </PageScaffold>
  );
}