---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout
  title="Settings"
  description="Presentation options for Unique — color theme and other display preferences."
  subheader="Presentation options."
  noindex
>
  <article>
    <section class="setting">
      <h2>Color theme</h2>
      <p class="hint">
        Auto follows your system preference. Light or dark overrides it on this
        device.
      </p>
      <div class="theme-toggle" role="group" aria-label="Color theme">
        <button type="button" data-theme-set="auto">Auto</button>
        <button type="button" data-theme-set="light">Light</button>
        <button type="button" data-theme-set="dark">Dark</button>
      </div>
    </section>

    <p class="more">More presentation options will land here over time.</p>
  </article>

  <script>
    type Theme = 'auto' | 'light' | 'dark';
    const buttons = document.querySelectorAll<HTMLButtonElement>('[data-theme-set]');

    function currentTheme(): Theme {
      const t = document.documentElement.getAttribute('data-theme');
      return t === 'light' || t === 'dark' ? t : 'auto';
    }

    function setActive(value: Theme) {
      for (const b of buttons) {
        if (b.dataset.themeSet === value) b.setAttribute('aria-current', 'true');
        else b.removeAttribute('aria-current');
      }
    }

    function applyTheme(value: Theme) {
      if (value === 'auto') {
        document.documentElement.removeAttribute('data-theme');
        try { localStorage.removeItem('theme'); } catch (e) {}
      } else {
        document.documentElement.setAttribute('data-theme', value);
        try { localStorage.setItem('theme', value); } catch (e) {}
      }
      setActive(value);
    }

    for (const b of buttons) {
      b.addEventListener('click', () => {
        const v = b.dataset.themeSet;
        if (v === 'auto' || v === 'light' || v === 'dark') applyTheme(v);
      });
    }

    setActive(currentTheme());
  </script>

  <style>
    .setting {
      padding: 1.5rem 0;
      border-bottom: 1px solid var(--rule);
    }
    .setting:first-child { padding-top: 0; }
    .setting h2 {
      margin: 0 0 0.35rem;
      font-size: 1.05rem;
    }
    .hint {
      margin: 0 0 0.85rem;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .theme-toggle {
      display: inline-flex;
      gap: 0;
      border: 1px solid var(--rule);
      border-radius: 999px;
      overflow: hidden;
    }
    .theme-toggle button {
      font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      background: none;
      border: 0;
      padding: 0.45rem 1rem;
      margin: 0;
      color: var(--muted);
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease;
    }
    .theme-toggle button + button {
      border-left: 1px solid var(--rule);
    }
    .theme-toggle button:hover { color: var(--accent); }
    .theme-toggle button[aria-current="true"] {
      background: var(--fg);
      color: var(--bg);
    }

    .more {
      margin-top: 2rem;
      color: var(--muted);
      font-style: italic;
      font-size: 0.9rem;
    }
  </style>
</BaseLayout>