import { useEffect, useMemo, useRef, useState } from "react";
import { Link, useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import {
  createReimbursement,
  deleteReimbursement,
  fetchReimbursements,
  type ReimbursementListItem,
  type ReimbursementStatus,
} from "../api/reimbursements";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { ConfirmDialog } from "../components/common/ConfirmDialog";
import { Button } from "../components/ui/button";
import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
import { PageHeader } from "../components/common/PageHeader";
import { PageScaffold } from "../components/patterns/PageScaffold";
import { resolveReimbursementDisplayCode } from "../lib/reimbursementDisplay";
import { resolveErrorMessage } from "../lib/resolveErrorMessage";

const STATUS_TABS: Array<{ value: ReimbursementStatus; label: string }> = [
  { value: "draft", label: "草稿" },
  { value: "reviewing", label: "审批中" },
  { value: "approved", label: "已通过" },
  { value: "paid", label: "已支付" },
];

const STATUS_LABEL: Record<ReimbursementStatus, string> = {
  draft: "草稿",
  reviewing: "审批中",
  approved: "已通过",
  paid: "已支付",
  rejected: "已驳回",
  cancelled: "已取消",
};

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

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

function formatDate(value: string | null | undefined) {
  return value || "未填写日期";
}

function ReimbursementCard({
  item,
  canDeleteDraft,
  currentMobileSource,
  isDeleting,
  onDelete,
}: {
  item: ReimbursementListItem;
  canDeleteDraft: boolean;
  currentMobileSource: string;
  isDeleting: boolean;
  onDelete: (item: ReimbursementListItem) => void;
}) {
  const displayCode = resolveReimbursementDisplayCode(item);

  return (
    <article className="mobile-card" data-testid="mobile-reimbursement-card">
      <Link className="block" to={`/mobile/reimbursements/${item.id}`} state={{ from: currentMobileSource }}>
        <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 text-xs text-zinc-500">{formatDate(item.reimbursementDate)}</div>
          </div>
          <span className="badge-neutral shrink-0">{STATUS_LABEL[item.status]}</span>
        </div>

        <div className="mt-3 text-sm text-zinc-600">
          金额：{formatCurrency(item.totalAmount)}
          {" · "}
          报销人：{item.owner?.name ?? item.submitter?.name ?? "-"}
        </div>

        {item.description ? <p className="mt-2 line-clamp-2 text-sm text-zinc-500">{item.description}</p> : null}
      </Link>

      {canDeleteDraft ? (
        <details className="mt-3 text-sm">
          <summary className="cursor-pointer select-none text-zinc-500">更多</summary>
          <div className="mt-2">
            <Button
              data-testid="mobile-reimbursement-delete"
              disabled={isDeleting}
              onClick={() => onDelete(item)}
              size="sm"
              type="button"
              variant="destructive"
            >
              删除草稿
            </Button>
          </div>
        </details>
      ) : null}
    </article>
  );
}

export function MobileReimbursementsPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();
  const queryClient = useQueryClient();
  const { permissions } = useAuth();
  const [status, setStatus] = useState<ReimbursementStatus>(() => {
    const queryStatus = searchParams.get("status");
    return isReimbursementStatus(queryStatus) ? queryStatus : "draft";
  });
  const [deleteTarget, setDeleteTarget] = useState<ReimbursementListItem | null>(null);
  const createIntentHandledRef = useRef(false);
  const canCreateExpense = hasPermission(permissions, "expense.create");
  const canDeleteExpense = hasPermission(permissions, "expense.delete_own");
  const currentMobileSource = useMemo(() => {
    const params = new URLSearchParams(location.search);
    params.delete("intent");
    params.set("status", status);
    const query = params.toString();
    return `${location.pathname}${query ? `?${query}` : ""}`;
  }, [location.pathname, location.search, status]);

  const listQuery = useQuery({
    queryKey: ["mobile", "reimbursements", status],
    queryFn: () => fetchReimbursements({ status, page: 1, pageSize: 20, scope: "own" }),
  });

  const createMutation = useMutation({
    mutationFn: () => createReimbursement(),
    onSuccess: async (response) => {
      await queryClient.invalidateQueries({ queryKey: ["mobile", "reimbursements"] });
      await queryClient.invalidateQueries({ queryKey: ["reimbursements"] });
      navigate(`/mobile/reimbursements/${response.id}`, { state: { from: currentMobileSource } });
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error));
    },
  });

  useEffect(() => {
    const queryStatus = searchParams.get("status");
    if (isReimbursementStatus(queryStatus)) {
      setStatus(queryStatus);
    }
  }, [searchParams]);

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

  useEffect(() => {
    if (searchParams.get("intent") !== "create" || !canCreateExpense || createIntentHandledRef.current) {
      return;
    }

    createIntentHandledRef.current = true;
    const nextParams = new URLSearchParams(searchParams);
    nextParams.delete("intent");
    setSearchParams(nextParams, { replace: true });
    createMutation.mutate();
  }, [canCreateExpense, createMutation, searchParams, setSearchParams]);

  const deleteMutation = useMutation({
    mutationFn: (reimbursementId: string) => deleteReimbursement(reimbursementId),
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["mobile", "reimbursements"] }),
        queryClient.invalidateQueries({ queryKey: ["reimbursements"] }),
      ]);
      setDeleteTarget(null);
      toast.success("草稿已删除");
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error));
    },
  });

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

  return (
    <PageScaffold className="space-y-4">
      <PageHeader
        title="报销"
        actions={
          canCreateExpense ? (
            <Button
              data-testid="mobile-reimbursements-create"
              disabled={createMutation.isPending}
              onClick={() => createMutation.mutate()}
              type="button"
            >
              {createMutation.isPending ? "创建中..." : "新建报销"}
            </Button>
          ) : null
        }
      />

      <section className="mobile-card">
        <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">{total}</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-reimbursements-list">
        <Tabs value={status} onValueChange={handleStatusChange}>
          <TabsList className="grid h-auto w-full grid-cols-4">
            {STATUS_TABS.map((item) => (
              <TabsTrigger key={item.value} value={item.value} data-testid={`mobile-reimbursements-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 && !items.length ? (
            <div className="mobile-empty-state">暂无报销记录</div>
          ) : null}
          {items.map((item) => (
            <ReimbursementCard
              canDeleteDraft={canDeleteExpense && item.status === "draft"}
              currentMobileSource={currentMobileSource}
              isDeleting={deleteMutation.isPending}
              item={item}
              key={item.id}
              onDelete={setDeleteTarget}
            />
          ))}
        </div>
      </section>

      <ConfirmDialog
        open={Boolean(deleteTarget)}
        onOpenChange={(open) => {
          if (!open) {
            setDeleteTarget(null);
          }
        }}
        title="删除草稿？"
        description="删除后无法恢复，已添加发票会回到可用状态。"
        variant="destructive"
        confirmLabel="删除草稿"
        onConfirm={async () => {
          if (!deleteTarget) {
            return;
          }
          await deleteMutation.mutateAsync(deleteTarget.id);
        }}
      />
    </PageScaffold>
  );
}

export default MobileReimbursementsPage;