import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
import type { InvoicePoolListResponse, InvoicePoolStatus } from "../../api/invoicePool";
import { StatusBadge } from "../../components/common/StatusBadge";
import { TableSkeleton } from "../../components/common/TableSkeleton";
import { Pagination } from "../../components/common/Pagination";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../components/ui/dropdown-menu";
import { Button } from "../../components/ui/button";
import { formatInvoiceOcrErrorMessage } from "../../lib/invoiceOcr";

export type InvoiceListCardProps = {
  listQuery: UseQueryResult<InvoicePoolListResponse, Error>;
  status: InvoicePoolStatus | "";
  setStatus: (status: InvoicePoolStatus | "") => void;
  ownerScope: "own" | "all";
  setOwnerScope: (scope: "own" | "all") => void;
  page: number;
  setPage: (page: number) => void;
  totalPages: number;
  detailInvoiceId: string;
  setDetailInvoiceId: (id: string) => void;
  signedUrlMutation: UseMutationResult<{ signedUrl: string; expiresAt: string }, Error, string>;
};

export function InvoiceListCard({
  listQuery,
  status,
  setStatus,
  ownerScope,
  setOwnerScope,
  page,
  setPage,
  totalPages,
  setDetailInvoiceId,
  signedUrlMutation,
}: InvoiceListCardProps) {
  return (
    <div className="card-std p-6 space-y-4">
      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <h3 className="card-title">筛选与列表</h3>
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
          <select
            className="select-sm"
            data-testid="invoice-filter-status"
            onChange={(event) => {
              setStatus(event.target.value as InvoicePoolStatus | "");
              setPage(1);
            }}
            value={status}
          >
            <option value="">全部状态</option>
            <option value="pending_ocr">识别中</option>
            <option value="available">可用</option>
            <option value="ocr_failed">识别失败</option>
            <option value="bound">已绑定</option>
            <option value="archived">已归档</option>
          </select>

          <select
            className="select-sm"
            data-testid="invoice-filter-owner-scope"
            onChange={(event) => {
              setOwnerScope(event.target.value as "own" | "all");
              setPage(1);
            }}
            value={ownerScope}
          >
            <option value="own">仅看自己</option>
            <option value="all">查看全部</option>
          </select>
        </div>
      </div>

      {listQuery.isLoading ? <TableSkeleton columns={5} rows={5} /> : null}
      {!listQuery.isLoading ? (
        <>
          <div className="space-y-3 md:hidden" data-testid="invoice-pool-mobile-list">
            {(listQuery.data?.items ?? []).length ? (
              listQuery.data?.items.map((item) => (
                <article className="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm" data-testid="invoice-mobile-row" key={item.id}>
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="truncate text-sm font-semibold text-zinc-900">{item.originalName || item.id}</div>
                      <div className="mt-1 font-mono text-xs text-zinc-500">{item.id.slice(0, 8)}</div>
                    </div>
                    <StatusBadge className="shrink-0" status={item.status} />
                  </div>

                  <div className="mt-3 grid grid-cols-2 gap-3 text-sm">
                    <div>
                      <div className="text-xs text-zinc-500">发票号码</div>
                      <div className="truncate font-medium text-zinc-900">
                        {item.invoiceCode || "-"}-{item.invoiceNumber || "-"}
                      </div>
                    </div>
                    <div>
                      <div className="text-xs text-zinc-500">金额</div>
                      <div className="font-medium text-zinc-900">{item.totalAmount ?? "-"}</div>
                    </div>
                  </div>

                  <div className="mt-3 rounded-lg bg-zinc-50 px-3 py-2 text-xs text-zinc-600">
                    {item.status === "pending_ocr"
                      ? `OCR 识别中，重试 ${item.ocrAttempts} 次`
                      : item.status === "ocr_failed"
                        ? `OCR 失败：${formatInvoiceOcrErrorMessage(item.ocrLastError)}`
                        : "OCR 已完成或无需处理"}
                  </div>

                  <div className="mt-3 grid grid-cols-2 gap-2">
                    <Button
                      className="min-h-10"
                      data-testid="invoice-mobile-detail-button"
                      onClick={() => setDetailInvoiceId(item.id)}
                      size="sm"
                      type="button"
                      variant="secondary"
                    >
                      查看详情
                    </Button>
                    <Button
                      className="min-h-10"
                      data-testid="invoice-mobile-preview-button"
                      disabled={signedUrlMutation.isPending}
                      onClick={() => signedUrlMutation.mutate(item.id)}
                      size="sm"
                      type="button"
                      variant="secondary"
                    >
                      预览
                    </Button>
                  </div>
                </article>
              ))
            ) : (
              <div className="rounded-xl border border-dashed border-zinc-300 px-4 py-8 text-center text-sm text-zinc-500">
                暂无票据数据
              </div>
            )}
          </div>

          <div className="table-container hidden md:block">
            <table className="w-full text-left text-sm text-zinc-600" data-testid="invoice-pool-table">
              <thead className="bg-zinc-50/50">
                <tr>
                  <th className="table-th w-[280px]">票据流水号</th>
                  <th className="table-th w-[120px]">状态</th>
                  <th className="table-th w-[200px]">发票号码</th>
                  <th className="table-th">识别情况 (OCR)</th>
                  <th className="table-th w-[80px] text-right">操作</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-100">
                {(listQuery.data?.items ?? []).length ? (
                  listQuery.data?.items.map((item) => (
                    <tr className="table-row" data-testid="invoice-row" key={item.id}>
                      <td className="table-td">
                        <div className="font-mono text-xs text-zinc-500">{item.id}</div>
                      </td>
                      <td className="table-td"><StatusBadge status={item.status} /></td>
                      <td className="table-td font-medium text-zinc-900">
                        {item.invoiceCode || "-"}-{item.invoiceNumber || "-"}
                      </td>
                      <td className="table-td">
                        {item.status === "pending_ocr" ? (
                          <span className="flex items-center gap-1.5 text-amber-600 font-medium">
                            <span className="size-1.5 rounded-full bg-amber-500 animate-pulse" />
                            识别中 <span className="text-zinc-400 font-normal text-xs">(重试: {item.ocrAttempts})</span>
                          </span>
                        ) : item.status === "ocr_failed" ? (
                          <span className="flex items-center gap-1.5 text-red-600">
                            <span className="size-1.5 rounded-full bg-red-500" />
                            识别失败 <span className="text-zinc-400 text-xs">({formatInvoiceOcrErrorMessage(item.ocrLastError)})</span>
                          </span>
                        ) : (
                          <span className="text-zinc-400 text-xs">解析成功</span>
                        )}
                      </td>
                      <td className="table-td text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger className="rounded-md p-1 hover:bg-zinc-100 focus:outline-none transition-colors">
                            <span className="material-symbols-outlined text-[20px] text-zinc-400">more_horiz</span>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end" className="w-32">
                            <DropdownMenuItem data-testid="invoice-detail-button" onSelect={() => setDetailInvoiceId(item.id)}>
                              查看详情
                            </DropdownMenuItem>
                            <DropdownMenuItem data-testid="invoice-preview-button" onSelect={() => signedUrlMutation.mutate(item.id)}>
                              下载 / 预览
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td className="table-td text-center text-zinc-500 py-8" colSpan={5}>
                      暂无票据数据
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>

          <Pagination page={page} totalPages={totalPages} onPageChange={setPage} testIdPrefix="invoice" />
        </>
      ) : null}
    </div>
  );
}