---
import '../styles/global.css';

interface Props {
  title: string;
  description?: string;
}

const { title, description = 'HPC Sysadmin blog — ARCHER2, Cirrus & homelab adventures' } = Astro.props;
const pathname = new URL(Astro.request.url).pathname;

const navLinks = [
  { href: '/#recent-posts', label: 'Home' },
  { href: '/blog',      label: 'Blog' },
  // { href: '/homelab',   label: 'Homelab' },
  // { href: '/hardware',  label: 'Hardware' },
];
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title} | slashroot.cc</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  </head>
  <body>

    <!-- ── Nav ─────────────────────────────────────────────── -->
    <header id="site-nav">
      <nav class="nav-inner container">
        <a href="/" class="nav-logo">
          <span class="nav-logo-bracket">/</span>slashroot<span class="nav-logo-accent">.</span>cc
        </a>

        <ul class="nav-links">
          {navLinks.map(({ href, label }) => (
            <li>
              <a
                href={href}
                class:list={['nav-link', { active: pathname === '/' || (href !== '/' && pathname.startsWith(href.split('#')[0])) }]}
              >
                {label}
              </a>
            </li>
          ))}
        </ul>

        <!-- Uptime Kuma live status badge -->
        <div class="nav-status" id="nav-uptime">
          <span class="status-dot" id="status-dot"></span>
          <span class="font-mono nav-status-text" id="status-text">checking…</span>
        </div>
      </nav>
    </header>

    <!-- ── Page content ─────────────────────────────────────── -->
    <main>
      <slot />
    </main>

    <!-- ── Footer ───────────────────────────────────────────── -->
    <footer class="site-footer">
      <div class="container footer-inner">
        <div class="footer-brand">
          <span class="font-display" style="font-size:1.1rem">/slashroot<span class="text-accent">.</span>cc</span>
          <p class="text-muted" style="font-size:0.8rem;margin-top:0.4rem">
            Built with Astro by Raul 💙
          </p>
        </div>
        <div class="footer-links">
          <a href="https://git.h0melab.uk" target="_blank" rel="noopener" class="text-muted footer-link">Gitea</a>
          <a href="/blog" class="text-muted footer-link">Blog</a>
          <a href="/hardware" class="text-muted footer-link">Hardware</a>
        </div>
        <p class="footer-copy text-muted font-mono">
        © 2025 - {new Date().getFullYear()} · slashroot.cc 
        </p>
      </div>
    </footer>

    <!-- Nav scroll behaviour + Uptime Kuma status -->
  <script is:inline>
    const UPTIME_URL = 'https://uptime.int.h0melab.uk/api/status-page/heartbeat/homelab';
    const dot  = document.getElementById('status-dot');
    const text = document.getElementById('status-text');

    async function fetchStatus() {
      try {
        const res = await fetch(`${UPTIME_URL}?t=${Date.now()}`, { 
          signal: AbortSignal.timeout(5000) 
        });
        const data = await res.json();

        const monitorIds = Object.keys(data.heartbeatList || {});
        let overallState = 'up';
        let label = 'all systems nominal';

        if (monitorIds.length === 0) {
            overallState = 'unknown';
            label = 'no data';
        } else {
            // Single loop to determine status
            for (const id of monitorIds) {
                const history = data.heartbeatList[id];
                const latest = history[history.length - 1];

                // Status Codes: 0=Down, 1=Up, 2=Pending, 3=Maintenance
                if (latest.status === 0) {
                    overallState = 'down';
                    label = 'system degraded';
                    break; // Priority 1: If anything is down, we are down
                } else if (latest.status === 2) {
                    overallState = 'pending';
                    label = 'checking...';
                } else if (latest.status !== 1 && overallState !== 'pending') {
                    overallState = 'unknown';
                    label = 'status unknown';
                }
            }
        }

        setStatus(overallState, label);
      } catch (err) {
        // THIS WILL PRINT THE EXACT ERROR TO YOUR BROWSER CONSOLE (F12)
        console.error('DETAILED ERROR:', err); 
        setStatus('unknown', 'status unknown');
      }
    }

    function setStatus(state, label) {
      if (!dot || !text) return;
      text.textContent = label;
      dot.setAttribute('data-state', state);
      
      // Pulse/Glow logic
      if (state === 'down') {
        dot.style.boxShadow = '0 0 10px #ff4444';
        dot.style.background = '#ff4444';
      } else if (state === 'up') {
        dot.style.boxShadow = '0 0 8px var(--petronas-teal)';
        dot.style.background = 'var(--petronas-teal)';
      } else {
        dot.style.boxShadow = '0 0 8px #FFB800';
        dot.style.background = '#FFB800';
      }
    }

    // Initial call and interval
    fetchStatus();
    setInterval(fetchStatus, 60000);
  </script>

  </body>
</html>

<style>
  /* Nav */
  #site-nav {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 100;
    padding: 1.25rem 0;
    transition: background var(--transition-med), backdrop-filter var(--transition-med), padding var(--transition-med), border-color var(--transition-med);
    border-bottom: 1px solid transparent;
  }

  #site-nav.scrolled {
    background: rgba(5, 10, 10, 0.85);
    backdrop-filter: blur(16px);
    padding: 0.75rem 0;
    border-bottom-color: var(--border-subtle);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }

  .nav-logo {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    white-space: nowrap;
    margin-right: auto;
  }
  .nav-logo-bracket { color: var(--petronas-teal); font-weight: 400; }
  .nav-logo-accent  { color: var(--petronas-teal); }

  .nav-links {
    display: flex;
    list-style: none;
    gap: 0.25rem;
  }

  .nav-link {
    display: block;
    padding: 0.35rem 0.85rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-radius: 4px;
    transition: color var(--transition-fast), background var(--transition-fast);
  }
  .nav-link:hover { color: var(--text-primary); background: var(--bg-surface); }
  .nav-link.active { color: var(--petronas-teal); }

  .nav-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    cursor: default;
  }

  .nav-status-text {
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: color 0.3s;
  }

  /* Status dot — colour driven by data-state attribute set by JS */
  .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--petronas-teal);
    box-shadow: 0 0 8px var(--petronas-teal);
    animation: pulse-dot 2.5s ease-in-out infinite;
    transition: background 0.4s, box-shadow 0.4s;
  }

  /* up = teal (default) */
  .status-dot[data-state="up"] {
    background: var(--petronas-teal);
    box-shadow: 0 0 8px var(--petronas-teal);
  }
  /* down = red */
  .status-dot[data-state="down"] {
    background: #FF4444;
    box-shadow: 0 0 8px #FF4444;
    animation: none;
  }
  /* pending / unknown = amber */
  .status-dot[data-state="pending"],
  .status-dot[data-state="unknown"] {
    background: #FFB800;
    box-shadow: 0 0 8px #FFB800;
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
  }

  /* Footer */
  .site-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 3rem 0;
    margin-top: 6rem;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1.2rem;
  }

  .footer-links {
    display: flex;
    gap: 1.3rem;
    justify-content: center;
  }

  .footer-link {
    font-size: 0.90rem;
    transition: color var(--transition-fast);
  }
  .footer-link:hover { color: var(--petronas-teal); }

  .footer-copy { font-size: 0.90rem; }

  @media (max-width: 768px) {
    .nav-status  { display: none; }
    .nav-link    { padding: 0.3rem 0.5rem; font-size: 0.90rem; }
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-links { justify-content: center; }
  }
</style>
