<template>
  <section v-if="isEditorImmersive" class="app-immersive">
    <router-view />
  </section>

  <div v-else v-loading="store.state.common.loading" class="app-shell">

    <!-- Sidebar -->
    <aside class="app-sidebar" :class="{ 'app-sidebar--collapsed': isCollapsed }"
      @mouseenter="isCollapsed = false"
      @mouseleave="isCollapsed = true"
    >
      <!-- Logo area -->
      <div class="app-sidebar__brand">
        <el-image :src="OSELogo" fit="contain" class="app-sidebar__logo" />
        <transition name="fade">
          <div v-if="!isCollapsed" class="app-sidebar__brand-copy">
            <p class="app-sidebar__brand-name">OSE Marketing</p>
            <p class="app-sidebar__brand-sub">Console</p>
          </div>
        </transition>
      </div>

      <!-- Nav -->
      <nav class="app-sidebar__nav">
        <template v-for="section in adminNavigationSections" :key="section.key">
          <p v-if="!isCollapsed" class="app-sidebar__section-label">{{ section.label }}</p>
          <router-link
            v-for="item in section.items"
            :key="item.index"
            :to="item.index"
            class="app-sidebar__link"
            :class="{ 'is-active': currentRootPath === item.index }"
          >
            <el-icon size="18" class="app-sidebar__icon">
              <component :is="item.icon" />
            </el-icon>
            <transition name="fade">
              <span v-if="!isCollapsed" class="app-sidebar__link-label">{{ item.label }}</span>
            </transition>
          </router-link>
        </template>
      </nav>

    </aside>

    <!-- Main area -->
    <div class="app-body">
      <!-- Top bar -->
      <header class="app-topbar">
        <div class="app-topbar__left">
          <h1 class="app-topbar__title">{{ currentSectionLabel }}</h1>
        </div>

        <div class="app-topbar__right">
          <template v-if="store.state.user.isLogin">
            <!-- Company switcher -->
            <el-dropdown @command="corporate_customer_change">
              <div class="app-chip app-chip--company">
                <div class="app-chip__text">
                  <span class="app-chip__sub">公司</span>
                  <span class="app-chip__main">{{ store.state.user.current_corporate_customer_name || '請選擇' }}</span>
                </div>
                <el-icon size="14" color="#94a3b8"><CaretBottom /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in store.state.user.corporate_customer"
                    :key="item.id"
                    :command="item.id"
                  >{{ item.name }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <!-- User -->
            <el-dropdown>
              <div class="app-chip app-chip--user">
                <div class="app-chip__avatar">
                  <el-icon size="16"><UserFilled /></el-icon>
                </div>
                <span class="app-chip__main">{{ store.state.user.user_info?.email?.split('@')[0] || '帳號' }}</span>
                <el-icon size="14" color="#94a3b8"><CaretBottom /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="doLogout">
                    <svg-icon name="Logout" size="16" />
                    <span style="margin-left: 8px">登出</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>

          <el-button v-else size="default" @click="doLogin">
            <svg-icon name="Login" size="16" />
            <span style="margin-left: 6px">登入</span>
          </el-button>
        </div>
      </header>

      <!-- Page content -->
      <main class="app-main">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import OSELogo from '@a/ose-logo.png'
import { useRoute, useRouter } from 'vue-router'
import {
  adminNavigationSections,
  findNavigationItemByPath,
} from '@/config/app-shell'
import SvgIcon from '@/components/svg-icon.vue'

const isCollapsed = ref(true)
const store = useStore()
const route = useRoute()
const router = useRouter()

const currentRootPath = ref(findNavigationItemByPath(route.path)?.index || route.path)
const isEditorImmersive = computed(() => route.name === 'editor-variant')
const currentSectionLabel = computed(() => {
  if (!store.state.user.isLogin) return '登入與帳號入口'
  const matched = findNavigationItemByPath(route.path)
  return matched?.label || '行銷平台後台'
})

const corporate_customer_change = (id) => {
  if (id === store.state.user.current_corporate_customer) return
  store.dispatch('user/setCorporateCustomerName', id)
  router.go(0)
}

const doLogout = async () => {
  await store.dispatch('user/logout')
  router.push({ name: 'login' })
}

const doLogin = () => router.push({ name: 'login' })

watch(route, (newRoute) => {
  currentRootPath.value = findNavigationItemByPath(newRoute.path)?.index || newRoute.path
})
</script>

<style scoped>
/* ─── Immersive editor ─── */
.app-immersive {
  min-height: 100vh;
  background: #f8fafc;
}

/* ─── Shell layout ─── */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: #f1f5f9;
}

/* ─── Sidebar ─── */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 232px;
  display: flex;
  flex-direction: column;
  background: #0f172a;
  transition: width 200ms cubic-bezier(.4,0,.2,1);
  z-index: 100;
  overflow: hidden;
}

.app-sidebar--collapsed {
  width: 68px;
}

/* Brand */
.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  min-height: 72px;
}

.app-sidebar__logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  filter: brightness(0) invert(1) opacity(0.9);
}

.app-sidebar__brand-copy {
  overflow: hidden;
  white-space: nowrap;
}

.app-sidebar__brand-name {
  margin: 0;
  color: #f1f5f9;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.app-sidebar__brand-sub {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Nav */
.app-sidebar__nav {
  flex: 1;
  padding: 16px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar__section-label {
  margin: 14px 0 4px 8px;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.app-sidebar__link:hover {
  background: rgba(255,255,255,0.07);
  color: #e2e8f0;
}

.app-sidebar__link.is-active {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

.app-sidebar__link.is-active .app-sidebar__icon {
  color: #60a5fa;
}

.app-sidebar__icon {
  flex-shrink: 0;
  color: inherit;
}

.app-sidebar__link-label {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ─── Main body ─── */
.app-body {
  flex: 1;
  margin-left: 68px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── Top bar ─── */
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.app-topbar__left {
  min-width: 0;
}

.app-topbar__title {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Chips */
.app-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.app-chip:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.app-chip__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.app-chip__sub {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.app-chip__main {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-chip--user {
  gap: 8px;
}

.app-chip__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dbeafe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Page main ─── */
.app-main {
  flex: 1;
  padding: 28px 28px 40px;
  overflow: auto;
}

/* ─── Transitions ─── */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s, transform 0.15s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(-4px);
}
</style>
