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.ts';
import { privateDecrypt } from "node:crypto";

import latestSales from '../../sampleData/latestsales.json';
import chartdata from '../../sampleData/chartdata.json';

const priceData = chartdata;

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,
    }
});

const nearMint = card?.prices.find(price => price.condition === "Near Mint") || null;
const calculatedAt = new Date(nearMint?.calculatedAt || 0);

function timeAgo(date: any) {
  if (date==0) return "never";

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

  const intervals = {
    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";
}

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;

    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.75) return "High";
    if (position > 0.46) 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];
};

---
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
  <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
    <div class="modal-content">
      <div class="modal-header border-0">
        <div class="container-fluid">
        <span class="h4 card-title pe-2">{card?.productName}</span><span class="text-secondary ps-2 border-start">{card?.number}</span><span class="text-secondary ps-2">{card?.variant}</span>
        </div>
        <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
      </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">
                    <p class="text-secondary">{card?.set?.setName}</p>
                    <div class="position-relative d-inline-block"><img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'"><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?.Artist}</div>
                    </div>
                    </div>
                <div class="col-sm-12 col-md-7">
                    <ul class="nav nav-tabs nav-sm-fill border-0" 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" 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="row g-2 mt-2">
                                  <div class="d-flex flex-column mt-2 col-3">
                                      <div class="alert alert-secondary rounded p-2 mb-2">
                                          <h6>Market Price</h6>
                                          <p>${price.marketPrice}</p>
                                      </div>
                                      <div class="alert alert-secondary rounded p-2 mb-2">
                                          <h6>Lowest Price</h6>
                                          <p>${price.lowestPrice}</p>
                                      </div>
                                      <div class="alert alert-secondary rounded p-2 mb-2">
                                          <h6>Highest Price</h6>
                                          <p>${price.highestPrice}</p>
                                      </div>
                                      <div class={`alert alert-secondary rounded p-2 mb-2 ${attributes?.volatilityClass}`}>
                                          <h6>Volatility</h6>
                                          <p>{attributes?.volatility}</p>
                                      </div>
                                      <div class="alert alert-secondary rounded p-2 mb-2 flex-fill">
                                          <h6>Latest Sales</h6>
                                      </div>
                                      <div class="alert alert-secondary rounded mb-1 py-2 ">
                                          <p class="h6">Placeholder for graph</p>
                                      </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 class="d-flex flex-column mt-2 col-3">
                                    <div class="alert alert-secondary rounded p-2 mb-2">
                                        <h6>Market Price</h6>
                                        <p></p>
                                    </div>
                                    <div class="alert alert-secondary rounded p-2 mb-2">
                                        <h6>Lowest Price</h6>
                                        <p></p>
                                    </div>
                                    <div class="alert alert-secondary rounded p-2 mb-2">
                                        <h6>Highest Price</h6>
                                        <p></p>
                                    </div>
                                    <div class="alert alert-secondary rounded p-2 mb-2">
                                        <h6>Volatility</h6>
                                        <p></p>
                                    </div>
                                    <div class="alert alert-secondary rounded p-2 mb-2 flex-fill">
                                        <h6>Latest Sales</h6>
                                        <p></p>
                                    </div>
                                </div>
                            </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"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
                <a class="btn btn-secondary mb-2 w-100" href={`https://www.ebay.com/sch/i.html?_nkw=${card?.productUrlName}+${card?.set?.setUrlName}+${card?.number}&LH_Sold=1&Graded=No&_dcat=183454${card?.productId}`} target="_blank"><span set:html={ebay} /></a>
                </div>
            </div>
            <div class="text-end my-0"><small class="text-body-secondary">Prices last updated: {timeAgo(calculatedAt)}</small></div>
            </div>
        </div>
        </div>
        </div>
    </div>
  </div>
</div>