"use client";

import { useMemo, useCallback } from "react";
import { useRouter } from "next/navigation";
import { DataTable } from "@/components/datatable/data-table";
import { PageHeader } from "@/components/ui/PageHeader";
import {
  CashWithdrawal,
  createCashWithdrawalColumns,
} from "@/components/datatable/listcashwithdrawal/columns";
import { useCashPage } from "@/hooks/useCashPage";
import { CashWithdrawalModal } from "@/components/cash/CashWithdrawalModal";
import { CashWithdrawalActions } from "@/components/cash/CashWithdrawalActions";
import { BREADCRUMBS } from "@/constants/breadcrumbs";

export default function ListCashWithDrawal() {
  const router = useRouter();
  
  const {
    data,
    loading: pageLoading,
    selectedRecord,
    showModal,
    loadData,
    handleView,
    closeModal,
  } = useCashPage<CashWithdrawal>({
    apiEndpoint: "/api/cashwithdrawal/list",
  });

  const cashWithdrawalColumns = useMemo(
    () =>
      createCashWithdrawalColumns({
        onView: handleView,
      }),
    [handleView]
  );

  const handleEdit = useCallback(
    (record: CashWithdrawal) => {
      router.push(
        `/cash/cashwithdraw/form?id=${encodeURIComponent(record.id ?? record.uid ?? "")}`
      );
    },
    [router]
  );

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Cash Withdrawal"
        description="Approve and track outbound cash movements across accounts."
        breadcrumbs={[...BREADCRUMBS.cashWithdrawal]}
        actions={<CashWithdrawalActions isLoading={pageLoading} onRefresh={loadData} />}
      />

      {/* Data Table */}
      <div className="rounded-lg">
        <DataTable columns={cashWithdrawalColumns} data={data} />
      </div>

      {showModal && selectedRecord && (
        <CashWithdrawalModal
          record={selectedRecord}
          onClose={closeModal}
          onEdit={() => handleEdit(selectedRecord)}
        />
      )}
    </div>
  );
}