import React from "react";
import { Edit2 } from "lucide-react";
import { RecentTransactions } from "@/hooks/useAssetAnalyticsReport";
import { stripHtmlTags, formatNumberWithHtml, getAmountValue, getAmountColor } from "@/lib/asset-analytics-utils";

interface RecentTransactionsTableProps {
  recentTrans: RecentTransactions;
}

export const RecentTransactionsTable: React.FC<RecentTransactionsTableProps> = ({ recentTrans }) => {
  if (!recentTrans || recentTrans.transactions.length === 0) {
    return null;
  }

  return (
    <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
      <div className="border-b border-slate-200 bg-slate-50 px-6 py-4">
        <h3 className="text-lg font-semibold text-[#428B4D]">
          Recent Transactions
        </h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-slate-50 border-b border-slate-200">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-600">
                Ref. ID
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-600">
                Placement Date
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-600">
                Bank
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-600">
                Security Ticker
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-600">
                Name
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-600">
                Category
              </th>
              <th className="px-4 py-3 text-right text-xs font-semibold text-slate-600">
                Price
              </th>
              <th className="px-4 py-3 text-right text-xs font-semibold text-slate-600">
                Quantity
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-slate-600">
                Currency
              </th>
              <th className="px-4 py-3 text-right text-xs font-semibold text-slate-600">
                Amount
              </th>
              <th className="px-4 py-3 text-center text-xs font-semibold text-slate-600">
                Options
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-200">
            {recentTrans.transactions.map((trans, idx) => (
              <tr key={idx} className="hover:bg-slate-50">
                <td className="px-4 py-3 text-sm text-slate-900">
                  {stripHtmlTags(trans.uid_title)}
                </td>
                <td className="px-4 py-3 text-sm text-slate-700">
                  {trans.transaction_date}
                </td>
                <td className="px-4 py-3 text-sm text-slate-700">
                  {trans.bank_name}
                </td>
                <td className="px-4 py-3 text-sm text-slate-900">
                  {trans.ticker}
                </td>
                <td className="px-4 py-3 text-sm text-slate-700">
                  {trans.isin}
                </td>
                <td className="px-4 py-3 text-sm text-slate-700">
                  {trans.f_type}
                </td>
                <td className="px-4 py-3 text-right text-sm text-slate-900">
                  {trans.price}
                </td>
                <td className="px-4 py-3 text-right text-sm text-slate-900">
                  {formatNumberWithHtml(trans.quantity)}
                </td>
                <td className="px-4 py-3 text-sm text-slate-700">
                  {trans.currency}
                </td>
                <td className={`px-4 py-3 text-right text-sm font-semibold ${getAmountColor(trans.amount)}`}>
                  {formatNumberWithHtml(getAmountValue(trans.amount))}
                </td>
                <td className="px-4 py-3 text-center">
                  <a
                    href={trans.view_url}
                    className="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-slate-300 bg-white hover:bg-slate-50"
                    title="Edit"
                  >
                    <Edit2 className="h-4 w-4 text-slate-600" />
                  </a>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};