"use client";

import { useEffect, useMemo, useState } from "react";
import { Card, CardBody, Button, Input } from "@heroui/react";
import { useQueryClient } from "@tanstack/react-query";
import { BaseModal } from "../modal";
import { useLocale, useTranslations } from "next-intl";
import { useAppToast } from "@/app/[lang]/providers";
import { PhoneNumber } from "@/components";
import Image from "next/image";
import Money from "@/components/ui/Money";
import AtayaLoader from "@/components/loaders/AtayaLoader";
import {
  useWalletBalances,
  useWalletTransactions,
  useUpdateRefundMethods,
  useRefundMethod,
} from "@/lib/clientQueries";
import { requestRefund } from "@/actions/refund";
import { toMoneyNumber } from "@/lib/moneyParse";

export default function WalletSection() {
  const t = useTranslations("DASHBOARD.WALLET");
  const locale = useLocale();
  const toast = useAppToast();
  const queryClient = useQueryClient();

  const {
    data: balances,
    isLoading: balancesLoading,
    isFetching: balancesFetching,
  } = useWalletBalances();

  const {
    data: refundMethod,
    isLoading: refundLoading,
    isFetching: refundFetching,
  } = useRefundMethod();

  const [hasBank, setHasBank] = useState(false);
  const [hasStc, setHasStc] = useState(false);
  const [available, setAvailable] = useState(0);
  const [hold, setHold] = useState(0);
  const [due, setDue] = useState(0);
  const [current, setCurrent] = useState(0);
  const [companyCommission, setCompanyCommission] = useState(0);
  const [hasPendingRefund, setHasPendingRefund] = useState(false);
  const [chips, setChips] = useState<string[]>([]);
  const [result, setResult] = useState(t("enter_values"));

  const [hasLoadedWallet, setHasLoadedWallet] = useState(false);

  const [paddle, setPaddle] = useState(1500);
  const [hammer, setHammer] = useState(50000);
  const [feePct, setFeePct] = useState(2.5);

  const [isWithdrawOpen, setIsWithdrawOpen] = useState(false);
  const [isRefundSuccessOpen, setIsRefundSuccessOpen] = useState(false);
  const [isAddBankOpen, setIsAddBankOpen] = useState(false);
  const [isAddStcOpen, setIsAddStcOpen] = useState(false);

  const [refundAmount, setRefundAmount] = useState("");
  const [refundSubmitting, setRefundSubmitting] = useState(false);

  const [stcPhone, setStcPhone] = useState("");
  const [stcName, setStcName] = useState("");
  const [bankType, setBankType] = useState<"local" | "worldwide">("local");
  const [bankNameInput, setBankNameInput] = useState("");
  const [bankUserName, setBankUserName] = useState("");
  const [bankIban, setBankIban] = useState("");
  const [bankSwift, setBankSwift] = useState("");

  const [filters, setFilters] = useState<{
    balance_type: string;
    payment_method: string;
    operation_type: string; // "" | "in" | "out"
    from_date: string;
    to_date: string;
    cursor?: string;
  }>({
    balance_type: "",
    payment_method: "",
    operation_type: "",
    from_date: "",
    to_date: "",
    cursor: undefined,
  });

  const { mutateAsync: updateRefundMethods, isPending: isSavingRefund } =
    useUpdateRefundMethods();

  const {
    data: transactions,
    isLoading: txLoading,
    isError: txError,
  } = useWalletTransactions({
    balance_type: filters.balance_type || undefined,
    payment_method: filters.payment_method || undefined,
    operation_type:
      filters.operation_type === "in"
        ? true
        : filters.operation_type === "out"
          ? false
          : undefined,
    from_date: filters.from_date || undefined,
    to_date: filters.to_date || undefined,
    per_page: 15,
    cursor: filters.cursor,
  });

  useEffect(() => {
    if (!hasLoadedWallet && balances && transactions) {
      setHasLoadedWallet(true);
    }
  }, [balances, transactions, hasLoadedWallet]);

  const numberFormatter = useMemo(() => {
    // نستخدم أرقام إنجليزية دائمًا مع فواصل آلاف
    return new Intl.NumberFormat("en-US");
  }, []);

  const format = (n: number) => numberFormatter.format(n);

  useEffect(() => {
    if (!refundMethod) {
      setHasBank(false);
      setHasStc(false);
      return;
    }

    if (refundMethod.method === "bank_transfer") {
      setHasBank(true);
      setHasStc(false);
    } else if (refundMethod.method === "stcp") {
      setHasBank(false);
      setHasStc(true);
    } else {
      setHasBank(false);
      setHasStc(false);
    }
  }, [refundMethod]);

  const selectedRefundMethod = refundMethod?.method as
    | "stcp"
    | "bank_transfer"
    | undefined;

  const canAddBank = !selectedRefundMethod || selectedRefundMethod === "stcp";
  const canAddStc =
    !selectedRefundMethod || selectedRefundMethod === "bank_transfer";

  useEffect(() => {
    if (!balances) return;
    setCurrent(toMoneyNumber(balances.current_balance, 0));
    setAvailable(toMoneyNumber(balances.available_balance, 0));
    setHold(toMoneyNumber(balances.pending_balance, 0));
    setDue(toMoneyNumber(balances.amount_due, 0));
    setCompanyCommission(toMoneyNumber(balances.company_commission, 0));
    setHasPendingRefund(!!(balances as any).has_pending_refund);
  }, [balances]);

  const recalc = () => {
    const fee = hammer * (feePct / 100);
    const totalDue = Math.max(0, hammer + fee - paddle);
    const out = `${t("auction_value")}: ${format(hammer)}\n${t(
      "commission",
    )} (${feePct}%): ${format(fee)}\n${t("paddle_paid")}: -${format(
      paddle,
    )}\n——————————————\n${t("remaining_due")}: ${format(totalDue)}`;

    setResult(out);
    setChips([
      `${t("commission_label")}: ${format(fee)}`,
      `${t("remaining_label")}: ${format(totalDue)}`,
      t("will_add_to_due"),
    ]);

    setDue(totalDue);
    const newCurrent = available + hold - totalDue;
    setCurrent(newCurrent);
  };

  const reset = () => {
    setAvailable(0);
    setHold(0);
    setDue(0);
    setCurrent(0);
    setChips([]);
    setResult(t("enter_values"));
  };

  const handleRefund = async () => {
    const refundNum = toMoneyNumber(refundAmount, 0);
    if (!refundAmount || refundNum <= 0) {
      toast.error(t("refund_error_invalid_amount"));
      return;
    }
    if (refundNum > available) {
      toast.error(t("refund_error_exceeds_available"));
      return;
    }
    if (!selectedRefundMethod) {
      toast.error(t("refund_error_add_method_first"));
      return;
    }

    setRefundSubmitting(true);
    try {
      const res = await requestRefund({
        purpose: "refund",
        payment_method: selectedRefundMethod,
        amount: refundNum,
      });

      if (res.success) {
        setIsWithdrawOpen(false);
        setIsRefundSuccessOpen(true);
        setRefundAmount("");
        // Refresh wallet data
        queryClient.invalidateQueries({ queryKey: ["wallet-balances"] });
        queryClient.invalidateQueries({ queryKey: ["wallet-transactions"] });
      } else {
        toast.error(res.message || t("refund_error_submit_failed"));
      }
    } catch (error: any) {
      const msg =
        error?.info?.message ||
        error?.message ||
        t("refund_error_submit_failed");
      toast.error(msg);
    } finally {
      setRefundSubmitting(false);
    }
  };

  const handleSaveBankRefund = async () => {
    try {
      const res = await updateRefundMethods({
        method: "bank_transfer",
        details: {
          bank_type: bankType,
          bank_name: bankNameInput,
          user_name: bankUserName,
          iban: bankIban,
          ...(bankType === "worldwide" && bankSwift
            ? { swift: bankSwift }
            : {}),
        },
      });

      setHasBank(true);
      setIsAddBankOpen(false);
      const msg = (res as any)?.message || t("bank_linked");
      toast.success(msg);
      queryClient.invalidateQueries({ queryKey: ["refund-method"] });
    } catch (error: any) {
      console.error("Failed to update refund methods (bank)", error);
      const msg =
        error?.response?.data?.message ||
        error?.message ||
        t("error_loading_transactions");
      toast.error(msg);
    }
  };

  const handleSaveStcRefund = async () => {
    try {
      const res = await updateRefundMethods({
        method: "stcp",
        details: {
          name: stcName,
          phone: stcPhone,
        },
      });

      setHasStc(true);
      setIsAddStcOpen(false);
      const msg = (res as any)?.message || t("stc_linked");
      toast.success(msg);
      queryClient.invalidateQueries({ queryKey: ["refund-method"] });
    } catch (error: any) {
      console.error("Failed to update refund methods (stcp)", error);
      const msg =
        error?.response?.data?.message ||
        error?.message ||
        t("error_loading_transactions");
      toast.error(msg);
    }
  };

  const showInitialLoader =
    !hasLoadedWallet &&
    (balancesLoading ||
      balancesFetching ||
      txLoading ||
      refundLoading ||
      refundFetching);

  if (showInitialLoader) {
    return (
      <div className="min-h-[260px] flex items-center justify-center">
        <AtayaLoader />
      </div>
    );
  }

  return (
    <div className="bg-[#f7f9fb] text-slate-800 p-6 rounded-xl space-y-6">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-extrabold">{t("title")}</h1>
          <p className="text-slate-500 text-sm">{t("subtitle")}</p>
        </div>
        {/*      <div className="flex flex-wrap gap-2">
          <Button
            className="border bg-white"
            onPress={() => setIsAddBankOpen(true)}
          >
            {t("add_bank")}
          </Button>
          <Button
            className="border bg-white"
            onPress={() => setIsAddStcOpen(true)}
          >
            {t("link_stc")}
          </Button>
          <Button
            className="bg-primary text-white"
            isDisabled={!available || !(hasBank || hasStc)}
            onPress={() => setIsWithdrawOpen(true)}
          >
            {t("withdraw")}
          </Button>
        </div> */}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Card className="p-4 border text-start">
          <div className="font-bold text-primary text-md">
            {t("current_balance")}
          </div>
          <div className="text-2xl font-extrabold mt-1 text-primary">
            <Money value={current} />
          </div>
          <div className="text-xs text-slate-500 mt-1">
            {t("current_formula")}
          </div>
          <div className="text-xs text-slate-500 mt-1">
            {t("current_formula_note")}
          </div>
        </Card>
        <Card className="p-4 border text-start">
          <div className="font-bold text-green-700 text-md">
            {t("available_balance")}
          </div>
          <div className="text-2xl font-extrabold mt-1 text-green-700">
            <Money value={available} />
          </div>
          <div className="text-xs text-slate-500 mt-1">
            {t("available_info")}
          </div>
        </Card>

        <Card className="p-4 border text-start">
          <div className="font-bold text-amber-600 text-md">
            {t("hold_balance")}
          </div>
          <div className="text-2xl font-extrabold mt-1 text-amber-600">
            <Money value={hold} />
          </div>
          <div className="text-xs text-slate-500 mt-1">{t("hold_info")}</div>
        </Card>

        <Card className="p-4 border text-start">
          <div className="font-bold text-red-700 text-md">
            {t("due_balance")}
          </div>
          <div className="text-2xl font-extrabold mt-1 text-red-700">
            <Money value={due} />
          </div>
          <div className="text-xs text-slate-500 mt-1">{t("due_info")}</div>
        </Card>

        <Card className="p-4 border text-start">
          <div className="font-bold text-purple-700 text-md">
            {t("company_commission")}
          </div>
          <div className="text-2xl font-extrabold mt-1 text-purple-700">
            <Money value={companyCommission} />
          </div>
          <div className="text-xs text-slate-500 mt-1">
            {/* intentionally no extra description text */}
          </div>
        </Card>
      </div>

      {/* Auction Simulation */}
      <Card className="p-5 border text-start">
        <h3 className="text-lg font-bold mb-3 text-primary">
          {t("auction_sim")}
        </h3>
        <div className="grid md:grid-cols-2 gap-6">
          <div className="space-y-3">
            <Input
              label={t("paddle_value")}
              type="number"
              value={paddle.toString()}
              onChange={(e) => setPaddle(Number(e.target.value))}
            />
            <Input
              label={t("hammer_value")}
              type="number"
              value={hammer.toString()}
              onChange={(e) => setHammer(Number(e.target.value))}
            />
            <Input
              label={t("fee_percentage")}
              type="number"
              step="0.1"
              value={feePct.toString()}
              onChange={(e) => setFeePct(Number(e.target.value))}
            />
            <p className="text-xs text-slate-500">{t("calc_note")}</p>
            <div className="flex gap-2">
              <Button className="bg-primary text-white" onPress={recalc}>
                {t("calculate")}
              </Button>
              <Button variant="flat" onPress={reset}>
                {t("reset")}
              </Button>
            </div>
          </div>

          <div className="border border-dashed rounded-2xl p-4 bg-slate-50">
            <div className="font-bold mb-2">{t("result_title")}</div>
            <div className="flex flex-col gap-2 mb-3 items-center w-full">
              {chips.map((c, i) => (
                <span
                  key={i}
                  className="px-3 py-2 rounded-full bg-slate-200 text-center w-full block text-xs font-bold"
                >
                  {c}
                </span>
              ))}
            </div>
            <pre className="text-sm whitespace-pre-line text-primary bg-emerald-50 p-3 rounded-xl">
              {result}
            </pre>
          </div>
        </div>
      </Card>

      {/* Withdraw Section */}
      <Card className="p-5 border text-start">
        <h3 className="text-lg font-bold mb-3 text-primary">
          {t("withdraw_title")}
        </h3>
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <div className="space-y-2">
            <div className="rounded-lg p-3 border flex items-start gap-3 bg-amber-50 border-amber-200">
              <div className="flex-1">
                <div className="text-sm text-slate-800 text-start">
                  {t("withdraw_info")}
                </div>
                {hasPendingRefund && (
                  <div className="mt-2 text-xs text-amber-700">
                    {t("withdraw_pending_refund")}
                  </div>
                )}
              </div>
            </div>
            <div className="flex gap-2 mt-2 flex-wrap">
              <span className="px-3 py-1 bg-slate-100 rounded-full text-xs border">
                {t("bank_account")}: {hasBank ? t("linked") : t("unlinked")}
              </span>
              <span className="px-3 py-1 bg-slate-100 rounded-full text-xs border">
                STC Pay: {hasStc ? t("linked") : t("unlinked")}
              </span>
            </div>
            {refundMethod && (
              <div className="mt-2 text-xs text-slate-600 space-y-1">
                <div className="font-semibold">
                  {t("payment_method")}:{" "}
                  {refundMethod.method === "bank_transfer"
                    ? t("bank_account")
                    : refundMethod.method === "stcp"
                      ? "STC Pay"
                      : refundMethod.method}
                </div>
                {refundMethod.method === "bank_transfer" && (
                  <ul className="list-disc pr-4 space-y-0.5">
                    {refundMethod.details?.user_name && (
                      <li>
                        {t("full_name")}: {refundMethod.details.user_name}
                      </li>
                    )}
                    {refundMethod.details?.bank_name && (
                      <li>
                        {t("bank_name")}: {refundMethod.details.bank_name}
                      </li>
                    )}
                    {refundMethod.details?.bank_type && (
                      <li>
                        {t("bank_type")}:{" "}
                        {refundMethod.details.bank_type === "worldwide"
                          ? t("bank_type_worldwide")
                          : t("bank_type_local")}
                      </li>
                    )}
                    {refundMethod.details?.iban && (
                      <li>IBAN: {refundMethod.details.iban}</li>
                    )}
                    {refundMethod.details?.swift && (
                      <li>SWIFT: {refundMethod.details.swift}</li>
                    )}
                  </ul>
                )}
                {refundMethod.method === "stcp" && (
                  <ul className="list-disc pr-4 space-y-0.5">
                    {refundMethod.details?.phone && (
                      <li>
                        {t("stc_number")}: {refundMethod.details.phone}
                      </li>
                    )}
                  </ul>
                )}
              </div>
            )}
          </div>
          <div className="flex gap-2">
            <Button
              variant="flat"
              isDisabled={!canAddBank}
              onPress={() => setIsAddBankOpen(true)}
              className="bg-slate-100"
            >
              {t("add_bank")}
            </Button>
            <Button
              variant="flat"
              isDisabled={!canAddStc}
              onPress={() => setIsAddStcOpen(true)}
              className="bg-slate-100"
            >
              {t("link_stc")}
            </Button>
            <Button
              className="bg-primary text-white"
              onPress={() => setIsWithdrawOpen(true)}
              isDisabled={
                !available || !(hasBank || hasStc) || hasPendingRefund
              }
            >
              {t("withdraw")}
            </Button>
          </div>
        </div>
      </Card>

      {/* Transactions Log */}
      <Card className="p-5 border text-start overflow-x-auto">
        <h3 className="text-lg font-bold mb-4 text-primary">
          {t("transactions_title")}
        </h3>

        {/* Filters */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3 mb-4 items-end">
          <div className="flex flex-col text-xs gap-1 w-full">
            <span className="text-slate-600 font-semibold">
              {t("balance_type")}
            </span>
            <select
              className="border rounded-lg px-2 py-1 text-xs bg-white w-full"
              value={filters.balance_type}
              onChange={(e) =>
                setFilters((prev) => ({
                  ...prev,
                  balance_type: e.target.value,
                }))
              }
            >
              <option value="">{t("all")}</option>
              <option value="available_balance">
                {t("available_balance")}
              </option>
              <option value="pending_balance">{t("hold_balance")}</option>
              <option value="amount_due">{t("due_balance")}</option>
              <option value="company_commission">
                {t("company_commission")}
              </option>
            </select>
          </div>

          <div className="flex flex-col text-xs gap-1 w-full">
            <span className="text-slate-600 font-semibold">
              {t("payment_method")}
            </span>
            <select
              className="border rounded-lg px-2 py-1 text-xs bg-white w-full"
              value={filters.payment_method}
              onChange={(e) =>
                setFilters((prev) => ({
                  ...prev,
                  payment_method: e.target.value,
                }))
              }
            >
              <option value="">{t("all")}</option>
              <option value="wallet">{t("payment_methods.wallet")}</option>
              <option value="bank_transfer">
                {t("payment_methods.bank_transfer")}
              </option>
              <option value="electronic">
                {t("payment_methods.electronic")}
              </option>
              <option value="system">{t("payment_methods.system")}</option>
            </select>
          </div>

          <div className="flex flex-col text-xs gap-1 w-full">
            <span className="text-slate-600 font-semibold">
              {t("operation_type")}
            </span>
            <select
              className="border rounded-lg px-2 py-1 text-xs bg-white w-full"
              value={filters.operation_type}
              onChange={(e) =>
                setFilters((prev) => ({
                  ...prev,
                  operation_type: e.target.value,
                }))
              }
            >
              <option value="">{t("all")}</option>
              <option value="in">{t("incoming")}</option>
              <option value="out">{t("outgoing")}</option>
            </select>
          </div>

          <div className="flex flex-col text-xs gap-1 w-full">
            <span className="text-slate-600 font-semibold">
              {t("from_date")}
            </span>
            <input
              type="date"
              className="border rounded-lg px-2 py-1 text-xs bg-white w-full"
              value={filters.from_date}
              onChange={(e) =>
                setFilters((prev) => ({ ...prev, from_date: e.target.value }))
              }
            />
          </div>

          <div className="flex flex-col text-xs gap-1 w-full">
            <span className="text-slate-600 font-semibold">{t("to_date")}</span>
            <input
              type="date"
              className="border rounded-lg px-2 py-1 text-xs bg-white w-full"
              value={filters.to_date}
              onChange={(e) =>
                setFilters((prev) => ({ ...prev, to_date: e.target.value }))
              }
            />
          </div>

          <div className="flex gap-2 text-xs w-full justify-start sm:justify-end lg:justify-end">
            <Button
              variant="flat"
              size="sm"
              className="bg-slate-100 text-xs"
              onPress={() =>
                setFilters({
                  balance_type: "",
                  payment_method: "",
                  operation_type: "",
                  from_date: "",
                  to_date: "",
                })
              }
            >
              {t("reset_filters")}
            </Button>
          </div>
        </div>

        <table className="w-full text-sm border-collapse table-fixed">
          <thead className="bg-slate-100">
            <tr>
              <th className="p-2 text-right font-bold w-35">{t("date")}</th>
              <th className="p-2 text-right font-bold w-22.5">
                {t("operation")}
              </th>
              <th className="p-2 text-right font-bold">{t("details")}</th>
              <th className="p-2 text-right font-bold w-32.5">{t("type")}</th>
              <th className="p-2 text-right font-bold w-30">
                {t("payment_method")}
              </th>
              <th className="p-2 text-right font-bold w-35">{t("amount")}</th>
            </tr>
          </thead>
          <tbody>
            {txLoading && (
              <tr>
                <td className="p-3 text-center text-slate-500" colSpan={6}>
                  {t("loading")}
                </td>
              </tr>
            )}
            {txError && !txLoading && (
              <tr>
                <td className="p-3 text-center text-red-600" colSpan={6}>
                  {t("error_loading_transactions")}
                  <div className="text-xs mt-2">
                    {(txError as any)?.response?.data?.message ||
                      (txError as any)?.message ||
                      "Unknown error occurred"}
                  </div>
                </td>
              </tr>
            )}
            {!txLoading &&
              !txError &&
              (transactions?.data?.length ?? 0) === 0 && (
                <tr>
                  <td className="p-3 text-center text-slate-500" colSpan={6}>
                    {t("no_transactions")}
                  </td>
                </tr>
              )}
            {!txLoading &&
              !txError &&
              transactions?.data?.slice(0, 20).map((tx) => {
                const isIncoming = tx.operation_type;
                const balanceTypeLabelMap: Record<string, string> = {
                  available_balance: t("available_balance"),
                  pending_balance: t("hold_balance"),
                  amount_due: t("due_balance"),
                  company_commission: t("company_commission"),
                };
                const balanceLabel =
                  balanceTypeLabelMap[tx.balance_type] ?? tx.balance_type;

                const paymentMethodLabelMap: Record<string, string> = {
                  wallet: t("payment_methods.wallet"),
                  bank_transfer: t("payment_methods.bank_transfer"),
                  electronic: t("payment_methods.electronic"),
                  system: t("payment_methods.system"),
                };
                const paymentLabel =
                  paymentMethodLabelMap[tx.payment_method] ?? tx.payment_method;

                const amountNumber = toMoneyNumber(tx.amount, 0);

                return (
                  <tr key={tx.unique_id} className="border-b">
                    <td className="p-2 whitespace-nowrap">
                      {tx.transaction_date}
                    </td>
                    <td className="p-2">
                      {isIncoming ? t("incoming") : t("outgoing")}
                    </td>
                    <td className="p-2 truncate" title={tx.detail}>
                      {tx.detail}
                    </td>
                    <td className="p-2">
                      <span className="px-2 py-1 bg-slate-100 rounded-full text-xs whitespace-nowrap inline-flex">
                        {balanceLabel}
                      </span>
                    </td>
                    <td className="p-2">{paymentLabel}</td>
                    <td className="p-2">
                      <span
                        className={
                          isIncoming
                            ? "text-green-700 font-bold"
                            : "text-red-700 font-bold"
                        }
                      >
                        <span className="inline-flex items-center gap-1">
                          <Money value={amountNumber} />
                          <span>{isIncoming ? "+" : "-"}</span>
                        </span>
                      </span>
                    </td>
                  </tr>
                );
              })}
          </tbody>
        </table>
        <p className="text-xs text-slate-500 mt-3">{t("transactions_note")}</p>

        {/* Pagination */}
        {transactions?.links && (
          <div className="flex justify-center items-center gap-2 mt-4">
            <Button
              size="sm"
              variant="flat"
              isDisabled={!transactions.links.prev}
              onPress={() => {
                if (transactions.links.prev) {
                  const url = new URL(transactions.links.prev);
                  const cursor = url.searchParams.get("cursor");
                  setFilters((prev) => ({
                    ...prev,
                    cursor: cursor || undefined,
                  }));
                }
              }}
            >
              السابق
            </Button>
            <span className="text-sm text-slate-600">
              صفحة{" "}
              {transactions.meta?.per_page
                ? `(${transactions.meta.per_page} عنصر)`
                : ""}
            </span>
            <Button
              size="sm"
              variant="flat"
              isDisabled={!transactions.links.next}
              onPress={() => {
                if (transactions.links.next) {
                  const url = new URL(transactions.links.next);
                  const cursor = url.searchParams.get("cursor");
                  setFilters((prev) => ({
                    ...prev,
                    cursor: cursor || undefined,
                  }));
                }
              }}
            >
              {t("next")}
            </Button>
          </div>
        )}
      </Card>

      {/* Refund Modal */}
      <BaseModal
        isOpen={isWithdrawOpen}
        onOpenChange={() => setIsWithdrawOpen(false)}
        title={t("withdraw_modal_title")}
        contentClassName="w-full max-w-[460px] rounded-2xl space-y-4"
        footer={
          <div className="flex justify-end gap-2">
            <Button variant="flat" onPress={() => setIsWithdrawOpen(false)}>
              {t("cancel")}
            </Button>
            <Button
              className="bg-primary text-white"
              onPress={handleRefund}
              isDisabled={
                !refundAmount ||
                toMoneyNumber(refundAmount, 0) > available ||
                !selectedRefundMethod ||
                refundSubmitting ||
                hasPendingRefund
              }
              isLoading={refundSubmitting}
            >
              {t("confirm")}
            </Button>
          </div>
        }
      >
        <div className="space-y-4">
          <p className="text-sm text-slate-600">{t("withdraw_modal_text")}</p>
          <Input
            label={t("refund_amount_label")}
            type="number"
            value={refundAmount}
            onChange={(e) => setRefundAmount(e.target.value)}
            isDisabled={refundSubmitting}
            description={t("refund_available_desc", {
              amount: available,
              currency: t("currency"),
            })}
          />
          <div className="text-xs text-slate-500">
            {t("refund_method_label")}{" "}
            {selectedRefundMethod === "bank_transfer"
              ? t("refund_method_bank_transfer")
              : selectedRefundMethod === "stcp"
                ? t("refund_method_stcp")
                : t("refund_method_unknown")}
          </div>
        </div>
      </BaseModal>

      {/* Refund Success Modal */}
      <BaseModal
        isOpen={isRefundSuccessOpen}
        onOpenChange={() => setIsRefundSuccessOpen(false)}
        title={t("refund_success_title")}
        contentClassName="w-full max-w-[420px] rounded-2xl space-y-4"
        footer={
          <div className="flex justify-start">
            <Button
              variant="flat"
              onPress={() => setIsRefundSuccessOpen(false)}
            >
              {t("close")}
            </Button>
          </div>
        }
      >
        <div className="space-y-2">
          <p className="text-sm text-slate-600">{t("refund_success_body")}</p>
        </div>
      </BaseModal>

      {/* Add Bank Modal */}
      <BaseModal
        isOpen={isAddBankOpen}
        onOpenChange={() => setIsAddBankOpen(false)}
        title={t("add_bank_modal")}
        contentClassName="w-full max-w-[460px] rounded-2xl space-y-4"
        footer={
          <div className="flex justify-end gap-2">
            <Button variant="flat" onPress={() => setIsAddBankOpen(false)}>
              {t("cancel")}
            </Button>
            <Button
              className="bg-primary text-white"
              isDisabled={
                isSavingRefund ||
                !bankNameInput ||
                !bankUserName ||
                !bankIban ||
                (bankType === "worldwide" && !bankSwift)
              }
              onPress={() => {
                handleSaveBankRefund();
              }}
            >
              {t("save")}
            </Button>
          </div>
        }
      >
        <Input
          label={t("full_name")}
          placeholder={t("full_name_placeholder")}
          value={bankUserName}
          onChange={(e) => setBankUserName(e.target.value)}
        />
        <Input
          label={t("bank_name")}
          placeholder={t("bank_name_placeholder")}
          value={bankNameInput}
          onChange={(e) => setBankNameInput(e.target.value)}
        />
        <div className="flex flex-col gap-1 text-xs">
          <span className="text-slate-600 font-semibold">{t("bank_type")}</span>
          <div className="w-full rounded-2xl bg-slate-100 px-3 py-1.5">
            <select
              className="w-full bg-transparent text-sm outline-none border-none py-1"
              value={bankType}
              onChange={(e) =>
                setBankType(
                  e.target.value === "worldwide" ? "worldwide" : "local",
                )
              }
            >
              <option value="local">{t("bank_type_local")}</option>
              <option value="worldwide">{t("bank_type_worldwide")}</option>
            </select>
          </div>
        </div>
        <Input
          label="IBAN"
          placeholder="SA..."
          value={bankIban}
          onChange={(e) => setBankIban(e.target.value)}
        />
        {bankType === "worldwide" && (
          <Input
            label="SWIFT"
            placeholder="NWBKGB2L"
            value={bankSwift}
            onChange={(e) => setBankSwift(e.target.value)}
          />
        )}
      </BaseModal>

      {/* STC Pay Modal */}
      <BaseModal
        isOpen={isAddStcOpen}
        onOpenChange={() => setIsAddStcOpen(false)}
        title={t("link_stc_modal")}
        contentClassName="w-full max-w-[400px] rounded-2xl space-y-4"
        footer={
          <div className="flex justify-end gap-2">
            <Button variant="flat" onPress={() => setIsAddStcOpen(false)}>
              {t("cancel")}
            </Button>
            <Button
              className="bg-primary text-white"
              isDisabled={isSavingRefund || !stcName || !stcPhone}
              onPress={() => {
                handleSaveStcRefund();
              }}
            >
              {t("save")}
            </Button>
          </div>
        }
      >
        <Input
          label={t("full_name")}
          placeholder={t("full_name_placeholder")}
          value={stcName}
          onChange={(e) => setStcName(e.target.value)}
        />
        <PhoneNumber
          label={t("stc_number")}
          phoneValue={stcPhone}
          setPhoneValue={setStcPhone}
        />
      </BaseModal>
    </div>
  );
}