import { memo, useMemo } from "react";
import { LeverageLoan, getSignedLeverageAmount } from "@/components/datatable/listleverage/columns";
import { RecordModal, formatDisplay, formatNumeric } from "@/components/cash/RecordModal";

interface LeverageModalProps {
  record: LeverageLoan;
  onClose: () => void;
  onEdit: () => void;
  onDelete?: () => void;
}

export const LeverageModal = memo(({
  record,
  onClose,
  onEdit,
  onDelete,
}: LeverageModalProps) => {
  const subtitle = useMemo(() => record.bank_id || "—", [record.bank_id]);
  const signedAmount = useMemo(() => getSignedLeverageAmount(record), [record]);

  const amountColor = useMemo(() => {
    if (!Number.isFinite(signedAmount)) return "";
    return signedAmount < 0 ? "text-red-600" : "text-green-600";
  }, [signedAmount]);

  const metrics = useMemo(
    () => [
      {
        label: "Amount",
        value: formatNumeric(String(signedAmount)),
        colorClass: amountColor,
      },
      {
        label: "Currency",
        value: formatDisplay(record.purchase_currency_code),
      },
      {
        label: "Transaction Type",
        value: formatDisplay(record.t_o_t),
      },
    ],
    [signedAmount, record.purchase_currency_code, record.t_o_t, amountColor]
  );

  const detailItems = useMemo(
    () => [
      { label: "Placement Date", value: formatDisplay(record.t_date) },
      { label: "Bank", value: formatDisplay(record.bank_id) },
      { label: "Time Period", value: formatDisplay(record.duration) },
      { label: "Maturity Date", value: formatDisplay(record.m_date) },
      { label: "Transaction Type", value: formatDisplay(record.t_o_t) },
      { label: "Currency", value: formatDisplay(record.purchase_currency_code) },
    ],
    [record.t_date, record.bank_id, record.duration, record.m_date, record.t_o_t, record.purchase_currency_code]
  );

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

LeverageModal.displayName = "LeverageModal";