"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 {
  createStockColumns,
  EquityStock,
} from "@/components/datatable/liststock/columns";
import { useCashPage } from "@/hooks/useCashPage";
import { EquityDerivativesModal } from "@/components/cash/EquityDerivativesModal";
import { EquityDerivativesActions } from "@/components/cash/EquityDerivativesActions";
import { BREADCRUMBS } from "@/constants/breadcrumbs";

export default function ListEquityDerivatives() {
  const router = useRouter();
  
  const {
    data,
    loading,
    selectedRecord,
    showModal,
    loadData,
    handleView,
    closeModal,
  } = useCashPage<EquityStock>({
    apiEndpoint: "/api/equity/derivatives",
  });

  const handleEdit = useCallback(() => {
    if (!selectedRecord) return;
    const fType = selectedRecord.f_type?.toLowerCase() || "";
    const recordId = selectedRecord.id ?? selectedRecord.uid1 ?? "";
    
    if (fType.includes("option") || fType.includes("stock option")) {
      router.push(`/equity/derivative/option?id=${encodeURIComponent(recordId)}`);
    } else if (fType.includes("accumulator") || fType.includes("stock accumulator")) {
      router.push(`/equity/derivative/accumulator?id=${encodeURIComponent(recordId)}`);
    } else {
      router.push(`/equity/stock/form?id=${encodeURIComponent(recordId)}`);
    }
  }, [selectedRecord, router]);

  const stockColumns = useMemo(
    () =>
      createStockColumns({
        onView: handleView,
      }),
    [handleView]
  );

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Equity Derivatives"
        description="Analyse derivative exposure alongside your equity positions."
        breadcrumbs={[...BREADCRUMBS.equityDerivatives]}
        actions={<EquityDerivativesActions isLoading={loading} onRefresh={loadData} />}
      />

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

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