<template>
  <div id="app-root">
    <MealPlanner v-if="page === 'meal'" @go-shop="page = 'shop'" />
    <Converter   v-else-if="page === 'convert'" />
    <ShoppingList v-else-if="page === 'shop'" />
    <BottomNav v-model="page" />

    <!-- bottone info fisso in alto a destra -->
    <button class="btn-info" @click="showInfo = true" aria-label="Informazioni app">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <line x1="12" y1="16" x2="12" y2="12"/>
        <line x1="12" y1="8" x2="12.01" y2="8"/>
      </svg>
    </button>

    <InfoPanel v-model="showInfo" @open-docs="showDocs = true" />
    <DocsPanel v-model="showDocs" />

  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import BottomNav    from './components/BottomNav.vue'
import InfoPanel    from './components/InfoPanel.vue'
import DocsPanel    from './components/DocsPanel.vue'
import MealPlanner  from './pages/MealPlanner.vue'
import Converter    from './pages/Converter.vue'
import ShoppingList from './pages/ShoppingList.vue'

const page     = ref('meal')
const showInfo = ref(false)
const showDocs = ref(false)

function fixOrientation() {
  const isLandscape = window.innerWidth > window.innerHeight
  // screen.orientation.angle potrebbe non essere ancora aggiornato o non disponibile:
  // fallback basato su dimensioni finestra
  const angle = screen.orientation?.angle ?? (isLandscape ? 90 : 0)
  const root = document.getElementById('app-root')
  if (!root) return
  if (isLandscape) {
    const w = window.innerWidth
    const h = window.innerHeight
    root.style.cssText = `
      position: fixed;
      width: ${h}px;
      height: ${w}px;
      top: ${(h - w) / 2}px;
      left: ${(w - h) / 2}px;
      transform: rotate(${angle === 90 ? -90 : 90}deg);
      transform-origin: center center;
    `
  } else {
    root.style.cssText = ''
  }
}

// orientationchange si triggera prima che angle/dimensioni siano aggiornati:
// aspettiamo un tick
function onOrientationChange() {
  setTimeout(fixOrientation, 50)
}

onMounted(() => {
  fixOrientation()
  window.addEventListener('orientationchange', onOrientationChange)
  window.addEventListener('resize', fixOrientation)
})

onUnmounted(() => {
  window.removeEventListener('orientationchange', onOrientationChange)
  window.removeEventListener('resize', fixOrientation)
})
</script>

<style scoped>
#app-root {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.btn-info {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: 16px;
  /* centra rispetto al max-width del layout */
  max-width: calc(480px);
  background: var(--color-surface);
  color: var(--color-muted);
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  z-index: 50;
  transition: color var(--transition), box-shadow var(--transition);
}

.btn-info:active {
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  opacity: 1;
}

</style>
