"use client";

import { useCallback, useEffect, useMemo, useState, memo } from "react";
import { RefreshCw } from "lucide-react";

import { DataTable } from "@/components/datatable/data-table";
import {
  createAllTransactionsColumns,
  AllTransactions,
} from "@/components/datatable/alltransactions/page";
import { PageHeader } from "@/components/ui/PageHeader";
import { RecordModal, formatDisplay } from "@/components/cash/RecordModal";

const toString = (value: unknown): string =>
  value === null || value === undefined ? "" : String(value);

const stripHtmlTags = (html: string): string => {
  if (!html) return html;
  return html
    .replace(/<[^>]*>/g, "")
    .replace(/&nbsp;/g, " ")
    .replace(/&amp;/g, "&")
    .replace(/&lt;/g, "<")
    .replace(/&gt;/g, ">")
    .replace(/&quot;/g, '"')
    .replace(/&#39;/g, "'")
    .trim();
};

const normalizeTransactions = (payload: unknown): AllTransactions[] => {
  const candidateSources = [
    (payload as any)?.data?.data,
    (payload as any)?.data,
    (payload as any)?.records,
    (payload as any)?.items,
    payload,
  ];

  const fallback = candidateSources.find((entry) => Array.isArray(entry)) as any[] | undefined;

  if (!Array.isArray(fallback)) {
    return [];
  }

  return fallback.map((item, index) => {
    const rawAmount = toString(item?.amount ?? item?.net_amount ?? item?.total);
    const cleanAmount = stripHtmlTags(rawAmount);
    const fallbackId = `txn-${index + 1}`;
    
    return {
      id: toString(
        item?.id ??
          item?.uid ??
          item?.transaction_id ??
          item?.reference ??
          item?.txn_id ??
          item?.tref ??
          fallbackId
      ),
      uid: toString(item?.uid ?? item?.id ?? fallbackId),
      t_date: toString(item?.t_date ?? item?.trade_date),
      bank_id: toString(item?.bank_id ?? item?.bank ?? item?.bank_name ?? ""),
      ticker: toString(item?.ticker ?? item?.security ?? item?.symbol ?? ""),
      isin: toString(item?.isin ?? item?.securityname ?? item?.name ?? ""),
      f_type: toString(item?.f_type ?? item?.category ?? item?.type ?? ""),
      price: toString(item?.price ?? item?.trade_price ?? ""),
      quantity: toString(item?.quantity ?? item?.units ?? ""),
      purchase_currency_code: toString(item?.purchase_currency_code ?? item?.currency ?? item?.currency_code ?? ""),
      amount: cleanAmount,
      updateUrl: item?.updateUrl ?? item?.stockUpdateUrl ?? item?.editUrl ?? item?.update_url ?? undefined,
    };
  });
};

export default function ListTransaction() {
  const [data, setData] = useState<AllTransactions[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedTransaction, setSelectedTransaction] = useState<AllTransactions | null>(null);
  const [showModal, setShowModal] = useState(false);

  const fetchTransactions = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch("/api/equity/alltransactions", {
        method: "GET",
        credentials: "include",
      });

      if (!response.ok) {
        const detail = await response.text();
        throw new Error(
          `Failed to fetch transactions (${response.status}): ${detail || "No response body"}`
        );
      }

      const payload = await response.json();
      const normalized = normalizeTransactions(payload);
      setData(normalized);
    } catch (fetchError) {
      console.error("Unable to load transactions:", fetchError);
      setError(
        fetchError instanceof Error ? fetchError.message : "Unexpected error while fetching data."
      );
      setData([]);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchTransactions();
  }, [fetchTransactions]);

  const actionButtonClass = useCallback(
    (disabled: boolean) =>
      disabled
        ? "inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-100 px-2.5 py-1.5 text-xs font-medium text-gray-500 shadow-sm transition-all duration-200 cursor-not-allowed"
        : "inline-flex items-center gap-1 rounded-lg border border-[#428B4D]/40 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-[#428B4D] hover:bg-[#428B4D] hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#428B4D]/40 active:scale-95",
    []
  );

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

  const handleEdit = useCallback(() => {
    // Edit functionality not implemented for all transactions view
  }, []);

  const handleView = useCallback((record: AllTransactions) => {
    setSelectedTransaction(record);
    setShowModal(true);
  }, []);

  const closeModal = useCallback(() => {
    setShowModal(false);
    setSelectedTransaction(null);
  }, []);

  const allTransactionColumns = useMemo(
    () => createAllTransactionsColumns({ onView: handleView }),
    [handleView]
  );

  return (
    <div className="container mx-auto mt-6 px-4">
      <PageHeader
        title="All Transactions"
        description="Unified view of every executed transaction across asset classes."
        breadcrumbs={breadcrumbs}
        actions={
          <button
            onClick={fetchTransactions}
            disabled={loading}
            className={actionButtonClass(loading)}
          >
            <RefreshCw size={16} className={loading ? "animate-spin" : ""} />
            {loading ? "Refreshing..." : "Refresh"}
          </button>
        }
      />

      {error && (
        <div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 shadow-sm">
          {error}
        </div>
      )}

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

      {showModal && selectedTransaction && (
        <TransactionModal
          transaction={selectedTransaction}
          onClose={closeModal}
          onEdit={handleEdit}
        />
      )}
    </div>
  );
}

const TransactionModal = memo(({
  transaction,
  onClose,
  onEdit,
}: {
  transaction: AllTransactions;
  onClose: () => void;
  onEdit: () => void;
}) => {
  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}
    />
  );
});

TransactionModal.displayName = "TransactionModal";