"use client";

import DataTable from "@/app/features/DataTable/DataTable";
import { useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  selectFilters,
  selectPagination,
  selectSort,
  selectStatus,
  selectError,
} from "@/app/redux/advanedSearch/selectors";
import { GridColDef } from "@mui/x-data-grid";
import Spinner from "@/app/components/Spinner/Spinner";
import { AppDispatch } from "@/app/redux/store";
import {
  setStatus,
  setError as setAdvancedSearchError,
} from "@/app/redux/advanedSearch/advancedSearchSlice";

import {
  TABLE_COLUMNS,
  TABLE_SEARCH_LABELS,
} from "@/app/features/DataTable/constants";

interface TransactionRow {
  id: number;
  userId?: string;
  transactionId: string;
  type?: string;
  currency?: string;
  amount?: number;
  status?: string;
  dateTime?: string;
  merchantId?: string;
  pspId?: string;
  methodId?: string;
  modified?: string;
}

export default function AllTransactionPage() {
  const dispatch = useDispatch<AppDispatch>();
  const filters = useSelector(selectFilters);
  const pagination = useSelector(selectPagination);
  const sort = useSelector(selectSort);

  const [tableRows, setTableRows] = useState<TransactionRow[]>([]);
  const extraColumns: string[] = []; // static for now

  // Memoize rows to avoid new reference each render
  const memoizedRows = useMemo(() => tableRows, [tableRows]);

  // Fetch data when filters, pagination, or sort changes
  useEffect(() => {
    const fetchData = async () => {
      dispatch(setStatus("loading"));
      dispatch(setAdvancedSearchError(null));
      try {
        const response = await fetch("/api/dashboard/transactions", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ filters, pagination, sort }),
        });

        if (!response.ok) {
          dispatch(setAdvancedSearchError("Failed to fetch transactions"));
          setTableRows([]);
          return;
        }

        const backendData = await response.json();
        const transactions = backendData.transactions || [];

        const rows = transactions.map((tx: any) => ({
          id: tx.id,
          userId: tx.customer,
          transactionId: tx.external_id || tx.id,
          type: tx.type,
          currency: tx.currency,
          amount: tx.amount,
          status: tx.status,
          dateTime: tx.created || tx.modified,
          merchantId: tx.merchant_id,
          pspId: tx.psp_id,
          methodId: tx.method_id,
          modified: tx.modified,
        }));

        setTableRows(rows);
        dispatch(setStatus("succeeded"));
      } catch (error) {
        dispatch(
          setAdvancedSearchError(
            error instanceof Error ? error.message : "Unknown error"
          )
        );
        setTableRows([]);
      }
    };

    fetchData();
  }, [dispatch, filters, pagination, sort]);

  return <DataTable rows={memoizedRows} extraColumns={extraColumns} />;
}