import { memo, useMemo } from "react";
import { BondFund } from "@/components/datatable/listbondfund/columns";
import { RecordModal, formatDisplay, formatNumeric } from "@/components/cash/RecordModal";

interface BondFundModalProps {
  bondFund: BondFund;
  onClose: () => void;
  onEdit: () => void;
  onDelete?: () => void;
}

export const BondFundModal = memo(({
  bondFund,
  onClose,
  onEdit,
  onDelete,
}: BondFundModalProps) => {
  const amountColor = useMemo(() => {
    if (!bondFund.amount) return "";
    const normalized = bondFund.amount.replace(/,/g, "").trim();
    const parsed = Number.parseFloat(normalized);
    if (Number.isFinite(parsed)) {
      return parsed >= 0 ? "text-green-600" : "text-red-600";
    }
    return "";
  }, [bondFund.amount]);

  const subtitle = useMemo(
    () => (bondFund.ticker ? `${bondFund.ticker}${bondFund.isin ? ` (${bondFund.isin})` : ""}` : "—"),
    [bondFund.ticker, bondFund.isin]
  );

  const metrics = useMemo(
    () => [
      {
        label: "Quantity",
        value: formatNumeric(bondFund.quantity),
      },
      {
        label: "Price / Security",
        value: formatNumeric(bondFund.price),
      },
      {
        label: "Total Amount",
        value: formatNumeric(bondFund.amount),
        colorClass: amountColor,
      },
    ],
    [bondFund.quantity, bondFund.price, bondFund.amount, amountColor]
  );

  const detailItems = useMemo(
    () => [
      { label: "Placement Date", value: formatDisplay(bondFund.t_date) },
      { label: "Bank", value: formatDisplay(bondFund.bank_id) },
      { label: "Execution Type", value: formatDisplay(bondFund.e_t) },
      { label: "Transaction Type", value: formatDisplay(bondFund.t_o_t) },
      { label: "Currency", value: formatDisplay(bondFund.purchase_currency_code) },
      { label: "Type", value: formatDisplay(bondFund.f_type) },
    ],
    [bondFund.t_date, bondFund.bank_id, bondFund.e_t, bondFund.t_o_t, bondFund.purchase_currency_code, bondFund.f_type]
  );

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

BondFundModal.displayName = "BondFundModal";