pokemon/src/pages/partials/card-modal.astro

---
import ebay from "/vendors/ebay.svg?raw";
import SetIcon from '../../components/SetIcon.astro';
import EnergyIcon from '../../components/EnergyIcon.astro';
import RarityIcon from '../../components/RarityIcon.astro';
import { db } from '../../db/index';
import { privateDecrypt } from "node:crypto";

export const partial = true;
export const prerender = false;

const searchParams = Astro.url.searchParams;
const cardId = Number(searchParams.get('cardId')) || 0;

// query the database for the card with the given productId and return the card data as json
const card = await db.query.cards.findFirst({
    where: { cardId: Number(cardId) },
    with: {
        prices: true,
        set: true,
    }
});

// Get the current card's position in the grid and find previous/next cards
// This assumes cards are displayed in a specific order in the DOM
const cardElements = typeof document !== 'undefined' ? document.querySelectorAll('[data-card-id]') : [];
let prevCardId = null;
let nextCardId = null;

// Since this is server-side, we can't access the DOM directly
// Instead, we'll pass the current cardId and let JavaScript handle navigation
// The JS will look for the next/prev cards in the grid based on the visible cards

function timeAgo(date: Date | null) {
  if (!date) return "Not applicable";

  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);

  const intervals: Record<string, number> = {
    year: 31536000,
    month: 2592000,
    day: 86400,
    hour: 3600,
    minute: 60
  };

  for (const [unit, value] of Object.entries(intervals)) {
    const count = Math.floor(seconds / value);
    if (count >= 1) return `${count} ${unit}${count > 1 ? "s" : ""} ago`;
  }

  return "just now";
}

// Get the most recent calculatedAt across all prices
const calculatedAt = (() => {
  if (!card?.prices?.length) return null;

  // Extract all valid calculatedAt timestamps
  const dates = card.prices
    .map(p => p.calculatedAt)
    .filter(d => d) // remove null/undefined
    .map(d => new Date(d));

  if (!dates.length) return null;

  // Return the most recent one
  return new Date(Math.max(...dates.map(d => d.getTime())));
})();

const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];

const conditionAttributes = (price: any) => {
  const volatility = (() => {
    const current = price?.marketPrice;
    const low = price?.lowestPrice;
    const high = price?.highestPrice;
    const median = price?.medianPrice;

    if (current === null || low === null || high === null) return "—";

    const range = Number(high) - Number(low);
    if (range <= 0) return "Low";

    const position = (Number(current) - Number(low)) / range;
    if (position > 0.76) return "High";
    if (position > 0.49) return "Medium";
    return "Low";
  })();

  const volatilityClass = 
    volatility === "High" ? "alert-danger" : 
    volatility === "Medium" ? "alert-warning" : 
    volatility === "Low" ? "alert-success" : 
    "";

  const condition: string = price?.condition || "Near Mint";
  return {
    "Near Mint": { label: "nav-nm", volatility: volatility, volatilityClass: volatilityClass, class:"show active" },
    "Lightly Played": { label: "nav-lp", volatility: volatility, volatilityClass: volatilityClass },
    "Moderately Played": { label: "nav-mp", volatility: volatility, volatilityClass: volatilityClass },
    "Heavily Played": { label: "nav-hp", volatility: volatility, volatilityClass: volatilityClass },
    "Damaged": { label: "nav-dmg", volatility: volatility, volatilityClass: volatilityClass},
  }[condition];
};

const ebaySearchUrl = (card: any) => {
  return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&LH_Sold=1&Graded=No&_dcat=183454`;
};
---

  <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
    <div class="modal-content" data-card-id={card?.cardId}>
      <div class="modal-header border-0">
        <div class="container-fluid row align-items-center">
        <div class="h4 card-title pe-2 col-sm-12 col-md-auto mb-sm-1">{card?.productName}</div>
        <div class="text-secondary col-auto">{card?.number}</div>
        <div class="text-secondary col-auto">{card?.variant}</div>
        </div>
        <div class="d-flex gap-2 align-items-center">
          <button type="button" class="btn btn-sm btn-outline-secondary card-nav-prev d-none" title="Previous card (← or swipe right)" aria-label="Previous card">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary card-nav-next d-none" title="Next card (→ or swipe left)" aria-label="Next card">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
          <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
        </div>
      </div>        
        <div class="modal-body pt-0">
        <div class="container-fluid">
            <div class="card mb-2 border-0">
            <div class="row g-4">
                <div class="col-sm-12 col-md-3">
                    <div class="position-relative mt-1"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-4" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/default.jpg'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
                    <div class="d-flex flex-row justify-content-between mt-2">
                    <div class="p text-secondary">{card?.set?.setCode}</div>
                    <div class="p text-secondary">Illustrator: {card?.Artist}</div>
                    </div>
                    </div>
                <div class="col-sm-12 col-md-7">
                    <ul class="nav nav-tabs nav-fill border-0 me-3 mb-2" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link nm active" id="nm-tab" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true"><span class="d-none d-md-inline">Near Mint</span><span class="d-md-none">NM</span></button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link lp" id="lp-tab" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false"><span class="d-none d-md-inline">Lightly Played</span><span class="d-md-none">LP</span></button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link mp" id="mp-tab" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false"><span class="d-none d-md-inline">Moderately Played</span><span class="d-md-none">MP</span></button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link hp" id="hp-tab" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false"><span class="d-none d-md-inline">Heavily Played</span><span class="d-md-none">HP</span></button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link dmg" id="dmg-tab" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-md-inline">Damaged</span><span class="d-md-none">DMG</span></button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link vendor d-none" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
                    </li>  
                    </ul>
                    <div class="tab-content" id="myTabContent">
                      {card?.prices.slice().sort((a, b) => conditionOrder.indexOf(a.condition) - conditionOrder.indexOf(b.condition)).map((price) => {
                        const attributes = conditionAttributes(price);
                        return (
                          <div class={`tab-pane fade ${attributes?.label} ${attributes?.class}`} id={`${attributes?.label}`} role="tabpanel" tabindex="0">
                            <div class="d-block gap-1 d-md-flex">
                                <div class="d-flex flex-row flex-md-column gap-1 col-12 col-md-2 mb-0">
                                      <div class="alert alert-secondary rounded p-2 flex-fill mb-1">
                                          <h6>Market Price</h6>
                                          <p class="pb-0">${price.marketPrice}</p>
                                      </div>
                                      <div class="alert alert-secondary rounded p-2 flex-fill mb-1">
                                          <h6>Lowest Price</h6>
                                          <p class="pb-0">${price.lowestPrice}</p>
                                      </div>
                                      <div class="alert alert-secondary rounded p-2 flex-fill mb-1">
                                          <h6>Highest Price</h6>
                                          <p class="pb-0">${price.highestPrice}</p>
                                      </div>
                                      <div class={`alert alert-secondary rounded p-2 flex-fill mb-1 ${attributes?.volatilityClass}`}>
                                          <h6>Volatility</h6>
                                          <p class="pb-0">{attributes?.volatility}</p>
                                      </div>
                            </div>
                            <div class="d-flex flex-column gap-1 col-12 col-md-10 mb-0 me-2">
                                      <div class="alert alert-secondary rounded p-2 mb-1">
                                          <h6>Latest Sales</h6>
                                      </div>
                                      <div class="alert alert-secondary rounded p-2 mb-1">
                                          <h6>Placeholder for graph</h6>
                                      </div>                                      
                                </div>
                            </div>
                            </div>
                        );
                      })}
                        <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
                            <div class="row g-2 mt-2">

                            </div>
                        </div>                        
                    </div>
                </div>
                <div class="col-sm-12 col-md-2 mt-0 mt-md-5">
                <a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
                <a class="btn btn-secondary mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
                </div>
            </div>
            <div class="text-end my-0"><small class="text-body-secondary">Prices last changed: {timeAgo(calculatedAt)}</small></div>
            </div>
        </div>
        </div>
        </div>
    </div>

<script is:inline>
    async function copyImage(img) {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");

        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;

        // draw the real image pixels
        ctx.drawImage(img, 0, 0);

        // convert to blob
        canvas.toBlob(async (blob) => {
            await navigator.clipboard.write([
                new ClipboardItem({ "image/png": blob })
            ]);
            console.log("Copied image via canvas.");
        });
    }

    // ===== Card Navigation System =====
    // Only declare class if it hasn't been declared yet (prevents HTMX reload errors)
    if (typeof window.CardNavigator === 'undefined') {
        window.CardNavigator = class CardNavigator {
        constructor() {
            this.touchStartX = 0;
            this.touchEndX = 0;
            this.swipeThreshold = 50; // minimum distance in pixels for a swipe
            this.loadingMoreCards = false;
            this.init();
        }

        init() {
            this.setupEventListeners();
            this.updateNavigationButtons();
            this.setupScrollObserver();
        }

        setupScrollObserver() {
            // Listen for when new cards are added to the grid
            const observer = new MutationObserver(() => {
                this.loadingMoreCards = false;
            });

            const cardGrid = document.getElementById('cardGrid');
            if (cardGrid) {
                observer.observe(cardGrid, {
                    childList: true,
                    subtree: false
                });
            }
        }

        setupEventListeners() {
            const modal = document.getElementById('cardModal');
            if (!modal) return;

            // Keyboard navigation
            document.addEventListener('keydown', (e) => this.handleKeydown(e));

            // Touch/Swipe navigation
            modal.addEventListener('touchstart', (e) => this.handleTouchStart(e), false);
            modal.addEventListener('touchend', (e) => this.handleTouchEnd(e), false);

            // Button navigation
            const prevBtn = document.querySelector('.card-nav-prev');
            const nextBtn = document.querySelector('.card-nav-next');

            if (prevBtn) prevBtn.addEventListener('click', () => this.navigatePrev());
            if (nextBtn) nextBtn.addEventListener('click', () => this.navigateNext());
        }

        handleKeydown(e) {
            // Only navigate if the modal is visible
            const modal = document.getElementById('cardModal');
            if (!modal || !modal.classList.contains('show')) return;

            if (e.key === 'ArrowLeft') {
                e.preventDefault();
                this.navigatePrev();
            } else if (e.key === 'ArrowRight') {
                e.preventDefault();
                this.navigateNext();
            }
        }

        handleTouchStart(e) {
            this.touchStartX = e.changedTouches[0].screenX;
        }

        handleTouchEnd(e) {
            this.touchEndX = e.changedTouches[0].screenX;
            this.handleSwipe();
        }

        handleSwipe() {
            const diff = this.touchStartX - this.touchEndX;

            // Swipe left = show next card
            if (diff > this.swipeThreshold) {
                this.navigateNext();
            }
            // Swipe right = show previous card
            else if (diff < -this.swipeThreshold) {
                this.navigatePrev();
            }
        }

        getVisibleCards() {
            // Get all card triggers from the current grid
            return Array.from(document.querySelectorAll('[data-card-id]'));
        }

        getCurrentCardElement() {
            const modal = document.getElementById('cardModal');
            if (!modal) return null;
            
            const currentCardId = modal.querySelector('.modal-content')?.getAttribute('data-card-id');
            return currentCardId ? document.querySelector(`[data-card-id="${currentCardId}"]`) : null;
        }

        navigatePrev() {
            const cards = this.getVisibleCards();
            const currentCard = this.getCurrentCardElement();

            if (!cards.length || !currentCard) return;

            const currentIndex = cards.indexOf(currentCard);
            if (currentIndex <= 0) return; // Already at the first card

            const prevCard = cards[currentIndex - 1];
            this.loadCard(prevCard);
        }

        navigateNext() {
            const cards = this.getVisibleCards();
            const currentCard = this.getCurrentCardElement();

            if (!cards.length || !currentCard) return;

            const currentIndex = cards.indexOf(currentCard);
            if (currentIndex >= cards.length - 1) {
                // At the last card, try to load more cards via infinite scroll
                this.triggerInfiniteScroll();
                return;
            }

            const nextCard = cards[currentIndex + 1];
            this.loadCard(nextCard);
        }

        triggerInfiniteScroll() {
            if (this.loadingMoreCards) return; // Already loading

            this.loadingMoreCards = true;

            // Find the infinite scroll trigger element (the "Loading..." div with hx-trigger="revealed")
            const scrollTrigger = document.querySelector('[hx-trigger="revealed"]');
            
            if (scrollTrigger) {
                // Trigger HTMX to load more cards
                if (typeof htmx !== 'undefined') {
                    htmx.trigger(scrollTrigger, 'revealed');
                } else {
                    // Fallback: manually call the endpoint
                    const endpoint = scrollTrigger.getAttribute('hx-post') || scrollTrigger.getAttribute('hx-get');
                    if (endpoint) {
                        const formData = new FormData(document.getElementById('searchform'));
                        const currentCards = this.getVisibleCards();
                        const start = (currentCards.length - 1) * 20; // Approximate
                        formData.append('start', start.toString());

                        fetch(endpoint, {
                            method: 'POST',
                            body: formData
                        })
                        .then(r => r.text())
                        .then(html => {
                            const grid = document.getElementById('cardGrid');
                            if (grid) {
                                grid.insertAdjacentHTML('beforeend', html);
                                this.waitForNewCards();
                            }
                        });
                    }
                }

                // Wait for new cards to be added and then navigate
                this.waitForNewCards();
            } else {
                this.loadingMoreCards = false;
            }
        }

        waitForNewCards() {
            // Wait up to 3 seconds for new cards to load
            let attempts = 0;
            const checkInterval = setInterval(() => {
                attempts++;
                const cards = this.getVisibleCards();
                const currentCardId = document.querySelector('#cardModal .modal-content')?.getAttribute('data-card-id');
                const currentIndex = cards.findIndex(c => c.getAttribute('data-card-id') === currentCardId);

                // If we have more cards than before, navigate to the next one
                if (currentIndex >= 0 && currentIndex < cards.length - 1) {
                    clearInterval(checkInterval);
                    const nextCard = cards[currentIndex + 1];
                    this.loadingMoreCards = false;
                    this.loadCard(nextCard);
                } else if (attempts > 30) { // 30 * 100ms = 3 seconds
                    clearInterval(checkInterval);
                    this.loadingMoreCards = false;
                    this.updateNavigationButtons();
                }
            }, 100);
        }

        loadCard(cardElement) {
            const hxGet = cardElement.getAttribute('hx-get');
            if (!hxGet) return;

            // Check if HTMX is available, if not use fetch
            if (typeof htmx !== 'undefined') {
                // Use HTMX to load the card
                htmx.ajax('GET', hxGet, {
                    target: '#cardModal',
                    swap: 'innerHTML',
                    onLoad: () => {
                        this.updateNavigationButtons();
                        // Trigger any analytics event if needed
                        const cardTitle = cardElement.querySelector('#cardImage')?.getAttribute('alt') || 'Unknown Card';
                        if (typeof dataLayer !== 'undefined') {
                            dataLayer.push({
                                'event': 'virtualPageview',
                                'pageUrl': hxGet,
                                'pageTitle': cardTitle,
                                'previousUrl': '/pokemon'
                            });
                        }
                    }
                });
            } else {
                // Fallback to native fetch if HTMX not available
                fetch(hxGet)
                    .then(response => response.text())
                    .then(html => {
                        const modalContent = document.querySelector('#cardModal .modal-dialog');
                        if (modalContent) {
                            modalContent.innerHTML = html;
                            this.updateNavigationButtons();
                            // Trigger any analytics event if needed
                            const cardTitle = cardElement.querySelector('#cardImage')?.getAttribute('alt') || 'Unknown Card';
                            if (typeof dataLayer !== 'undefined') {
                                dataLayer.push({
                                    'event': 'virtualPageview',
                                    'pageUrl': hxGet,
                                    'pageTitle': cardTitle,
                                    'previousUrl': '/pokemon'
                                });
                            }
                        }
                    })
                    .catch(error => console.error('Error loading card:', error));
            }
        }

        updateNavigationButtons() {
            const cards = this.getVisibleCards();
            const currentCard = this.getCurrentCardElement();
            const currentIndex = cards.indexOf(currentCard);

            const prevBtn = document.querySelector('.card-nav-prev');
            const nextBtn = document.querySelector('.card-nav-next');

            if (prevBtn) {
                prevBtn.disabled = currentIndex <= 0;
                prevBtn.style.opacity = currentIndex <= 0 ? '0.5' : '1';
            }

            if (nextBtn) {
                nextBtn.disabled = currentIndex >= cards.length - 1;
                nextBtn.style.opacity = currentIndex >= cards.length - 1 ? '0.5' : '1';
            }
        }
    }
    } // End of: if (typeof window.CardNavigator === 'undefined')

    // Initialize the card navigator when the modal is shown (only setup once)
    if (!window.cardNavigatorInitialized) {
        window.cardNavigatorInitialized = true;
        
        const modalElement = document.getElementById('cardModal');
        if (modalElement) {
            modalElement.addEventListener('shown.bs.modal', () => {
                if (!window.cardNavigator) {
                    window.cardNavigator = new window.CardNavigator();
                } else {
                    window.cardNavigator.updateNavigationButtons();
                }
            });
        }

        // Also initialize on first load in case the modal is already visible
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => {
                // Wait a bit for HTMX to load
                setTimeout(() => {
                    if (!window.cardNavigator) {
                        window.cardNavigator = new window.CardNavigator();
                    }
                }, 100);
            });
        } else {
            // Wait a bit for HTMX to load if already loaded
            setTimeout(() => {
                if (!window.cardNavigator) {
                    window.cardNavigator = new window.CardNavigator();
                }
            }, 100);
        }
    }
</script>