"use client";

import { memo } from "react";
import { DataTable } from "@/components/datatable/data-table";
import { PageHeader } from "@/components/ui/PageHeader";
import {
  CashDerivatives,
  createCashDerivativeColumns,
} from "@/components/datatable/listcashderivatives/columns";
import { useCashPage } from "@/hooks/useCashPage";
import { RecordModal, formatDisplay, formatNumeric } from "@/components/cash/RecordModal";
import { DerivativesActions } from "@/components/cash/DerivativesActions";
import { BREADCRUMBS } from "@/constants/breadcrumbs";

export default function ListCashDerivatives() {
  const {
    data,
    loading,
    selectedRecord,
    showModal,
    loadData,
    handleView,
    closeModal,
  } = useCashPage<CashDerivatives>({
    apiEndpoint: "/api/swaps",
  });

  const cashDerivativeColumns = createCashDerivativeColumns({
    onView: handleView,
  });

  const handleEdit = (record: CashDerivatives) => {
    const recordId = record.id ?? record.uid ?? "";
    window.location.href = `/cash/derivative/form?id=${encodeURIComponent(recordId)}`;
  };

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Cash Derivatives"
        description="Monitor derivative movements within your cash portfolio."
        breadcrumbs={[...BREADCRUMBS.derivatives]}
        actions={<DerivativesActions isLoading={loading} onRefresh={loadData} />}
      />

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

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

const CashDerivativeModal = memo(({
  record,
  onClose,
  onEdit,
}: {
  record: CashDerivatives;
  onClose: () => void;
  onEdit: () => void;
}) => {
  const subtitle = record.f_type || "—";

  const metrics = [
    {
      label: "Amount (Base Currency)",
      value: formatNumeric(record.price),
    },
    {
      label: "Rate of Swap",
      value: formatNumeric(record.quantity),
    },
    {
      label: "Currency Pair",
      value: `${formatDisplay(record.purchase_currency_code)} / ${formatDisplay(record.sold)}`,
    },
  ];

  const detailItems = [
    { label: "Placement Date", value: formatDisplay(record.t_date) },
    { label: "Type", value: formatDisplay(record.f_type) },
    { label: "Bank", value: formatDisplay(record.bank_id) },
    { label: "Rate of Swap", value: formatNumeric(record.quantity) },
    { label: "Currency Bought", value: formatDisplay(record.purchase_currency_code) },
    { label: "Currency Sold", value: formatDisplay(record.sold) },
  ];

  return (
    <RecordModal
      record={record}
      onClose={onClose}
      onEdit={onEdit}
      title="Cash derivative overview"
      subtitle={subtitle}
      metrics={metrics}
      detailItems={detailItems}
    />
  );
});

CashDerivativeModal.displayName = "CashDerivativeModal";