import { useState } from "react";
import { Button } from "../ui/button";
import { formatDisplayDate, formatMoney } from "../../lib/displayFormat";
import type {
  ReimbursementApprovalEvidenceProjection,
  ReimbursementAttachmentEvidence,
  ReimbursementInvoiceEvidence,
  ReimbursementItemEvidence,
} from "../../lib/reimbursementApprovalProjection";

export type ReimbursementEvidenceCapabilities = {
  onOpenInvoice?: (invoice: ReimbursementInvoiceEvidence) => void;
  onOpenAttachment?: (attachment: ReimbursementAttachmentEvidence) => void;
  onOpenMaterialBundle?: () => void;
  onDeleteAttachment?: (attachment: ReimbursementAttachmentEvidence) => void;
  onReferenceItem?: (item: ReimbursementItemEvidence) => void;
  onReferenceInvoice?: (invoice: ReimbursementInvoiceEvidence) => void;
  onEditItem?: (item: ReimbursementItemEvidence) => void;
  onDeleteItem?: (item: ReimbursementItemEvidence) => void;
  onLinkInvoice?: (invoice: ReimbursementInvoiceEvidence, linkedItemId: string) => void;
  linkInvoicePending?: boolean;
  linkInvoiceErrors?: Record<string, string>;
  onUnlinkInvoice?: (invoice: ReimbursementInvoiceEvidence) => void;
};

type Props = {
  evidence: ReimbursementApprovalEvidenceProjection;
  capabilities?: ReimbursementEvidenceCapabilities;
  mobile?: boolean;
};

function evidenceStatusCopy(status: ReimbursementInvoiceEvidence["amountEvidenceStatus"]) {
  if (status === "ocr_failed") return "该发票的票面金额未能读取，暂时无法提交；请重新上传这张发票，或联系财务处理。";
  if (status === "manual_review") return "票面金额需财务查看原件核对；这是一项审批提示，不会阻止提交。";
  return null;
}

function InvoiceCard({
  invoice,
  capabilities,
  linkTargets,
}: {
  invoice: ReimbursementInvoiceEvidence;
  capabilities: ReimbursementEvidenceCapabilities;
  linkTargets: ReimbursementItemEvidence[];
}) {
  const [selectedItemId, setSelectedItemId] = useState("");
  const title = invoice.invoiceNumber || invoice.originalName || "未命名发票";
  const hasBlockingIssue = !invoice.linkedItemId || invoice.amountEvidenceStatus === "ocr_failed";
  return (
    <article
      className="rounded-lg border border-zinc-200 bg-white p-3"
      data-testid="approval-invoice-evidence"
      data-reimbursement-guard-issue={hasBlockingIssue ? "true" : undefined}
      tabIndex={hasBlockingIssue ? -1 : undefined}
    >
      <div className="flex flex-wrap items-start justify-between gap-2">
        <div className="min-w-0">
          <h4 className="truncate text-sm font-medium text-zinc-900">{title}</h4>
          <p className="mt-1 text-xs leading-5 text-zinc-600">
            {invoice.sellerName || invoice.documentSubtype || invoice.documentCategory || "票据"}
            {" · "}{formatDisplayDate(invoice.invoiceDate)}
            {" · "}{formatMoney(invoice.totalAmount)}
          </p>
          {evidenceStatusCopy(invoice.amountEvidenceStatus) ? (
            <p className={invoice.amountEvidenceStatus === "ocr_failed" ? "mt-1 text-xs text-red-700" : "mt-1 text-xs text-zinc-600"}>
              {evidenceStatusCopy(invoice.amountEvidenceStatus)}
            </p>
          ) : null}
        </div>
        <div className="flex flex-wrap gap-2">
          {capabilities.onOpenInvoice ? (
            <Button aria-label={`查看发票原件：${title}`} className="min-h-11" onClick={() => capabilities.onOpenInvoice?.(invoice)} size="sm" type="button" variant="secondary">
              查看原件
            </Button>
          ) : null}
          {capabilities.onReferenceInvoice ? (
            <Button className="min-h-11" data-testid="approval-reference-invoice" onClick={() => capabilities.onReferenceInvoice?.(invoice)} size="sm" type="button" variant="secondary">
              引用到退回意见
            </Button>
          ) : null}
          {capabilities.onLinkInvoice && !invoice.linkedItemId ? (
            <div className="grid min-w-[220px] gap-2">
              <label className="text-xs font-medium text-zinc-700" htmlFor={`reimbursement-link-item-${invoice.id}`}>选择报销明细</label>
              <select
                className="select-std min-h-11"
                disabled={capabilities.linkInvoicePending}
                id={`reimbursement-link-item-${invoice.id}`}
                onChange={(event) => setSelectedItemId(event.target.value)}
                value={selectedItemId}
              >
                <option value="">请选择报销明细</option>
                {linkTargets.map((item, index) => (
                  <option key={item.id} value={item.id}>明细 {index + 1} · {item.expenseType?.name ?? "未分类费用"} · {formatMoney(item.amount)}</option>
                ))}
              </select>
              <Button
                className="min-h-11"
                disabled={!selectedItemId || capabilities.linkInvoicePending}
                onClick={() => capabilities.onLinkInvoice?.(invoice, selectedItemId)}
                size="sm"
                type="button"
                variant="secondary"
              >
                {capabilities.linkInvoicePending ? "关联中..." : "确认关联"}
              </Button>
              {capabilities.linkInvoiceErrors?.[invoice.id] ? (
                <p className="text-xs text-red-700" role="alert">{capabilities.linkInvoiceErrors[invoice.id]}</p>
              ) : null}
            </div>
          ) : null}
          {capabilities.onUnlinkInvoice && invoice.linkedItemId ? (
            <Button className="min-h-11" onClick={() => capabilities.onUnlinkInvoice?.(invoice)} size="sm" type="button" variant="secondary">移除对应关系</Button>
          ) : null}
        </div>
      </div>
    </article>
  );
}

export function ReimbursementItemEvidenceList({ evidence, capabilities = {}, mobile = false }: Props) {
  return (
    <div className="space-y-5" data-testid="reimbursement-approval-evidence">
      <div className="space-y-3">
        {evidence.items.length ? evidence.items.map((item, index) => {
          const hasBlockingIssue = item.amountExceeded || item.invoices.some((invoice) => invoice.amountEvidenceStatus === "ocr_failed") || (item.expenseType?.requiresInvoice !== false && item.invoices.length === 0);
          return (
          <article className={mobile ? "mobile-list-card" : "rounded-xl border border-zinc-200 bg-zinc-50/60 p-4"} data-testid="approval-item-evidence" data-reimbursement-guard-issue={hasBlockingIssue ? "true" : undefined} tabIndex={hasBlockingIssue ? -1 : undefined} key={item.id}>
            <div className="flex flex-wrap items-start justify-between gap-3">
              <div>
                <p className="text-xs font-medium text-zinc-500">明细 {index + 1}</p>
                <h3 className="mt-1 font-medium text-zinc-950">{item.expenseType?.name ?? "未分类费用"}</h3>
                <p className="mt-1 text-sm text-zinc-600">
                  {formatDisplayDate(item.expenseDate)} · {formatMoney(item.amount)}
                </p>
              </div>
              {capabilities.onReferenceItem ? (
                <Button className="min-h-11" data-testid="approval-reference-item" onClick={() => capabilities.onReferenceItem?.(item)} size="sm" type="button" variant="secondary">
                  引用到退回意见
                </Button>
              ) : null}
              {capabilities.onEditItem ? (
                <Button className="min-h-11" onClick={() => capabilities.onEditItem?.(item)} size="sm" type="button" variant="secondary">编辑明细</Button>
              ) : null}
              {capabilities.onDeleteItem ? (
                <Button className="min-h-11" onClick={() => capabilities.onDeleteItem?.(item)} size="sm" type="button" variant="secondary">删除明细</Button>
              ) : null}
            </div>
            <p className="mt-3 text-sm leading-6 text-zinc-700">{item.description || "未填写明细说明"}</p>
            {item.assetPriorApprovalBasis ? (
              <p className="mt-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-800">
                事前批准依据：{item.assetPriorApprovalBasis}
              </p>
            ) : null}
            {item.standardViolations.map((violation) => (
              <p
                className={violation.controlMode === "block"
                  ? "mt-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
                  : "mt-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800"}
                key={`${violation.itemId}-${violation.standardId}`}
              >
                提交时费用标准提示：申报 {formatMoney(violation.amount)}，标准 {formatMoney(violation.maxAmount)}，超出 {formatMoney(violation.exceededAmount)}。审批时请核对原因。
              </p>
            ))}
            {item.showOfficeElectronicsHint ? (
              <p className="mt-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
                该金额通常应选择办公电子设备，请核对费用类型和事前批准依据。
              </p>
            ) : null}
            {item.amountExceeded ? (
              <p className="mt-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                当前申报金额高于已读取的票面金额合计，暂时不能据此通过；请核对明细金额和票据是否完整。
              </p>
            ) : null}
            {item.invoices.length || item.expenseType?.requiresInvoice !== false ? <div className="mt-4 space-y-2">
              <p className="text-sm font-medium text-zinc-800">所属票据（{item.invoices.length}）</p>
              {item.invoices.length ? item.invoices.map((invoice) => (
                <InvoiceCard capabilities={capabilities} invoice={invoice} key={invoice.id} linkTargets={evidence.items} />
              )) : (
                <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                  这条明细尚无对应票据，暂时无法提交；请添加票据并选择这条明细。
                </p>
              )}
            </div> : null}
          </article>
        ); }) : (
          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">当前报销单没有可核验的明细。</p>
        )}
      </div>

      {evidence.unlinkedInvoices.length ? (
        <section className="space-y-2 rounded-xl border border-red-200 bg-red-50 p-4" data-testid="approval-unlinked-invoices" id="reimbursement-workspace-unlinked">
          <div>
            <h3 className="font-medium text-red-900">尚未对应明细的票据（{evidence.unlinkedInvoices.length}）</h3>
            <p className="mt-1 text-sm text-red-800">这些票据当前没有明确费用归属，暂时无法提交；请为每张票据选择对应的报销明细。</p>
          </div>
          {evidence.unlinkedInvoices.map((invoice) => (
            <InvoiceCard capabilities={capabilities} invoice={invoice} key={invoice.id} linkTargets={evidence.items} />
          ))}
        </section>
      ) : null}

      <section className="space-y-2" data-testid="approval-attachments">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <h3 className="font-medium text-zinc-900">补充附件（{evidence.attachments.length}）</h3>
          {capabilities.onOpenMaterialBundle ? (
            <Button className="min-h-11" onClick={capabilities.onOpenMaterialBundle} size="sm" type="button" variant="secondary">
              查看完整材料
            </Button>
          ) : null}
        </div>
        {evidence.attachments.length ? evidence.attachments.map((attachment) => (
          <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-zinc-200 px-3 py-2" key={attachment.id}>
            <div className="min-w-0">
              <p className="truncate text-sm font-medium text-zinc-900">{attachment.originalName}</p>
              <p className="text-xs text-zinc-500">{attachment.mimeType} · {(attachment.fileSize / 1024).toFixed(1)} KB</p>
            </div>
            {capabilities.onOpenAttachment ? (
              <Button aria-label={`查看补充附件：${attachment.originalName}`} className="min-h-11" onClick={() => capabilities.onOpenAttachment?.(attachment)} size="sm" type="button" variant="secondary">
                查看附件
              </Button>
            ) : null}
            {capabilities.onDeleteAttachment ? (
              <Button className="min-h-11" onClick={() => capabilities.onDeleteAttachment?.(attachment)} size="sm" type="button" variant="secondary">
                删除附件
              </Button>
            ) : null}
          </div>
        )) : <p className="text-sm text-zinc-500">未上传补充附件</p>}
      </section>
    </div>
  );
}