"use client";

import { useMemo, useState } from "react";
import {
  Button,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
} from "@heroui/react";
import { Settings, FileDown, CheckCircle2, XCircle } from "lucide-react";
import { useTranslations } from "next-intl";
import { useMyPurchases, useWalletBalances } from "@/lib/clientQueries";
import { useAppToast } from "@/app/[lang]/providers";
import { useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { useLocale } from "next-intl";
import { useSession } from "@/auth/session-provider";
import { useSetAtom } from "jotai";
import { loginModalAtom } from "@/components/state/loginAtom";
import AtayaLoader from "@/components/loaders/AtayaLoader";
import TopUpModal from "@/components/sections/wallet/TopUpModal";
import Money from "@/components/ui/Money";
import PaymentMethodSelector from "@/components/payment/PaymentMethodSelector";
import { BaseModal } from "@/components/modal";
import {
  buildDepositInvoiceHtml,
  coerceDepositInvoiceInputFromResponse,
  buildMarketTransactionInvoiceHtml,
  coerceMarketTransactionInvoiceInputFromResponse,
  openInvoiceWindow,
} from "@/lib/invoice";
import { usePaymentSuccess } from "@/hooks/usePaymentSuccess";
import { usePaymentFailure } from "@/hooks/usePaymentFailure";
import { usePaymentCancelled } from "@/hooks/usePaymentCancelled";
import { API_BASE_URL } from "@/lib/axios";
import { parseMoneyValue, toMoneyNumber } from "@/lib/moneyParse";

const API_URL = API_BASE_URL;

function pctOrNaN(value: unknown): number {
  const p = parseMoneyValue(value);
  return p !== undefined ? p : NaN;
}

function formatPurchaseDate(
  raw: string | undefined | null,
  locale: string,
): string {
  if (raw == null || !String(raw).trim()) return "—";
  const s = String(raw).trim();
  const d = new Date(s.includes("T") ? s : s.replace(" ", "T"));
  if (Number.isNaN(d.getTime())) return s;
  try {
    return new Intl.DateTimeFormat(locale, {
      dateStyle: "short",
      timeStyle: "short",
    }).format(d);
  } catch {
    return s;
  }
}

function hasPaddleNumber(purchase: { paddle_number?: unknown } | null) {
  const v = purchase?.paddle_number;
  return v != null && String(v).trim() !== "";
}

export default function PurchasesTable() {
  const t = useTranslations("DASHBOARD.PURCHASES");
  const tToast = useTranslations("TOAST");
  const toast = useAppToast();

  // Handle returning from external payment success/failure
  usePaymentSuccess();
  usePaymentFailure();
  usePaymentCancelled();
  const queryClient = useQueryClient();
  const lang = useLocale();
  const session = useSession();
  const setLoginModal = useSetAtom(loginModalAtom);

  const [search, setSearch] = useState("");
  const [filterType, setFilterType] = useState<"" | "auction" | "offer">("");
  const [filterDateFrom, setFilterDateFrom] = useState("");
  const [filterDateTo, setFilterDateTo] = useState("");

  const {
    data,
    isLoading,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useMyPurchases({
    perPage: 100,
    type: filterType || undefined,
    dateFrom: filterDateFrom || undefined,
    dateTo: filterDateTo || undefined,
  });

  // جلب بيانات المحفظة للعرض فقط
  const { data: walletBalances } = useWalletBalances();
  const availableBalance = toMoneyNumber(walletBalances?.available_balance, 0);

  const purchases = data?.pages.flatMap((page) => page.data) ?? [];
  const items = purchases;

  const showPaddleColumn = useMemo(
    () => purchases.some((p) => hasPaddleNumber(p)),
    [purchases],
  );

  const [confirm, setConfirm] = useState<{
    type: "inspection" | "transport" | "cancel";
    message: string;
    id: number | string;
  } | null>(null);

  const [confirmLoading, setConfirmLoading] = useState(false);

  const [topUpOpen, setTopUpOpen] = useState(false);
  const [topUpDefaultAmount, setTopUpDefaultAmount] = useState<
    number | undefined
  >(undefined);

  const [remainingPaymentModal, setRemainingPaymentModal] = useState<{
    open: boolean;
    marketTransactionId: string;
    amount: number;
    paymentType?: string;
    onSuccessCallback?: () => void;
    // تفاصيل المبلغ
    totalAmount?: number;
    paidAmount?: number;
    baseAmount?: number;
    commissionAmount?: number;
    commissionPercentage?: number;
    taxAmount?: number;
    taxPercentage?: number;
  }>({ open: false, marketTransactionId: "", amount: 0 });

  const [reviewModal, setReviewModal] = useState<{
    open: boolean;
    marketTransactionId: string;
    sellerName?: string;
  }>({ open: false, marketTransactionId: "", sellerName: "" });
  const [reviewRating, setReviewRating] = useState<number>(0);
  const [reviewComment, setReviewComment] = useState("");
  const [reviewSubmitting, setReviewSubmitting] = useState(false);

  const handleRemainingPaymentSuccess = async () => {
    setRemainingPaymentModal({
      open: false,
      marketTransactionId: "",
      amount: 0,
    });
    toast.success(tToast("remaining_paid_success"));
    await queryClient.invalidateQueries({ queryKey: ["my-purchases"] });
    await queryClient.refetchQueries({ queryKey: ["my-purchases"] });
    remainingPaymentModal.onSuccessCallback?.();
  };

  const ensureLoggedIn = () => {
    if (session?.access_token) return true;
    toast.warning(tToast("login_required"));
    setLoginModal(true);
    return false;
  };

  const openPurchaseInvoice = (purchase: any) => {
    try {
      const input = coerceMarketTransactionInvoiceInputFromResponse({
        marketTransaction: purchase,
        direction: "purchase",
        fallback: {
          title: purchase?.title ?? "—",
          sellerName: purchase?.seller?.name ?? "—",
          sellerMobile: purchase?.seller?.phone ?? "—",
          buyerName: "—",
          buyerMobile: "—",
          baseAmount: toMoneyNumber(purchase?.base_amount, 0),
          commissionAmount: toMoneyNumber(purchase?.commission_amount, 0),
          commissionPercentage: pctOrNaN(purchase?.commission_percentage),
          taxAmount: toMoneyNumber(purchase?.tax_amount, 0),
          taxPercentage: pctOrNaN(purchase?.tax_percentage),
          paidAmount: toMoneyNumber(purchase?.paid_amount, 0),
          remainingAmount: toMoneyNumber(purchase?.remaining_amount, 0),
          totalAmount: toMoneyNumber(
            purchase?.total_amount ?? purchase?.amount,
            0,
          ),
        },
      });

      const html = buildMarketTransactionInvoiceHtml(input);
      openInvoiceWindow(html);
    } catch {
      toast.error(tToast("invoice_create_failed"));
    }
  };

  const getStatusMeta = (purchase: any) => {
    const raw = (
      purchase.status_key ||
      purchase.process_status ||
      ""
    ).toString();
    const key = raw.toLowerCase();

    let label = purchase.status_label as string | undefined;
    let color = "bg-slate-100 text-slate-700";

    const isCompletedState =
      key.includes("completed") ||
      key.includes("done") ||
      key.includes("success");

    const isWaitingState =
      key.includes("pending") ||
      key.includes("waiting") ||
      key.includes("inspection") ||
      key.includes("transfer") ||
      key.includes("transport");

    if (isCompletedState) {
      label = t("status.completed");
      color = "bg-emerald-50 text-emerald-700";
    } else if (key.includes("cancel") || key.includes("failed")) {
      label = t("status.cancelled");
      color = "bg-red-50 text-red-700";
    } else if (isWaitingState) {
      // جميع الحالات المحلية / القادمة / الانتظار
      if (key.includes("inspection")) label = t("status.pending_inspection");
      else if (key.includes("transfer") || key.includes("transport"))
        label = t("status.pending_transport");
      else if (!label) label = t("status.pending");
      color = "bg-amber-50 text-amber-700";
    }

    return {
      label: label || raw || "-",
      color,
      isCompleted: isCompletedState,
    };
  };

  const getOperationTypeLabel = (value: string | undefined | null) => {
    const raw = (value || "").toString().trim();
    const key = raw.toLowerCase();
    if (key === "offer" || raw === "عرض") return t("filters.type_offer");
    if (key === "auction" || raw === "مزاد") return t("filters.type_auction");
    return raw || "—";
  };

  if (isLoading) {
    return <AtayaLoader />;
  }

  const normalizedSearch = search.trim().toLowerCase();

  const filteredItems =
    normalizedSearch.length === 0
      ? items
      : items.filter((purchase: any) => {
          const statusMeta = getStatusMeta(purchase);

          const reference = (
            purchase.reference ||
            `P-#${purchase.id}` ||
            ""
          ).toString();
          const title = (purchase.title || "").toString();
          const seller = (
            purchase.seller?.name ||
            purchase.seller?.phone ||
            ""
          ).toString();
          const paddle = (purchase.paddle_number ?? "").toString();
          const createdAt = (purchase.created_at ?? "").toString();
          const statusLabel = (statusMeta.label || "").toString();

          const haystack =
            `${reference} ${title} ${seller} ${paddle} ${createdAt} ${statusLabel}`.toLowerCase();
          return haystack.includes(normalizedSearch);
        });

  const handleExportCsv = () => {
    if (!filteredItems || filteredItems.length === 0) return;

    const header = [
      "unique_id",
      "reference",
      "title",
      "created_at",
      ...(showPaddleColumn ? (["paddle_number"] as const) : []),
      "status",
      "paid_amount",
      "remaining_amount",
      "total_amount",
    ];

    const rows = filteredItems.map((purchase: any) => {
      const statusMeta = getStatusMeta(purchase);

      const uniqueId = purchase.unique_id || "";
      const reference = purchase.reference || `P-#${purchase.id}`;
      const title = purchase.title || "";
      const createdAt = purchase.created_at || "";
      const paddleNum = hasPaddleNumber(purchase)
        ? String(purchase.paddle_number)
        : "";
      const statusLabel = statusMeta.label || "";
      const paidAmount = purchase.paid_amount ?? 0;
      const remainingAmount = purchase.remaining_amount ?? 0;
      const totalAmount =
        purchase.total_amount ?? purchase.amount ?? 0;

      const base = [
        uniqueId,
        reference,
        title,
        createdAt,
      ];
      if (showPaddleColumn) base.push(paddleNum);
      base.push(
        statusLabel,
        paidAmount,
        remainingAmount,
        totalAmount,
      );
      return base;
    });

    const escapeCsv = (value: string | number) => {
      if (value == null) return "";
      const v = value.toString().replace(/"/g, '""');
      if (/[",\n]/.test(v)) {
        return `"${v}"`;
      }
      return v;
    };

    const csvContent = [header, ...rows]
      .map((row) => row.map((cell) => escapeCsv(cell)).join(","))
      .join("\n");

    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "purchases-table.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  if (error) {
    return (
      <div className="space-y-4">
        <div>
          <div className="text-center p-8">
            <div className="text-red-500 text-6xl mb-4">⚠️</div>
            <h3 className="text-lg font-bold text-red-600 mb-2">
              {t("error_loading")}
            </h3>
            <p className="text-gray-600 mb-4">{error.message}</p>
            <Button
              variant="solid"
              color="primary"
              onPress={() => window.location.reload()}
            >
              {t("retry")}
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div>
        <TopUpModal
          isOpen={topUpOpen}
          onOpenChange={(open) => {
            setTopUpOpen(open);
            if (!open) {
              queryClient.invalidateQueries({ queryKey: ["wallet-balances"] });
            }
          }}
          defaultAmount={topUpDefaultAmount}
        />

        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between mb-3">
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full rounded-full border border-slate-200 px-3 py-1.5 text-xs md:text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/60 focus:border-emerald-500 placeholder:text-slate-400 text-slate-700 bg-white"
            placeholder={t("search_placeholder")}
          />
          <button
            type="button"
            onClick={handleExportCsv}
            className="inline-flex items-center justify-center px-3 py-1.5 rounded-full text-xs md:text-sm font-semibold bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-100 whitespace-nowrap"
          >
            {t("export_excel")}
          </button>
        </div>

        <div className="flex flex-wrap items-end gap-3 mb-4 rounded-2xl border border-slate-100 bg-slate-50/80 p-3">
          <label className="flex flex-col gap-1 text-xs font-semibold text-slate-600 min-w-[140px]">
            <span>{t("filters.type_label")}</span>
            <select
              value={filterType}
              onChange={(e) =>
                setFilterType(e.target.value as "" | "auction" | "offer")
              }
              className="rounded-xl border border-slate-200 bg-white px-2 py-1.5 text-sm text-slate-800"
            >
              <option value="">{t("filters.type_all")}</option>
              <option value="auction">{t("filters.type_auction")}</option>
              <option value="offer">{t("filters.type_offer")}</option>
            </select>
          </label>
          <label className="flex flex-col gap-1 text-xs font-semibold text-slate-600 min-w-[150px]">
            <span>{t("filters.date_from")}</span>
            <input
              type="date"
              value={filterDateFrom}
              onChange={(e) => setFilterDateFrom(e.target.value)}
              className="rounded-xl border border-slate-200 bg-white px-2 py-1.5 text-sm text-slate-800"
            />
          </label>
          <label className="flex flex-col gap-1 text-xs font-semibold text-slate-600 min-w-[150px]">
            <span>{t("filters.date_to")}</span>
            <input
              type="date"
              value={filterDateTo}
              onChange={(e) => setFilterDateTo(e.target.value)}
              min={filterDateFrom || undefined}
              className="rounded-xl border border-slate-200 bg-white px-2 py-1.5 text-sm text-slate-800"
            />
          </label>
        </div>

        {filteredItems.length === 0 ? (
          <div className="text-center p-8">
            <div className="text-gray-400 text-6xl mb-4">🧾</div>
            <h3 className="text-lg font-bold text-gray-600 mb-2">
              {t("no_purchases")}
            </h3>
            <p className="text-gray-500">{t("no_purchases_description")}</p>
          </div>
        ) : (
          <>
            <div className="space-y-4 md:hidden">
              {filteredItems.map((purchase: any) => {
                const rawStatus = (
                  purchase.status_key ||
                  purchase.process_status ||
                  ""
                ).toString();
                const lowerStatus = rawStatus.toLowerCase();

                // إذا لم يأتِ action_type من الـ API، نستنتجه من حالة العملية
                let actionType = (purchase.action_type || null) as
                  | "inspection"
                  | "transport"
                  | null;

                if (!actionType) {
                  if (lowerStatus.includes("inspection"))
                    actionType = "inspection";
                  else if (lowerStatus.includes("pending_transfer"))
                    actionType = "transport";
                }

                const statusMeta = getStatusMeta(purchase);
                const isCompleted = statusMeta.isCompleted;

                const remainingAmount = toMoneyNumber(
                  purchase.remaining_amount,
                  0,
                );
                const isInspectionWithZeroRemaining =
                  actionType === "inspection" && remainingAmount <= 0;

                const actionLabel =
                  actionType === "inspection"
                    ? "تأكيد الفحص"
                    : actionType === "transport"
                      ? "تأكيد النقل والاستلام"
                      : "";

                const daysLabel = purchase.days_left
                  ? `متبقي ${purchase.days_left} أيام`
                  : "مكتمل";

                return (
                  <div
                    key={purchase.id}
                    className="rounded-2xl border border-slate-100 bg-white shadow-soft p-4 space-y-3"
                  >
                    <div className="flex items-center justify-between text-xs text-slate-500">
                      <span>{purchase.reference || `P-#${purchase.id}`}</span>
                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-slate-100 text-[11px] text-slate-700">
                        <span>
                          {getOperationTypeLabel(
                            purchase.type || purchase.tag || "auction",
                          )}
                        </span>
                      </span>
                    </div>

                    {purchase.created_at ? (
                      <div className="text-[11px] text-slate-500">
                        {t("columns.purchase_date")}:{" "}
                        {formatPurchaseDate(purchase.created_at, lang)}
                      </div>
                    ) : null}
                    {hasPaddleNumber(purchase) ? (
                      <div className="text-[11px] text-slate-600 font-semibold">
                        {t("columns.paddle_number")}:{" "}
                        {String(purchase.paddle_number)}
                      </div>
                    ) : null}

                    <div className="flex items-center justify-between gap-3">
                      <div className="flex flex-col gap-1">
                        <div className="text-sm font-extrabold text-slate-900">
                          {purchase.title || "خيل عربي أصيل"}
                        </div>
                      </div>
                      <div className="flex flex-col items-end gap-1 text-[11px] text-slate-500">
                        <span
                          className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full ${statusMeta.color}`}
                        >
                          {statusMeta.label}
                        </span>
                        <span className="flex items-center gap-1 text-amber-600">
                          <span>⏱</span>
                          <span>{daysLabel}</span>
                        </span>
                      </div>
                    </div>

                    <div className="space-y-1 text-xs text-slate-600">
                      <div className="flex items-center justify-between">
                        <span>إجمالي السعر</span>
                        <span className="font-semibold">
                          <Money value={purchase.amount ?? 0} />
                        </span>
                      </div>

                      <div
                        className={`mt-1 flex items-center justify-between rounded-xl border px-3 py-2 text-[11px] ${statusMeta.color}`}
                      >
                        <span>{statusMeta.label}</span>
                      </div>
                    </div>

                    <div className="flex justify-center">
                      <Dropdown>
                        <DropdownTrigger>
                          <Button
                            variant="flat"
                            className="font-semibold text-sm gap-2"
                            startContent={<Settings size={16} />}
                          >
                            {t("columns.actions")}
                          </Button>
                        </DropdownTrigger>
                        <DropdownMenu aria-label={t("columns.actions")}>
                          {actionType && !isCompleted ? (
                            <DropdownItem
                              key="confirm-action"
                              startContent={<CheckCircle2 size={14} />}
                              onPress={() => {
                                const remaining =
                                  purchase.remaining_amount ?? 0;
                                const isTransfer =
                                  actionType === "transport" ||
                                  String(statusMeta.label || "").includes(
                                    "النقل",
                                  );

                                const message = isTransfer
                                  ? "بالتأكيد على النقل والاستلام، سيتم تحويل المبالغ المستحقة مباشرةً إلى مالك الخيل. في حال حدوث أي مشكلة بعد التأكيد، فإن المنصة تُخلي مسؤوليتها عن أي التزام لاحق بين الطرفين."
                                  : toMoneyNumber(remaining, 0) <= 0
                                    ? "بتأكيد الفحص سيتم تحويل الحالة إلى بانتظار النقل."
                                    : `بالتاكيد على الفحص يجب عليك استكمال المبلغ المتبقي ${remaining} ريال.`;

                                setConfirm({
                                  type:
                                    actionType ??
                                    ("inspection" as
                                      | "inspection"
                                      | "transport"),
                                  message,
                                  id: purchase.id,
                                });
                              }}
                            >
                              {actionLabel}
                            </DropdownItem>
                          ) : null}
                          {actionType === "inspection" && !isCompleted ? (
                            <DropdownItem
                              key="cancel"
                              className="text-red-600"
                              color="danger"
                              startContent={<XCircle size={14} />}
                              onPress={() => {
                                setConfirm({
                                  type: "cancel",
                                  message:
                                    "هل أنت متأكد من إلغاء هذه العملية؟ سيتم إلغاء الطلب ولا يمكن التراجع عن هذا الإجراء.",
                                  id: purchase.id,
                                });
                              }}
                            >
                              إلغاء العملية
                            </DropdownItem>
                          ) : null}
                          <DropdownItem
                            key="invoice"
                            startContent={<FileDown size={14} />}
                            onPress={() => openPurchaseInvoice(purchase)}
                          >
                            {t("actions.download_invoice")}
                          </DropdownItem>
                        </DropdownMenu>
                      </Dropdown>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Desktop table */}
            <div className="overflow-auto hidden md:block">
              <table className="w-full text-sm border rounded-2xl overflow-hidden">
                <thead>
                  <tr className="text-center bg-slate-50">
                    <th className="p-3 border">{t("columns.unique_id")}</th>
                    <th className="p-3 border">{t("columns.title")}</th>
                    <th className="p-3 border">{t("columns.seller")}</th>
                    <th className="p-3 border">{t("columns.type")}</th>
                    <th className="p-3 border">{t("columns.purchase_date")}</th>
                    {showPaddleColumn ? (
                      <th className="p-3 border">
                        {t("columns.paddle_number")}
                      </th>
                    ) : null}
                    <th className="p-3 border">{t("columns.status")}</th>
                    <th className="p-3 border">{t("columns.paid_amount")}</th>
                    <th className="p-3 border">
                      {t("columns.remaining_amount")}
                    </th>
                    <th className="p-3 border">{t("columns.amount")}</th>
                    <th className="p-3 border">{t("columns.actions")}</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredItems.map((purchase: any) => {
                    const statusMeta = getStatusMeta(purchase);

                    const rawStatus = (
                      purchase.status_key ||
                      purchase.process_status ||
                      ""
                    ).toString();
                    const statusKey = rawStatus.toLowerCase();

                    const actionType = statusKey.includes("inspection")
                      ? "inspection"
                      : statusKey.includes("pending_transfer") ||
                          statusKey.includes("transfer") ||
                          statusKey.includes("transport")
                        ? "transport"
                        : null;

                    const isCompleted = statusMeta.isCompleted;
                    const canShowAction = Boolean(actionType) && !isCompleted;
                    const remainingAmount = toMoneyNumber(
                      purchase.remaining_amount,
                      0,
                    );
                    const actionLabel =
                      actionType === "inspection"
                        ? "تأكيد الفحص"
                        : actionType === "transport"
                          ? "تأكيد النقل والاستلام"
                          : t("action_button");

                    return (
                      <tr
                        key={purchase.id}
                        className="border-b text-center hover:bg-slate-50"
                      >
                        <td className="p-3 border text-xs md:text-sm whitespace-nowrap">
                          {purchase.unique_id || "-"}
                        </td>
                        <td className="p-3 border text-xs md:text-sm max-w-xs truncate">
                          {purchase.title}
                        </td>
                        <td className="p-3 border text-xs md:text-sm" dir="ltr">
                          {purchase.seller?.name ||
                            purchase.seller?.phone ||
                            "-"}
                        </td>
                        <td className="p-3 border text-xs md:text-sm">
                          {getOperationTypeLabel(
                            purchase.type || purchase.tag,
                          )}
                        </td>
                        <td className="p-3 border text-xs md:text-sm whitespace-nowrap">
                          {formatPurchaseDate(purchase.created_at, lang)}
                        </td>
                        {showPaddleColumn ? (
                          <td className="p-3 border text-xs md:text-sm">
                            {hasPaddleNumber(purchase)
                              ? String(purchase.paddle_number)
                              : "—"}
                          </td>
                        ) : null}
                        <td className="p-3 border text-xs md:text-sm">
                          <span
                            className={`inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[11px] font-semibold ${statusMeta.color}`}
                          >
                            {statusMeta.label}
                          </span>
                        </td>
                        <td className="p-3 border text-xs md:text-sm">
                          <Money value={purchase.paid_amount ?? 0} />
                        </td>
                        <td className="p-3 border text-xs md:text-sm">
                          <Money value={purchase.remaining_amount ?? 0} />
                        </td>
                        <td className="p-3 border text-xs md:text-sm font-semibold">
                          <Money value={purchase.total_amount ?? 0} />
                        </td>
                        <td className="p-3 border">
                          <div className="flex justify-center">
                            <Dropdown>
                              <DropdownTrigger>
                                <Button
                                  isIconOnly
                                  size="sm"
                                  variant="light"
                                  className="text-slate-500 hover:text-slate-700"
                                  aria-label={t("columns.actions")}
                                >
                                  <Settings size={18} />
                                </Button>
                              </DropdownTrigger>
                              <DropdownMenu aria-label={t("columns.actions")}>
                                {canShowAction ? (
                                  <DropdownItem
                                    key="confirm-action"
                                    startContent={<CheckCircle2 size={14} />}
                                    onPress={() => {
                                      const isTransfer =
                                        actionType === "transport" ||
                                        String(rawStatus).includes("النقل");

                                      const message = isTransfer
                                        ? "بالتأكيد على النقل والاستلام، سيتم تحويل المبالغ المستحقة مباشرةً إلى مالك الخيل. في حال حدوث أي مشكلة بعد التأكيد، فإن المنصة تُخلي مسؤوليتها عن أي التزام لاحق بين الطرفين."
                                        : remainingAmount <= 0
                                          ? "بتأكيد الفحص سيتم تحويل الحالة إلى بانتظار النقل."
                                          : `بالتاكيد على الفحص يجب عليك استكمال المبلغ المتبقي ${remainingAmount}.`;

                                      setConfirm({
                                        type: actionType as any,
                                        message,
                                        id: purchase.id,
                                      });
                                    }}
                                  >
                                    {actionLabel}
                                  </DropdownItem>
                                ) : null}
                                {actionType === "inspection" &&
                                !isCompleted ? (
                                  <DropdownItem
                                    key="cancel"
                                    className="text-red-600"
                                    color="danger"
                                    startContent={<XCircle size={14} />}
                                    onPress={() => {
                                      setConfirm({
                                        type: "cancel",
                                        message:
                                          "هل أنت متأكد من إلغاء هذه العملية؟ سيتم إلغاء الطلب ولا يمكن التراجع عن هذا الإجراء.",
                                        id: purchase.id,
                                      });
                                    }}
                                  >
                                    إلغاء العملية
                                  </DropdownItem>
                                ) : null}
                                <DropdownItem
                                  key="invoice"
                                  startContent={<FileDown size={14} />}
                                  onPress={() =>
                                    openPurchaseInvoice(purchase)
                                  }
                                >
                                  {t("actions.download_invoice")}
                                </DropdownItem>
                              </DropdownMenu>
                            </Dropdown>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>

            {hasNextPage && (
              <div className="flex justify-center mt-4">
                <Button
                  variant="solid"
                  color="primary"
                  onPress={() => fetchNextPage()}
                  isLoading={isFetchingNextPage}
                >
                  {isFetchingNextPage ? t("loading_more") : t("load_more")}
                </Button>
              </div>
            )}
          </>
        )}

        {confirm && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
            <div className="bg-white rounded-2xl shadow-xl max-w-md w-[90vw] p-5 text-center space-y-4">
              <div className="w-12 h-12 mx-auto rounded-full bg-amber-100 flex items-center justify-center text-3xl">
                !
              </div>
              <p className="text-sm text-slate-700 leading-relaxed">
                {confirm.message}
              </p>

              {/* عرض معلومات المحفظة عند وجود مبلغ متبقي (فقط لغير الإلغاء) */}
              {(() => {
                const c = confirm;
                if (!c || c.type === "cancel") return null;
                const purchase = items.find(
                  (p: any) => String(p.id) === String(c.id),
                );
                const remaining = toMoneyNumber(purchase?.remaining_amount, 0);
                if (remaining <= 0) return null;

                const hasEnough = availableBalance >= remaining;
                return (
                  <div className="bg-slate-50 rounded-xl p-4 text-right space-y-3 border border-slate-200">
                    <div className="text-sm font-bold text-slate-800 border-b pb-2">
                      معلومات المحفظة
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-slate-600">الرصيد المتاح:</span>
                      <span
                        className={`font-bold ${hasEnough ? "text-green-600" : "text-red-600"}`}
                      >
                        <Money value={availableBalance} />
                      </span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-slate-600">المبلغ المطلوب:</span>
                      <span className="font-bold text-amber-600">
                        <Money value={remaining} />
                      </span>
                    </div>
                    {hasEnough ? (
                      <div className="text-xs text-green-600 bg-green-50 rounded-lg px-3 py-2">
                        ✓ رصيدك كافٍ لإتمام العملية
                      </div>
                    ) : (
                      <div className="text-xs text-red-600 bg-red-50 rounded-lg px-3 py-2">
                        ⚠ رصيدك غير كافٍ، يرجى شحن المحفظة أولاً
                      </div>
                    )}
                  </div>
                );
              })()}

              <div className="flex items-center justify-center gap-3 text-sm font-semibold">
                <button
                  className="flex-1 py-2 rounded-full bg-slate-200 text-slate-700"
                  onClick={() => setConfirm(null)}
                >
                  تراجع
                </button>
                <button
                  className={`flex-1 py-2 rounded-full text-white ${
                    confirm?.type === "cancel"
                      ? "bg-red-600 hover:bg-red-700"
                      : "bg-emerald-600 hover:bg-emerald-700"
                  }`}
                  onClick={() => {
                    if (!confirm || confirmLoading) return;

                    const run = async () => {
                      try {
                        setConfirmLoading(true);

                        const real = items.find(
                          (p: any) => String(p.id) === String(confirm.id),
                        );

                        if (!real) {
                          toast.error(tToast("transaction_not_found"));
                          return;
                        }

                        const marketId = real.market_transaction_id || real.id;

                        if (!ensureLoggedIn()) {
                          return;
                        }

                        const accessToken = session?.access_token;
                        if (!accessToken) {
                          return;
                        }

                        if (confirm.type === "cancel") {
                          await axios.post(
                            `${API_URL}/user/dashboard/market-transaction/${encodeURIComponent(
                              String(marketId),
                            )}/change-status`,
                            (() => {
                              const form = new FormData();
                              form.append("status", "cancelled");
                              return form;
                            })(),
                            {
                              headers: {
                                Authorization: `Bearer ${accessToken}`,
                                Accept: "application/json",
                                lang,
                              },
                            },
                          );

                          toast.success(tToast("transaction_cancelled_success"));
                        } else if (confirm.type === "inspection") {
                          const remaining = toMoneyNumber(
                            real.remaining_amount,
                            0,
                          );

                          if (remaining <= 0) {
                            await axios.post(
                              `${API_URL}/user/dashboard/market-transaction/${encodeURIComponent(
                                String(marketId),
                              )}/change-status`,
                              (() => {
                                const form = new FormData();
                                form.append("status", "pending_transfer");
                                return form;
                              })(),
                              {
                                headers: {
                                  Authorization: `Bearer ${accessToken}`,
                                  Accept: "application/json",
                                  lang,
                                },
                              },
                            );

                            toast.success(tToast("pending_transfer_success"));
                          } else {
                            // افتح مودال الدفع لاختيار طريقة الدفع (محفظة أو بوابة)
                            setRemainingPaymentModal({
                              open: true,
                              marketTransactionId: String(marketId),
                              amount: remaining,
                              paymentType: real.payment_type
                                ? String(real.payment_type)
                                : undefined,
                              totalAmount: toMoneyNumber(
                                real.total_amount ?? real.amount,
                                0,
                              ),
                              paidAmount: toMoneyNumber(real.paid_amount, 0),
                              baseAmount: toMoneyNumber(real.base_amount, 0),
                              commissionAmount: toMoneyNumber(
                                real.commission_amount,
                                0,
                              ),
                              commissionPercentage: toMoneyNumber(
                                real.commission_percentage,
                                2.5,
                              ),
                              taxAmount: toMoneyNumber(real.tax_amount, 0),
                              taxPercentage: toMoneyNumber(
                                real.tax_percentage,
                                15,
                              ),
                            });
                            setConfirmLoading(false);
                            setConfirm(null);
                            return;
                          }
                        } else if (confirm.type === "transport") {
                          const remaining = toMoneyNumber(
                            real.remaining_amount,
                            0,
                          );

                          if (remaining > 0) {
                            // افتح مودال الدفع لاختيار طريقة الدفع (محفظة أو بوابة)
                            setRemainingPaymentModal({
                              open: true,
                              marketTransactionId: String(marketId),
                              amount: remaining,
                              paymentType: real.payment_type
                                ? String(real.payment_type)
                                : undefined,
                              totalAmount: toMoneyNumber(
                                real.total_amount ?? real.amount,
                                0,
                              ),
                              paidAmount: toMoneyNumber(real.paid_amount, 0),
                              baseAmount: toMoneyNumber(real.base_amount, 0),
                              commissionAmount: toMoneyNumber(
                                real.commission_amount,
                                0,
                              ),
                              commissionPercentage: toMoneyNumber(
                                real.commission_percentage,
                                2.5,
                              ),
                              taxAmount: toMoneyNumber(real.tax_amount, 0),
                              taxPercentage: toMoneyNumber(
                                real.tax_percentage,
                                15,
                              ),
                            });
                            setConfirmLoading(false);
                            setConfirm(null);
                            return;
                          }

                          await axios.post(
                            `${API_URL}/user/dashboard/market-transaction/${encodeURIComponent(
                              String(marketId),
                            )}/change-status`,
                            (() => {
                              const form = new FormData();
                              form.append("status", "completed");
                              return form;
                            })(),
                            {
                              headers: {
                                Authorization: `Bearer ${accessToken}`,
                                Accept: "application/json",
                                lang,
                              },
                            },
                          );

                          toast.success(tToast("transport_confirmed_success"));

                          const sellerName = real.seller?.name;

                          // Defer modal to next tick so it appears after confirm modal closes
                          setTimeout(() => {
                            setReviewModal({
                              open: true,
                              marketTransactionId: String(marketId),
                              sellerName,
                            });
                            setReviewRating(0);
                            setReviewComment("");
                          }, 150);
                        }

                        await queryClient.invalidateQueries({
                          queryKey: ["my-purchases"],
                        });
                        await queryClient.refetchQueries({
                          queryKey: ["my-purchases"],
                        });
                      } catch (err: any) {
                        const raw =
                          err?.response?.data?.message ||
                          err?.response?.data?.errors ||
                          err?.info?.message ||
                          err?.message ||
                          "حدث خطأ";
                        const msg =
                          typeof raw === "string" ? raw : JSON.stringify(raw);
                        toast.error(msg);
                      } finally {
                        setConfirmLoading(false);
                        setConfirm(null);
                      }
                    };

                    run();
                  }}
                >
                  {confirmLoading
                    ? "جارٍ التنفيذ..."
                    : confirm?.type === "cancel"
                      ? "تأكيد الإلغاء"
                      : "تأكيد"}
                </button>
              </div>
            </div>
          </div>
        )}

        <BaseModal
          isOpen={remainingPaymentModal.open}
          onOpenChange={(open) => {
            if (!open) {
              setRemainingPaymentModal({
                open: false,
                marketTransactionId: "",
                amount: 0,
              });
            }
          }}
          title="دفع المبلغ المتبقي"
          contentClassName="w-[min(100vw,520px)] rounded-2xl"
        >
          <div className="space-y-4">
            <p className="text-sm text-slate-600">
              يرجى اختيار طريقة الدفع لاستكمال المبلغ المتبقي.
            </p>

            {/* تفاصيل المبلغ */}
            <div className="border rounded-xl bg-slate-50 p-4 text-sm space-y-3">
              <div className="font-bold text-slate-800 border-b pb-2 mb-2">
                تفاصيل المبلغ
              </div>

              {/* المتبقي من الخيل (السعر الكلي - العربون) */}
              {remainingPaymentModal.baseAmount !== undefined &&
                remainingPaymentModal.baseAmount > 0 && (
                  <div className="flex items-center justify-between text-slate-600">
                    <span>المتبقي من قيمة الخيل</span>
                    <span className="font-semibold">
                      <Money
                        value={
                          (remainingPaymentModal.baseAmount || 0) -
                          (remainingPaymentModal.paidAmount || 0)
                        }
                      />
                    </span>
                  </div>
                )}

              {/* عمولة عطايا */}
              {remainingPaymentModal.commissionAmount !== undefined &&
                remainingPaymentModal.commissionAmount > 0 && (
                  <div className="flex items-center justify-between text-slate-600">
                    <span>
                      عمولة عطايا{" "}
                      {remainingPaymentModal.commissionPercentage
                        ? `(${remainingPaymentModal.commissionPercentage}%)`
                        : ""}
                    </span>
                    <span className="font-semibold">
                      <Money value={remainingPaymentModal.commissionAmount} />
                    </span>
                  </div>
                )}

              {/* ضريبة العمولة */}
              {remainingPaymentModal.taxAmount !== undefined &&
                remainingPaymentModal.taxAmount > 0 && (
                  <div className="flex items-center justify-between text-slate-600">
                    <span>
                      ضريبة القيمة المضافة{" "}
                      {remainingPaymentModal.taxPercentage
                        ? `(${remainingPaymentModal.taxPercentage}%)`
                        : ""}
                    </span>
                    <span className="font-semibold">
                      <Money value={remainingPaymentModal.taxAmount} />
                    </span>
                  </div>
                )}

              {/* الإجمالي المتبقي */}
              <div className="flex items-center justify-between pt-2 border-t border-slate-200">
                <span className="font-bold text-slate-800">
                  إجمالي المبلغ المتبقي
                </span>
                <span className="font-bold text-[#0f5132] text-lg">
                  <Money value={remainingPaymentModal.amount} />
                </span>
              </div>
            </div>

            {/* معلومات المحفظة */}
            <div className="border rounded-xl bg-emerald-50 p-3 text-sm">
              <div className="flex items-center justify-between">
                <span className="text-emerald-800">الرصيد المتاح</span>
                <span className="font-bold text-emerald-700">
                  <Money value={availableBalance} />
                </span>
              </div>
              {availableBalance < remainingPaymentModal.amount && (
                <div className="mt-2 text-xs text-amber-700 bg-amber-50 rounded-lg p-2 text-center">
                  الرصيد غير كافٍ - يمكنك الدفع عبر البوابة الإلكترونية أو شحن
                  المحفظة
                </div>
              )}
            </div>

            <PaymentMethodSelector
              amount={remainingPaymentModal.amount}
              paymentParams={{
                payment_purpose: "pay_remaining_amount",
                market_transaction_id:
                  remainingPaymentModal.marketTransactionId,
                payment_type: remainingPaymentModal.paymentType,
              }}
              onSuccess={handleRemainingPaymentSuccess}
              showSummary={false}
            />
          </div>
        </BaseModal>

        {/* Review modal - shown after successful transport confirmation */}
        {reviewModal.open && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
            <div className="bg-white rounded-2xl shadow-xl max-w-md w-[90vw] p-6 text-center space-y-4">
              <h3 className="text-lg font-bold text-slate-800">
                {t("review_modal.title")}
              </h3>
              <p className="text-sm text-slate-600">
                {t("review_modal.subtitle", {
                  seller: reviewModal.sellerName || t("columns.seller"),
                })}
              </p>

              {!reviewModal.marketTransactionId && (
                <p className="text-xs text-amber-600 bg-amber-50 rounded-lg px-3 py-2">
                  {t("review_modal.transaction_unavailable")}
                </p>
              )}

              <div className="space-y-2">
                <p className="text-sm font-medium text-slate-700 text-start">
                  {t("review_modal.stars_label")}
                </p>
                <div className="flex justify-center gap-1" dir="ltr">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <button
                      key={star}
                      type="button"
                      onClick={() => setReviewRating(star)}
                      className="text-3xl transition-transform hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded"
                      aria-label={`${star} ${star === 1 ? "star" : "stars"}`}
                    >
                      {star <= reviewRating ? (
                        <span className="text-amber-400">★</span>
                      ) : (
                        <span className="text-slate-300">☆</span>
                      )}
                    </button>
                  ))}
                </div>
              </div>

              <div className="space-y-2 text-start">
                <label className="text-sm font-medium text-slate-700 block">
                  {t("review_modal.comment_placeholder")}
                </label>
                <textarea
                  value={reviewComment}
                  onChange={(e) =>
                    setReviewComment(e.target.value.slice(0, 1000))
                  }
                  maxLength={1000}
                  rows={4}
                  className="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/60 focus:border-emerald-500 resize-none"
                  placeholder={t("review_modal.comment_placeholder")}
                />
                <p className="text-xs text-slate-500 text-end">
                  {reviewComment.length}/1000
                </p>
              </div>

              <div className="flex items-center justify-center gap-3 text-sm font-semibold pt-2">
                <button
                  type="button"
                  className="flex-1 py-2.5 rounded-full bg-slate-100 text-slate-700 hover:bg-slate-200"
                  onClick={() => {
                    setReviewModal({
                      open: false,
                      marketTransactionId: "",
                      sellerName: "",
                    });
                    setReviewRating(0);
                    setReviewComment("");
                  }}
                >
                  {t("review_modal.cancel")}
                </button>
                <button
                  type="button"
                  disabled={
                    reviewRating < 1 ||
                    reviewSubmitting ||
                    !reviewModal.marketTransactionId
                  }
                  className="flex-1 py-2.5 rounded-full bg-emerald-600 text-white disabled:opacity-50 disabled:cursor-not-allowed hover:bg-emerald-700"
                  onClick={async () => {
                    if (
                      !reviewModal.marketTransactionId ||
                      reviewRating < 1 ||
                      reviewSubmitting
                    )
                      return;
                    try {
                      setReviewSubmitting(true);
                      const accessToken = session?.access_token;
                      if (!accessToken) {
                        toast.warning(tToast("login_required"));
                        return;
                      }
                      await axios.post(
                        `${API_URL}/user/reviews`,
                        {
                          market_transaction_id:
                            reviewModal.marketTransactionId,
                          rating: reviewRating,
                          comment: reviewComment.trim() || null,
                        },
                        {
                          headers: {
                            Authorization: `Bearer ${accessToken}`,
                            Accept: "application/json",
                            "Content-Type": "application/json",
                            lang,
                          },
                        },
                      );
                      toast.success(t("review_modal.success"));
                      setReviewModal({
                        open: false,
                        marketTransactionId: "",
                        sellerName: "",
                      });
                      setReviewRating(0);
                      setReviewComment("");
                    } catch (err: any) {
                      const raw =
                        err?.response?.data?.message ||
                        err?.response?.data?.errors ||
                        err?.message ||
                        "حدث خطأ";
                      const msg =
                        typeof raw === "string" ? raw : JSON.stringify(raw);
                      toast.error(msg || t("review_modal.error"));
                    } finally {
                      setReviewSubmitting(false);
                    }
                  }}
                >
                  {reviewSubmitting ? "..." : t("review_modal.submit")}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}