<script setup>
import { onMounted, onUnmounted, watch } from 'vue'
import { RouterView, useRoute } from 'vue-router'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppSidebar from '@/components/layout/AppSidebar.vue'
import AppBottomNav from '@/components/layout/AppBottomNav.vue'
import LoginModal from '@/components/LoginModal.vue'
import SignupModal from '@/components/SignupModal.vue'
import WebOnlyNotice from '@/components/WebOnlyNotice.vue'
import { Capacitor } from '@capacitor/core'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'

const auth = useAuthStore()
const ui = useUiStore()
const route = useRoute()

// 앱(Capacitor 네이티브)에서만 전체 이용. 웹(브라우저)은 안내 페이지만 노출.
// 단, 개발 모드(npm run dev)에서는 브라우저로도 전체 앱을 테스트할 수 있게 예외.
const isApp = Capacitor.isNativePlatform() || import.meta.env.DEV

// http.js 의 401 처리에서 발생시키는 이벤트 → 세션 정리 후 로그인 팝업
function onUnauthorized() {
  auth.clear()
  ui.openLogin()
}
onMounted(() => {
  if (!isApp) return // 웹은 안내만 — 앱 전용 초기화 생략
  window.addEventListener('auth:unauthorized', onUnauthorized)
  ui.loadSignupEnabled() // 회원가입 허용 여부 선로딩(랜딩/로그인 가입 버튼에 반영)
})
onUnmounted(() => window.removeEventListener('auth:unauthorized', onUnauthorized))

// 페이지 이동 시 모바일 사이드바 자동 닫힘
watch(() => route.fullPath, () => ui.closeSidebar())
</script>

<template>
  <!-- 웹(브라우저): 안내 페이지만 -->
  <WebOnlyNotice v-if="!isApp" />

  <!-- 앱(Capacitor): 전체 기능 -->
  <template v-else>
    <div class="layout" :class="{ 'sidebar-open': ui.sidebarOpen }">
      <AppHeader class="layout-top" />
      <AppSidebar class="layout-left" />
      <div class="sidebar-backdrop" @click="ui.closeSidebar()"></div>
      <main class="layout-body">
        <RouterView />
      </main>
      <AppBottomNav class="layout-bottom" />
    </div>

    <LoginModal />
    <SignupModal />
  </template>
</template>

<style scoped>
.layout {
  display: grid;
  grid-template-areas:
    'top    top'
    'left   body'
    'bottom bottom';
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.layout-top {
  grid-area: top;
}

.layout-left {
  grid-area: left;
}

.layout-body {
  grid-area: body;
  padding: 1.5rem 2rem;
  /* 하단 고정 내비(56px)+소프트키 인셋만큼 비워 콘텐츠가 가리지 않게 */
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 1rem);
  overflow: auto;
}

.layout-bottom {
  grid-area: bottom;
}

.sidebar-backdrop {
  display: none;
}

/* 모바일: 사이드바를 오프캔버스 드로어로 */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      'top'
      'body'
      'bottom';
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .layout-left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1200;
    width: 78%;
    max-width: 280px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
  }
  .layout.sidebar-open .layout-left {
    transform: translateX(0);
  }
  .layout.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(0, 0, 0, 0.45);
  }
  .layout-body {
    padding: 1rem;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 1rem);
  }
}
</style>
