"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { DataTable } from "@/components/datatable/data-table";
import { PageHeader } from "@/components/ui/PageHeader";
import { AlternativeInvestment } from "@/components/datatable/listotherassets/columns";
import { useOtherAssets } from "@/hooks/useOtherAssets";
import { OtherAssetDetailModal } from "@/components/other-assets/OtherAssetDetailModal";
import { OtherAssetActions } from "@/components/other-assets/OtherAssetActions";

export default function ListOtherAssets() {
  const router = useRouter();
  const {
    data,
    loading,
    selectedRecord,
    showModal,
    columns,
    loadData,
    closeModal,
  } = useOtherAssets();

  useEffect(() => {
    loadData();
  }, [loadData]);

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Other Assets"
        description="Oversee hedge funds and alternative investments with a unified view."
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Alternative Investments" },
          { label: "Other Assets" },
        ]}
        actions={<OtherAssetActions loading={loading} onRefresh={loadData} />}
      />

      <div className="rounded-lg">
        <DataTable columns={columns} data={data} />
      </div>

      {showModal && selectedRecord && (
        <OtherAssetDetailModal
          record={selectedRecord}
          onClose={closeModal}
          onEdit={() =>
            router.push(
              `/alternativeinvest/otherassets/form?id=${encodeURIComponent(
                selectedRecord.id ?? selectedRecord.uid,
              )}`,
            )
          }
        />
      )}
    </div>
  );
}