"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 { BondFund, createBondFundColumns } from "@/components/datatable/listbondfund/columns";
import { useCashPage } from "@/hooks/useCashPage";
import { BondFundModal } from "@/components/cash/BondFundModal";
import { BondFundActions } from "@/components/cash/BondFundActions";
import { DeleteConfirmModal } from "@/components/cash/DeleteConfirmModal";
import { BREADCRUMBS } from "@/constants/breadcrumbs";

export default function ListBondFund() {
  const router = useRouter();
  
  const {
    data,
    loading,
    selectedRecord: selectedFund,
    showModal,
    showDeleteConfirm,
    deleteLoading,
    loadData,
    handleView,
    closeModal,
    handleDeleteClick,
    confirmDelete,
    setShowDeleteConfirm,
  } = useCashPage<BondFund>({
    apiEndpoint: "/api/fixedincome/bondfunds",
    deleteEndpoint: "/api/fixedincome/bondfunds",
    deleteResourceName: "bond fund",
  });

  const handleAdd = useCallback(() => {
    router.push("/fixedincome/bondfunds/form");
  }, [router]);

  const handleEdit = useCallback(() => {
    if (selectedFund?.id || selectedFund?.uid) {
      router.push(
        `/fixedincome/bondfunds/form?id=${encodeURIComponent(selectedFund.id ?? selectedFund.uid ?? "")}`
      );
    }
  }, [selectedFund, router]);

  const handleCancelDelete = useCallback(() => {
    setShowDeleteConfirm(false);
  }, [setShowDeleteConfirm]);

  const bondFundColumns = useMemo(
    () =>
      createBondFundColumns({
        onView: handleView,
      }),
    [handleView]
  );

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="List Bond Fund"
        description="Keep track of bond fund holdings and performance snapshots."
        breadcrumbs={[...BREADCRUMBS.fixedIncomeBondFunds]}
        actions={<BondFundActions isLoading={loading} onRefresh={loadData} onAdd={handleAdd} />}
      />

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

      {showModal && selectedFund && (
        <BondFundModal
          bondFund={selectedFund}
          onClose={closeModal}
          onEdit={handleEdit}
          onDelete={handleDeleteClick}
        />
      )}

      {showDeleteConfirm && selectedFund && (
        <DeleteConfirmModal
          record={selectedFund}
          onCancel={handleCancelDelete}
          onConfirm={confirmDelete}
          deleteLoading={deleteLoading}
        />
      )}
    </div>
  );
}