"use client";

import { useState, useMemo, useEffect } from "react";
import { Button } from "@heroui/react";
import { useTranslations } from "next-intl";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useQueryClient } from "@tanstack/react-query";
import axios, { AxiosError } from "axios";
import { useSession } from "@/auth/session-provider";
import { useLocale } from "next-intl";
import { BaseModal } from "@/components/modal";
import AtayaLoader from "@/components/loaders/AtayaLoader";
import Money from "@/components/ui/Money";
import TopUpModal from "./wallet/TopUpModal";
import {
  buildWalletTopUpInvoiceHtml,
  coerceWalletTopUpInvoiceInputFromResponse,
  openInvoiceWindow,
} from "@/lib/invoice";
import { API_BASE_URL } from "@/lib/axios";

interface WalletTopUp {
  id: string;
  payment_method: string;
  amount: string;
  top_up_date: string;
  status: string;
}

interface WalletTopUpDetail {
  id: string;
  user?: {
    stable_name?: string;
    name?: string;
    email?: string;
    phone?: string;
    gender?: string;
    country_id?: string | number;
  };
  payment_method?: string;
  payment_method_details?: {
    id?: string;
    name?: string;
    account_holder_name?: string;
    account_number?: string;
    iban?: string;
  };
  amount?: string;
  top_up_date?: string;
  status?: string;
  media_file?: { id: number | string; uuid: string }[];
}

const API_URL = API_BASE_URL;

type PaymentPurpose = {
  id: string;
  key: "bank_transfer" | "online_payment" | string;
  name: string;
  status: boolean;
  media_files?: { logo?: { id: number | null; url: string } };
};

type BankItem = {
  id: string;
  name: string;
  account_holder_name?: string;
  account_number?: string;
  iban?: string;
  unique_id?: any;
  media_files?: { logo?: { id: number | null; url: string } };
};

export const useWalletRequests = () => {
  const lang = useLocale();
  const session = useSession();

  return useInfiniteQuery<
    { data: WalletTopUp[]; nextPage: number | null },
    AxiosError
  >({
    queryKey: ["wallet_requests"],
    initialPageParam: 1,
    queryFn: async ({ pageParam = 1 }) => {
      const per_page = 10;
      const token = session?.access_token;

      const res = await axios.get(
        `${API_URL}/user/dashboard/wallet-top-up-requests?page=${pageParam}&per_page=${per_page}`,
        {
          headers: {
            Authorization: token ? `Bearer ${token}` : "",
            Accept: "application/json",
            lang,
          },
        },
      );

      const { data, links } = res.data.data;
      const nextPage = links?.next ? (pageParam as any) + 1 : null;

      return { data, nextPage };
    },
    getNextPageParam: (lastPage) => lastPage.nextPage,
  });
};

export default function WalletRequestsTable() {
  const t = useTranslations("DASHBOARD.WALLET-REQUEST");
  const lang = useLocale();
  const session = useSession();
  const queryClient = useQueryClient();
  const {
    data,
    isLoading,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useWalletRequests();

  const requests = data?.pages.flatMap((page) => page.data) || [];

  const [open, setOpen] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const [detail, setDetail] = useState<WalletTopUpDetail | null>(null);

  const [mediaUrlByUuid, setMediaUrlByUuid] = useState<Record<string, string>>(
    {},
  );
  const [mediaLoadingByUuid, setMediaLoadingByUuid] = useState<
    Record<string, boolean>
  >({});

  const dateLocale = lang === "ar" ? "ar-EG" : "en-US";

  const [createOpen, setCreateOpen] = useState(false);

  useEffect(() => {
    return () => {
      Object.values(mediaUrlByUuid).forEach((u) => {
        try {
          URL.revokeObjectURL(u);
        } catch {}
      });
    };
  }, [mediaUrlByUuid]);

  const openDetails = async (id: string) => {
    setOpen(true);
    setDetail(null);
    setDetailLoading(true);
    try {
      const token = session?.access_token;
      const res = await axios.get(
        `${API_URL}/user/dashboard/wallet-top-up-requests/${id}`,
        {
          headers: {
            Authorization: token ? `Bearer ${token}` : "",
            Accept: "application/json",
            lang,
          },
        },
      );
      setDetail(res.data?.data || null);
    } catch (e) {
      setDetail(null);
    } finally {
      setDetailLoading(false);
    }
  };

  const openInvoiceFromDetail = (d: WalletTopUpDetail) => {
    const invoiceInput = coerceWalletTopUpInvoiceInputFromResponse({
      topUpResponse: { data: d },
      fallback: {
        clientName: d.user?.name ?? d.user?.stable_name ?? "—",
        clientMobile: d.user?.phone ?? "—",
        walletId: (d as any)?.unique_id ?? d.id ?? "—",
        paymentMethod:
          d.payment_method === "bank_transfer"
            ? "Bank Transfer - تحويل بنكي"
            : d.payment_method === "online_payment" ||
                d.payment_method === "e-payment"
              ? "Online Payment - دفع إلكتروني"
              : (d.payment_method ?? "—"),
        transactionStatus:
          d.status === "approved"
            ? "Completed - مكتملة"
            : d.status === "pending"
              ? "Pending - قيد المراجعة"
              : (d.status ?? "—"),
        topUpAmount: Number(d.amount ?? 0),
      },
    });

    const invoiceHtml = buildWalletTopUpInvoiceHtml(invoiceInput);
    openInvoiceWindow(invoiceHtml);
  };

  const getMediaObjectUrl = async (uuid: string) => {
    if (mediaUrlByUuid[uuid]) return mediaUrlByUuid[uuid];

    setMediaLoadingByUuid((p) => ({ ...p, [uuid]: true }));
    try {
      const token = session?.access_token;
      const res = await axios.get(`${API_URL}/media/${uuid}`, {
        headers: {
          Authorization: token ? `Bearer ${token}` : "",
          Accept: "application/octet-stream",
          lang,
        },
        responseType: "blob",
      });

      const blobUrl = URL.createObjectURL(res.data);
      setMediaUrlByUuid((p) => ({ ...p, [uuid]: blobUrl }));
      return blobUrl;
    } finally {
      setMediaLoadingByUuid((p) => ({ ...p, [uuid]: false }));
    }
  };

  const previewMedia = async (uuid: string) => {
    try {
      const url = await getMediaObjectUrl(uuid);
      window.open(url, "_blank", "noopener,noreferrer");
    } catch {}
  };

  const downloadMedia = async (uuid: string, filename: string) => {
    try {
      const url = await getMediaObjectUrl(uuid);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      a.rel = "noopener noreferrer";
      document.body.appendChild(a);
      a.click();
      a.remove();
    } catch {}
  };

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

  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>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-extrabold text-primary">
              {t("wallet_requests")}
            </h2>
            <div className="flex items-center gap-3">
              <div className="text-sm text-slate-500 hidden sm:block">
                {t("total_requests")} ({requests.length})
              </div>
              <Button
                className="bg-green-500 text-white font-bold"
                variant="solid"
                onPress={() => setCreateOpen(true)}
              >
                {t("top_up_wallet", { defaultValue: "شحن المحفظة" })}
              </Button>
            </div>
          </div>

          {requests.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_requests")}
              </h3>
              <p className="text-gray-500">{t("no_requests_description")}</p>
            </div>
          ) : (
            <>
              <div className="overflow-auto">
                <table className="w-full text-sm border rounded-2xl overflow-hidden">
                  <thead>
                    <tr className="text-center bg-slate-50">
                      <th className="p-3 border">#</th>
                      <th className="p-3 border">{t("amount")}</th>
                      <th className="p-3 border">{t("payment_method")}</th>
                      <th className="p-3 border">{t("date")}</th>
                      <th className="p-3 border">{t("status")}</th>
                      <th className="p-3 border">
                        {t("actions", { defaultValue: "إجراء" })}
                      </th>
                    </tr>
                  </thead>

                  <tbody>
                    {requests.map((req: any, index) => (
                      <tr key={req.id} className="border-b hover:bg-slate-50">
                        <td className="p-3 border">{req?.unique_id}</td>
                        <td className="p-3 border text-center font-semibold">
                          <span className="inline-flex items-center justify-center gap-1">
                            <Money value={Number(req.amount ?? 0)} />
                          </span>
                        </td>
                        <td className="p-3 border text-center">
                          {req.payment_method === "bank_transfer"
                            ? t("bank_transfer")
                            : req.payment_method === "e-payment" ||
                                req.payment_method === "online_payment"
                              ? t("online_payment")
                              : req.payment_method}
                        </td>
                        <td className="p-3 border text-center">
                          {new Date(req.top_up_date).toLocaleDateString(
                            dateLocale,
                          )}
                        </td>
                        <td className="p-3 border text-center">
                          <span
                            className={`px-2 py-1 rounded-lg text-xs font-bold ${
                              req.status === "approved"
                                ? "bg-green-500 text-white"
                                : req.status === "pending"
                                  ? "bg-amber-500 text-white"
                                  : "bg-red-500 text-white"
                            }`}
                          >
                            {req.status === "approved"
                              ? t("status_approved")
                              : req.status === "pending"
                                ? t("status_pending")
                                : t("status_rejected")}
                          </span>
                        </td>
                        <td className="p-3 border text-center">
                          <Button
                            size="sm"
                            variant="light"
                            onPress={() => openDetails(req.id)}
                          >
                            🔍
                          </Button>
                        </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>
              )}
            </>
          )}
        </div>
      </div>

      <TopUpModal isOpen={createOpen} onOpenChange={setCreateOpen} />

      <BaseModal
        isOpen={open}
        onOpenChange={setOpen}
        title={t("request_details", { defaultValue: "تفاصيل الطلب" })}
        contentClassName="max-w-2xl h-[85vh] overflow-y-scroll"
      >
        {detailLoading ? (
          <AtayaLoader />
        ) : !detail ? (
          <div className="text-center py-10 text-slate-500">
            {t("no_data", { defaultValue: "لا توجد بيانات" })}
          </div>
        ) : (
          <div className="space-y-4">
            <div
              className="rounded-2xl p-4 text-white"
              style={{ background: "linear-gradient(180deg,#22c55e, #16a34a)" }}
            >
              <div className="flex items-center justify-between">
                <div className="text-sm flex items-center gap-2">
                  <span>📌</span>
                  {t("status")}
                </div>

                <div className="px-2 py-1 rounded-lg text-xs font-bold bg-white/20">
                  {detail.status === "approved"
                    ? t("status_approved")
                    : detail.status === "pending"
                      ? t("status_pending")
                      : t("status_rejected")}
                </div>
              </div>

              <div className="mt-3 flex items-start justify-between gap-3">
                <div className="text-3xl font-extrabold flex items-center gap-2">
                  💰 <Money value={Number(detail.amount ?? 0)} />
                </div>
                <Button
                  size="sm"
                  variant="solid"
                  className="bg-white/15 text-white"
                  onPress={() => openInvoiceFromDetail(detail)}
                >
                  {t("view_invoice", { defaultValue: "عرض الفاتورة" })}
                </Button>
              </div>

              <div className="text-xs mt-1 flex items-center gap-2">
                📅
                {detail.top_up_date
                  ? new Date(detail.top_up_date).toLocaleDateString()
                  : "—"}
              </div>

              <div className="text-xs opacity-80 mt-2 flex items-center gap-2">
                🏦
                {detail.payment_method === "bank_transfer"
                  ? t("bank_transfer")
                  : detail.payment_method === "e-payment" ||
                      detail.payment_method === "online_payment"
                    ? t("online_payment")
                    : detail.payment_method}
              </div>
            </div>

            {/* Owner Info */}
            <div className="bg-slate-50 rounded-2xl p-4">
              <div className="font-bold mb-3 flex items-center gap-2">
                👤 {t("request_owner_info")}
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                <div className="space-y-1">
                  <label className="text-xs text-slate-500 flex items-center gap-1">
                    🐎 {t("stable_name")}
                  </label>
                  <div className="px-3 py-2 rounded-xl bg-white border">
                    {detail.user?.stable_name || "-"}
                  </div>
                </div>

                <div className="space-y-1">
                  <label className="text-xs text-slate-500 flex items-center gap-1">
                    👤 {t("name")}
                  </label>
                  <div className="px-3 py-2 rounded-xl bg-white border">
                    {detail.user?.name || "-"}
                  </div>
                </div>

                <div className="space-y-1">
                  <label className="text-xs text-slate-500 flex items-center gap-1">
                    📧 {t("email")}
                  </label>
                  <div className="px-3 py-2 rounded-xl bg-white border">
                    {detail.user?.email || "-"}
                  </div>
                </div>

                <div className="space-y-1">
                  <label className="text-xs text-slate-500 flex items-center gap-1">
                    📞 {t("phone")}
                  </label>
                  <div className="px-3 py-2 rounded-xl bg-white border">
                    {detail.user?.phone || "-"}
                  </div>
                </div>
              </div>
            </div>

            {/* Bank Details - only for non-cash methods that have details */}
            {detail.payment_method !== "cash" &&
              detail.payment_method_details && (
                <div className="bg-slate-50 rounded-2xl p-4">
                  <div className="font-bold mb-3 flex items-center gap-2">
                    🏦 {t("payment_details")}
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                    <div className="space-y-1">
                      <label className="text-xs text-slate-500">
                        {t("bank_name")}
                      </label>
                      <div className="px-3 py-2 rounded-xl bg-white border">
                        {detail.payment_method_details?.name || "-"}
                      </div>
                    </div>

                    <div className="space-y-1">
                      <label className="text-xs text-slate-500">
                        {t("account_holder_name")}
                      </label>
                      <div className="px-3 py-2 rounded-xl bg-white border">
                        {detail.payment_method_details?.account_holder_name ||
                          "-"}
                      </div>
                    </div>

                    <div className="space-y-1">
                      <label className="text-xs text-slate-500">
                        {t("account_number")}
                      </label>
                      <div className="px-3 py-2 rounded-xl bg-white border">
                        {detail.payment_method_details?.account_number || "-"}
                      </div>
                    </div>

                    <div className="space-y-1">
                      <label className="text-xs text-slate-500">
                        {t("iban")}
                      </label>
                      <div className="px-3 py-2 rounded-xl bg-white border">
                        {detail.payment_method_details?.iban || "-"}
                      </div>
                    </div>
                  </div>
                </div>
              )}

            {/* Attachments */}
            {detail.media_file && detail.media_file.length > 0 && (
              <div className="bg-slate-50 rounded-2xl p-4">
                <div className="font-bold mb-3 flex items-center gap-2">
                  📎 {t("attachments")}
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {detail.media_file.map((file, index) => {
                    const uuid = String(file.uuid);
                    const cachedUrl = mediaUrlByUuid[uuid];
                    const isMediaLoading = !!mediaLoadingByUuid[uuid];
                    const filename = `attachment-${index + 1}`;

                    return (
                      <div
                        key={file.id}
                        className="bg-white border rounded-xl p-3 flex flex-col items-center gap-3"
                      >
                        <label className="text-xs text-slate-500 font-bold">
                          {t("attachment")} {index + 1}
                        </label>

                        <div className="w-full">
                          {cachedUrl ? (
                            <img
                              src={cachedUrl}
                              alt={`attachment-${index}`}
                              className="w-full h-auto object-contain rounded-lg border"
                            />
                          ) : (
                            <div className="w-full h-36 rounded-lg border flex items-center justify-center text-xs text-slate-500">
                              {isMediaLoading ? (
                                <AtayaLoader size={48} />
                              ) : (
                                t("loading", {
                                  defaultValue: "جاري التحميل...",
                                })
                              )}
                            </div>
                          )}
                        </div>

                        <div className="flex items-center gap-2">
                          <Button
                            size="sm"
                            variant="flat"
                            onPress={() => previewMedia(uuid)}
                            isDisabled={isMediaLoading}
                          >
                            {t("view_invoice", { defaultValue: "عرض" })}
                          </Button>
                          <Button
                            size="sm"
                            color="primary"
                            onPress={() => downloadMedia(uuid, filename)}
                            isLoading={isMediaLoading}
                          >
                            ⬇️ {t("download")}
                          </Button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        )}
      </BaseModal>
    </>
  );
}