<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>Ross Auto Portal | Live Status & Access</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: linear-gradient(135deg, #0a0f1c 0%, #101826 100%);
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      min-height: 100vh;
      padding: 2rem 1.5rem;
      color: #edf2f7;
    }

    .portal-container {
      max-width: 1280px;
      margin: 0 auto;
    }

    .portal-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .portal-header h1 {
      font-size: 2.6rem;
      font-weight: 800;
      background: linear-gradient(120deg, #e2e8f0, #94a3b8);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      letter-spacing: -0.02em;
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .portal-header h1::before {
      content: "🚗";
      font-size: 2.4rem;
      background: none;
      -webkit-background-clip: unset;
      color: #cbd5e1;
    }

    .tagline {
      color: #7e8b9f;
      margin-top: 0.6rem;
      font-weight: 500;
      border-top: 1px solid #1e2a3e;
      display: inline-block;
      padding: 0.6rem 1.5rem;
      border-radius: 60px;
      background: rgba(15, 25, 45, 0.5);
      backdrop-filter: blur(4px);
      font-size: 0.9rem;
    }

    .sites-portal {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
      margin-bottom: 2.5rem;
    }

    .ross-card {
      background: rgba(18, 28, 45, 0.8);
      backdrop-filter: blur(4px);
      border-radius: 2rem;
      width: 100%;
      max-width: 540px;
      transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      border: 1px solid rgba(66, 153, 225, 0.2);
      box-shadow: 0 25px 35px -12px rgba(0, 0, 0, 0.5);
      overflow: hidden;
    }

    .ross-card:hover {
      transform: translateY(-6px);
      border-color: rgba(100, 160, 240, 0.5);
      box-shadow: 0 30px 45px -14px black;
    }

    .card-top {
      padding: 1.5rem 1.8rem 1rem 1.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .site-identity {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .flag-icon {
      font-size: 2.5rem;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    }

    .site-name {
      font-weight: 700;
      font-size: 1.4rem;
      letter-spacing: -0.2px;
      background: linear-gradient(135deg, #ffffff, #cbd5e6);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    .status-pill {
      background: #0f172ad9;
      padding: 0.4rem 1rem;
      border-radius: 60px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 0.8rem;
      backdrop-filter: blur(4px);
    }

    .led {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      transition: all 0.2s;
    }

    .led.up {
      background: #4ade80;
      box-shadow: 0 0 8px #4ade80;
    }

    .led.down {
      background: #f87171;
      box-shadow: 0 0 6px #f87171;
    }

    .led.checking {
      background: #facc15;
      box-shadow: 0 0 8px #facc15;
      animation: pulse 1.2s infinite;
    }

    @keyframes pulse {
      0% { opacity: 0.5; transform: scale(0.9);}
      100% { opacity: 1; transform: scale(1.1);}
    }

    .url-row {
      padding: 0.8rem 1.8rem;
      font-size: 0.8rem;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .site-url {
      font-family: 'SF Mono', 'Fira Code', monospace;
      color: #9aaec9;
      text-decoration: none;
      background: #0b0f1a;
      padding: 0.25rem 0.9rem;
      border-radius: 30px;
      word-break: break-all;
      transition: 0.2s;
    }

    .site-url:hover {
      background: #1a253c;
      color: #b9e67c;
    }

    .info-footer {
      padding: 1rem 1.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      background: rgba(0, 0, 0, 0.25);
    }

    .status-meta {
      display: flex;
      gap: 14px;
      font-size: 0.75rem;
      background: #050a14a0;
      padding: 0.3rem 1rem;
      border-radius: 40px;
    }

    .action-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btn-open {
      background: linear-gradient(105deg, #2563eb, #1e40af);
      border: none;
      padding: 0.55rem 1.5rem;
      border-radius: 50px;
      font-weight: 600;
      font-size: 0.85rem;
      color: white;
      cursor: pointer;
      transition: 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .btn-open:hover {
      background: linear-gradient(105deg, #3b82f6, #2563eb);
      transform: scale(0.96);
    }

    .btn-refresh {
      background: #2d374e;
      border: none;
      padding: 0.55rem 1.3rem;
      border-radius: 50px;
      font-weight: 500;
      font-size: 0.8rem;
      color: #e2e8f0;
      cursor: pointer;
      transition: 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-refresh:hover {
      background: #3b4a6b;
    }

    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .global-bar {
      display: flex;
      justify-content: center;
      margin: 1.5rem 0 1rem;
    }

    .btn-global {
      background: #1f2a44e6;
      backdrop-filter: blur(8px);
      border: 1px solid #4b6b9f;
      padding: 0.8rem 2rem;
      font-weight: 600;
      font-size: 0.9rem;
      border-radius: 60px;
      gap: 10px;
    }

    .spinner {
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255,255,240,0.3);
      border-top: 2px solid #facc15;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .footer {
      text-align: center;
      margin-top: 3rem;
      font-size: 0.7rem;
      color: #4c5b7a;
      border-top: 1px solid #1f2a3e;
      padding-top: 2rem;
    }

    @media (max-width: 640px) {
      .portal-header h1 { font-size: 1.8rem; }
      .site-name { font-size: 1.2rem; }
      .btn-open, .btn-refresh { padding: 0.45rem 1rem; font-size: 0.75rem; }
    }
  </style>
</head>
<body>
<div class="portal-container">
  <div class="portal-header">
    <h1>Ross Auto Portal</h1>
    <div class="tagline">select region · live gateway status</div>
  </div>

  <div class="sites-portal" id="rossPortalGrid"></div>

  <div class="global-bar">
    <button class="btn-refresh btn-global" id="globalRefreshRossBtn">🔄 Refresh all statuses</button>
  </div>
  <div class="footer">
    ⚡ Green = reachable · Red = unreachable · Click "Open Ross Auto" to access the regional portal
  </div>
</div>

<script>
  // ---------- SITES DEFINITION (Ross Auto) ----------
  const sites = [
    {
      id: "ross_ca",
      name: "Bid Canada Ross Auto",
      flag: "🇨🇦",
      url: "https://bidca.rossauto.ca",
      displayUrl: "bidca.rossauto.ca",
      region: "Canada"
    },
    {
      id: "ross_bg",
      name: "Bid Bulgaria Ross Auto",
      flag: "🇧🇬",
      url: "https://bidbg.rossauto.ca",
      displayUrl: "bidbg.rossauto.ca",
      region: "Bulgaria"
    }
  ];

  // state: each site: isUp (bool|null), lastChecked, checking, errorMessage
  let siteState = {
    ross_ca: { isUp: null, lastChecked: null, checking: false, errorMessage: null },
    ross_bg: { isUp: null, lastChecked: null, checking: false, errorMessage: null }
  };

  let cardElements = {};

  // ---------- New method: direct fetch with timeout (no proxy, no CORS restrictions) ----------
  async function checkSiteAvailability(siteUrl, timeoutMs = 8000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
    try {
      // Use 'no-cors' mode to avoid CORS preflight; we can't read response but can detect network errors.
      // This fetch will succeed if the server is reachable (even if it returns 404, 500, etc.).
      // We treat any successful fetch (no network error) as "up".
      const response = await fetch(siteUrl, {
        method: 'HEAD',  // lightweight, but some servers might not support HEAD; fallback to GET if needed
        mode: 'no-cors',
        cache: 'no-cache',
        signal: controller.signal
      });
      clearTimeout(timeoutId);
      // Because mode is 'no-cors', response.status is always 0 and we can't see real HTTP code.
      // However, if fetch resolves, the server responded (no network error).
      return { isUp: true, error: null };
    } catch (err) {
      clearTimeout(timeoutId);
      // If fetch throws, it's a network error (CORS not an issue with no-cors, but could be DNS, unreachable, timeout)
      let errorMsg = err.name === 'AbortError' ? 'timeout' : 'unreachable';
      return { isUp: false, error: errorMsg };
    }
  }

  // Fallback: if HEAD fails (some servers reject HEAD), try GET with no-cors
  async function robustCheck(siteUrl, timeoutMs = 8000) {
    // Try HEAD first
    let result = await checkSiteAvailability(siteUrl, timeoutMs);
    if (!result.isUp && result.error === 'unreachable') {
      // Maybe HEAD is not allowed, retry with GET (still no-cors)
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
      try {
        await fetch(siteUrl, {
          method: 'GET',
          mode: 'no-cors',
          cache: 'no-cache',
          signal: controller.signal
        });
        clearTimeout(timeoutId);
        return { isUp: true, error: null };
      } catch (err) {
        clearTimeout(timeoutId);
        return { isUp: false, error: err.name === 'AbortError' ? 'timeout' : 'unreachable' };
      }
    }
    return result;
  }

  // update card UI based on state
  function updateCardUI(siteId) {
    const site = sites.find(s => s.id === siteId);
    if (!site) return;
    const state = siteState[siteId];
    if (!state) return;
    const card = cardElements[siteId];
    if (!card) return;

    const isUp = state.isUp;
    const checking = state.checking;
    const lastChecked = state.lastChecked;

    // find elements
    const ledSpan = card.querySelector('.led');
    const statusTextSpan = card.querySelector('.status-text');
    const codeSpan = card.querySelector('.status-code-num');
    const lastSpan = card.querySelector('.last-time-value');
    const refreshBtn = card.querySelector('.btn-refresh-single');

    let ledClass = "led";
    let statusDisplay = "";

    if (checking) {
      ledClass += " checking";
      statusDisplay = "CHECKING";
    } else if (isUp === true) {
      ledClass += " up";
      statusDisplay = "ONLINE";
    } else if (isUp === false) {
      ledClass += " down";
      statusDisplay = "OFFLINE";
    } else {
      ledClass += " down";
      statusDisplay = "UNKNOWN";
    }

    if (ledSpan) ledSpan.className = ledClass;
    if (statusTextSpan) statusTextSpan.innerText = statusDisplay;

    let codeDisplay = "—";
    if (!checking) {
      if (isUp === true) codeDisplay = "reachable";
      else if (isUp === false) codeDisplay = "unreachable";
    }
    if (codeSpan) codeSpan.innerText = codeDisplay;

    let lastStr = "never";
    if (lastChecked) {
      const d = new Date(lastChecked);
      lastStr = d.toLocaleTimeString([], { hour: '2-digit', minute:'2-digit', second:'2-digit' });
    }
    if (lastSpan) lastSpan.innerText = lastStr;

    // disable refresh if checking
    if (refreshBtn) {
      if (checking) {
        refreshBtn.disabled = true;
        refreshBtn.innerHTML = `<span class="spinner"></span> checking`;
      } else {
        refreshBtn.disabled = false;
        refreshBtn.innerHTML = `🔄 Refresh`;
      }
    }
  }

  // perform check for a single site
  async function checkSingleRossSite(siteId) {
    const site = sites.find(s => s.id === siteId);
    if (!site) return;
    if (siteState[siteId].checking) return;

    // set checking state
    siteState[siteId].checking = true;
    siteState[siteId].isUp = null;
    siteState[siteId].errorMessage = null;
    updateCardUI(siteId);

    try {
      const result = await robustCheck(site.url, 7000);
      siteState[siteId].isUp = result.isUp;
      siteState[siteId].lastChecked = Date.now();
      siteState[siteId].errorMessage = result.error;
    } catch (err) {
      siteState[siteId].isUp = false;
      siteState[siteId].lastChecked = Date.now();
      siteState[siteId].errorMessage = 'exception';
    } finally {
      siteState[siteId].checking = false;
      updateCardUI(siteId);
    }
  }

  // refresh all sites
  async function refreshAllRossSites() {
    const globalBtn = document.getElementById('globalRefreshRossBtn');
    if (globalBtn) {
      globalBtn.disabled = true;
      globalBtn.innerHTML = `<span class="spinner"></span> refreshing portals ...`;
    }
    const promises = sites.map(site => checkSingleRossSite(site.id));
    await Promise.allSettled(promises);
    if (globalBtn) {
      globalBtn.disabled = false;
      globalBtn.innerHTML = `🔄 Refresh all statuses`;
    }
  }

  // open site in new tab (portal action)
  function openSite(url) {
    window.open(url, '_blank', 'noopener,noreferrer');
  }

  // build dynamic cards with flag, name, open button etc
  function buildRossPortal() {
    const grid = document.getElementById('rossPortalGrid');
    if (!grid) return;
    grid.innerHTML = '';

    sites.forEach(site => {
      const card = document.createElement('div');
      card.className = 'ross-card';
      card.setAttribute('data-id', site.id);

      card.innerHTML = `
        <div class="card-top">
          <div class="site-identity">
            <div class="flag-icon">${site.flag}</div>
            <div class="site-name">${escapeHtml(site.name)}</div>
          </div>
          <div class="status-pill">
            <span class="led down"></span>
            <span class="status-text">OFFLINE</span>
          </div>
        </div>
        <div class="url-row">
          <a href="${escapeHtml(site.url)}" target="_blank" rel="noopener" class="site-url">
            ${escapeHtml(site.displayUrl)}
          </a>
        </div>
        <div class="info-footer">
          <div class="status-meta">
            <span>📡 <span class="status-code-num">—</span></span>
            <span>🕒 last: <span class="last-time-value">never</span></span>
          </div>
          <div class="action-buttons">
            <button class="btn-open" data-url="${escapeHtml(site.url)}">🚪 Open Ross Auto</button>
            <button class="btn-refresh btn-refresh-single" data-id="${site.id}">🔄 Refresh</button>
          </div>
        </div>
      `;
      grid.appendChild(card);
      cardElements[site.id] = card;
    });

    // attach open buttons & refresh listeners
    document.querySelectorAll('.btn-open').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        const url = btn.getAttribute('data-url');
        if (url) openSite(url);
      });
    });

    document.querySelectorAll('.btn-refresh-single').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        const siteId = btn.getAttribute('data-id');
        if (siteId && !siteState[siteId]?.checking) {
          checkSingleRossSite(siteId);
        }
      });
    });

    // attach global refresh (after rebuild ensure listener)
    const globalBtn = document.getElementById('globalRefreshRossBtn');
    if (globalBtn) {
      const newGlobal = globalBtn.cloneNode(true);
      globalBtn.parentNode.replaceChild(newGlobal, globalBtn);
      newGlobal.addEventListener('click', () => refreshAllRossSites());
    }
  }

  function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/[&<>]/g, function(m) {
      if (m === '&') return '&amp;';
      if (m === '<') return '&lt;';
      if (m === '>') return '&gt;';
      return m;
    });
  }

  // init: build UI, set initial state, then refresh all
  async function initRossPortal() {
    buildRossPortal();
    // reset state objects
    for (const site of sites) {
      siteState[site.id] = {
        isUp: null,
        lastChecked: null,
        checking: false,
        errorMessage: null
      };
      updateCardUI(site.id);
    }
    // perform initial checks after UI ready
    await refreshAllRossSites();
    // optional auto polling every 50 seconds
    setInterval(() => {
      refreshAllRossSites();
    }, 50000);
  }

  window.addEventListener('DOMContentLoaded', initRossPortal);
</script>
</body>
</html>