import { format } from "date-fns";
import React from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../ui/table";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "../ui/pagination";
import { useGetMyTransactionHistory } from "@/state/profile/profile.action";
import DatePicker from "./date-select";

type Transaction = {
  created_at: string;
  amount: string;
  source: string;
  localizedPrice: string;
};

type TransactionResponse = {
  meta: {
    page: number;
    limit: number;
    lastPage: number;
    totalCount: number;
  };
  items: Transaction[];
};

const TransactionHistory = () => {
  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(
    new Date()
  );
  const [page, setPage] = React.useState(1);
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

  const payload = {
    pagination: true,
    page,
    limit: 10,
    date: selectedDate ? format(selectedDate, "yyyy-MM-dd") : "",
    timezone: timezone,
  };

  const { data, isLoading, error } = useGetMyTransactionHistory(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">
          Recent Transactions
        </h5>
        <DatePicker value={selectedDate} onChange={setSelectedDate} />
      </div>
      <hr className="border-white opacity-10 my-5" />

      <div className="bg-[#1A1A1A] p-5 rounded-2xl">
        {isLoading ? (
          <p className="text-gray-400">Loading...</p>
        ) : error ? (
          <p className="text-red-400">Failed to load transactions</p>
        ) : (
          <Table>
            <TableHeader>
              <TableRow className="border-b border-[rgba(255,255,255,0.2)] hover:bg-transparent">
                <TableHead className="text-white">Type</TableHead>
                <TableHead className="text-white">DATE</TableHead>
                <TableHead className="text-white">AMOUNT</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data?.items?.length ? (
                data.items?.map((txn, idx) => (
                  <TableRow
                    key={idx}
                    className="border-b border-[rgba(255,255,255,0.2)] hover:bg-transparent"
                  >
                    <TableCell className="flex gap-5 items-center py-5">
                      <h5 className="bg-[#373737] w-[50px] h-[50px] rounded-full flex justify-center items-center text-[20px]">
                        $
                      </h5>
                      {txn.source}
                    </TableCell>
                    <TableCell className="py-5">
                      {format(new Date(txn.created_at), "dd MMM yyyy")}
                    </TableCell>
                    <TableCell className="py-5">{txn.localizedPrice}</TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell
                    colSpan={3}
                    className="text-center text-gray-400 py-5"
                  >
                    No transactions found
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        )}
      </div>

      {/* Pagination */}
      {data?.meta && (
        <Pagination className="mt-5">
          <PaginationContent>
            {/* Previous */}
            <PaginationItem>
              <PaginationPrevious
                href="#"
                onClick={() => page > 1 && setPage(page - 1)}
              />
            </PaginationItem>

            {/* Page Numbers */}
            {Array.from({ length: data.meta.lastPage }, (_, i) => i + 1)?.map(
              (p) => (
                <PaginationItem key={p}>
                  <PaginationLink
                    href="#"
                    isActive={p === page}
                    onClick={() => setPage(p)}
                  >
                    {p}
                  </PaginationLink>
                </PaginationItem>
              )
            )}

            {/* Next */}
            <PaginationItem>
              <PaginationNext
                href="#"
                onClick={() => page < data.meta.lastPage && setPage(page + 1)}
              />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      )}
    </div>
  );
};

export default TransactionHistory;