"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 {
  createStockColumns,
  EquityStock,
} from "@/components/datatable/liststock/columns";
import { useCashPage } from "@/hooks/useCashPage";
import { RecordModal, formatDisplay, formatNumeric } from "@/components/cash/RecordModal";

export default function ListStock() {
  const {
    data,
    loading: pageLoading,
    selectedRecord: selectedStock,
    showModal,
    showDeleteConfirm,
    deleteLoading,
    loadData,
    handleView,
    closeModal,
    handleDeleteClick,
    confirmDelete,
    actionButtonClass,
    toast,
    router,
    setShowDeleteConfirm,
  } = useCashPage<EquityStock>({
    apiEndpoint: "/api/stock",
    deleteEndpoint: "/api/stock",
    deleteResourceName: "stock",
  });

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

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

  const handleEdit = useCallback(() => {
    if (selectedStock?.id) {
      router.push(`/equity/stock/form?id=${encodeURIComponent(selectedStock.id)}`);
    }
  }, [selectedStock, router]);

  const handleCancelDelete = useCallback(() => {
    setShowDeleteConfirm(false);
  }, [setShowDeleteConfirm]);

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

  return (
    <div className="container mx-auto px-4 mt-6">
      {toast && (
        <div
          className={`fixed top-4 right-4 z-50 rounded-lg border px-4 py-3 text-sm shadow-lg transition-opacity ${
            toast.type === "success"
              ? "border-green-200 bg-green-50 text-green-700"
              : "border-red-200 bg-red-50 text-red-700"
          }`}
        >
          {toast.message}
        </div>
      )}
      <PageHeader
        title="List Stock"
        description="Monitor and manage the full list of equity stock records."
        breadcrumbs={breadcrumbs}
        actions={
          <>
            <button
              onClick={handleRedirect}
              disabled={pageLoading}
              className={actionButtonClass(pageLoading)}
            >
              <Plus size={18} />
              {pageLoading ? "Loading..." : "Add Stock"}
            </button>
            <button
              onClick={loadData}
              disabled={pageLoading}
              className={actionButtonClass(pageLoading)}
            >
              <RefreshCw size={16} className={pageLoading ? "animate-spin" : ""} />
              {pageLoading ? "Refreshing..." : "Refresh"}
            </button>
          </>
        }
      />

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

      {showModal && selectedStock && (
        <StockModal
          stock={selectedStock}
          onClose={closeModal}
          onEdit={handleEdit}
          onDelete={handleDeleteClick}
        />
      )}

      {showDeleteConfirm && selectedStock && (
        <DeleteConfirmModal
          stock={selectedStock}
          onCancel={handleCancelDelete}
          onConfirm={confirmDelete}
          deleteLoading={deleteLoading}
        />
      )}
    </div>
  );
}

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

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

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

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

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

StockModal.displayName = "StockModal";

const DeleteConfirmModal = memo(({
  stock,
  onCancel,
  onConfirm,
  deleteLoading,
}: {
  stock: EquityStock;
  onCancel: () => void;
  onConfirm: () => void;
  deleteLoading: boolean;
}) => {
  const stockName = useMemo(
    () => stock.ticker || stock.isin || "this record",
    [stock.ticker, stock.isin]
  );

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 px-4 py-6 backdrop-blur-sm">
      <div className="w-full max-w-md rounded-lg border border-white/40 bg-white p-6 shadow-2xl">
        <div className="mb-4 text-center">
          <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">
            Delete Confirmation
          </p>
          <h3 className="text-lg font-semibold text-slate-800">
            Remove "{stockName}"?
          </h3>
          <p className="mt-2 text-sm text-slate-500">
            This action cannot be undone. Are you sure you want to delete this record?
          </p>
        </div>
        <div className="flex justify-center gap-3">
          <button
            type="button"
            onClick={onCancel}
            className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:border-slate-300"
            disabled={deleteLoading}
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={onConfirm}
            disabled={deleteLoading}
            className="rounded-lg bg-red-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-red-600 disabled:opacity-70"
          >
            {deleteLoading ? "Deleting..." : "Delete"}
          </button>
        </div>
      </div>
    </div>
  );
});

DeleteConfirmModal.displayName = "DeleteConfirmModal";