<!-- layouts/article.vue -->
<template>
  <div ref="rootRef" class="article-root">
    <main ref="gridRef" class="a-grid" :style="{ '--rightw': rightwStyle }">
      <!-- 左列：自带滚动条（包含：固定导航 + 文章内容?-->
      <section class="a-left">
        <!-- 固定（sticky）白色毛玻璃导航：跟着左列滚动 -->
        <header class="glass-topbar">
          <div class="shell">
            <div class="glass-bar">
              <NuxtLink to="/" class="brand" aria-label="Aivise">
                <span class="dot" />
                <span class="brand-text">Aivise</span>
              </NuxtLink>

              <nav class="menu" aria-label="主菜单">
                <NuxtLink
                  v-for="m in menus"
                  :key="m.to"
                  :to="m.to"
                  class="link"
                  :class="{ active: isActive(m.to) }"
                >{{ m.label }}</NuxtLink>
              </nav>

              <div class="actions">
                <a class="pill" href="#" @click.prevent>领取福利</a>
              </div>
            </div>
          </div>
        </header>

        <!-- 文章内容（随左列滚动?-->
        <div class="a-article">
          <slot />
        </div>
      </section>

      <!-- 右列：内嵌评论（使用项目里的 RightDrawer.vue?-->
      <aside ref="asideRef" :class="['a-right', { collapsed: isCollapsedRef }]" >
        <template v-if="drawerReady">
          <RightDrawer
            class="rd-embed"
            :teleport="false"
            :append-to-body="false"
            :to="null"
            :mask="false"
            :fixed="false"
            :open="true"
            :visible="true"
            :model-value="true"
            width="100%"
            height="100%"
          />
        </template>
        <template v-else>
          <div class="rd-placeholder" aria-hidden="true" />
        </template>
      </aside>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import RightDrawer from '../components/RightDrawer.vue'
import { useRightDrawer } from '@/composables/useRightDrawer'

const route = useRoute()
const router = useRouter()
const drawerState = useRightDrawer()

const menus = [
  { label: '首页',     to: '/' },
  { label: '资讯广场', to: '/market' },
  { label: '社区',     to: '/community' },
  { label: '使用教程', to: '/docs' },
  
]
const isActive = (to) => (to === '/' ? route.path === '/' : route.path.startsWith(to))

/* ====== 同步右栏真实宽度?CSS 变量 --rightw（保持你的自适应列宽?====== */
const rootRef  = ref(null)
const gridRef  = ref(null)
const asideRef = ref(null)
let ro
const drawerReady = ref(false)
const lastExpandedWidth = ref(420)
const isCollapsedRef = drawerState.isCollapsed || ref(false)
const COLLAPSED_W = 60
const rightwStyle = computed(() => {
  if (isCollapsedRef.value) return `${COLLAPSED_W}px`
  const w = Math.max(120, Math.round(lastExpandedWidth.value || 420))
  return `${w}px`
})

function setRightWidth(px) {
  const w = Number.isFinite(px) && px > 80 ? Math.round(px) : lastExpandedWidth.value
  if (w) lastExpandedWidth.value = w
}

/* ====== ?出场动画 ====== */
const ENTER_MS = 160
const LEAVE_MS = 260   // 整页缩写动画时间

let removeGuard

function playEnterAnimation () {
  // 维持右栏的轻弹入（可要可不要，保持你现状?
  const aside = asideRef.value
  if (!aside) return
  aside.classList.add('pop-seed')
  requestAnimationFrame(() => {
    aside.classList.add('pop-in')
    setTimeout(() => {
      aside.classList.remove('pop-seed')
      aside.classList.remove('pop-in')
    }, ENTER_MS + 20)
  })
}

function playPageShrinkLeave () {
  // 整页缩写 ?消失
  return new Promise(resolve => {
    const root = rootRef.value
    const grid = gridRef.value
    if (!root) return resolve()

    // 防止过程中布局抖动：锁一下右列当前宽?
    if (grid) {
      const cur = getComputedStyle(grid).getPropertyValue('--rightw')
      if (cur) grid.style.setProperty('--rightw', cur.trim())
    }

    root.classList.add('page-leave')
    setTimeout(() => {
      root.classList.remove('page-leave')
      resolve()
    }, LEAVE_MS)
  })
}

onMounted(async () => {
  drawerReady.value = true
  // 防止遗留的离场状态导致页面不可见
  if (rootRef.value?.classList.contains('page-leave')) {
    rootRef.value.classList.remove('page-leave')
  }
  // 初始宽度兜底
  const existed = parseFloat(getComputedStyle(gridRef.value).getPropertyValue('--rightw'))
  const init = Number.isFinite(existed) && existed > 80 ? existed : 420
  lastExpandedWidth.value = init

  // 观察右栏内容宽度变化（折?展开?
  const target = asideRef.value?.firstElementChild || asideRef.value
  if (target && 'ResizeObserver' in window) {
    ro = new ResizeObserver(entries => {
      for (const e of entries) {
        const w = e.contentRect?.width ?? target.offsetWidth
        // 离开动画期间不再同步，避免冲突
        if (rootRef.value?.classList.contains('page-leave')) continue
        if (!isCollapsedRef.value && w > 80) {
          lastExpandedWidth.value = w
        }
      }
    })
    ro.observe(target)
  }

  await nextTick()
  playEnterAnimation()

  // 禁用路由守卫中的离场动画，使用共享元素转场代替
  // removeGuard = router.beforeEach(async (to, from) => {
  //   const toArticle = String(to?.path || '').startsWith('/articles/')
  //   if (from.fullPath === route.fullPath && !toArticle) {
  //     await playPageShrinkLeave()
  //     if (removeGuard) { removeGuard(); removeGuard = undefined }
  //   }
  //   return true
  // })
})

onBeforeUnmount(() => {
  if (ro) ro.disconnect()
  if (removeGuard) { removeGuard(); removeGuard = undefined }
})

// 抽屉收起/展开时动态调整右栏宽度：通过 rightwStyle 绑定
</script>

<style scoped>
/* ===== 页面级：整页不滚，把滚动交给左列 ===== */
.article-root{
  background: var(--soft-page-bg);
  height: 100vh;
  /* 将滚动限制在左侧文章区，右侧抽屉保持固定 */
  overflow: hidden;
  /* 为缩写动画准?*/
  will-change: transform, opacity, border-radius, box-shadow;
}

/* 右侧留“约 5%”呼吸间距；右列宽度?--rightw 决定（默?clamp?*/
.a-grid{
  --rightw: clamp(380px, 35vw, 480px);
  height: 100%;
  width: 103%;
  margin: 0;
  box-sizing: border-box;
  padding: 0px clamp(24px, 5vw, 50px) 14px 8px;  /* ?| ?| ?| ?*/
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rightw);
  gap: 0px;
}

/* ===== 左列（滚动容器） ===== */
.a-left{
  min-width: 0;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
  padding-right: 4px;
}

/* 顶部白色毛玻璃胶囊条 */
.glass-topbar{
  position: sticky; top: 0; z-index: 30;
  padding-top: 6px; margin-bottom: 12px;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0));
}
.shell{ max-width: 100%; margin: 0; padding: 0; }
.glass-bar{
  height: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  border-radius: 999px;
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255,255,255,.92), rgba(255,255,255,.72) 70%),
    rgba(255,255,255,.75);
  border: 1px solid rgba(17,24,39,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(17,24,39,.06);
}

/* 品牌 */
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.dot{ width:30px; height:30px; border-radius:12px; background: linear-gradient(135deg,#6da2ff 0%, #7733ff 100%); }
.brand-text{ color:#111827; font-weight:800; letter-spacing:.4px; font-size:18px; }

/* 菜单 */
.menu{ min-width: 0; display:flex; gap: 26px; justify-content:center; align-items:center; }
.link{
  position: relative; color: rgba(17,24,39,.82);
  text-decoration: none; font-weight: 600; letter-spacing:.2px;
  padding: 8px 2px; transition: color .15s ease; white-space: nowrap;
}
.link:hover{ color:#111827; }
.link.active{ color:#0f172a; }
.link.active::after{
  content:""; position:absolute; left: 6px; right: 6px; bottom: 2px; height: 6px; border-radius: 6px;
  background:
    radial-gradient(16px 8px at 20% 50%, rgba(99,102,241,.35), transparent 70%),
    radial-gradient(16px 8px at 80% 50%, rgba(99,102,241,.35), transparent 70%),
    linear-gradient(90deg, rgba(99,102,241,.45), rgba(99,102,241,.15));
}

/* 右侧操作按钮（导航右侧） */
.actions{ display:flex; gap: 12px; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  height: 40px; padding: 0 18px;
  text-decoration:none; color:#0f172a; font-weight:700;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.pill:hover{
  background: rgba(255,255,255,.95);
  border-color: rgba(17,24,39,.22);
  transform: translateY(-1px);
}
.pill:active{ transform: translateY(0); }

/* ===== 右列：内嵌评论容?===== */
.a-right{
  min-width: 0;
  height: 100%;
  position: sticky;
  top: 0;
  align-self: start;
  overflow: hidden;
  border-left: 1px solid #eef0f3;
  background: var(--soft-page-bg);
  display:flex;
}

/* ?RightDrawer 在右栏中 100% 填充 */
.rd-embed{
  height: 100%;
  display:flex;
  flex-direction: column;
}
.rd-placeholder{
  width: 100%;
  height: 100%;
}

/* 文章与导航间?*/
.a-article{ padding-top: 2px; }

/* ===== 自定义滚动条（左列） ===== */
:root{
  --sb-track: transparent;
  --sb-thumb: #d1d5db;
  --sb-thumb-hover: #9ca3af;
  --sb-corner: transparent;
}
.a-left{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
.a-left::-webkit-scrollbar{ width:10px; height:10px; }
.a-left::-webkit-scrollbar-track{ background: var(--sb-track); }
.a-left::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);
  border-radius: 999px;
  border: 2px solid var(--sb-track);
}
.a-left:hover::-webkit-scrollbar-thumb{ background-color: var(--sb-thumb-hover); }
.a-left::-webkit-scrollbar-corner{ background: var(--sb-corner); }

/* 小屏：隐藏右列，仅左列（可滚?*/
@media (max-width: 960px){
  .a-grid{
    grid-template-columns: 1fr;
    padding: 8px;
  }
  .a-right{ display: none; }
}

/* ====== 右栏轻弹入（保留原来的灵动） ====== */
.a-right.pop-seed .rd-embed{
  transform: translateX(14px) scale(0.985);
  opacity: 0;
}
.a-right.pop-in .rd-embed{
  transition: transform .16s cubic-bezier(.2,.8,.2,1),
              opacity  .16s cubic-bezier(.2,.8,.2,1);
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* ====== 整页“缩写消失”离场动?====== */
.article-root.page-leave{
  /* 向右上角缩写：基点靠近右上，略微位移更“像回收?*/
  transform-origin: 96% 6%;
  animation: pageZoomOut .26s cubic-bezier(.22,1,.36,1) forwards;
  /* 可选淡出背景的投影?*/
  box-shadow: 0 20px 60px rgba(17,24,39,.10);
  border-radius: 0; /* ?0 过渡?16px */
}
@keyframes pageZoomOut{
  0%{
    transform: translate(0,0) scale(1);
    opacity: 1;
    border-radius: 0px;
  }
  100%{
    transform: translate(14px, -10px) scale(.86);
    opacity: 0;
    border-radius: 16px;
  }
}
</style>

<!-- 兜底样式（非 scoped）：确保 RightDrawer 内嵌 -->
<style>
.right-drawer, .rd-root, .drawer-root,
.right-drawer__panel, .rd-panel, .drawer-panel{
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  border: none !important;
}
.right-drawer__mask, .rd-mask, .drawer-mask,
.right-drawer--fixed, .rd-fixed, .drawer-fixed{
  display: none !important;
}
.right-drawer, .rd-root, .drawer-root{ z-index: 1 !important; }
</style>
