"use client";

import { memo } from "react";
import { DataTable } from "@/components/datatable/data-table";
import { PageHeader } from "@/components/ui/PageHeader";
import {
  InterestDividend,
  createInterestDividendColumns,
} from "@/components/datatable/listinterestdividend/columns";
import { useCashPage } from "@/hooks/useCashPage";
import { RecordModal, formatDisplay, formatNumeric } from "@/components/cash/RecordModal";
import { InterestDividendActions } from "@/components/cash/InterestDividendActions";
import { BREADCRUMBS } from "@/constants/breadcrumbs";

export default function ListInterestDividend() {
  const {
    data,
    loading,
    selectedRecord,
    showModal,
    loadData,
    handleView,
    closeModal,
  } = useCashPage<InterestDividend>({
    apiEndpoint: "/api/intrestdividend/list",
  });

  const interestColumns = createInterestDividendColumns({
    onView: handleView,
  });

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

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Interest & Dividend Transactions"
        description="Capture inbound yield distributions and keep ledgers synchronized."
        breadcrumbs={[...BREADCRUMBS.interestDividend]}
        actions={<InterestDividendActions isLoading={loading} onRefresh={loadData} />}
      />

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

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

const InterestDividendModal = memo(({
  record,
  onClose,
  onEdit,
}: {
  record: InterestDividend;
  onClose: () => void;
  onEdit: () => void;
}) => {
  const subtitle = record.d_type || "—";

  const amountColor = (() => {
    const amountValue = record.amount;
    if (!amountValue) return "";
    const normalized = amountValue.replace(/,/g, "").trim();
    const parsed = Number.parseFloat(normalized);
    if (Number.isFinite(parsed)) {
      return parsed < 0 ? "text-red-600" : "text-green-600";
    }
    return "";
  })();

  const metrics = [
    {
      label: "Net Amount / Share",
      value: formatNumeric(record.price),
    },
    {
      label: "Total",
      value: formatNumeric(record.amount),
      colorClass: amountColor,
    },
    {
      label: "Quantity",
      value: formatNumeric(record.quantity),
    },
  ];

  const detailItems = [
    { label: "Placement Date", value: formatDisplay(record.t_date) },
    { label: "Quantity", value: formatNumeric(record.quantity) },
    { label: "Transaction Type", value: formatDisplay(record.d_p) },
    { label: "Type", value: formatDisplay(record.d_type) },
    { label: "Interest Type", value: formatDisplay(record.md) },
    { label: "Transaction Ref #", value: formatDisplay(record.parent_id) },
  ];

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

InterestDividendModal.displayName = "InterestDividendModal";