import { memo, useMemo } from "react";
import { AllTransactions } from "@/components/datatable/alltransactions/page";
import { RecordModal, formatDisplay } from "@/components/cash/RecordModal";

interface AllTransactionsModalProps {
  transaction: AllTransactions;
  onClose: () => void;
  onEdit: () => void;
}

export const AllTransactionsModal = memo(({
  transaction,
  onClose,
  onEdit,
}: AllTransactionsModalProps) => {
  const subtitle = useMemo(
    () =>
      transaction.ticker
        ? `${transaction.ticker}${transaction.isin ? ` (${transaction.isin})` : ""}`
        : "—",
    [transaction.ticker, transaction.isin]
  );

  const amountColor = useMemo(() => {
    if (!transaction.amount || transaction.amount === "—") return "";
    const normalized = String(transaction.amount).replace(/,/g, "").trim();
    const parsed = Number.parseFloat(normalized);
    if (Number.isFinite(parsed)) {
      return parsed >= 0 ? "text-green-600" : "text-red-600";
    }
    return "";
  }, [transaction.amount]);

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

  const detailItems = useMemo(
    () => [
      { label: "Bank", value: formatDisplay(transaction.bank_id) },
      { label: "Security", value: formatDisplay(transaction.isin) },
      { label: "Placement Date", value: formatDisplay(transaction.t_date) },
    ],
    [transaction.bank_id, transaction.isin, transaction.t_date]
  );

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

AllTransactionsModal.displayName = "AllTransactionsModal";