"use client";

import { DataTable } from "@/components/datatable/data-table";
import { PageHeader } from "@/components/ui/PageHeader";
import { Plus, RefreshCw } from "lucide-react";
import { useMemo, useCallback, memo } from "react";
import {
  CurrencyConversion,
  createCurrencyConversionColumns,
} from "@/components/datatable/listcurrencyconversion/columns";
import { useCashPage } from "@/hooks/useCashPage";
import { RecordModal, formatDisplay, formatNumeric } from "@/components/cash/RecordModal";

export default function ListCurrencyConversion() {
  const {
    data,
    loading: pageLoading,
    selectedRecord,
    showModal,
    loadData,
    handleView,
    closeModal,
    actionButtonClass,
    router,
  } = useCashPage<CurrencyConversion>({
    apiEndpoint: "/api/currencyconversion/list",
  });

  const conversionColumns = useMemo(
    () =>
      createCurrencyConversionColumns({
        onView: handleView,
      }),
    [handleView]
  );

  const handleRedirect = useCallback(() => {
    router.push("/cash/currencyconversion/form");
  }, [router]);

  const isLoading = useMemo(() => pageLoading, [pageLoading]);

  const breadcrumbs = useMemo(
    () => [
      { label: "Home", href: "/" },
      { label: "Cash" },
      { label: "Currency Conversion" },
    ],
    []
  );

  const handleEdit = useCallback(
    (record: CurrencyConversion) => {
      router.push(
        `/cash/currencyconversion/form?id=${encodeURIComponent(record.id ?? record.uid ?? "")}`
      );
    },
    [router]
  );

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Currency Conversion"
        description="Review currency conversions and ensure rates stay current."
        breadcrumbs={breadcrumbs}
        actions={
          <>
            <button
              onClick={handleRedirect}
              disabled={isLoading}
              className={actionButtonClass(isLoading)}
            >
              <Plus size={18} />
              {isLoading ? "Loading..." : "Add Conversion"}
            </button>
            <button
              onClick={loadData}
              disabled={isLoading}
              className={actionButtonClass(isLoading)}
            >
              <RefreshCw size={16} className={isLoading ? "animate-spin" : ""} />
              {isLoading ? "Refreshing..." : "Refresh"}
            </button>
          </>
        }
      />

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

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

const CurrencyConversionModal = memo(({
  record,
  onClose,
  onEdit,
}: {
  record: CurrencyConversion;
  onClose: () => void;
  onEdit: () => void;
}) => {
  const subtitle = useMemo(
    () => `${formatDisplay(record.purchase_currency_code)} ⇄ ${formatDisplay(record.sold)}`,
    [record.purchase_currency_code, record.sold]
  );

  const metrics = useMemo(
    () => [
      {
        label: "Amount (Base Currency)",
        value: formatNumeric(record.price),
      },
      {
        label: "Conversion Rate",
        value: formatNumeric(record.quantity),
      },
      {
        label: "Placement Date",
        value: formatDisplay(record.t_date),
      },
    ],
    [record.price, record.quantity, record.t_date]
  );

  const detailItems = useMemo(
    () => [
      { label: "Placement Date", value: formatDisplay(record.t_date) },
      { label: "Bank", value: formatDisplay(record.bank_id) },
      { label: "Conversion Rate", value: formatNumeric(record.quantity) },
      { label: "Currency Bought", value: formatDisplay(record.purchase_currency_code) },
      { label: "Currency Sold", value: formatDisplay(record.sold) },
    ],
    [record.t_date, record.bank_id, record.quantity, record.purchase_currency_code, record.sold]
  );

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

CurrencyConversionModal.displayName = "CurrencyConversionModal";