"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { DataTable } from "@/components/datatable/data-table";
import {
  createAllTransactionsColumns,
  AllTransactions,
} from "@/components/datatable/alltransactions/page";
import { PageHeader } from "@/components/ui/PageHeader";
import { AllTransactionsModal } from "@/components/cash/AllTransactionsModal";
import { AllTransactionsActions } from "@/components/cash/AllTransactionsActions";
import { BREADCRUMBS } from "@/constants/breadcrumbs";

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 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 px-4 mt-10 pb-12">
      <PageHeader
        title="All Transactions"
        description="Unified view of every executed transaction across asset classes."
        breadcrumbs={[...BREADCRUMBS.allTransactions]}
        actions={<AllTransactionsActions isLoading={loading} onRefresh={fetchTransactions} />}
      />

      {error && (
        <div className="mb-5 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-700 shadow-sm animate-[fadeIn_0.3s_ease-in-out]">
          <span className="mt-0.5 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-red-400" />
          {error}
        </div>
      )}

      {/* Skeleton while loading */}
      {loading ? (
        <div className="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
          {/* Header skeleton */}
          <div className="border-b border-slate-100 bg-slate-50/70 px-4 py-3 flex gap-6">
            {Array.from({ length: 7 }).map((_, i) => (
              <div key={i} className="h-3 rounded-full bg-slate-200 animate-pulse" style={{ width: `${60 + (i % 3) * 20}px`, animationDelay: `${i * 40}ms` }} />
            ))}
          </div>
          {/* Row skeletons */}
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} className={`flex gap-6 px-4 py-3 border-b border-slate-50 ${i % 2 === 0 ? "bg-white" : "bg-slate-50/40"}`}>
              {Array.from({ length: 7 }).map((_, j) => (
                <div key={j} className="h-3 rounded-full bg-slate-100 animate-pulse" style={{ width: `${50 + ((i + j) % 4) * 18}px`, animationDelay: `${(i * 7 + j) * 20}ms` }} />
              ))}
            </div>
          ))}
        </div>
      ) : (
        <DataTable columns={allTransactionColumns} data={data} />
      )}

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