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";
import FirstEditionIcon from "../../components/FirstEditionIcon.astro";

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 market = price?.marketPrice;
    const low = price?.lowestPrice;
    const high = price?.highestPrice;

    if (market == null || low == null || high == null || Number(market) === 0) {
      return "Indeterminate";
    }

    const spreadPct = (Number(high) - Number(low)) / Number(market) * 100;

    if (spreadPct >= 81) return "High";
    if (spreadPct >= 59) return "Medium";
    return "Low";
  })();

  const volatilityClass = (() => {
    switch (volatility) {
      case "High":          return "alert-danger";
      case "Medium":        return "alert-warning";
      case "Low":           return "alert-success";
      default:              return "alert-dark"; // Indeterminate
    }
  })();

  const condition: string = price?.condition || "Near Mint";

  return {
    "Near Mint": { label: "nav-nm", volatility, volatilityClass, class: "show active" },
    "Lightly Played": { label: "nav-lp", volatility, volatilityClass },
    "Moderately Played": { label: "nav-mp", volatility, volatilityClass },
    "Heavily Played": { label: "nav-hp", volatility, volatilityClass },
    "Damaged": { label: "nav-dmg", volatility, 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`;
};

const altSearchUrl = (card: any) => {
  return `https://alt.xyz/browse?query=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&sortBy=newest_first`;
};
---

  <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-light col-auto">{card?.variant}</div>
        </div>
        <div class="d-flex gap-2 align-items-center">
          <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 top-50 start-0 d-inline"><FirstEditionIcon edition={card?.variant} /></span><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-column flex-lg-row justify-content-between mt-2">
                    <div class="text-secondary">{card?.set?.setCode}</div>
                    <div class="text-secondary">Illus<span class="d-none d-lg-inline">trator</span>: {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-lg-inline">Near Mint</span><span class="d-lg-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-lg-inline">Lightly Played</span><span class="d-lg-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-lg-inline">Moderately Played</span><span class="d-lg-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-lg-inline">Heavily Played</span><span class="d-lg-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-lg-inline">Damaged</span><span class="d-lg-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-lg-inline">Inventory</span><span class="d-lg-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-lg-flex">
                                <div class="d-flex flex-row flex-lg-column gap-1 col-12 col-lg-2 mb-1">
                                      <div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-1">
                                          <h6 class="mb-auto">Market Price</h6>
                                          <p class="mb-0 mt-1">${price.marketPrice}</p>
                                      </div>
                                      <div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-1">
                                          <h6 class="mb-auto">Lowest Price</h6>
                                          <p class="mb-0 mt-1">${price.lowestPrice}</p>
                                      </div>
                                      <div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-1">
                                          <h6 class="mb-auto">Highest Price</h6>
                                          <p class="mb-0 mt-1">${price.highestPrice}</p>
                                      </div>
                                      <div class={`alert alert-secondary rounded p-2 flex-fill d-flex flex-column mb-1 ${attributes?.volatilityClass}`}>
                                          <h6 class="mb-auto">Volatility</h6>
                                          <p class="mb-0 mt-1">{attributes?.volatility}</p>
                                      </div>
                            </div>
                            <div class="d-flex flex-column gap-1 col-12 col-lg-10 mb-0 me-2 clearfix">
                                      <div class="alert alert-dark rounded p-2 mb-1 table-responsive">
                                          <h6>Latest Verified Sales</h6>
                                          <table class="table table-sm mb-0">
                                            <caption class="small">Filtered to remove mismatched language variants</caption>
                                            <thead class="table-dark">
                                                <tr>
                                                    <th scope="col">Date</th>
                                                    <th scope="col">Title</th>
                                                    <th scope="col">Price</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                          </table>
                                      </div>
                                        <div class="alert alert-dark rounded p-2 mb-1">
                                            <h6>Market Price History</h6>
                                        <div class="position-relative" style="height: 200px;">
                                            <canvas id={`priceChart-${price.priceId}`} class="price-history-chart" data-card-id={card?.cardId} data-condition={price.condition}></canvas>
                                        </div>
                                        <div class="btn-group btn-group-sm d-flex flex-row gap-1 justify-content-end" role="group" aria-label="Time range">
                                            <button type="button" class="btn btn-dark price-range-btn active" data-range="1m">1M</button>
                                            <button type="button" class="btn btn-dark price-range-btn" data-range="3m">3M</button>
                                            <button type="button" class="btn btn-dark price-range-btn" data-range="6m">6M</button>
                                            <button type="button" class="btn btn-dark price-range-btn" data-range="1y">1Y</button>
                                            <button type="button" class="btn btn-dark price-range-btn" data-range="all">All</button>
                                        </div>
                                        </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 d-flex flex-row flex-md-column">
                <a class="btn btn-dark mb-2 w-100 p-2" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> <span class="d-none d-lg-inline">TCGPlayer</span></a>
                <a class="btn btn-dark mb-2 w-100 p-2" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
                <a class="btn btn-dark mb-2 w-100 p-2" href={`${altSearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'altClick', 'altUrl': this.getAttribute('href')});"><svg width="48" height="20.16" viewBox="0 0 48 20" fill="none"><path d="M14.2761 19.9996H18.5308L11.6934 0.0712891H7.76953L14.2761 19.9996Z" fill="#ffffff"></path><path d="M6.17778 19.9986H6.14536L3.19643 11.2305L0 19.9988L6.17768 19.9989L6.17778 19.9986Z" fill="#ffffff"></path><path d="M24.7842 0H20.6759V19.9661H34.3427V16.5426H24.7842V0Z" fill="#ffffff"></path><path d="M41.6644 3.42355H47.4981V0H31.5033V3.42355H37.5561V19.9661H41.6644V3.42355Z" fill="#ffffff"></path></svg></a>
                </div>
            </div>
            <div class="text-end my-0"><small class="text-body-tertiary">Prices last changed: {timeAgo(calculatedAt)}</small></div>
            </div>
        </div>
        </div>
        </div>
    </div>

<script is:inline>

    async function copyImage(img) {
        try {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            canvas.width = img.naturalWidth;
            canvas.height = img.naturalHeight;
            ctx.drawImage(img, 0, 0);

            const blob = await new Promise((resolve, reject) => {
                canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png');
            });
            await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
            showCopyToast('📋 Image copied!', '#198754');
        } catch (err) {
            console.error('Failed:', err);
            showCopyToast('❌ Copy failed', '#dc3545');
        }
    }

    function showCopyToast(message, color) {
        const toast = document.createElement('div');
        toast.textContent = message;
        toast.style.cssText = `
            position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
            background: ${color}; color: white; padding: 10px 20px;
            border-radius: 8px; font-size: 14px; z-index: 9999;
            opacity: 0; transition: opacity 0.2s ease;
            pointer-events: none;
        `;
        document.body.appendChild(toast);
        requestAnimationFrame(() => toast.style.opacity = '1');
        setTimeout(() => {
            toast.style.opacity = '0';
            toast.addEventListener('transitionend', () => toast.remove());
        }, 2000);
    }

</script>