"use client";
import { IoLocationOutline } from "react-icons/io5";
import { CiCalendar } from "react-icons/ci";
import { LiaWalletSolid } from "react-icons/lia";
import { useEffect, useState } from "react";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import BreadCrumb from "@/components/Breadcrumb";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useRouter } from "next/navigation";
import { useDispatch } from "react-redux";
import { toast } from "react-toastify";
import { getWalletDetails, Transaction } from "@/lib/actions/walletActions";
import { useLocale, useTranslations } from "next-intl";
import { useAppSelector } from "@/app/store/hooks";
import Pagination from "@/components/Pagination/Paginate";
import { getDateAndTimeWithLocale } from "@/lib/formTypes";
import DataNotFound from "@/components/common/DataNotFound";
import AccountDropdown from "@/components/common/AccountDropdown";
import RouteLoader from "@/components/common/RouteLoader";
import Loader from "@/components/common/Loader";
import { MobileNumber, VehicleNumber } from "../../../../types/common-types";
import { getVehicleDisplayNumber } from "../my-orders/MyOrders";

const pendingData = [
  {
    name: "William J.",
    location: "Al Khobar, Saudi Arabia",
    time: "April 12, 11:45 PM",
    amount: "SAR 20,000",
    status: "Pending",
    avatar: "/user-img01.png",
  },
  {
    name: "Alex B.",
    location: "Riyadh, Saudi Arabia",
    time: "April 11, 9:30 PM",
    amount: "SAR 10,000",
    status: "Pending",
    avatar: "/user-img02.png",
  },
  {
    name: "William J.",
    location: "Al Khobar, Saudi Arabia",
    time: "April 12, 11:45 PM",
    amount: "SAR 20,000",
    status: "Pending",
    avatar: "/user-img01.png",
  },
  {
    name: "Alex B.",
    location: "Riyadh, Saudi Arabia",
    time: "April 11, 9:30 PM",
    amount: "SAR 10,000",
    status: "Pending",
    avatar: "/user-img02.png",
  },
];

const dueData = [
  {
    name: "Fatima K.",
    location: "Jeddah, Saudi Arabia",
    time: "April 10, 4:00 PM",
    amount: "SAR 15,000",
    status: "Paid",
    avatar: "/user-img03.png",
  },
  {
    name: "Mohammed S.",
    location: "Dammam, Saudi Arabia",
    time: "April 9, 8:45 PM",
    amount: "SAR 8,500",
    status: "Paid",
    avatar: "/user-img01.png",
  },
  {
    name: "Fatima K.",
    location: "Jeddah, Saudi Arabia",
    time: "April 10, 4:00 PM",
    amount: "SAR 15,000",
    status: "Paid",
    avatar: "/user-img03.png",
  },
  {
    name: "Mohammed S.",
    location: "Dammam, Saudi Arabia",
    time: "April 9, 8:45 PM",
    amount: "SAR 8,500",
    status: "Paid",
    avatar: "/user-img01.png",
  },
];

export default function Wallet() {
  const [activeTab, setActiveTab] = useState<"credit" | "debit">("credit");
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [totalPages, setTotalPages] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(false);

  const t = useTranslations();
  const { user } = useAppSelector((state) => state?.auth);
  const dispatch = useDispatch();
  const router = useRouter();

  const locale = useLocale();

  const [walletData, setWalletData] = useState<
    | {
        name: string;
        title: string;
        amount: number;
        status: string;
        avatar?: string;
        time: string;
      }[]
    | undefined
  >(undefined);

  const wallteDataTransform = (
    data: Transaction[],
    type: "credit" | "debit"
  ) => {
    const transformedData = data.map((item) => {
      const isBuyer = user.id === item.buyer._id;
      const buyerName = item.buyer.first_name + " " + item.buyer.last_name;
      const sellerName = item.seller.first_name + " " + item.seller.last_name;
      const dateAndTime = getDateAndTimeWithLocale(item.createdAt, locale);

      let title = item.productInfo.title;
      let otherAttr = item.productInfo.otherAttribute;

      if (otherAttr) {
        if ((otherAttr as any).valueType === "mobile_number") {
          const mobileAttr = otherAttr?.content[0] as MobileNumber;
          title += " | " + mobileAttr?.number;
        } else if ((otherAttr as any).valueType === "vehicle_number_plate") {
          const vehicleAttr = otherAttr?.content[0] as VehicleNumber;
          title += getVehicleDisplayNumber(vehicleAttr, locale);
        }
      }

      return {
        name: isBuyer ? sellerName : buyerName,
        title: title,
        time: dateAndTime.date + " " + dateAndTime.time,
        amount: type == "credit" ? item.creditAmount : item.debitAmount,
        status: item.orderStatus,
        avatar: isBuyer
          ? item.seller.profile?.file_path
          : item.buyer.profile?.file_path || "/profile-avatar.png",
      };
    });

    return transformedData;
  };
  const fetchWalletDetails = async () => {
    try {
      const response = await getWalletDetails(user.token, {
        page: currentPage,
        type: activeTab,
      });
      if (!response.status) {
        throw new Error(response.message);
      }

      if (response.data.pagination.totalPages > 0) {
        setTotalPages(response.data.pagination.totalPages);
      }

      let data;
      if (activeTab == "credit" && response.data.creditTransactions) {
        data = wallteDataTransform(response.data.creditTransactions, "credit");
      } else if (activeTab == "debit" && response.data.debitTransactions) {
        data = wallteDataTransform(response.data.debitTransactions, "debit");
      }

      setWalletData(data);
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(error?.response?.data?.message || t("validation.error_msg"));
    }
  };

  useEffect(() => {
    fetchWalletDetails();
  }, [activeTab, currentPage]);

  const getCurrentData = () => {
    return activeTab === "credit" ? pendingData : dueData;
  };

  const handleBack = () => {
    window.history.back();
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader />
      </div>
    );
  }

  return (
    <RouteLoader>
      <MobilePageHeader title={t("profile_menu.wallet")} onBack={handleBack} />

      <main className="flex-1 max-md:px-0">
        <div className="flex items-center justify-between gap-2 pb-6 max-md:hidden">
          <h1 className="text-lg font-bold text-neutrals900 dark:text-white">
            {t("wallet")}
          </h1>

          <AccountDropdown t={t} />
        </div>
        <div className="wallet-wrap">
          <div className="max-w-w1660 mx-auto text-black pb-6">
            {/* <div className="bg-neutrals50 p-4 rounded-lg w-full max-w-sm mb-5 dark:bg-card">
            <div className="bg-white border border-primary500 rounded-lg px-6 py-4 flex justify-between items-center shadow-sm dark:bg-cardfooter dark:border-neutral-700">
              <div>
                <p className="text-base text-gray-500 dark:text-neutrals300">
                  Wallet Balance
                </p>
                <p className="text-lg font-semibold text-primary500 dark:text-primary400">
                  SAR 5,000
                </p>
              </div>
              <div className="bg-neutrals50 p-2 rounded-lg dark:bg-background">
                <LiaWalletSolid className="w-6 h-6 text-neutrals800 dark:text-neutrals400" />
              </div>
            </div>
          </div> */}

            <div className="w-full">
              {/* Tabs */}
              <div className="bg-neutrals50 flex space-x-4 dark:bg-card">
                {(
                  [
                    { key: "credit", label: t("credit") },
                    { key: "debit", label: t("debit") },
                  ] as { key: "credit" | "debit"; label: string }[]
                ).map((tab) => (
                  <button
                    key={tab.key}
                    onClick={() => setActiveTab(tab.key)}
                    className={`py-5 px-5 text-sm text-neutrals800 font-medium ${
                      activeTab === tab.key
                        ? "text-primary500 font-semibold border-b-2 border-primary500 dark:text-primary400 dark:border-primary400"
                        : "text-gray-500 dark:text-neutrals200"
                    }`}
                  >
                    {tab.label}
                  </button>
                ))}
              </div>

              {/* Tab Content */}
              <div className="mt-4 space-y-4">
                {walletData && walletData.length > 0 ? (
                  walletData.map((item, index) => (
                    <div
                      key={index}
                      className="bg-white border-b border-gray-200 p-4 mb-4 max-md:px-0 dark:bg-card dark:border-darkborder"
                    >
                      <div className="flex items-start justify-between max-[360px]:flex-wrap">
                        <div className="flex items-start gap-3">
                          <img
                            src={`${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${item.avatar}`}
                            alt={item.name}
                            className="w-10 h-10 rounded-full border-2 border-primary100 dark:border-darkborder"
                            onError={(e) => {
                              e.currentTarget.onerror = null;
                              e.currentTarget.src = "/profile-avatar.png";
                            }}
                          />
                          <div>
                            <h5 className="text-base font-semibold text-primary500 dark:text-primary400">
                              {item.name}
                            </h5>
                            <div className="mt-1">
                              <div className="flex items-center gap-1 mb-1">
                                {/* <IoLocationOutline className="text-neutrals500 text-lg dark:text-neutrals400" /> */}
                                <span className="text-sm text-neutrals500 max-[400px]:text-xs dark:text-neutrals400">
                                  {item.title}
                                </span>
                              </div>
                              <div className="flex items-center gap-1">
                                <CiCalendar className="text-neutrals500 text-lg dark:text-neutrals400" />
                                <span className="text-sm text-neutrals500 max-[400px]:text-xs dark:text-neutrals400">
                                  {item.time}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div className="text-right max-[360px]:text-left max-[360px]:mt-4">
                          <p className="text-base font-semibold text-primary500 dark:text-primary400">
                            {process.env.NEXT_PUBLIC_CURRENCY_TYPE}{" "}
                            {item.amount}
                          </p>
                          <span
                            className={`text-xs px-3 py-1 mt-3 max-[360px]:mt-1 rounded-full inline-block ${
                              item.status === "Pending"
                                ? "bg-kzwarning100 text-kzwarning600 dark:bg-opacity-90"
                                : "bg-kzred50 text-kzred600 dark:bg-opacity-90"
                            }`}
                          >
                            {item.status}
                          </span>
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <DataNotFound />
                )}
              </div>

              {!loading && totalPages > 1 && (
                <div className="!mt-10">
                  <Pagination
                    pageCount={totalPages}
                    currentPage={currentPage}
                    onPageChange={({ selected }) =>
                      setCurrentPage(selected + 1)
                    }
                  />
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
    </RouteLoader>
  );
}