import { useGetRewardCoinHistory } from "@/state/profile/profile.action";
import { format } from "date-fns";
import Image from "next/image";
import React from "react";
import { ImageConstant } from "../../../constant/ImageConstant";
import PaginationComponent from "@/pagination/pagination";

type Transaction = {
  id: string | number;
  created_at: string;
  amount: string;
  source: string;
};

type TransactionResponse = {
  meta: {
    page: number;
    limit: number;
    total: number;
    lastPage: number;
  };
  history: Transaction[];
};
const RewardCoinsHistory = () => {
  const [page, setPage] = React.useState(1);

  const payload = {
    filter: "ADDED",
    page,
    limit: 5,
  };

  const { data, isLoading, error } = useGetRewardCoinHistory(payload) as {
    data: TransactionResponse | undefined;
    isLoading: boolean;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    error: any;
  };

  return (
    <div>
      <div className="flex justify-between items-center">
        <h5 className="text-[18px] text-[#D1D0CF] font-medium">
          Reward Coin History
        </h5>
      </div>
      <hr className="border-white opacity-10 my-5" />

      <div className="bg-[#1A1A1A] p-5 rounded-2xl">
        {isLoading ? (
          <div className="min-h-[500px] flex items-center justify-center">
            <p className="text-gray-400">Loading...</p>
          </div>
        ) : error ? (
          <p className="text-red-400">Failed to load transactions</p>
        ) : data && data?.history?.length > 0 ? (
          <>
            {data?.history?.map((tx) => (
              <div
                key={tx.id}
                className="grid grid-cols-1 md:grid-cols-12 gap-6 bg-[#1A1A1A] p-5 border-b border-gray-500"
              >
                <div className="md:col-span-10">
                  <div className="table gap-5 md:flex">
                    <div>
                      <h5 className="text-[20px] text-white my-2">
                        {tx?.source}
                      </h5>
                      <h5 className="text-[16px] text-gray-300 my-2">
                        {tx.created_at
                          ? format(new Date(tx?.created_at), "MMM dd, yyyy")
                          : ""}
                      </h5>
                    </div>
                  </div>
                </div>
                <div className="md:col-span-2">
                  <div className="flex gap-2 mt-2">
                    <h6 className="bg-[#3D3D3D] w-fit p-2 px-6 rounded-sm border border-[#262525] mb-3 flex gap-2 font-semibold">
                      <Image
                        src={ImageConstant.coin}
                        alt=""
                        width={30}
                        height={30}
                        className="w-5 h-5"
                      />
                      +{tx.amount}
                    </h6>
                  </div>
                </div>
              </div>
            ))}
          </>
        ) : (
          <div className="min-h-[200px] flex items-center justify-center">
            <p className="text-gray-400">No transactions found</p>
          </div>
        )}

        {/* Pagination */}
        {data?.meta && data.meta.lastPage > 1 && (
          <div className="mt-6">
            <PaginationComponent
              currentPage={page}
              totalPages={data.meta.lastPage}
              onPageChange={(p) => setPage(p)}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default RewardCoinsHistory;