import { useMemo, useState } from "react";
import { Link, useLocation, useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import {
  fetchPurchaseRequests,
  type PurchaseRequestStatus,
  type PurchaseRequestSummary,
} from "../api/purchaseRequests";
import { PageHeader } from "../components/common/PageHeader";
import { StatusBadge } from "../components/common/StatusBadge";
import { PageScaffold } from "../components/patterns/PageScaffold";
import { Input } from "../components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
import { resolvePurchaseDisplayCode } from "../lib/approvalDisplay";
import { joinBusinessMeta } from "../lib/businessDisplay";
import { resolveErrorMessage } from "../lib/resolveErrorMessage";

const STATUS_TABS: Array<{ value: PurchaseRequestStatus; label: string }> = [
  { value: "draft", label: "草稿" },
  { value: "reviewing", label: "审批中" },
  { value: "approved", label: "已通过" },
  { value: "rejected", label: "已驳回" },
  { value: "cancelled", label: "已取消" },
];

function isPurchaseStatus(value: string | null): value is PurchaseRequestStatus {
  return ["draft", "reviewing", "approved", "rejected", "cancelled"].includes(value ?? "");
}

function formatCurrency(value: string | null | undefined, currencyCode = "CNY") {
  const amount = Number(value ?? 0);
  if (!Number.isFinite(amount)) {
    return "-";
  }
  return new Intl.NumberFormat("zh-CN", { style: "currency", currency: currencyCode }).format(amount);
}

function formatDate(value: string | null | undefined) {
  return value ? value.slice(0, 10) : "-";
}

function resolvePurchaseListNextStep(status: PurchaseRequestStatus) {
  if (status === "draft") return "继续完善采购材料";
  if (status === "reviewing") return "查看审批进度";
  if (status === "rejected") return "按意见补材料";
  if (status === "approved") return "核对到货 / 归档";
  return "查看取消记录";
}

function resolvePurchaseListEvidence(item: PurchaseRequestSummary) {
  if (!item.supplierId) return "待补供应商";
  if (!item.legalEntityId || !item.costCenterId) return "待补公司 / 成本中心";
  if (!item.documentCategoryId) return "待补单据分类";
  if (!item.budgetPoolId) return "预算池未匹配";
  if (!item.projectId) return "未关联项目";
  return "基础依据已齐";
}

function resolveMobileEmptyState(status: PurchaseRequestStatus) {
  if (status === "draft") return "暂无采购草稿";
  if (status === "reviewing") return "暂无审批中的采购";
  if (status === "rejected") return "暂无需要补材料的采购";
  if (status === "approved") return "暂无已通过采购";
  return "暂无已取消采购";
}

function normalizeSearchValue(value: string | null | undefined) {
  return String(value ?? "").trim().toLowerCase();
}

function matchesPurchaseSearch(item: PurchaseRequestSummary, keyword: string) {
  const searchValue = normalizeSearchValue(keyword);
  if (!searchValue) {
    return true;
  }

  const haystack = [
    resolvePurchaseDisplayCode(item),
    item.title,
    item.reason,
    item.totalAmount,
    item.applicant?.name,
    item.supplier?.name,
    item.project?.name,
  ].map(normalizeSearchValue).join(" ");

  return haystack.includes(searchValue);
}

function PurchaseRequestCard({
  item,
  currentMobileSource,
}: {
  item: PurchaseRequestSummary;
  currentMobileSource: string;
}) {
  const displayCode = resolvePurchaseDisplayCode(item);

  return (
    <Link
      className="mobile-list-card block"
      data-testid="mobile-purchase-request-card"
      state={{ from: currentMobileSource }}
      to={`/mobile/purchase-requests/${encodeURIComponent(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">{displayCode}</div>
          <div className="mt-1 truncate text-xs text-zinc-500">
            {joinBusinessMeta([
              item.title || null,
              item.applicant?.name ? `申请人：${item.applicant.name}` : null,
              item.updatedAt ? `更新：${formatDate(item.updatedAt)}` : null,
            ])}
          </div>
        </div>
        <StatusBadge className="shrink-0" status={item.status} />
      </div>
      <div className="mt-3 text-sm text-zinc-600">
        {joinBusinessMeta([
          `金额：${formatCurrency(item.totalAmount, item.currencyCode)}`,
          item.supplier?.name ? `供应商：${item.supplier.name}` : null,
          item.expectedDeliveryDate ? `到货：${formatDate(item.expectedDeliveryDate)}` : null,
        ])}
      </div>
      <div className="mt-3 rounded-lg bg-slate-50 px-3 py-2 text-xs leading-5 text-zinc-600">
        <div>材料：{resolvePurchaseListEvidence(item)}</div>
        <div>下一步：{resolvePurchaseListNextStep(item.status)}</div>
      </div>
    </Link>
  );
}

export function MobilePurchaseRequestsPage() {
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();
  const [status, setStatus] = useState<PurchaseRequestStatus>(() => {
    const queryStatus = searchParams.get("status");
    return isPurchaseStatus(queryStatus) ? queryStatus : "draft";
  });
  const [searchInput, setSearchInput] = useState("");

  const currentMobileSource = useMemo(() => {
    const params = new URLSearchParams(location.search);
    params.set("status", status);
    const query = params.toString();
    return `${location.pathname}${query ? `?${query}` : ""}`;
  }, [location.pathname, location.search, status]);

  const listQuery = useQuery({
    queryKey: ["mobile", "purchase-requests", status],
    queryFn: () => fetchPurchaseRequests({ mine: true, status, page: 1, pageSize: 20 }),
  });

  function handleStatusChange(value: string) {
    if (!isPurchaseStatus(value)) {
      return;
    }
    setStatus(value);
    const nextParams = new URLSearchParams(searchParams);
    nextParams.set("status", value);
    setSearchParams(nextParams, { replace: true });
  }

  const items = listQuery.data?.items ?? [];
  const visibleItems = useMemo(
    () => items.filter((item) => matchesPurchaseSearch(item, searchInput)),
    [items, searchInput],
  );
  const totalAmount = useMemo(
    () => visibleItems.reduce((sum, item) => sum + Number(item.totalAmount ?? 0), 0),
    [visibleItems],
  );

  return (
    <PageScaffold className="space-y-4">
      <PageHeader title="我的采购" />

      <section className="mobile-card">
        <div className="text-sm font-semibold text-zinc-900">当前采购任务</div>
        <div className="mt-1 text-xs leading-5 text-zinc-500">先看材料是否齐，再进详情核对采购依据。</div>
        <div className="mobile-info-grid">
          <div>
            <div className="text-xs text-zinc-500">当前列表</div>
            <div className="mt-1 text-2xl font-semibold text-zinc-900">{visibleItems.length}</div>
          </div>
          <div>
            <div className="text-xs text-zinc-500">当前金额</div>
            <div className="mt-1 text-2xl font-semibold text-zinc-900">{formatCurrency(String(totalAmount))}</div>
          </div>
        </div>
      </section>

      <section className="mobile-card" data-testid="mobile-purchase-requests-list">
        <div className="mobile-command-surface mb-4">
          <label className="text-xs font-medium text-zinc-500" htmlFor="mobile-purchase-current-search">
            当前列表搜索
          </label>
          <Input
            id="mobile-purchase-current-search"
            aria-label="当前列表搜索"
            value={searchInput}
            onChange={(event) => setSearchInput(event.target.value)}
            placeholder="搜索编号、标题、供应商"
          />
        </div>
        <Tabs value={status} onValueChange={handleStatusChange}>
          <TabsList className="grid h-auto w-full grid-cols-3 gap-1 min-[390px]:grid-cols-5">
            {STATUS_TABS.map((item) => (
              <TabsTrigger key={item.value} value={item.value} data-testid={`mobile-purchase-tab-${item.value}`}>
                {item.label}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>

        <div className="mt-4 space-y-3">
          {listQuery.isLoading ? <div className="mobile-empty-state">加载中...</div> : null}
          {listQuery.isError ? (
            <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">
              {resolveErrorMessage(listQuery.error)}
            </div>
          ) : null}
          {!listQuery.isLoading && !listQuery.isError && !visibleItems.length ? (
            <div className="mobile-empty-state">
              {searchInput.trim() ? "没有符合搜索的采购记录" : resolveMobileEmptyState(status)}
            </div>
          ) : null}
          {visibleItems.map((item) => (
            <PurchaseRequestCard currentMobileSource={currentMobileSource} item={item} key={item.id} />
          ))}
        </div>
      </section>
    </PageScaffold>
  );
}

export default MobilePurchaseRequestsPage;