<?php
// Simple live dashboard for traffic tracking.
// Visit: https://yourdomain.com/tracker/dashboard.php
?><!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ZS Logistics — Live Traffic Tracker</title>
  <style>
    :root{--bg:#041a17;--card:#072a25;--text:#e9f3f1;--muted:rgba(233,243,241,.7);--gold:#f2a900;--line:rgba(255,255,255,.12)}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(1200px 600px at 20% 0%, rgba(22,198,165,.15), transparent 60%), var(--bg);color:var(--text);}
    .wrap{max-width:1100px;margin:0 auto;padding:26px 16px 40px}
    h1{margin:0 0 6px;font-size:22px;letter-spacing:.2px}
    p{margin:0 0 18px;color:var(--muted)}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
    @media (max-width:900px){.grid{grid-template-columns:1fr}}
    .card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
    .k{font-size:12px;color:var(--muted);letter-spacing:.25px;text-transform:uppercase}
    .v{font-size:34px;font-weight:800;margin-top:4px;line-height:1}
    .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(242,169,0,.35);background:rgba(242,169,0,.10);color:rgba(255,255,255,.92);font-weight:700;font-size:12px}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
    @media (max-width:900px){.row{grid-template-columns:1fr}}
    table{width:100%;border-collapse:collapse}
    th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
    th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.25px}
    .num{text-align:right;font-weight:800}
    .foot{margin-top:14px;color:var(--muted);font-size:12px}
    .live{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
    .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(242,169,0,.0);animation:pulse 1.8s ease-in-out infinite}
    @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,169,0,0)}50%{box-shadow:0 0 0 10px rgba(242,169,0,.12)}}
    code{background:rgba(0,0,0,.25);padding:2px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.12)}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="live">
      <div>
        <h1>Live Traffic Tracker</h1>
        <p>Updates every 5 seconds. Counts are based on page views recorded by <code>/tracker/collect.php</code>.</p>
      </div>
      <span class="badge"><span class="dot" aria-hidden="true"></span><span id="lastUpdate">Connecting…</span></span>
    </div>

    <div class="grid">
      <div class="card"><div class="k">Last 5 minutes</div><div class="v" id="m5">—</div></div>
      <div class="card"><div class="k">Today</div><div class="v" id="today">—</div></div>
      <div class="card"><div class="k">All-time</div><div class="v" id="total">—</div></div>
    </div>

    <div class="row">
      <div class="card">
        <div class="k" style="margin-bottom:8px">Top pages (last 5 minutes)</div>
        <table>
          <thead><tr><th>Page</th><th class="num">Views</th></tr></thead>
          <tbody id="top5m"></tbody>
        </table>
      </div>
      <div class="card">
        <div class="k" style="margin-bottom:8px">Top pages (today)</div>
        <table>
          <thead><tr><th>Page</th><th class="num">Views</th></tr></thead>
          <tbody id="topToday"></tbody>
        </table>
      </div>
    </div>

    <div class="foot">
      Tip: If stats stay at zero, make sure <code>tracker/data</code> is writable on your hosting (cPanel: File Manager → Permissions).
    </div>
  </div>

  <script>
    const fmtTime = (ts) => {
      const d = new Date(ts*1000);
      return d.toLocaleString();
    };

    function renderRows(el, obj){
      const entries = Object.entries(obj || {});
      if(!entries.length){
        el.innerHTML = '<tr><td colspan="2" style="color:rgba(233,243,241,.7)">No data yet</td></tr>';
        return;
      }
      el.innerHTML = entries.map(([p,n])=>
        `<tr><td>${String(p).replace(/</g,'&lt;')}</td><td class="num">${n}</td></tr>`
      ).join('');
    }

    async function tick(){
      try{
        const res = await fetch('stats.php', {cache:'no-store'});
        const data = await res.json();
        document.getElementById('m5').textContent = data.last5m ?? 0;
        document.getElementById('today').textContent = data.today ?? 0;
        document.getElementById('total').textContent = data.total ?? 0;
        renderRows(document.getElementById('top5m'), data.top_last5m);
        renderRows(document.getElementById('topToday'), data.top_today);
        document.getElementById('lastUpdate').textContent = 'Updated: ' + fmtTime(data.now);
      }catch(e){
        document.getElementById('lastUpdate').textContent = 'Unable to load stats';
      }
    }
    tick();
    setInterval(tick, 5000);
  </script>
</body>
</html>
