<template>
  <div class="min-h-screen bg-surface py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <div class="mb-8">
        <h1 class="text-3xl font-bold text-white mb-2">Transaction History</h1>
        <p class="text-text-secondary">
          View all your deposits, withdrawals, purchases, and sales
        </p>
      </div>

      <!-- Pending Trades Section -->
      <div v-if="pendingTrades.length > 0" class="mb-6">
        <h2 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
          <Clock class="w-5 h-5 text-yellow-400" />
          Pending Trades
        </h2>
        <div class="space-y-3">
          <div
            v-for="trade in pendingTrades"
            :key="trade._id"
            class="bg-surface-light rounded-lg border border-yellow-400/30 p-4"
          >
            <div class="flex items-center justify-between flex-wrap gap-4">
              <div class="flex items-center gap-4">
                <div class="flex items-center gap-2">
                  <div
                    class="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"
                  ></div>
                  <span class="text-white font-medium">
                    Selling {{ trade.items?.length || 0 }} item(s)
                  </span>
                </div>
                <div class="h-6 w-px bg-surface-lighter"></div>
                <div class="text-text-secondary text-sm">
                  Code:
                  <span class="text-primary font-mono font-bold">{{
                    trade.verificationCode
                  }}</span>
                </div>
              </div>
              <div class="flex items-center gap-3">
                <div class="text-white font-semibold">
                  {{ formatCurrency(trade.totalValue || 0) }}
                </div>
                <a
                  v-if="trade.tradeOfferUrl"
                  :href="trade.tradeOfferUrl"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="px-4 py-2 bg-primary hover:bg-primary-dark text-surface-dark font-medium rounded-lg transition-colors text-sm flex items-center gap-1"
                >
                  <ExternalLink class="w-4 h-4" />
                  Open
                </a>
                <button
                  @click="viewTradeDetails(trade)"
                  class="px-4 py-2 bg-primary/20 hover:bg-primary/30 text-primary rounded-lg transition-colors text-sm"
                >
                  Details
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Filters -->
      <div
        class="bg-surface-light rounded-lg border border-surface-lighter p-6 mb-6"
      >
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label class="block text-sm font-medium text-text-secondary mb-2">
              Type
            </label>
            <select
              v-model="filters.type"
              class="w-full px-4 py-2 bg-surface rounded-lg border border-surface-lighter text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
            >
              <option value="">All Types</option>
              <option value="deposit">Deposits</option>
              <option value="withdrawal">Withdrawals</option>
              <option value="purchase">Purchases</option>
              <option value="sale">Sales</option>
              <option value="trade">Trades</option>
              <option value="bonus">Bonuses</option>
              <option value="refund">Refunds</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-text-secondary mb-2">
              Status
            </label>
            <select
              v-model="filters.status"
              class="w-full px-4 py-2 bg-surface rounded-lg border border-surface-lighter text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
            >
              <option value="">All Status</option>
              <option value="completed">Completed</option>
              <option value="pending">Pending</option>
              <option value="processing">Processing</option>
              <option value="failed">Failed</option>
              <option value="cancelled">Cancelled</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-text-secondary mb-2">
              Date Range
            </label>
            <select
              v-model="filters.dateRange"
              class="w-full px-4 py-2 bg-surface rounded-lg border border-surface-lighter text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
            >
              <option value="all">All Time</option>
              <option value="today">Today</option>
              <option value="week">Last 7 Days</option>
              <option value="month">Last 30 Days</option>
              <option value="year">Last Year</option>
            </select>
          </div>
        </div>
      </div>

      <!-- Stats Summary -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div
          class="bg-surface-light rounded-lg border border-surface-lighter p-4"
        >
          <div class="text-sm text-text-secondary mb-1">Total Deposits</div>
          <div class="text-2xl font-bold text-success">
            {{ formatCurrency(stats.totalDeposits) }}
          </div>
          <div class="text-xs text-text-secondary mt-1">
            {{ stats.depositCount }} transactions
          </div>
        </div>

        <div
          class="bg-surface-light rounded-lg border border-surface-lighter p-4"
        >
          <div class="text-sm text-text-secondary mb-1">Total Withdrawals</div>
          <div class="text-2xl font-bold text-danger">
            {{ formatCurrency(stats.totalWithdrawals) }}
          </div>
          <div class="text-xs text-text-secondary mt-1">
            {{ stats.withdrawalCount }} transactions
          </div>
        </div>

        <div
          class="bg-surface-light rounded-lg border border-surface-lighter p-4"
        >
          <div class="text-sm text-text-secondary mb-1">Total Spent</div>
          <div class="text-2xl font-bold text-warning">
            {{ formatCurrency(stats.totalPurchases) }}
          </div>
          <div class="text-xs text-text-secondary mt-1">
            {{ stats.purchaseCount }} purchases
          </div>
        </div>

        <div
          class="bg-surface-light rounded-lg border border-surface-lighter p-4"
        >
          <div class="text-sm text-text-secondary mb-1">Total Earned</div>
          <div class="text-2xl font-bold text-success">
            {{ formatCurrency(stats.totalSales) }}
          </div>
          <div class="text-xs text-text-secondary mt-1">
            {{ stats.saleCount }} sales
          </div>
        </div>
      </div>

      <!-- Transactions List -->
      <div class="bg-surface-light rounded-lg border border-surface-lighter">
        <div class="p-6 border-b border-surface-lighter">
          <h2 class="text-xl font-bold text-white flex items-center gap-2">
            <History class="w-6 h-6 text-primary" />
            Transactions
          </h2>
        </div>

        <div v-if="loading" class="text-center py-12">
          <Loader class="w-8 h-8 animate-spin mx-auto text-primary" />
          <p class="text-text-secondary mt-4">Loading transactions...</p>
        </div>

        <div
          v-else-if="filteredTransactions.length === 0"
          class="text-center py-12"
        >
          <History class="w-16 h-16 text-text-secondary/50 mx-auto mb-4" />
          <h3 class="text-xl font-semibold text-text-secondary mb-2">
            No transactions found
          </h3>
          <p class="text-text-secondary">
            {{
              filters.type || filters.status
                ? "Try changing your filters"
                : "Your transaction history will appear here"
            }}
          </p>
        </div>

        <div v-else class="divide-y divide-surface-lighter">
          <div
            v-for="transaction in paginatedTransactions"
            :key="transaction.id"
            class="p-6 hover:bg-surface/50 transition-colors"
          >
            <div class="flex items-start justify-between gap-4">
              <!-- Left side: Icon/Image, Type, Description -->
              <div class="flex items-start gap-4 flex-1 min-w-0">
                <!-- Item Image (for purchases/sales) or Icon (for other types) -->
                <div
                  v-if="
                    transaction.itemImage &&
                    (transaction.type === 'purchase' ||
                      transaction.type === 'sale')
                  "
                  class="flex-shrink-0"
                >
                  <img
                    :src="transaction.itemImage"
                    :alt="transaction.itemName"
                    class="w-16 h-16 rounded-lg object-cover border-2 border-surface-lighter"
                    @error="$event.target.style.display = 'none'"
                  />
                </div>

                <!-- Icon (for non-item transactions) -->
                <div
                  v-else
                  :class="[
                    'p-3 rounded-lg flex-shrink-0',
                    getTransactionIconBg(transaction.type),
                  ]"
                >
                  <component
                    :is="getTransactionIcon(transaction.type)"
                    :class="[
                      'w-6 h-6',
                      getTransactionIconColor(transaction.type),
                    ]"
                  />
                </div>

                <!-- Details -->
                <div class="flex-1 min-w-0">
                  <!-- Title and Status -->
                  <div class="flex items-center gap-2 flex-wrap mb-1">
                    <h3 class="text-white font-semibold">
                      {{ getTransactionTitle(transaction) }}
                    </h3>
                    <span
                      :class="[
                        'text-xs px-2 py-0.5 rounded-full font-medium',
                        getStatusClass(transaction.status),
                      ]"
                    >
                      {{ transaction.status }}
                    </span>
                  </div>

                  <!-- Description -->
                  <p class="text-sm text-text-secondary mb-2">
                    {{
                      transaction.description ||
                      getTransactionDescription(transaction)
                    }}
                  </p>

                  <!-- Meta Information -->
                  <div
                    class="flex flex-wrap items-center gap-3 text-xs text-text-secondary"
                  >
                    <span class="flex items-center gap-1">
                      <Calendar class="w-3 h-3" />
                      {{ formatDate(transaction.createdAt) }}
                    </span>
                    <span
                      v-if="transaction.sessionIdShort"
                      class="flex items-center gap-1"
                    >
                      <Monitor class="w-3 h-3" />
                      Session:
                      <span
                        :style="{
                          backgroundColor: getSessionColor(
                            transaction.sessionIdShort
                          ),
                        }"
                        class="px-2 py-0.5 rounded text-white font-mono text-[10px]"
                        :title="`Session ID: ${transaction.sessionIdShort}`"
                      >
                        {{ transaction.sessionIdShort }}
                      </span>
                    </span>
                  </div>
                </div>
              </div>

              <!-- Right side: Amount -->
              <div class="text-right flex-shrink-0">
                <div
                  :class="[
                    'text-xl font-bold',
                    transaction.direction === '+'
                      ? 'text-success'
                      : 'text-danger',
                  ]"
                >
                  {{ transaction.direction
                  }}{{ formatCurrency(transaction.amount) }}
                </div>
                <div
                  v-if="transaction.fee > 0"
                  class="text-xs text-text-secondary mt-1"
                >
                  Fee: {{ formatCurrency(transaction.fee) }}
                </div>
              </div>
            </div>

            <!-- Additional Details (expandable) -->
            <div
              v-if="expandedTransaction === transaction.id"
              class="mt-4 pt-4 border-t border-surface-lighter"
            >
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                  <span class="text-text-secondary">Transaction ID:</span>
                  <span class="text-white ml-2 font-mono text-xs">{{
                    transaction.id
                  }}</span>
                </div>
                <div v-if="transaction.balanceBefore !== undefined">
                  <span class="text-text-secondary">Balance Before:</span>
                  <span class="text-white ml-2">{{
                    formatCurrency(transaction.balanceBefore)
                  }}</span>
                </div>
                <div v-if="transaction.balanceAfter !== undefined">
                  <span class="text-text-secondary">Balance After:</span>
                  <span class="text-white ml-2">{{
                    formatCurrency(transaction.balanceAfter)
                  }}</span>
                </div>
                <div v-if="transaction.paymentMethod">
                  <span class="text-text-secondary">Payment Method:</span>
                  <span class="text-white ml-2 capitalize">{{
                    transaction.paymentMethod
                  }}</span>
                </div>
              </div>
            </div>

            <!-- Toggle Details Button -->
            <button
              @click="toggleExpanded(transaction.id)"
              class="mt-3 text-xs text-primary hover:text-primary-hover flex items-center gap-1"
            >
              <ChevronDown
                :class="[
                  'w-4 h-4 transition-transform',
                  expandedTransaction === transaction.id ? 'rotate-180' : '',
                ]"
              />
              {{ expandedTransaction === transaction.id ? "Hide" : "Show" }}
              Details
            </button>
          </div>
        </div>

        <!-- Pagination -->
        <div
          v-if="filteredTransactions.length > perPage"
          class="p-6 border-t border-surface-lighter"
        >
          <div class="flex items-center justify-between flex-wrap gap-4">
            <!-- Page info -->
            <div class="text-sm text-text-secondary">
              Showing {{ (currentPage - 1) * perPage + 1 }} to
              {{ Math.min(currentPage * perPage, filteredTransactions.length) }}
              of {{ filteredTransactions.length }} transactions
            </div>

            <!-- Page controls -->
            <div class="flex items-center gap-2">
              <!-- Previous button -->
              <button
                @click="prevPage"
                :disabled="!hasPrevPage"
                class="px-3 py-2 rounded-lg border border-surface-lighter bg-surface text-text-primary hover:bg-surface-light disabled:opacity-50 disabled:cursor-not-allowed transition-all"
                title="Previous page"
              >
                <ChevronLeft class="w-4 h-4" />
              </button>

              <!-- Page numbers -->
              <div class="flex gap-1">
                <!-- First page -->
                <button
                  v-if="currentPage > 3"
                  @click="goToPage(1)"
                  class="px-3 py-2 rounded-lg border border-surface-lighter bg-surface text-text-primary hover:bg-surface-light transition-all"
                >
                  1
                </button>
                <span
                  v-if="currentPage > 3"
                  class="px-2 py-2 text-text-secondary"
                >
                  ...
                </span>

                <!-- Nearby pages -->
                <button
                  v-for="page in [
                    currentPage - 1,
                    currentPage,
                    currentPage + 1,
                  ].filter((p) => p >= 1 && p <= totalPages)"
                  :key="page"
                  @click="goToPage(page)"
                  :class="[
                    'px-3 py-2 rounded-lg border transition-all',
                    page === currentPage
                      ? 'bg-primary border-primary text-white font-semibold'
                      : 'border-surface-lighter bg-surface text-text-primary hover:bg-surface-light',
                  ]"
                >
                  {{ page }}
                </button>

                <!-- Last page -->
                <span
                  v-if="currentPage < totalPages - 2"
                  class="px-2 py-2 text-text-secondary"
                >
                  ...
                </span>
                <button
                  v-if="currentPage < totalPages - 2"
                  @click="goToPage(totalPages)"
                  class="px-3 py-2 rounded-lg border border-surface-lighter bg-surface text-text-primary hover:bg-surface-light transition-all"
                >
                  {{ totalPages }}
                </button>
              </div>

              <!-- Next button -->
              <button
                @click="nextPage"
                :disabled="!hasNextPage"
                class="px-3 py-2 rounded-lg border border-surface-lighter bg-surface text-text-primary hover:bg-surface-light disabled:opacity-50 disabled:cursor-not-allowed transition-all"
                title="Next page"
              >
                <ChevronRight class="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Trade Details Modal -->
    <div
      v-if="showTradeModal && selectedTrade"
      class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
      @click.self="closeTradeModal"
    >
      <div
        class="bg-surface-light rounded-lg max-w-md w-full p-6 border border-surface-lighter"
      >
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-bold text-white">Trade Details</h3>
          <button
            @click="closeTradeModal"
            class="text-text-secondary hover:text-white transition-colors"
          >
            <X class="w-6 h-6" />
          </button>
        </div>

        <!-- Trade Status -->
        <div class="text-center py-4 mb-4">
          <div
            class="w-16 h-16 bg-yellow-400/20 rounded-full flex items-center justify-center mx-auto mb-3"
          >
            <Clock class="w-8 h-8 text-yellow-400" />
          </div>
          <p class="text-white font-semibold mb-1">Waiting for Acceptance</p>
          <p class="text-text-secondary text-sm">
            Check your Steam trade offers
          </p>
        </div>

        <!-- Verification Code -->
        <div
          class="bg-gradient-to-br from-primary/20 to-primary-dark/20 border-2 border-primary rounded-lg p-6 text-center mb-4"
        >
          <p class="text-text-secondary text-sm mb-2">Verification Code</p>
          <p class="text-4xl font-bold text-white tracking-widest font-mono">
            {{ selectedTrade.verificationCode }}
          </p>
          <p class="text-text-secondary text-xs mt-2">
            Match this code with your Steam trade offer
          </p>
        </div>

        <!-- Open Trade Link Button -->
        <a
          v-if="selectedTrade.tradeOfferUrl"
          :href="selectedTrade.tradeOfferUrl"
          target="_blank"
          rel="noopener noreferrer"
          class="w-full px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-surface-dark font-semibold rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center gap-2 text-center mb-4"
        >
          <ExternalLink class="w-5 h-5" />
          Open Trade in Steam
        </a>

        <!-- Trade Info -->
        <div class="bg-surface rounded-lg p-4 space-y-2 mb-4">
          <div class="flex items-center justify-between">
            <span class="text-text-secondary">Items:</span>
            <span class="text-white font-semibold">{{
              selectedTrade.items?.length || 0
            }}</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-text-secondary">Value:</span>
            <span class="text-white font-semibold">{{
              formatCurrency(selectedTrade.totalValue || 0)
            }}</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-text-secondary">Created:</span>
            <span class="text-white font-semibold">{{
              formatDate(selectedTrade.sentAt || selectedTrade.createdAt)
            }}</span>
          </div>
        </div>

        <!-- Instructions -->
        <div class="bg-primary/10 border border-primary/30 rounded-lg p-3 mb-4">
          <p class="text-white font-semibold text-sm mb-2">Instructions:</p>
          <ol
            class="text-text-secondary text-sm space-y-1 list-decimal list-inside"
          >
            <li>Click "Open Trade in Steam" button above</li>
            <li>Verify the code matches</li>
            <li>Accept the trade</li>
          </ol>
        </div>

        <button
          @click="closeTradeModal"
          class="w-full px-4 py-2.5 bg-surface hover:bg-surface-lighter text-white rounded-lg transition-colors"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import { useAuthStore } from "@/stores/auth";
import axios from "@/utils/axios";
import { useToast } from "vue-toastification";
import {
  History,
  Loader,
  Calendar,
  Monitor,
  Smartphone,
  Tablet,
  Laptop,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  ArrowDownCircle,
  ArrowUpCircle,
  ShoppingCart,
  Tag,
  RefreshCw,
  Gift,
  DollarSign,
  Clock,
  X,
  ExternalLink,
} from "lucide-vue-next";

const authStore = useAuthStore();
const toast = useToast();

// State
const transactions = ref([]);
const loading = ref(false);
const currentPage = ref(1);
const perPage = ref(10);
const totalTransactions = ref(0);
const expandedTransaction = ref(null);
const pendingTrades = ref([]);
const showTradeModal = ref(false);
const selectedTrade = ref(null);

const filters = ref({
  type: "",
  status: "",
  dateRange: "all",
});

let wsMessageHandler = null;

const stats = ref({
  totalDeposits: 0,
  totalWithdrawals: 0,
  totalPurchases: 0,
  totalSales: 0,
  depositCount: 0,
  withdrawalCount: 0,
  purchaseCount: 0,
  saleCount: 0,
});

// Computed
const filteredTransactions = computed(() => {
  let filtered = [...transactions.value];

  if (filters.value.type) {
    filtered = filtered.filter((t) => t.type === filters.value.type);
  }

  if (filters.value.status) {
    filtered = filtered.filter((t) => t.status === filters.value.status);
  }

  if (filters.value.dateRange !== "all") {
    const now = new Date();
    const filterDate = new Date();

    switch (filters.value.dateRange) {
      case "today":
        filterDate.setHours(0, 0, 0, 0);
        break;
      case "week":
        filterDate.setDate(now.getDate() - 7);
        break;
      case "month":
        filterDate.setDate(now.getDate() - 30);
        break;
      case "year":
        filterDate.setFullYear(now.getFullYear() - 1);
        break;
    }

    filtered = filtered.filter((t) => new Date(t.createdAt) >= filterDate);
  }

  return filtered;
});

// Paginated transactions
const paginatedTransactions = computed(() => {
  const start = (currentPage.value - 1) * perPage.value;
  const end = start + perPage.value;
  return filteredTransactions.value.slice(start, end);
});

const totalPages = computed(() => {
  return Math.ceil(filteredTransactions.value.length / perPage.value);
});

const hasNextPage = computed(() => {
  return currentPage.value < totalPages.value;
});

const hasPrevPage = computed(() => {
  return currentPage.value > 1;
});

// Methods
const fetchTransactions = async () => {
  loading.value = true;
  try {
    console.log("🔄 Fetching transactions...");
    const response = await axios.get("/api/user/transactions", {
      withCredentials: true,
      params: {
        limit: 1000, // Fetch all, we'll paginate on frontend
      },
    });

    console.log("✅ Transaction response:", response.data);

    if (response.data.success) {
      transactions.value = response.data.transactions;
      totalTransactions.value = response.data.transactions.length;
      stats.value = response.data.stats || stats.value;
      console.log(`📊 Loaded ${transactions.value.length} transactions`);
      console.log("Stats:", stats.value);
    } else {
      console.warn("⚠️ Response success is false");
    }
  } catch (error) {
    console.error("❌ Failed to fetch transactions:", error);
    console.error("Response:", error.response?.data);
    console.error("Status:", error.response?.status);
    if (error.response?.status !== 404) {
      toast.error("Failed to load transaction history");
    }
  } finally {
    loading.value = false;
  }
};

const fetchPendingTrades = async () => {
  try {
    const response = await axios.get("/api/inventory/trades");
    if (response.data.success) {
      pendingTrades.value = response.data.trades.filter(
        (t) => t.state === "pending"
      );
    }
  } catch (err) {
    console.error("Failed to load pending trades:", err);
  }
};

const viewTradeDetails = (trade) => {
  selectedTrade.value = trade;
  showTradeModal.value = true;
};

const closeTradeModal = () => {
  showTradeModal.value = false;
  selectedTrade.value = null;
};

const setupWebSocketListeners = () => {
  if (authStore.ws) {
    wsMessageHandler = (event) => {
      try {
        const message = JSON.parse(event.data);

        if (message.type === "trade_completed") {
          // Remove from pending
          pendingTrades.value = pendingTrades.value.filter(
            (t) => t._id !== message.data.tradeId
          );
          // Refresh transactions
          fetchTransactions();
          toast.success("Trade completed! Balance updated.");
        } else if (
          message.type === "trade_declined" ||
          message.type === "trade_expired" ||
          message.type === "trade_canceled"
        ) {
          // Remove from pending
          pendingTrades.value = pendingTrades.value.filter(
            (t) => t._id !== message.data.tradeId
          );
          if (message.type === "trade_declined") {
            toast.warning("Trade was declined");
          } else if (message.type === "trade_expired") {
            toast.warning("Trade offer expired");
          }
        } else if (message.type === "trade_created") {
          // Add to pending trades
          fetchPendingTrades();
        }
      } catch (err) {
        console.error("Error handling WebSocket message:", err);
      }
    };

    authStore.ws.addEventListener("message", wsMessageHandler);
  }
};

const cleanupWebSocketListeners = () => {
  if (authStore.ws && wsMessageHandler) {
    authStore.ws.removeEventListener("message", wsMessageHandler);
  }
};

const nextPage = () => {
  if (hasNextPage.value) {
    currentPage.value++;
    window.scrollTo({ top: 0, behavior: "smooth" });
  }
};

const prevPage = () => {
  if (hasPrevPage.value) {
    currentPage.value--;
    window.scrollTo({ top: 0, behavior: "smooth" });
  }
};

const goToPage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    window.scrollTo({ top: 0, behavior: "smooth" });
  }
};

const resetFilters = () => {
  filters.value = {
    type: "",
    status: "",
    dateRange: "all",
  };
  currentPage.value = 1;
};

// Watch for filter changes and reset to page 1
watch(
  [
    () => filters.value.type,
    () => filters.value.status,
    () => filters.value.dateRange,
  ],
  () => {
    currentPage.value = 1;
  }
);

const toggleExpanded = (id) => {
  expandedTransaction.value = expandedTransaction.value === id ? null : id;
};

// Helper functions
const formatCurrency = (amount) => {
  if (amount === undefined || amount === null) return "$0.00";
  return `$${Math.abs(amount).toFixed(2)}`;
};

const formatDate = (date) => {
  if (!date) return "N/A";
  const d = new Date(date);
  const now = new Date();
  const diff = now - d;
  const hours = Math.floor(diff / 3600000);
  const days = Math.floor(diff / 86400000);

  if (hours < 1) return "Just now";
  if (hours < 24) return `${hours}h ago`;
  if (days < 7) return `${days}d ago`;
  return d.toLocaleDateString();
};

const getTransactionIcon = (type) => {
  const icons = {
    deposit: ArrowDownCircle,
    withdrawal: ArrowUpCircle,
    purchase: ShoppingCart,
    sale: Tag,
    trade: RefreshCw,
    bonus: Gift,
    refund: DollarSign,
  };
  return icons[type] || DollarSign;
};

const getTransactionIconColor = (type) => {
  const colors = {
    deposit: "text-success",
    withdrawal: "text-danger",
    purchase: "text-primary",
    sale: "text-warning",
    trade: "text-info",
    bonus: "text-success",
    refund: "text-warning",
  };
  return colors[type] || "text-text-secondary";
};

const getTransactionIconBg = (type) => {
  const backgrounds = {
    deposit: "bg-success/20",
    withdrawal: "bg-danger/20",
    purchase: "bg-primary/20",
    sale: "bg-warning/20",
    trade: "bg-info/20",
    bonus: "bg-success/20",
    refund: "bg-warning/20",
  };
  return backgrounds[type] || "bg-surface-lighter";
};

const getTransactionTitle = (transaction) => {
  const titles = {
    deposit: "Deposit",
    withdrawal: "Withdrawal",
    purchase: "Item Purchase",
    sale: "Item Sale",
    trade: "Trade",
    bonus: "Bonus",
    refund: "Refund",
  };
  return titles[transaction.type] || "Transaction";
};

const getTransactionDescription = (transaction) => {
  if (transaction.itemName) {
    return `${transaction.type === "purchase" ? "Purchased" : "Sold"} ${
      transaction.itemName
    }`;
  }
  return `${
    transaction.type.charAt(0).toUpperCase() + transaction.type.slice(1)
  } of ${formatCurrency(transaction.amount)}`;
};

const getStatusClass = (status) => {
  const classes = {
    completed: "bg-success/20 text-success",
    pending: "bg-warning/20 text-warning",
    processing: "bg-info/20 text-info",
    failed: "bg-danger/20 text-danger",
    cancelled: "bg-text-secondary/20 text-text-secondary",
  };
  return classes[status] || "bg-surface-lighter text-text-secondary";
};

const getDeviceIcon = (device) => {
  const icons = {
    Mobile: Smartphone,
    Tablet: Tablet,
    Desktop: Laptop,
  };
  return icons[device] || Laptop;
};

const getSessionColor = (sessionIdShort) => {
  if (!sessionIdShort) return "#64748b";

  let hash = 0;
  for (let i = 0; i < sessionIdShort.length; i++) {
    hash = sessionIdShort.charCodeAt(i) + ((hash << 5) - hash);
  }

  const hue = Math.abs(hash) % 360;
  const saturation = 60 + (Math.abs(hash) % 20);
  const lightness = 45 + (Math.abs(hash) % 15);

  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
};

// Lifecycle
onMounted(() => {
  fetchTransactions();
  fetchPendingTrades();
  setupWebSocketListeners();
});

onUnmounted(() => {
  cleanupWebSocketListeners();
});
</script>
