---
import { Font } from "astro:assets";

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

const { title, description = 'Code review agents for GitHub' } = Astro.props;
const currentPath = Astro.url.pathname;
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
const pageTitle = title === 'Home' ? 'Warden' : `${title} | Warden`;
---

<!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} />
    <title>{pageTitle}</title>
    <link rel="icon" type="image/svg+xml" href={`${base}/favicon.svg`} />
    <Font cssVariable="--font-geist-mono" preload />
  </head>
  <body>
    <nav class="nav">
      <div class="nav-inner container">
        <a href={`${base}/`} class="nav-logo">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.2666 4.9061C15.1564 4.09409 16.5921 4.60917 16.7627 5.80162L18.1123 15.2519C18.9476 14.5758 19.6675 14.156 20.2706 13.9423C20.9583 13.6988 21.61 13.6893 22.0606 14.0459C22.5331 14.4202 22.576 15.0232 22.4131 15.5224C22.2471 16.0308 21.8525 16.5326 21.2774 16.916C20.2382 17.6088 19.1848 18.1368 17.7432 18.4863C16.3131 18.833 14.518 19 12 19C9.48202 19 7.68685 18.833 6.25679 18.4863C4.81521 18.1368 3.76183 17.6088 2.72259 16.916C2.14753 16.5326 1.75289 16.0308 1.58684 15.5224C1.42401 15.0233 1.46701 14.4202 1.93938 14.0459C2.38997 13.6893 3.04168 13.6988 3.72943 13.9423C4.33238 14.1559 5.05163 14.5761 5.88667 15.2519L7.23727 5.80162C7.40784 4.60919 8.84362 4.09419 9.73338 4.9061L11.6631 6.66686C11.854 6.84121 12.146 6.84121 12.3369 6.66686L14.2666 4.9061Z" fill="currentColor"/>
            <path d="M12 8L13.1226 11.1094H16.7553L13.8164 13.0312L14.9389 16.1406L12 14.2188L9.06107 16.1406L10.1836 13.0312L7.24472 11.1094H10.8774L12 8Z" fill="#000"/>
          </svg>
          Warden
        </a>
        <button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
          <span class="hamburger"></span>
        </button>
        <div class="nav-links">
          <a href={`${base}/guide`} class:list={[{ active: currentPath.endsWith('/guide') || currentPath.endsWith('/guide/') }]}>Guide</a>
          <a href={`${base}/config`} class:list={[{ active: currentPath.endsWith('/config') || currentPath.endsWith('/config/') }]}>Config</a>
          <a href={`${base}/cli`} class:list={[{ active: currentPath.endsWith('/cli') || currentPath.endsWith('/cli/') }]}>CLI</a>
          <a href="https://github.com/getsentry/warden" class="nav-github" aria-label="GitHub">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
            </svg>
          </a>
        </div>
      </div>
    </nav>
    <script>
      const toggle = document.querySelector('.nav-toggle');
      const nav = document.querySelector('.nav');
      toggle?.addEventListener('click', () => {
        const expanded = toggle.getAttribute('aria-expanded') === 'true';
        toggle.setAttribute('aria-expanded', String(!expanded));
        nav?.classList.toggle('nav-open');
      });

      // Add anchor links to headings
      function slugify(text: string): string {
        return text
          .toLowerCase()
          .replace(/[^a-z0-9]+/g, '-')
          .replace(/(^-|-$)/g, '');
      }

      const headings = document.querySelectorAll('main h2, main h3, main h4');
      const usedIds = new Set<string>();

      headings.forEach((heading) => {
        const text = heading.textContent || '';
        let id = slugify(text);

        // Handle duplicates
        let counter = 1;
        let uniqueId = id;
        while (usedIds.has(uniqueId)) {
          uniqueId = `${id}-${counter++}`;
        }
        usedIds.add(uniqueId);

        heading.id = uniqueId;

        const anchor = document.createElement('a');
        anchor.href = `#${uniqueId}`;
        anchor.className = 'heading-anchor';
        anchor.textContent = '#';
        anchor.setAttribute('aria-label', `Link to ${text}`);
        heading.prepend(anchor);
      });

      // Scroll to anchor on load if hash present
      if (window.location.hash) {
        const target = document.querySelector(window.location.hash);
        if (target) {
          setTimeout(() => target.scrollIntoView(), 0);
        }
      }

      // Package manager preference (shared across all pages)
      const PM_STORAGE_KEY = 'warden-docs-pm';

      function setPackageManager(pm: string) {
        document.querySelectorAll('.pm-tabs').forEach((container) => {
          const buttons = container.querySelectorAll('.tab-btn');
          const contents = container.querySelectorAll('.tab-content');

          buttons.forEach((btn) => {
            btn.classList.toggle('active', btn.getAttribute('data-pm') === pm);
          });

          contents.forEach((content) => {
            content.classList.toggle('hidden', content.getAttribute('data-pm') !== pm);
          });
        });
      }

      function initPackageManagerTabs() {
        const savedPm = localStorage.getItem(PM_STORAGE_KEY);
        if (savedPm) {
          setPackageManager(savedPm);
        }

        document.querySelectorAll('.pm-tabs').forEach((container) => {
          container.querySelectorAll('.tab-btn').forEach((btn) => {
            btn.addEventListener('click', () => {
              const pm = btn.getAttribute('data-pm');
              if (!pm) return;
              localStorage.setItem(PM_STORAGE_KEY, pm);
              setPackageManager(pm);
            });
          });

          const copyButton = container.querySelector('.copy-button');
          if (copyButton) {
            copyButton.addEventListener('click', async () => {
              const activeContent = container.querySelector('.tab-content:not(.hidden)');
              if (!activeContent) return;

              // Strip $ prompt from each line
              const textToCopy = (activeContent.textContent || '')
                .split('\n')
                .map(line => line.replace(/^\s*[$>]\s*/, ''))
                .join('\n')
                .trim();

              try {
                await navigator.clipboard.writeText(textToCopy);
                copyButton.classList.add('copied');
                setTimeout(() => copyButton.classList.remove('copied'), 2000);
              } catch (err) {
                console.error('Failed to copy:', err);
              }
            });
          }
        });
      }

      initPackageManagerTabs();
      document.addEventListener('astro:page-load', initPackageManagerTabs);

    </script>
    <main class="container">
      <slot />
    </main>
    <footer class="footer">
      <div class="container">
        <p>FSL-1.1-ALv2 License &middot; <a href="https://github.com/getsentry/warden">GitHub</a></p>
      </div>
    </footer>
  </body>
</html>

<style is:global>
  @import '../styles/global.css';

  .nav {
    padding: 1rem 0;
    position: sticky;
    top: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: 100;
  }

  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-logo,
  .nav-logo:link,
  .nav-logo:visited,
  .nav-logo:active {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff !important;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-logo svg {
    flex-shrink: 0;
  }

  .nav-logo:hover {
    color: #fff !important;
    opacity: 0.8;
  }

  .nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
  }

  .nav-links a {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    transition: opacity 0.15s ease;
    padding-bottom: 4px;
    border-bottom: 4px solid transparent;
    margin-bottom: -4px;
  }

  .nav-links a:hover {
    color: #fff;
    opacity: 0.7;
  }

  .nav-links a.active {
    color: #fff;
    border-bottom-color: #fff;
    opacity: 1;
  }

  .nav-github {
    margin-left: 1rem;
    display: flex;
    align-items: center;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
  }

  .nav-github:hover {
    opacity: 0.7;
  }

  .nav-github svg {
    display: block;
  }

  .footer {
    border-top: 1px solid var(--border);
    padding: 2.5rem 0;
    margin-top: 4rem;
    text-align: center;
  }

  .footer p {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin: 0;
  }

  .footer a {
    color: var(--text-secondary);
  }

  .footer a:hover {
    color: var(--text);
  }

  .footer .easter-egg {
    font-size: 0.6875rem;
    margin-top: 0.75rem;
    opacity: 0.5;
  }

  /* Hamburger button */
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-right: -0.5rem;
  }

  .hamburger {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
    transition: background 0.2s ease;
  }

  .hamburger::before,
  .hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: #fff;
    transition: transform 0.2s ease;
  }

  .hamburger::before {
    top: -6px;
  }

  .hamburger::after {
    top: 6px;
  }

  /* Animate to X when open */
  .nav-open .hamburger {
    background: transparent;
  }

  .nav-open .hamburger::before {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-open .hamburger::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  @media (max-width: 768px) {
    .nav-toggle {
      display: block;
    }

    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.95);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      flex-direction: column;
      padding: 1rem 1.5rem 1.5rem;
      gap: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-open .nav-links {
      display: flex;
    }

    .nav-links a {
      padding: 0.75rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 0;
    }

    .nav-links a:last-child {
      border-bottom: none;
    }

    .nav-github {
      margin-left: 0;
      padding-left: 0;
      border-left: none;
      padding-top: 1rem;
      margin-top: 0.5rem;
    }
  }
</style>
