script.js

const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelector('.nav-links');

navToggle?.addEventListener('click', () => {
  const open = navToggle.getAttribute('aria-expanded') === 'true';
  navToggle.setAttribute('aria-expanded', String(!open));
  navLinks.classList.toggle('is-open', !open);
});

navLinks?.querySelectorAll('a').forEach((link) => {
  link.addEventListener('click', () => {
    navToggle?.setAttribute('aria-expanded', 'false');
    navLinks.classList.remove('is-open');
  });
});

const tabs = [...document.querySelectorAll('.tab')];
const tabPanels = [...document.querySelectorAll('.tab-panel')];

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    const target = tab.dataset.tab;
    tabs.forEach((item) => {
      const active = item === tab;
      item.classList.toggle('is-active', active);
      item.setAttribute('aria-selected', String(active));
    });
    tabPanels.forEach((panel) => panel.classList.toggle('is-active', panel.dataset.panel === target));
  });
});

function copyText(button) {
  const panel = button.closest('.code-panel, .json-output');
  const text = panel?.querySelector('pre')?.innerText.trim();
  if (!text) return;

  navigator.clipboard.writeText(text).then(() => {
    button.classList.add('copied');
    button.textContent = '✓';
    window.setTimeout(() => {
      button.classList.remove('copied');
      button.textContent = '□';
    }, 1200);
  }).catch(() => {});
}

document.querySelectorAll('.copy-button').forEach((button) => {
  button.addEventListener('click', () => copyText(button));
});

const routes = [...document.querySelectorAll('.route')];
const requestForm = document.querySelector('#request-form');
const baseInput = document.querySelector('#base-url');
const paramInput = document.querySelector('#route-param');
const paramLabel = document.querySelector('#param-label');
const responseOutput = document.querySelector('#response-output code');
const responseStatus = document.querySelector('#response-status');
const responseTime = document.querySelector('#response-time');
let activeRoute = routes[0];

const sample = {
  '/aesthetics': {
    count: 219,
    results: [
      { slug: 'acid-design', name: 'Acid Design', image_url: '/images/acid-design.png' },
      { slug: 'cottagecore', name: 'Cottagecore', image_url: '/images/cottagecore.png' }
    ]
  },
  '/random': {
    slug: 'acid-design',
    name: 'Acid Design',
    aesthetic_url: 'https://aesthetics.fandom.com/wiki/Acid_Design',
    image_url: '/images/acid-design.png'
  },
  '/healthz': { status: 'ok', count: 219, image_mode: 'local' }
};

function updateParamField() {
  const param = activeRoute.dataset.param;
  const needsParam = Boolean(param);
  paramLabel.style.display = needsParam ? 'block' : 'none';
  paramInput.value = needsParam ? activeRoute.dataset.default || '' : '';
  paramInput.placeholder = param || 'optional';
}

routes.forEach((route) => {
  route.addEventListener('click', () => {
    routes.forEach((item) => item.classList.remove('is-active'));
    route.classList.add('is-active');
    activeRoute = route;
    updateParamField();
  });
});

function buildUrl() {
  const base = baseInput.value.trim().replace(/\/$/, '');
  let path = activeRoute.dataset.path;
  if (activeRoute.dataset.param) {
    const value = encodeURIComponent(paramInput.value.trim() || activeRoute.dataset.default || '');
    path = path.replace(`{${activeRoute.dataset.param}}`, value);
  }
  return `${base}${path}`;
}

function paintJson(value) {
  const json = JSON.stringify(value, null, 2);
  responseOutput.textContent = json;
}

function offlinePayload() {
  const path = activeRoute.dataset.path;
  if (path.startsWith('/search')) {
    return [sample['/random']];
  }
  if (path.includes('{slug}')) {
    return sample['/random'];
  }
  return sample[path] || sample['/random'];
}

requestForm?.addEventListener('submit', async (event) => {
  event.preventDefault();
  const url = buildUrl();
  const start = performance.now();
  responseStatus.classList.remove('error');
  responseStatus.textContent = 'WAIT';
  responseOutput.textContent = `Requesting ${url} …`;

  if (activeRoute.dataset.image === 'true') {
    responseStatus.textContent = 'IMAGE';
    responseOutput.textContent = `Image endpoint selected:\n${url}\n\nOpen this URL directly to preview the returned image.`;
    responseTime.textContent = `RESPONSE TIME: ${Math.round(performance.now() - start)}ms`;
    return;
  }

  try {
    const result = await fetch(url, { headers: { Accept: 'application/json' } });
    const body = await result.json();
    responseStatus.textContent = `${result.status} ${result.ok ? 'OK' : 'ERROR'}`;
    responseStatus.classList.toggle('error', !result.ok);
    paintJson(Array.isArray(body) && body.length > 8 ? body.slice(0, 8) : body);
  } catch (error) {
    responseStatus.textContent = 'SAMPLE';
    responseStatus.classList.remove('error');
    paintJson(offlinePayload());
  }

  responseTime.textContent = `RESPONSE TIME: ${Math.round(performance.now() - start)}ms`;
});

updateParamField();