<template>
  <!-- 分离窗口:纯内容,不渲染主布局 -->
  <div v-if="isDetached" class="df-detached-root">
    <slot name="detached" />
  </div>
  <!-- 主窗口:完整布局 -->
  <div v-else class="df-shell">
    <AppSidebar />

    <!-- ═══ Main (页面内容) ═══ -->
    <!-- 仅在 AI 面板可见且最大化时隐藏主内容;面板关闭时无论 maximized 状态如何都显示 -->
    <main class="df-main" v-show="!(aiStore.state.maximized && aiStore.state.panelOpen)">
      <slot />
    </main>

    <!-- ═══ AI Chat Panel ═══ -->
    <transition name="ai-slide">
      <div v-if="aiStore.state.panelOpen && !aiStore.state.detached" class="df-ai-panel" :style="panelStyle">
        <div v-show="!aiStore.state.maximized" class="ai-resize-handle" :class="{ active: resizing }" @mousedown="startResize"></div>
        <slot name="ai-panel" />
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useAiStore } from '@/stores/ai'
import { useAppSettingsStore } from '@/stores/appSettings'
import AppSidebar from './AppSidebar.vue'

defineProps<{
  isDetached: boolean
}>()

const aiStore = useAiStore()
const appSettings = useAppSettingsStore()

// ── AI 面板拖拽调宽 ──
// useSetting 监听 appSettings 缓存:loadAll 异步填充后会自动刷新 ref
const panelWidth = appSettings.useSetting<number>('df-ai-width', 500)
const resizing = ref(false)

// maximized=全宽(flex:1填充) | sidebar=固定宽
const panelStyle = computed(() => {
  if (aiStore.state.maximized) return { flex: '1', minWidth: '0' }
  return {
    width: panelWidth.value + 'px',
    minWidth: panelWidth.value + 'px',
    maxWidth: panelWidth.value + 'px',
  }
})

function startResize(e: MouseEvent) {
  e.preventDefault()
  resizing.value = true
  const startX = e.clientX
  const startWidth = panelWidth.value

  document.body.style.cursor = 'col-resize'
  document.body.style.userSelect = 'none'

  function onMouseMove(ev: MouseEvent) {
    const delta = startX - ev.clientX // 向左拖 = 增宽
    const newWidth = Math.max(320, Math.min(800, startWidth + delta))
    panelWidth.value = newWidth
  }

  function onMouseUp() {
    resizing.value = false
    document.body.style.cursor = ''
    document.body.style.userSelect = ''
    void appSettings.set('df-ai-width', panelWidth.value)
    document.removeEventListener('mousemove', onMouseMove)
    document.removeEventListener('mouseup', onMouseUp)
  }

  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
}
</script>

<style scoped>
.df-detached-root { width: 100vw; height: 100vh; overflow: hidden; background: var(--df-bg); }
.df-shell { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

/* — Main — */
.df-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--df-bg);
  min-width: 0;
}

/* — AI Panel (全宽) — */
.df-ai-panel {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* — AI Resize Handle — */
.ai-resize-handle {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 10;
  transition: background 0.15s;
}
.ai-resize-handle:hover,
.ai-resize-handle.active {
  background: var(--df-accent);
  opacity: 0.4;
}

/* — AI Slide Transition — */
.ai-slide-enter-active { transition: opacity 0.2s var(--df-ease); }
.ai-slide-leave-active { transition: opacity 0.15s var(--df-ease); }
.ai-slide-enter-from, .ai-slide-leave-to {
  opacity: 0;
}

/* ═══ Responsive ═══ */
@media (max-width: 768px) {
  .df-ai-panel { width: 100vw; min-width: 100vw; max-width: 100vw; position: absolute; right: 0; top: 0; z-index: 100; }
}
</style>
