"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { BiArrowBack } from "react-icons/bi";
import useCreditHistoryFetch from "../../../../hooks/features/dashboard/useCreditHistoryFetch";
import { useAppPagination } from "../../../../hooks/useAppPagination";
import { DataTable } from "../../../../components/table/DataTable";
import { creditsHistoryColumns } from "../../../../components/table/features/dashboard/creditHistoryColumn";
import SomethingWentWrong from "../../../../components/SomethingWentWrong";

export default function CreditHistoryPage() {
  const router = useRouter();
  const pagination = useAppPagination();
  const { data, error, isError, loading } = useCreditHistoryFetch(pagination);

  if (loading) {
    return <CreditHistorySkeleton />;
  }

  const creditsHistory = data?.creditsHistory ?? [];
  const meta = data?.pagination;
  return (
    <div className="container-k">
      {/* Header */}
      <div className="mb-8 flex items-center justify-between">
        <button
          type="button"
          onClick={() => router.back()}
          className="flex items-center gap-3 text-link-1 cursor-pointer"
        >
          <BiArrowBack className="text-2xl md:text-3xl" />

          <div className="font-body text-lg md:text-xl xl:text-2xl font-bold text-heading">
            Credit History
          </div>
        </button>

        {/* <button
          type="button"
          className="
            flex h-12 w-12 items-center justify-center
            rounded-full border border-white
            bg-white/70 text-link-1
            shadow-button
          "
        >
          <FiSliders size={20} />
        </button> */}
      </div>

      {isError ? (
        <SomethingWentWrong
          variant="section"
          title="Unable to load credit history"
          description="Your credit history could not be loaded. Please try again."
          onRetry={() => pagination.patch({})}
          buttonText=""
        />
      ) : loading || creditsHistory.length > 0 ? (
        <DataTable
          data={creditsHistory}
          columns={creditsHistoryColumns}
          classNames={{
            root: "",
            toolbar: "",
            filters: "",
            table: "rounded-xl overflow-hidden",
            tableThead: "glass-card-v2 rounded-xl",
            tableTheadRow: "",
            tableTheadCell:
              "px-4 py-3 md:px-6 md:py-4 text-left font-body whitespace-nowrap text-sm md:text-base font-medium text-heading",
            tableTbody: "glass-card-v2 rounded-xl overflow-hidden",
            tableTbodyRow:
              "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-white",
            tableTbodyCell:
              "px-4 py-3 md:px-6 md:py-4 font-body font-medium text-xs md:text-sm text-heading",
            pagination: "mt-8 flex flex-wrap items-center justify-center gap-1",
          }}
          pagination={{
            controller: pagination,
            totalItems: meta?.total,
            pageCount: meta?.totalPages,
          }}
          sorting={pagination.sortingConfig}
        />
      ) : (
        <div className="glass-card-v2 rounded-2xl p-10 text-center md:p-16">
          <div className="relative z-10 mx-auto max-w-152.5">
            <Image
              src={"/images/no-transaction.svg"}
              alt="Empty"
              width={150}
              height={120}
              className="mx-auto mb-6"
            />

            <h3 className="font-body text-xl font-bold text-heading">
              No credit history yet
            </h3>

            <p className="mt-3 font-body text-sm md:text-base text-text xl:text-lg">
              Your analyzed images and spent credits will appear here.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

function CreditHistorySkeleton() {
  return (
    <div className="container-k animate-pulse">
      {/* Header */}
      <div className="mb-8 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="h-7 w-7 rounded-full bg-gray-200" />
          <div className="h-8 w-44 rounded bg-gray-200" />
        </div>

        <div className="h-12 w-12 rounded-full bg-gray-200" />
      </div>

      {/* Table */}
      <div className="glass-card-v2 overflow-hidden rounded-xl">
        {/* Table Header */}
        <div className="grid grid-cols-4 border-b border-[#DDD7F0] px-6 py-4">
          <div className="h-5 w-28 rounded bg-gray-200" />
          <div className="h-5 w-24 rounded bg-gray-200" />
          <div className="h-5 w-20 rounded bg-gray-200" />
          <div className="h-5 w-24 rounded bg-gray-200 justify-self-end" />
        </div>

        {/* Table Rows */}
        {Array.from({ length: 6 }).map((_, index) => (
          <div
            key={index}
            className="grid grid-cols-4 items-center border-b border-[#DDD7F0] px-6 py-5 last:border-b-0"
          >
            <div className="space-y-2">
              <div className="h-5 w-36 rounded bg-gray-200" />
              <div className="h-4 w-24 rounded bg-gray-200" />
            </div>

            <div className="h-5 w-20 rounded bg-gray-200" />

            <div className="h-5 w-24 rounded bg-gray-200" />

            <div className="justify-self-end">
              <div className="h-8 w-24 rounded-full bg-gray-200" />
            </div>
          </div>
        ))}
      </div>

      {/* Pagination */}
      <div className="mt-8 flex justify-center gap-2">
        {Array.from({ length: 5 }).map((_, index) => (
          <div key={index} className="h-10 w-10 rounded-lg bg-gray-200" />
        ))}
      </div>
    </div>
  );
}