import { Link, useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  fetchWorkflowTasks,
  fetchWorkflowTaskSummary,
  type WorkflowTaskSummary,
} from "../api/workflow";
import { Pagination } from "../components/common/Pagination";
import { StatusBadge } from "../components/common/StatusBadge";
import { TableSkeleton } from "../components/common/TableSkeleton";
import {
  FilterBar,
  ListWorkspace,
  PrimaryTable,
  WorkspaceEmptyState,
  WorkspaceHeader,
} from "../components/patterns/ListWorkspace";
import { Button } from "../components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
import { formatDisplayDateTime } from "../lib/displayFormat";
import { TEST_IDS } from "../lib/testIds";

const PAGE_SIZE = 20;
const WORKFLOW_DEFAULT_DUE_MS = 24 * 60 * 60 * 1000;
const WORKFLOW_STATUS_OPTIONS = [
  { value: "pending", label: "待处理" },
  { value: "completed", label: "已处理" },
  { value: "rejected", label: "已驳回" },
  { value: "cancelled", label: "已取消" },
  { value: "skipped", label: "已跳过" },
] as const;
const WORKFLOW_HISTORY_STATUS_OPTIONS = WORKFLOW_STATUS_OPTIONS.filter((item) => item.value !== "pending");
const WORKFLOW_ENTITY_OPTIONS = [
  { value: "all", label: "全部业务" },
  { value: "reimbursement", label: "报销" },
  { value: "leave", label: "请假" },
  { value: "attendance_correction", label: "考勤" },
  { value: "purchase_request", label: "采购" },
  { value: "travel_request", label: "差旅" },
] as const;

type WorkflowStatusFilter = (typeof WORKFLOW_STATUS_OPTIONS)[number]["value"];
type WorkflowEntityFilter = (typeof WORKFLOW_ENTITY_OPTIONS)[number]["value"];

function normalizeStatusFilter(value: string | null): WorkflowStatusFilter {
  return WORKFLOW_STATUS_OPTIONS.some((item) => item.value === value)
    ? (value as WorkflowStatusFilter)
    : "pending";
}

function normalizeEntityFilter(value: string | null): WorkflowEntityFilter {
  return WORKFLOW_ENTITY_OPTIONS.some((item) => item.value === value)
    ? (value as WorkflowEntityFilter)
    : "all";
}

function entityLabel(entityType: string | undefined) {
  if (entityType === "leave") {
    return "请假";
  }
  if (entityType === "reimbursement") {
    return "报销";
  }
  if (entityType === "attendance_correction") {
    return "考勤";
  }
  if (entityType === "purchase_request") {
    return "采购";
  }
  if (entityType === "travel_request") {
    return "差旅";
  }
  return entityType || "-";
}

function businessStatusLabel(status: string | null | undefined) {
  const labels: Record<string, string> = {
    draft: "草稿",
    pending: "待处理",
    reviewing: "审批中",
    submitted: "审批中",
    approved: "已通过",
    rejected: "已驳回",
    returned: "已退回",
    cancelled: "已取消",
    completed: "已完成",
    paid: "已付款",
  };
  return status ? labels[status] ?? status : "-";
}

function isInternalId(value: string | null | undefined) {
  return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value ?? "");
}

function publicReference(value: string | null | undefined) {
  if (!value || isInternalId(value)) {
    return null;
  }
  return value;
}

function displayReference(task: WorkflowTaskSummary) {
  return publicReference(task.businessSummary?.reference ?? task.workflowInstance?.entityId) ?? "未生成业务编号";
}

function displayTitle(task: WorkflowTaskSummary) {
  return task.businessSummary?.title ?? task.stepName;
}

function displayTaskTitle(task: WorkflowTaskSummary) {
  const typeLabel = entityLabel(task.workflowInstance?.entityType);
  const title = displayTitle(task);
  if (!title || title === "-") {
    return typeLabel;
  }
  if (title === typeLabel || title.startsWith(`${typeLabel}：`) || title.startsWith(`${typeLabel}:`)) {
    return title;
  }
  return `${typeLabel}：${title}`;
}

function displayApplicant(task: WorkflowTaskSummary) {
  return task.businessSummary?.applicantName ?? "-";
}

function displayMetric(task: WorkflowTaskSummary) {
  return task.businessSummary?.amount ?? task.businessSummary?.duration ?? "-";
}

function parseTimestamp(value: string | null | undefined) {
  if (!value) {
    return null;
  }
  const timestamp = new Date(value).getTime();
  return Number.isNaN(timestamp) ? null : timestamp;
}

function formatWaitingDuration(value: string | null | undefined) {
  const timestamp = parseTimestamp(value);
  if (!timestamp) {
    return "等待时间未知";
  }
  const diff = Math.max(0, Date.now() - timestamp);
  const minutes = Math.floor(diff / (60 * 1000));
  if (minutes < 1) {
    return "刚刚接收";
  }
  if (minutes < 60) {
    return `已等待 ${minutes} 分钟`;
  }
  const hours = Math.floor(minutes / 60);
  if (hours < 24) {
    return `已等待 ${hours} 小时`;
  }
  return `已等待 ${Math.floor(hours / 24)} 天`;
}

function formatReceivedTime(value: string | null | undefined) {
  const text = formatDisplayDateTime(value);
  return text === "-" ? "接收时间未知" : `接收于 ${text}`;
}

function formatTaskTimeline(task: WorkflowTaskSummary) {
  if (task.status !== "pending" && task.completedAt) {
    const text = formatDisplayDateTime(task.completedAt);
    return text === "-" ? "完成时间未知" : `完成于 ${text}`;
  }
  return formatWaitingDuration(task.createdAt);
}

function isWithinDefaultDueWindow(value: string | null | undefined) {
  const timestamp = parseTimestamp(value);
  if (!timestamp) {
    return false;
  }
  return Date.now() - timestamp < WORKFLOW_DEFAULT_DUE_MS;
}

function isTaskDefaultOverdue(task: WorkflowTaskSummary) {
  return task.status === "pending" && !isWithinDefaultDueWindow(task.createdAt);
}

function workflowTaskStatusLabel(status: string) {
  const match = WORKFLOW_STATUS_OPTIONS.find((item) => item.value === status);
  return match?.label ?? status;
}

function taskReason(task: WorkflowTaskSummary) {
  return task.stepName ? `${task.stepName}找你处理` : "当前节点找你处理";
}

function taskLeadMeta(task: WorkflowTaskSummary) {
  const metric = displayMetric(task);
  return [displayApplicant(task), metric !== "-" ? metric : null, taskReason(task)].filter(Boolean).join(" · ");
}

function taskSecondaryMeta(task: WorkflowTaskSummary) {
  return [formatReceivedTime(task.createdAt), displayReference(task)].join(" · ");
}

export function WorkflowTasksPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const status = normalizeStatusFilter(searchParams.get("status"));
  const entityType = normalizeEntityFilter(searchParams.get("entityType"));
  const page = Number(searchParams.get("page") ?? "1") || 1;
  const taskTab = status === "pending" ? "pending" : "processed";

  function updateSearchParams(next: {
    status?: WorkflowStatusFilter;
    entityType?: WorkflowEntityFilter;
    page?: number;
  }) {
    const nextStatus = next.status ?? status;
    const nextEntityType = next.entityType ?? entityType;
    const params: Record<string, string> = {
      status: nextStatus,
      page: String(next.page ?? page),
    };
    if (nextEntityType !== "all") {
      params.entityType = nextEntityType;
    }
    setSearchParams(params);
  }

  const query = useQuery({
    queryKey: ["workflow", "tasks", status, entityType, page],
    queryFn: () =>
      fetchWorkflowTasks({
        status,
        entityType: entityType === "all" ? undefined : entityType,
        page,
        pageSize: PAGE_SIZE,
      }),
  });

  const summaryQuery = useQuery({
    queryKey: ["workflow", "tasks", "summary", "mine"],
    queryFn: () => fetchWorkflowTaskSummary(),
  });

  const totalPages = Math.max(1, Math.ceil((query.data?.total ?? 0) / PAGE_SIZE));
  const taskItems = query.data?.items ?? [];
  const isDefaultTaskView = status === "pending" && entityType === "all";
  const pendingTotal = summaryQuery.data?.pendingTotal ?? "-";
  const pendingEntitySummary =
    (summaryQuery.data?.byEntityType ?? [])
      .filter((item) => item.pendingTotal > 0)
      .map((item) => `${entityLabel(item.key)} ${item.pendingTotal}`)
      .join(" / ") || "-";
  const earliestPendingWaiting = summaryQuery.data?.earliestPendingAt
    ? formatWaitingDuration(summaryQuery.data.earliestPendingAt)
    : "暂无待处理";

  return (
    <ListWorkspace>
      <WorkspaceHeader title="待我处理" />

      <FilterBar className="ops-command-bar !p-3 md:!p-3.5">
        <div className="ops-command-bar__row">
          <div className="flex min-w-0 flex-col gap-3 md:flex-row md:items-center">
            <Tabs
              data-testid="workflow-tasks-status-tabs"
              value={taskTab}
              onValueChange={(value) =>
                updateSearchParams({
                  status: value === "pending" ? "pending" : "completed",
                  page: 1,
                })
              }
            >
              <TabsList className="ops-command-bar__tabs !h-auto !justify-start !bg-slate-50">
                <TabsTrigger data-testid="workflow-tasks-tab-pending" value="pending">
                  待处理
                </TabsTrigger>
                <TabsTrigger data-testid="workflow-tasks-tab-processed" value="processed">
                  已处理
                </TabsTrigger>
              </TabsList>
            </Tabs>
            <div className="flex min-w-0 flex-wrap items-center gap-3" data-testid="workflow-tasks-focus">
              <span className="text-sm font-medium text-zinc-900">待处理 {pendingTotal}</span>
              <span className="text-sm text-zinc-500">{earliestPendingWaiting}</span>
              {summaryQuery.data?.overdueTotal ? (
                <span className="rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700">
                  超时 {summaryQuery.data.overdueTotal}
                </span>
              ) : null}
            </div>
          </div>
          <div className="ops-command-bar__actions">
            <span className="hidden text-xs text-zinc-500 xl:inline">业务：{pendingEntitySummary}</span>
            {taskTab === "processed" ? (
              <>
                <label className="ops-filter-label" htmlFor="workflow-status-filter">
                  记录
                </label>
                <select
                  id="workflow-status-filter"
                  className="select-sm min-w-28"
                  data-testid="workflow-tasks-processed-status-filter"
                  value={status === "pending" ? "completed" : status}
                  onChange={(event) => updateSearchParams({ status: event.target.value as WorkflowStatusFilter, page: 1 })}
                >
                  {WORKFLOW_HISTORY_STATUS_OPTIONS.map((item) => (
                    <option key={item.value} value={item.value}>
                      {item.label}
                    </option>
                  ))}
                </select>
              </>
            ) : null}
            <label className="ops-filter-label" htmlFor="workflow-entity-type-filter">
              业务
            </label>
            <select
              id="workflow-entity-type-filter"
              className="select-sm min-w-32"
              data-testid="workflow-tasks-entity-filter"
              value={entityType}
              onChange={(event) =>
                updateSearchParams({ entityType: event.target.value as WorkflowEntityFilter, page: 1 })
              }
            >
              {WORKFLOW_ENTITY_OPTIONS.map((item) => (
                <option key={item.value} value={item.value}>
                  {item.label}
                </option>
              ))}
            </select>
          </div>
        </div>
      </FilterBar>

      {query.isLoading ? <TableSkeleton columns={4} rows={5} /> : null}

      {query.isError ? (
        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
          {isApiError(query.error)
            ? `${query.error.code}: ${mapApiErrorMessage(
                query.error.code,
                query.error.details,
                query.error.message,
              )}`
            : "加载待办失败，请稍后重试"}
        </p>
      ) : null}

        {!query.isLoading && !query.isError ? (
          <>
            <div className="mobile-page-stack md:hidden" data-testid="workflow-tasks-mobile-list">
              {taskItems.length ? (
                taskItems.map((task) => (
                  <article className="mobile-list-card" key={task.id}>
                    <div className="mobile-list-card__header">
                      <div className="min-w-0">
                        <div className="mobile-list-card__title">{displayTaskTitle(task)}</div>
                        <div className="mobile-list-card__subtitle">
                          {taskLeadMeta(task)}
                        </div>
                      </div>
                      <StatusBadge className="mobile-status-slot" status={task.status} label={workflowTaskStatusLabel(task.status)} />
                    </div>
                    <div className="mobile-field-list mt-3 rounded-lg bg-zinc-50 px-3 py-2">
                      <div className="mobile-field-row">
                        <span className="mobile-field-label">申请人</span>
                        <span className="mobile-field-value">{displayApplicant(task)}</span>
                      </div>
                      <div className="mobile-field-row">
                        <span className="mobile-field-label">金额/天数</span>
                        <span className="mobile-field-value">{displayMetric(task)}</span>
                      </div>
                      <div className="mobile-field-row">
                        <span className="mobile-field-label">时间</span>
                        <span className="mobile-field-value">{formatTaskTimeline(task)}</span>
                      </div>
                      <div className="mobile-field-row">
                        <span className="mobile-field-label">编号</span>
                        <span className="mobile-field-value">{displayReference(task)}</span>
                      </div>
                    </div>
                    <div className="mt-3 grid grid-cols-2 gap-2">
                      <Button
                        asChild
                        className="col-span-2 min-h-11"
                        size="sm"
                        data-testid={TEST_IDS.workflow.detailLink}
                      >
                        <Link to={`/workflow/tasks/${task.id}`}>
                          {task.status === "pending" ? "处理" : "查看详情"}
                        </Link>
                      </Button>
                    </div>
                  </article>
                ))
              ) : (
                <WorkspaceEmptyState>
                  {isDefaultTaskView ? "当前没有待处理任务。" : "当前筛选下没有审批任务。"}
                </WorkspaceEmptyState>
              )}
            </div>

            <PrimaryTable className="hidden md:block ops-table-focus">
              <Table data-testid="workflow-tasks-table">
                <TableHeader>
                  <tr>
                    <TableHead className="min-w-[360px]">待处理事项</TableHead>
                    <TableHead className="min-w-[180px]">状态 / 时间</TableHead>
                    <TableHead className="min-w-[160px]">业务编号</TableHead>
                    <TableHead className="w-36 text-right">操作</TableHead>
                  </tr>
                </TableHeader>
                <TableBody>
                  {taskItems.length ? (
                    taskItems.map((task) => (
                      <TableRow data-testid="workflow-task-row" key={task.id}>
                        <TableCell>
                          <div className="max-w-[560px] min-w-0">
                            <div className="flex min-w-0 flex-wrap items-center gap-2">
                              <div className="truncate text-sm font-semibold text-zinc-900">{displayTaskTitle(task)}</div>
                              <StatusBadge status={task.status} label={workflowTaskStatusLabel(task.status)} />
                            </div>
                            <div className="mt-1 text-xs leading-5 text-zinc-500">{taskLeadMeta(task)}</div>
                            <div className="mt-1 text-xs leading-5 text-zinc-500">{taskSecondaryMeta(task)}</div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="text-sm font-medium text-zinc-900">{formatTaskTimeline(task)}</div>
                          <div className="mt-1 flex flex-wrap gap-1.5">
                            {isTaskDefaultOverdue(task) ? (
                              <span className="badge-warning">可能超时</span>
                            ) : null}
                            {businessStatusLabel(task.businessSummary?.businessStatus) !== "-" &&
                            businessStatusLabel(task.businessSummary?.businessStatus) !== workflowTaskStatusLabel(task.status) ? (
                              <span className="badge-neutral">{businessStatusLabel(task.businessSummary?.businessStatus)}</span>
                            ) : null}
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="text-sm font-medium text-zinc-900">{displayReference(task)}</div>
                          <div className="mt-1 text-xs text-zinc-500">{entityLabel(task.workflowInstance?.entityType)}</div>
                        </TableCell>
                        <TableCell>
                          <div className="flex flex-col items-stretch gap-2 sm:items-end">
                            <Button
                              asChild
                              size="sm"
                              data-testid={TEST_IDS.workflow.detailLink}
                            >
                              <Link to={`/workflow/tasks/${task.id}`}>
                                {task.status === "pending" ? "处理" : "查看详情"}
                              </Link>
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  ) : (
                    <TableRow>
                      <TableCell className="px-6 py-8 text-center text-zinc-500" colSpan={4}>
                        {isDefaultTaskView ? "当前没有待处理任务" : "当前筛选下没有审批任务"}
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </PrimaryTable>
          </>
        ) : null}

        <Pagination
          page={page}
          totalPages={totalPages}
          onPageChange={(p) => updateSearchParams({ page: p })}
          testIdPrefix="workflow-tasks"
        />
    </ListWorkspace>
  );
}