"use client";

import { DataTable } from "@/components/datatable/data-table";
import { PageHeader } from "@/components/ui/PageHeader";
import DropdownButton, { DropdownOption } from "@/components/ui/DropdownButton";
import {
  createStockColumns,
  EquityStock,
} from "@/components/datatable/liststock/columns";
import { Plus, RefreshCw } from "lucide-react";
import { useMemo, useCallback, memo } from "react";
import { useCashPage } from "@/hooks/useCashPage";
import { RecordModal, formatDisplay, formatNumeric } from "@/components/cash/RecordModal";

export default function ListEquityDerivatives() {
  const {
    data,
    loading,
    selectedRecord,
    showModal,
    loadData,
    handleView,
    closeModal,
    actionButtonClass,
    router,
  } = useCashPage<EquityStock>({
    apiEndpoint: "/api/equity/derivatives",
  });

  const stockColumns = useMemo(
    () =>
      createStockColumns({
        onView: handleView,
      }),
    [handleView]
  );

  const addOptions = useMemo<DropdownOption[]>(
    () => [
      {
        label: "Accumulator",
        path: "/equity/derivative/accumulator",
      },
      {
        label: "Options",
        path: "/equity/derivative/option",
      },
    ],
    []
  );

  const breadcrumbs = useMemo(
    () => [
      { label: "Home", href: "/" },
      { label: "Equity" },
      { label: "Derivatives" },
    ],
    []
  );

  const handleEdit = useCallback(() => {
    if (!selectedRecord) return;
    const fType = selectedRecord.f_type?.toLowerCase() || "";
    const recordId = selectedRecord.id ?? selectedRecord.uid1 ?? "";
    
    if (fType.includes("option") || fType.includes("stock option")) {
      router.push(`/equity/derivative/option?id=${encodeURIComponent(recordId)}`);
    } else if (fType.includes("accumulator") || fType.includes("stock accumulator")) {
      router.push(`/equity/derivative/accumulator?id=${encodeURIComponent(recordId)}`);
    } else {
      router.push(`/equity/stock/form?id=${encodeURIComponent(recordId)}`);
    }
  }, [selectedRecord, router]);

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Equity Derivatives"
        description="Analyse derivative exposure alongside your equity positions."
        breadcrumbs={breadcrumbs}
        actions={
          <>
            <DropdownButton
              options={addOptions}
              buttonLabel={loading ? "Loading..." : "Add Derivative"}
              icon={<Plus size={16} />}
              className="text-xs"
            />
            <button
              onClick={loadData}
              disabled={loading}
              className={actionButtonClass(loading)}
            >
              <RefreshCw size={16} className={loading ? "animate-spin" : ""} />
              {loading ? "Refreshing..." : "Refresh"}
            </button>
          </>
        }
      />

      <div className="rounded-lg">
        <DataTable columns={stockColumns} data={data} />
      </div>

      {showModal && selectedRecord && (
        <EquityDerivativeModal
          record={selectedRecord}
          onClose={closeModal}
          onEdit={handleEdit}
        />
      )}
    </div>
  );
}
 
const EquityDerivativeModal = memo(({
  record,
  onClose,
  onEdit,
}: {
  record: EquityStock;
  onClose: () => void;
  onEdit: () => void;
}) => {
  const amountColor = useMemo(() => {
    if (!record.amount) return "";
    const normalized = record.amount.replace(/,/g, "").trim();
    const parsed = Number.parseFloat(normalized);
    if (Number.isFinite(parsed)) {
      return parsed >= 0 ? "text-green-600" : "text-red-600";
    }
    return "";
  }, [record.amount]);

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

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

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

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

EquityDerivativeModal.displayName = "EquityDerivativeModal";