"use client";

import type { LedgerTransaction } from "@/types/ocr";
import { getTransactionTypeColor, getChangeClass } from "@/types/ocr";

interface TransactionsTableProps {
  transactions: LedgerTransaction[];
}

export function TransactionsTable({ transactions }: TransactionsTableProps) {
  if (!transactions || transactions.length === 0) {
    return (
      <div className="px-4 py-6 text-center text-gray-400 text-xs">
        No transactions found.
      </div>
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-xs border-collapse">
        <thead>
          <tr className="bg-gray-50 border-b">
            <th className="px-2 py-2 text-left font-medium text-gray-600 whitespace-nowrap">
              Type
            </th>
            <th className="px-2 py-2 text-left font-medium text-gray-600 whitespace-nowrap">
              ISIN
            </th>
            <th className="px-2 py-2 text-left font-medium text-gray-600 whitespace-nowrap">
              Name
            </th>
            <th className="px-2 py-2 text-left font-medium text-gray-600 whitespace-nowrap">
              Type
            </th>
            <th className="px-2 py-2 text-left font-medium text-gray-600 whitespace-nowrap">
              Currency
            </th>
            <th className="px-2 py-2 text-left font-medium text-gray-600 whitespace-nowrap">
              a_class
            </th>
            <th className="px-2 py-2 text-left font-medium text-gray-600 whitespace-nowrap">
              a_type
            </th>
            <th className="px-2 py-2 text-right font-medium text-gray-600 whitespace-nowrap">
              Prev Qty
            </th>
            <th className="px-2 py-2 text-right font-medium text-gray-600 whitespace-nowrap">
              Curr Qty
            </th>
            <th className="px-2 py-2 text-right font-medium text-gray-600 whitespace-nowrap">
              Qty Change
            </th>
            <th className="px-2 py-2 text-right font-medium text-gray-600 whitespace-nowrap">
              Prev Price
            </th>
            <th className="px-2 py-2 text-right font-medium text-gray-600 whitespace-nowrap">
              Curr Price
            </th>
            <th className="px-2 py-2 text-right font-medium text-gray-600 whitespace-nowrap">
              Price Change
            </th>
            <th className="px-2 py-2 text-right font-medium text-gray-600 whitespace-nowrap">
              Value Change
            </th>
            <th className="px-2 py-2 text-left font-medium text-gray-600 whitespace-nowrap">
              Details
            </th>
          </tr>
        </thead>
        <tbody>
          {transactions.map((trans, idx) => {
            const aClassDisplay =
              trans.PreviousAClass || trans.CurrentAClass
                ? `${trans.PreviousAClass || ""} → ${trans.CurrentAClass || ""}`
                : "";
            const aTypeDisplay =
              trans.PreviousAType || trans.CurrentAType
                ? `${trans.PreviousAType || ""} → ${trans.CurrentAType || ""}`
                : "";

            return (
              <tr key={idx} className="border-b hover:bg-gray-50 transition-colors">
                <td className="px-2 py-1.5">
                  <span
                    className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-medium ${getTransactionTypeColor(
                      trans.TransactionType
                    )}`}
                  >
                    {trans.TransactionType}
                  </span>
                </td>
                <td className="px-2 py-1.5 text-gray-700 whitespace-nowrap">
                  {trans.ISIN || ""}
                </td>
                <td className="px-2 py-1.5 text-gray-700 max-w-[200px] truncate">
                  {trans.Name || ""}
                </td>
                <td className="px-2 py-1.5 text-gray-700 whitespace-nowrap">
                  {trans.Type || ""}
                </td>
                <td className="px-2 py-1.5 text-gray-700 whitespace-nowrap">
                  {trans.Currency || ""}
                </td>
                <td className="px-2 py-1.5 text-gray-700 whitespace-nowrap">
                  {aClassDisplay}
                </td>
                <td className="px-2 py-1.5 text-gray-700 whitespace-nowrap">
                  {aTypeDisplay}
                </td>
                <td className="px-2 py-1.5 text-right text-gray-700 whitespace-nowrap">
                  {trans.PreviousQuantity || "0.00"}
                </td>
                <td className="px-2 py-1.5 text-right text-gray-700 whitespace-nowrap">
                  {trans.CurrentQuantity || "0.00"}
                </td>
                <td
                  className={`px-2 py-1.5 text-right whitespace-nowrap ${getChangeClass(
                    trans.QuantityChange
                  )}`}
                >
                  {trans.QuantityChange || "0.00"}
                </td>
                <td className="px-2 py-1.5 text-right text-gray-700 whitespace-nowrap">
                  {trans.PreviousPurchasePrice || "0.00"}
                </td>
                <td className="px-2 py-1.5 text-right text-gray-700 whitespace-nowrap">
                  {trans.CurrentPurchasePrice || "0.00"}
                </td>
                <td
                  className={`px-2 py-1.5 text-right whitespace-nowrap ${getChangeClass(
                    trans.PurchasePriceChange
                  )}`}
                >
                  {trans.PurchasePriceChange || "0.00"}
                </td>
                <td
                  className={`px-2 py-1.5 text-right whitespace-nowrap ${getChangeClass(
                    trans.ValueChange
                  )}`}
                >
                  {trans.ValueChange || "N/A"}
                </td>
                <td className="px-2 py-1.5 text-gray-500 text-[10px] max-w-[200px] truncate">
                  {trans.CalculationDetails || ""}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}