<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";

const theme = ref(null); // 'light' | 'dark' | null (system)

function applyThemeClass(t) {
  const el = document.documentElement;
  el.classList.remove("theme-light", "theme-dark");
  if (t === "light") el.classList.add("theme-light");
  if (t === "dark") el.classList.add("theme-dark");
}

function setThemePreference(t) {
  theme.value = t;
  if (t === null) {
    localStorage.removeItem("theme");
    // remove explicit classes to fallback to system
    applyThemeClass(null);
  } else {
    localStorage.setItem("theme", t);
    applyThemeClass(t);
  }
}

function toggleTheme() {
  const current = effectiveTheme.value;
  const next = current === "dark" ? "light" : "dark";
  setThemePreference(next);
}

// Track system preference reactively so UI updates immediately when OS theme changes
const systemPrefDark = ref(false);
const effectiveTheme = computed(() => {
  if (theme.value === "dark" || theme.value === "light") return theme.value;
  return systemPrefDark.value ? "dark" : "light";
});

let mq = null;
function handleMqChange(e) {
  systemPrefDark.value = e.matches;
}

onMounted(() => {
  const stored = localStorage.getItem("theme");
  if (stored === "dark" || stored === "light") {
    theme.value = stored;
    applyThemeClass(stored);
  } else {
    theme.value = null; // follow system
  }

  // set up system preference watcher
  mq = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
  if (mq) {
    systemPrefDark.value = mq.matches;
    mq.addEventListener("change", handleMqChange);
  }
});

onBeforeUnmount(() => {
  if (mq) mq.removeEventListener("change", handleMqChange);
});
</script>

<template>
  <div class="app-shell">
    <aside class="sidebar">
      <div class="brand">
        <img src="/tt_logo.png" alt="TTRPG Utilities logo" class="app-logo" />
        <div class="brand-text">
          <h1>TTRPG Utilities</h1>
        </div>
      </div>

      <nav class="nav-vertical">
        <router-link to="/" exact>Home</router-link>
        <router-link to="/name-generator">Name Generator</router-link>
        <router-link to="/attribute-calculator"
          >Attribute Calculator</router-link
        >
        <a href="https://foundry.fernandovideira.com">Foundry</a>
      </nav>

      <div class="sidebar-footer">
        <div
          style="
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: space-between;
          "
        >
          <small class="muted">v0.1 · production</small>
          <small class="muted">by KrioX</small>
          <button
            class="theme-toggle"
            @click="toggleTheme"
            :aria-pressed="effectiveTheme === 'dark'"
          >
            <span class="visually-hidden">Toggle theme</span>
            <svg
              class="icon icon--sm"
              v-if="effectiveTheme === 'dark'"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
            >
              <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
            </svg>
            <svg
              class="icon icon--sm"
              v-else
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
            >
              <circle cx="12" cy="12" r="4" />
              <path d="M12 2v2" />
              <path d="M12 20v2" />
              <path d="M2 12h2" />
              <path d="M20 12h2" />
              <path d="M4.93 4.93l1.41 1.41" />
              <path d="M17.66 17.66l1.41 1.41" />
              <path d="M4.93 19.07l1.41-1.41" />
              <path d="M17.66 6.34l1.41-1.41" />
            </svg>
          </button>
        </div>
      </div>
    </aside>

    <div class="content">
      <div class="content-inner">
        <router-view />
      </div>
    </div>
  </div>
</template>

<style scoped>
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background: transparent;
  padding: calc(var(--spacing-lg)) var(--spacing-md);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: stretch;
}

.brand h1 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-logo {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 8px;
}

.brand-text h1 {
  margin: 0;
  font-size: 0.95rem;
}

.brand .tagline {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.nav-vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--spacing-md);
}

.nav-vertical a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
}

.nav-vertical a.router-link-exact-active {
  background: var(--color-accent);
  color: white;
}

.sidebar-footer {
  margin-top: auto;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
}

.theme-toggle:hover {
  background: var(--surface-hover);
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.content {
  flex: 1;
  padding: var(--spacing-xl) var(--spacing-lg);
  background: transparent;
}

.content-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .sidebar {
    display: none;
  }
  .content {
    padding: var(--spacing-lg);
  }
}
</style>
