<script setup>
// Light/dark toggle for the mobile pages. Reuses the existing useTheme() logic
// (same as the desktop ThemeToggle) but is styled with the --mob-* token system
// so it sits naturally on every mobile screen.
//
// Two variants:
//   - default: a big floating circle, fixed top-right. Mounted route-gated from
//     app.vue ONLY on the dashboard (/mobile), since the app uses a bare
//     <NuxtPage> with no <NuxtLayout>.
//   - mini:    a small, inline (non-floating) button meant to sit inside a
//     page's own .mobile-header on every non-dashboard mobile page, so it no
//     longer overlaps page content.
defineProps({
  mini: { type: Boolean, default: false }
})

const { isDark, toggleTheme, initTheme } = useTheme()

onMounted(() => {
  // Sync Nuxt UI colorMode with the stored preference / pre-hydration DOM state.
  initTheme()
})
</script>

<template>
  <button
    type="button"
    class="mob-theme-toggle"
    :class="{ 'is-mini': mini }"
    :title="isDark ? 'Helles Design' : 'Dunkles Design'"
    :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
    @click="toggleTheme"
  >
    <!-- Sun (shown in dark mode → tap for light) -->
    <svg
      v-if="isDark"
      xmlns="http://www.w3.org/2000/svg"
      width="22" height="22" viewBox="0 0 24 24"
      fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round"
      class="mob-theme-icon sun"
    >
      <circle cx="12" cy="12" r="5"></circle>
      <line x1="12" y1="1" x2="12" y2="3"></line>
      <line x1="12" y1="21" x2="12" y2="23"></line>
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
      <line x1="1" y1="12" x2="3" y2="12"></line>
      <line x1="21" y1="12" x2="23" y2="12"></line>
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
    </svg>

    <!-- Moon (shown in light mode → tap for dark) -->
    <svg
      v-else
      xmlns="http://www.w3.org/2000/svg"
      width="22" height="22" viewBox="0 0 24 24"
      fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round"
      class="mob-theme-icon moon"
    >
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
    </svg>
  </button>
</template>

<style scoped>
.mob-theme-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 99997; /* below the task-timer badge (99998), above page content */
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--mob-border);
  background-color: var(--mob-surface);
  color: var(--mob-text);
  box-shadow: var(--mob-shadow-card);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.mob-theme-toggle:active {
  transform: scale(0.92);
}

/* Mini variant: small, inline (non-floating) — sits inside the dashboard
   header's action group instead of overlapping page content as a big circle. */
.mob-theme-toggle.is-mini {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 12px; /* rounded square reads as a header control, not a floating circle */
  box-shadow: none;
  flex: 0 0 auto;
}

.mob-theme-icon {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}

.mob-theme-icon.sun {
  color: var(--mob-amber-soft);
}

.mob-theme-icon.moon {
  color: var(--mob-blue-soft);
}
</style>
