<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loopedHYPE — APY Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<style>
  :root {
    --lime:    #C3ED2E;
    --sage:    #8BA6A3;
    --dark:    #09090B;
    --light:   #ffffff;
    --dim:     #1C1C1F;
    --dimmer:  #141416;
    --muted:   #52525B;
    --border:  #27272A;
    --lime-05: rgba(195,237,46,0.05);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--dark);
    color: var(--light);
    font-family: 'Instrument Sans', sans-serif;
    letter-spacing: -0.02em;
    min-height: 100vh;
    padding: 48px 32px 64px;
    -webkit-font-smoothing: antialiased;
  }
  .logo { height: 32px; width: auto; display: block; margin-bottom: 10px; }
  .caslon {
    font-family: 'Big Caslon', 'Didot', 'Book Antiqua', Georgia, serif;
    font-style: italic;
    font-weight: normal;
    letter-spacing: -0.03em;
  }
  .dashboard { max-width: 960px; margin: 0 auto; }

  /* HEADER */
  header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 52px;
    gap: 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 28px;
  }
  .wordmark-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); margin-bottom: 4px; }
  .wordmark-title { font-size: 36px; line-height: 1; color: var(--light); }
  .wordmark-title em { color: var(--lime); }
  .header-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .live-dot { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
  .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(195,237,46,0.6); animation: ripple 2s infinite; }
  @keyframes ripple { 0%{box-shadow:0 0 0 0 rgba(195,237,46,.5)} 70%{box-shadow:0 0 0 6px rgba(195,237,46,0)} 100%{box-shadow:0 0 0 0 rgba(195,237,46,0)} }
  .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
  .lhype-brand { display: flex; align-items: center; gap: 12px; }
  .lhype-icon { width: 40px; height: 40px; flex-shrink: 0; }
  .lhype-icon svg { width: 40px; height: 40px; display: block; }
  .lhype-text { display: flex; flex-direction: column; gap: 2px; text-align: right; }
  .lhype-name { font-family: 'Big Caslon', 'Didot', 'Book Antiqua', Georgia, serif; font-style: italic; font-size: 20px; line-height: 1; color: var(--light); letter-spacing: -0.03em; }
  .lhype-sub { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); }
  .sr-link { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: color .15s, border-color .15s; }
  .sr-link:hover { color: var(--sage); border-color: var(--sage); }

  /* HERO */
  .hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    background: var(--dimmer);
    border: 1px solid var(--border);
    border-top: 2px solid var(--lime);
    border-radius: 4px;
    padding: 40px 44px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
  }
  .hero::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(195,237,46,0.05) 0%, transparent 70%); pointer-events: none; }
  .hero-label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .hero-apy { font-size: 88px; font-weight: normal; font-family: 'Big Caslon', 'Didot', 'Book Antiqua', Georgia, serif; font-style: italic; letter-spacing: -0.04em; line-height: 0.9; color: var(--lime); transition: opacity .3s; }
  .hero-apy.loading { opacity: 0.12; }
  .hero-sub { margin-top: 14px; font-size: 13px; color: var(--muted); letter-spacing: -0.01em; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 240px; }
  .stat { background: var(--dim); border: 1px solid var(--border); border-radius: 3px; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
  .stat-label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .stat-value { font-size: 16px; font-weight: normal; font-family: 'Big Caslon', 'Didot', 'Book Antiqua', Georgia, serif; font-style: italic; letter-spacing: -0.02em; color: var(--light); transition: opacity .3s; }
  .stat-value.loading { opacity: 0.12; }

  /* TIMEFRAME ROW */
  .tf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
  .tf-card { background: var(--dimmer); border: 1px solid var(--border); border-radius: 3px; padding: 18px 20px; cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; gap: 6px; }
  .tf-card:hover { border-color: var(--sage); }
  .tf-card.active { border-color: var(--lime); background: var(--lime-05); }
  .tf-label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .tf-value { font-size: 24px; font-weight: normal; font-family: 'Big Caslon', 'Didot', 'Book Antiqua', Georgia, serif; font-style: italic; letter-spacing: -0.03em; color: var(--light); transition: opacity .3s; }
  .tf-value.loading { opacity: 0.12; }
  .tf-card.active .tf-value { color: var(--lime); }

  /* CHART */
  .chart-card { background: var(--dimmer); border: 1px solid var(--border); border-radius: 4px; padding: 32px 36px; }
  .chart-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; gap: 12px; flex-wrap: wrap; }
  .chart-title { font-size: 15px; font-weight: 600; color: var(--light); letter-spacing: -0.02em; }
  .chart-subtitle { font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: -0.01em; }
  .chart-wrap { position: relative; height: 280px; }
  .chart-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; }
  .spinner { width: 20px; height: 20px; border: 1.5px solid var(--border); border-top-color: var(--lime); border-radius: 50%; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .overlay-text { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; }
  .overlay-text.error { color: #EF4444; }

  /* FOOTER */
  footer { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .footer-text { font-size: 11px; color: var(--muted); letter-spacing: -0.01em; }

  .cta-btn {
    display: inline-block;
    background: var(--lime);
    color: var(--dark);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  .cta-btn:hover { opacity: 0.85; }

  @media (max-width: 640px) {
    body { padding: 28px 20px 48px; }
    .hero { grid-template-columns: 1fr; padding: 28px; }
    .hero-apy { font-size: 60px; }
    .tf-row { grid-template-columns: repeat(2, 1fr); }
    .hero-stats { min-width: unset; }
  }
</style>
</head>
<body>
<div class="dashboard">

  <header>
    <div class="wordmark">
      <img src="http://framerusercontent.com/assets/UQLhhC7VnwiQhbhD87UdAhands.svg" alt="Looping Collective" class="logo" />
      <div class="wordmark-eyebrow">APY Dashboard</div>
    </div>
    <div class="header-right">
      <div class="lhype-brand">
        <div class="lhype-icon"><svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_885_695)">
<circle cx="256" cy="256" r="256" fill="#072320"/>
<path d="M465.886 256.075C465.886 304.531 421.971 343.907 368.047 343.907C324.295 343.907 273.707 289.654 256.043 268.927V243.224C273.707 222.497 324.295 168.244 368.047 168.244C421.971 168.244 465.886 207.675 465.886 256.075Z" fill="url(#paint0_linear_885_695)"/>
<path d="M256.043 243.224V268.927C238.378 289.654 187.791 343.907 144.094 343.907C90.1153 343.907 46.1997 304.531 46.1997 256.075C46.1997 207.621 90.1153 168.244 144.094 168.244C187.791 168.244 238.378 222.497 256.043 243.224Z" fill="url(#paint1_linear_885_695)"/>
<path d="M46.2002 255.912C42.3719 203.848 94.108 163.595 144.039 166.112C170.235 168.135 191.674 183.284 211.362 198.597C249.261 228.239 274.091 270.568 310.896 300.975C327.687 315.085 347.265 329.578 368.977 332.586C414.04 336.851 462.604 304.038 465.777 255.912C470.917 321.758 386.204 368.408 331.295 334.117C301.49 317.601 277.153 293.702 255.114 268.162C238.816 247.489 220.933 227.801 201.081 210.848C184.291 196.738 164.712 182.245 142.946 179.237C97.8816 174.971 49.3175 207.785 46.1455 255.912H46.2002Z" fill="#80FCE0"/>
</g>
<defs>
<linearGradient id="paint0_linear_885_695" x1="425.743" y1="187.112" x2="326.428" y2="305.406" gradientUnits="userSpaceOnUse">
<stop stop-color="#80FCE0"/>
<stop offset="1" stop-color="#072320"/>
</linearGradient>
<linearGradient id="paint1_linear_885_695" x1="105.373" y1="331.055" x2="179.532" y2="202.589" gradientUnits="userSpaceOnUse">
<stop stop-color="#80FCE0"/>
<stop offset="1" stop-color="#072320"/>
</linearGradient>
<clipPath id="clip0_885_695">
<rect width="512" height="512" fill="white"/>
</clipPath>
</defs>
</svg></div>
        <div class="lhype-text">
          <div class="lhype-name">loopedHYPE</div>
          <div class="lhype-sub">Performance Metrics</div>
        </div>
      </div>
      <div class="header-meta">
        <div class="live-dot"><div class="pulse"></div><span id="last-updated">Fetching…</span></div>
        <a class="sr-link" href="https://stakingrewards.com/asset/looped-hype" target="_blank">stakingrewards.com ↗</a>
      </div>
    </div>
  </header>

  <div class="hero">
    <div>
      <div class="hero-label">Current APY</div>
      <div class="hero-apy loading" id="current-apy">—</div>
      <div class="hero-sub" id="apy-sub">loopedHYPE (LHYPE)</div>
    </div>
    <div class="hero-stats">
      <div class="stat"><div class="stat-label">AUM</div><div class="stat-value loading" id="stat-aum">—</div></div>
      <div class="stat"><div class="stat-label">Exchange Ratio</div><div class="stat-value loading" id="stat-ratio">—</div></div>
      <div class="stat"><div class="stat-label">Fee Revenue</div><div class="stat-value loading" id="stat-fee">—</div></div>
      <div class="stat"><div class="stat-label">Daily Volume</div><div class="stat-value loading" id="stat-vol">—</div></div>
    </div>
  </div>

  <div class="tf-row">
    <div class="tf-card active" data-days="7"><div class="tf-label">7D Avg APY</div><div class="tf-value loading" id="tf-7">—</div></div>
    <div class="tf-card" data-days="30"><div class="tf-label">30D Avg APY</div><div class="tf-value loading" id="tf-30">—</div></div>
    <div class="tf-card" data-days="90"><div class="tf-label">90D Avg APY</div><div class="tf-value loading" id="tf-90">—</div></div>
  </div>

  <div class="chart-card">
    <div class="chart-header">
      <div>
        <div class="chart-title">Historical APY</div>
        <div class="chart-subtitle" id="chart-subtitle">Loading data…</div>
      </div>
    </div>
    <div class="chart-wrap">
      <div class="chart-overlay" id="chart-overlay"><div class="spinner"></div><div class="overlay-text" id="overlay-text">Loading</div></div>
      <canvas id="apy-chart" style="display:none"></canvas>
    </div>
  </div>

  <footer>
    <span class="footer-text">LHYPE · loopedHYPE · Staking Rewards API</span>
    <a href="https://app.loopingcollective.org/product/lhype" target="_blank" class="cta-btn">Get LHYPE ↗</a>
  </footer>

</div>
<script>
const PROXY = "https://vxwlmyglhzytsnwflrqw.supabase.co/functions/v1/sr-proxy";
const ASSET_ID = "67b4b605b2453160eb609ba2";
let chart = null;
let activeDays = 7;
const cache = {};

async function srQuery(q) {
  const res = await fetch(PROXY, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: q }) });
  const json = await res.json();
  if (json.errors?.length) throw new Error(json.errors.map(e => e.message).join('; '));
  return json.data;
}

function fmtUSD(n) {
  if (n == null) return '—';
  if (n >= 1e6) return '$' + (n/1e6).toFixed(2) + 'M';
  if (n >= 1e3) return '$' + (n/1e3).toFixed(1) + 'K';
  return '$' + n.toFixed(0);
}

function avg(arr) { return arr.reduce((a,b) => a+b, 0) / arr.length; }

async function fetchWindow(fromISO, toISO) {
  const data = await srQuery(`{
    metrics(
      where: {
        metricKeys: ["reward_rate"],
        asset: { id: "${ASSETID}" },
        createdAt_gt: "${fromISO}",
        createdAt_lt: "${toISO}"
      },
      limit: 500
    ) { defaultValue createdAt }
  }`);
  return (data?.metrics || []).filter(m => m.createdAt && m.defaultValue != null);
}

async function fetchHistory(days) {
  if (cache[days]) return cache[days];
  const now = Date.now();
  const windowMs = 7 * 86400 * 1000;
  const numWindows = Math.ceil(days / 7);
  const allPoints = [];
  await Promise.all(Array.from({ length: numWindows }, (_, i) => {
    const windowEnd = now - i * windowMs;
    const windowStart = Math.max(windowEnd - windowMs, now - days * 86400 * 1000);
    return fetchWindow(new Date(windowStart).toISOString(), new Date(windowEnd).toISOString())
      .then(pts => allPoints.push(...pts));
  }));
  allPoints.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
  const seen = new Set();
  const deduped = allPoints.filter(p => {
    if (seen.has(p.createdAt)) return false;
    seen.add(p.createdAt); return true;
  });
  cache[days] = deduped;
  return deduped;
}

async function loadCurrentStats() {
  const data = await srQuery(`{{
    assets(where: { slugs: ["looped-hype"] }, limit: 1) {
      metrics(where: { metricKeys: [
        "reward_rate", "assets_under_management",
        "exchange_ratio", "fee_revenue", "daily_trading_volume"
      ] }, limit: 10) { metricKey defaultValue }
    }
  }}`);
  const metrics = data?.assets?.[0]?.metrics || [];
  const get = k => metrics.find(m => m.metricKey === k)?.defaultValue;
  const apy = get('reward_rate');
  const apyEl = document.getElementById('current-apy');
  apyEl.textContent = apy != null ? apy.toFixed(2) + '%' : 'N/A';
  apyEl.classList.remove('loading');
  const setS = (id, v) => { const el = document.getElementById(id); el.textContent = v; el.classList.remove('loading'); };
  setS('stat-aum', fmtUSD(get('assets_under_management')));
  setS('stat-ratio', get('exchange_ratio') != null ? get('exchange_ratio').toFixed(6) : '—');
  setS('stat-fee', fmtUSD(get('fee_revenue')));
  setS('stat-vol', fmtUSD(get('daily_trading_volume')));
  document.getElementById('last-updated').textContent =
    'Live · ' + new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}

function downsampleDaily(points) {
  const byDay = {};
  for (const p of points) {
    const day = p.createdAt.substring(0, 10);
    if (!byDay[day]) byDay[day] = [];
    byDay[day].push(p.defaultValue);
  }
  return Object.entries(byDay)
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([day, vals]) => ({
      createdAt: day,
      defaultValue: vals.reduce((a, b) => a + b, 0) / vals.length
    }));
}

function renderChart(points, days) {
  const canvas = document.getElementById('apy-chart');
  document.getElementById('chart-overlay').style.display = 'none';
  canvas.style.display = 'block';
  const displayPoints = days >= 7 ? downsampleDaily(points) : points;
  const labelMap = { 1: 'Last 24 hours', 7: 'Last 7 days', 30: 'Last 30 days', 90: 'Last 90 days' };
  document.getElementById('chart-subtitle').textContent =
    `${displayPoints.length} data points · ${labelMap[days]}` + (days >= 7 ? ' · daily avg' : ' · hourly');
  const labels = displayPoints.map(p => {
    const d = new Date(p.createdAt);
    if (days <= 1) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
  });
  const values = displayPoints.map(p => +p.defaultValue.toFixed(4));
  if (chart) chart.destroy();
  const ctx = canvas.getContext('2d');
  const grad = ctx.createLinearGradient(0, 0, 0, 280);
  grad.addColorStop(0, 'rgba(195,237,46,0.12)');
  grad.addColorStop(1, 'rgba(195,237,46,0.00)');
  chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels,
      datasets: [{
        data: values,
        borderColor: '#C3ED2E', borderWidth: 1.5,
        backgroundColor: grad, fill: true, tension: 0.5,
        pointRadius: days <= 1 ? 3 : 4,
        pointHoverRadius: 6,
        pointBackgroundColor: '#C3ED2E',
        pointBorderColor: '#09090B', pointBorderWidth: 2,
      }]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      animation: { duration: 400, easing: 'easeInOutQuart' },
      interaction: { mode: 'index', intersect: false },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#1C1C1F', borderColor: '#27272A', borderWidth: 1,
          titleColor: '#71717A', bodyColor: '#C3ED2E',
          titleFont: { family: 'Instrument Sans', size: 11, weight: '500' },
          bodyFont: { family: 'Instrument Sans', size: 14, weight: '600' },
          padding: 12, cornerRadius: 3,
          callbacks: { label: item => ' ' + parseFloat(item.raw).toFixed(4) + '%' }
        }
      },
      scales: {
        x: {
          grid: { color: 'rgba(39,39,42,0.8)', drawTicks: false },
          ticks: { color: '#52525B', font: { family: 'Instrument Sans', size: 11 }, maxTicksLimit: 8, maxRotation: 0, padding: 8 },
          border: { display: false }
        },
        y: {
          grid: { color: 'rgba(39,39,42,0.8)', drawTicks: false },
          ticks: { color: '#52525B', font: { family: 'Instrument Sans', size: 11 }, callback: v => v.toFixed(2) + '%', padding: 8 },
          border: { display: false }
        }
      }
    }
  });
}

function showChartMsg(msg, isError) {
  document.getElementById('chart-overlay').style.display = 'flex';
  document.getElementById('apy-chart').style.display = 'none';
  document.querySelector('.spinner').style.display = isError ? 'none' : 'block';
  const t = document.getElementById('overlay-text');
  t.textContent = msg;
  t.className = 'overlay-text' + (isError ? ' error' : '');
}

async function switchTf(days) {
  activeDays = days;
  document.querySelectorAll('.tf-card').forEach(c => c.classList.toggle('active', +c.dataset.days === days));
  showChartMsg('Loading…', false);
  try {
    const pts = await fetchHistory(days);
    if (pts.length < 2) { showChartMsg('Insufficient data for ' + days + 'D view', true); return; }
    const avgApy = avg(pts.map(p => p.defaultValue));
    const tfEl = document.getElementById('tf-' + days);
    tfEl.textContent = avgApy.toFixed(2) + '%';
    tfEl.classList.remove('loading');
    renderChart(pts, days);
  } catch(e) {
    showChartMsg(e.message, true);
  }
}

async function loadAllTfAvgs() {
  await Promise.all([7, 30, 90].map(async days => {
    try {
      const pts = await fetchHistory(days);
      if (!pts.length) return;
      const avgApy = avg(pts.map(p => p.defaultValue));
      const el = document.getElementById('tf-' + days);
      el.textContent = avgApy.toFixed(2) + '%';
      el.classList.remove('loading');
    } catch(e) {
      const el = document.getElementById('tf-' + days);
      el.textContent = 'N/A'; el.classList.remove('loading');
    }
  }));
}

document.querySelectorAll('.tf-card').forEach(card => {
  card.addEventListener('click', () => switchTf(+card.dataset.days));
});

async function init() {
  try { await loadCurrentStats(); } catch(e) {
    document.getElementById('current-apy').textContent = 'Error';
    document.getElementById('current-apy').classList.remove('loading');
  }
  await switchTf(7);
  loadAllTfAvgs();
}

init();
</script>
</body>
</html>