"use client";

import Link from "next/link";
import { convertDateStringToDate } from "../../../../utils/helper";
import Image from "next/image";
import { DataTable } from "../../../../components/table/DataTable";
import useUserTransactionsFetch, {
  UserTransactionHistory,
} from "../../../../hooks/features/admin/transactions/useUserTransactionsFetch";
import { useAppPagination } from "../../../../hooks/useAppPagination";
import { userTransactionsHistoryColumns } from "../../../../components/table/features/transactions/columns/userTransactionHistoryColumns";
import ClientWrapper from "../../../../components/ClientWrapper";
import { UserImage } from "../../../../components/ui/CustomImage";
import SomethingWentWrong from "../../../../components/SomethingWentWrong";
import CustomLink from "../../../../components/ui/CustomLink";

const tableClassNames = {
  root: "w-full overflow-x-auto",
  toolbar: "mb-1",
  table: "min-w-[650px] xl:min-w-full",
  tableThead: "bg-slate-100 border-t-2 border-slate-400  relative",
  tableTheadRow: "whitespace-nowrap",
  tableTheadCell:
    "px-4 py-2.5 text-left font-body text-sm 2xl:text-base font-medium text-heading relative",
  tableTbody: "border-t border-slate-300/50 relative",
  tableTbodyRow: `
    hover:bg-link-1/10 transition-colors
    [&>td]:border-b [&>td]:border-[#E7E7E8]
  `,
  tableTbodyCell:
    "py-2 px-3 font-body text-[13px] 2xl:text-sm text-table-text relative",
  pagination: "",
};

export default function UserTransactionsDetail() {
  const pagination = useAppPagination();
  const { response, loading, isError, error } =
    useUserTransactionsFetch(pagination);

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

  if (isError || !response) {
    return <SomethingWentWrong />;
  }

  const userData = response.user;
  const transactionsData = response.transactions;
  const meta = response.pagination;

  return (
    <ClientWrapper fallback={<UserTransactionHistorySkeleton />}>
      <section className="w-full p-4 pt-6 2xl:pt-8 2xl:p-8">
        <div className="w-full">
          <div className="mb-5 flex flex-wrap items-center gap-2 text-base xl:gap-4 xl:text-xl">
            <CustomLink href="/admin/transactions" className="text-heading">
              Transactions
            </CustomLink>
            <span className="text-text">/</span>
            <span className="font-semibold text-link-1">{userData.name}</span>
          </div>

          <div className="glass-card-v2 rounded-xl p-4">
            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
              <div className="flex min-w-0 items-start gap-3 sm:items-center sm:gap-4">
                <div className="relative h-12.5 w-12.5 shrink-0 overflow-hidden rounded-full">
                  <UserImage
                    src={userData.profilePicture}
                    alt={userData.name}
                    className="w-full h-full object-cover"
                  />
                </div>

                <div className="min-w-0">
                  <h2 className="font-body text-lg font-medium text-heading xl:text-xl">
                    {userData.name}
                  </h2>

                  <div className="mt-1 flex flex-col gap-1 text-sm text-table-text sm:flex-row sm:flex-wrap sm:items-center sm:gap-2.5 xl:text-base">
                    <span className="break-all">{userData.email}</span>
                    <span className="hidden h-1 w-1 rounded-full bg-[#C7C3D4] sm:block" />
                    <span>
                      Joined {convertDateStringToDate(userData.createdAt)}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-5">
            <div className="glass-card-v2 min-w-0 rounded-xl p-4 xl:p-6">
              <DataTable<UserTransactionHistory>
                data={transactionsData}
                columns={userTransactionsHistoryColumns}
                appearance="default"
                size="md"
                getRowId={(row) => String(row.id)}
                toolbar={
                  <h3 className="text-lg font-semibold text-heading xl:text-xl">
                    Transaction History
                  </h3>
                }
                classNames={tableClassNames}
                sorting={pagination.sortingConfig}
                pagination={{
                  controller: pagination,
                  pageCount: meta.totalPages,
                  totalItems: meta.total,
                }}
              />
            </div>
          </div>
        </div>
      </section>
    </ClientWrapper>
  );
}

/*
  This is skeleton for the respective Component
*/
function UserTransactionHistorySkeleton() {
  return (
    <section className="w-full animate-pulse overflow-hidden p-4 md:p-8">
      <div className="w-full">
        <div className="mb-5 flex items-center gap-3">
          <div className="h-5 w-24 rounded bg-gray-200" />
          <div className="h-5 w-3 rounded bg-gray-200" />
          <div className="h-5 w-40 rounded bg-gray-200" />
        </div>

        <div className="glass-card-v2 rounded-xl p-4">
          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div className="flex min-w-0 items-start gap-4">
              <div className="h-12.5 w-12.5 shrink-0 rounded-full bg-gray-200" />

              <div className="min-w-0">
                <div className="h-6 w-44 rounded bg-gray-200" />

                <div className="mt-2 flex items-center gap-2">
                  <div className="h-4 w-52 rounded bg-gray-200" />
                  <div className="h-1 w-1 rounded-full bg-gray-200" />
                  <div className="h-4 w-24 rounded bg-gray-200" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-5">
          <div className="glass-card-v2 min-w-0 rounded-xl p-4 xl:p-6">
            <div className="mb-6 h-6 w-48 rounded bg-gray-200" />

            <div className="space-y-4">
              {Array.from({ length: 8 }).map((_, index) => (
                <div key={index} className="flex items-center justify-between">
                  <div className="h-4 w-32 rounded bg-gray-200" />
                  <div className="h-4 w-24 rounded bg-gray-200" />
                  <div className="h-4 w-20 rounded bg-gray-200" />
                  <div className="h-4 w-24 rounded bg-gray-200" />
                </div>
              ))}
            </div>

            <div className="mt-6 flex justify-end gap-2">
              <div className="h-9 w-9 rounded bg-gray-200" />
              <div className="h-9 w-9 rounded bg-gray-200" />
              <div className="h-9 w-9 rounded bg-gray-200" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}