<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch, type Component, onMounted } from 'vue'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Button } from '@/components/ui/button'
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/ui/tooltip'
import {
  DialogClose,
  DialogContent,
  DialogOverlay,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger, DialogDescription
} from 'reka-ui'
import { useWindowSize } from '@vueuse/core'
import { animate, AnimatePresence, Motion, useMotionValue, useMotionValueEvent, useTransform } from 'motion-v'
interface TypeLineCategory {
  key: string
  label: string
  component: Component
}

const props = withDefaults(
  defineProps<{
    scene?: string
    title?: string
    subtitle?: string
    metaText?: string
    copyText?: string
    categories: TypeLineCategory[]
    storageKey?: string
    defaultCategory?: string
  }>(),
  {
    scene: 'default',
    title: '配置',
    subtitle: '',
    metaText: '',
    copyText: '',
    storageKey: '',
    defaultCategory: ''
  }
)

const cacheKey = computed(() => props.storageKey || `type-line-active-cat-${props.scene}`)

const resolveInitialCategory = () => {
  const defaultKey = props.defaultCategory || props.categories[0]?.key || ''
  const savedKey = sessionStorage.getItem(cacheKey.value)
  const validSavedKey = props.categories.some(item => item.key === savedKey)
  return validSavedKey ? (savedKey as string) : defaultKey
}

const activeCategory = ref(resolveInitialCategory())

watch(
  () => [props.categories, props.defaultCategory, cacheKey.value],
  () => {
    activeCategory.value = resolveInitialCategory()
  },
  { deep: true }
)



const switchCategory = (cat: string) => {
  activeCategory.value = cat
  sessionStorage.setItem(cacheKey.value, cat)
}

const activeComponent = computed(() => {
  const selected = props.categories.find(item => item.key === activeCategory.value)
  return selected?.component || props.categories[0]?.component || null
})

const copyBtnText = ref('复制')
const sheetOpen = ref(false)
const titleRef = ref<HTMLElement | null>(null)
const isTitleOverflow = ref(false)
const subtitleRef = ref<HTMLElement | null>(null)
const isSubtitleOverflow = ref(false)
let copyBtnTimer: ReturnType<typeof setTimeout> | null = null
let titleOverflowRafId: number | null = null







const handleCopySubtitle = async () => {
  const text = (props.copyText || '').trim()
  if (!text) return

  try {
    await navigator.clipboard.writeText(text)
    copyBtnText.value = '已复制'
  } catch (error) {
    console.error('copy failed:', error)
    copyBtnText.value = '复制失败'
  }

  if (copyBtnTimer) clearTimeout(copyBtnTimer)
  copyBtnTimer = setTimeout(() => {
    copyBtnText.value = '复制'
  }, 1200)
}

onBeforeUnmount(() => {
  if (copyBtnTimer) clearTimeout(copyBtnTimer)
  if (titleOverflowRafId != null) {
    cancelAnimationFrame(titleOverflowRafId)
    titleOverflowRafId = null
  }
  if (!root) return
  root.style.scale = ''
  root.style.translate = ''
  root.style.borderRadius = ''
})

//


const inertiaTransition = {
  type: 'inertia' as const,
  bounceStiffness: 300,
  bounceDamping: 40,
  timeConstant: 300,
}

const staticTransition = {
  duration: 0.5,
  ease: [0.32, 0.72, 0, 1] as const,
}

const SHEET_TOP_RATIO = 0.1
const SHEET_RADIUS = 12
const OFFICIAL_SITE_URL = 'http://www.zwgczx.com.cn/'

let root: HTMLElement | null = null

onMounted(() => {
  root = document.body.firstElementChild as HTMLElement | null
})

const { height, width } = useWindowSize()

const sheetTop = computed(() => Math.round(height.value * SHEET_TOP_RATIO))
const h = computed(() => Math.max(0, height.value - sheetTop.value))
const y = useMotionValue(h.value)

watch(
  () => h.value,
  (nextHeight) => {
    if (!sheetOpen.value) y.jump(nextHeight)
  }
)

watch(
  () => sheetOpen.value,
  (isOpen) => {
    if (!isOpen) {
      y.jump(h.value)
      return
    }
    y.jump(h.value)
    animate(y, 0, staticTransition)
  }
)

// Scale the body down and adjust the border radius when the sheet is open.
const bodyScale = useTransform(
  y,
  [0, h.value],
  [(width.value - sheetTop.value) / width.value, 1],
)
const bodyTranslate = useTransform(y, [0, h.value], [sheetTop.value - SHEET_RADIUS, 0])
const bodyBorderRadius = useTransform(y, [0, h.value], [SHEET_RADIUS, 0])

useMotionValueEvent(bodyScale, 'change', (v) => {
  if (!root) return
  root.style.scale = `${v}`
})
useMotionValueEvent(
  bodyTranslate,
  'change',
  (v) => {
    if (!root) return
    root.style.translate = `0 ${v}px`
  },
)
useMotionValueEvent(
  bodyBorderRadius,
  'change',
  (v) => {
    if (!root) return
    root.style.borderRadius = `${v}px`
  },
)
</script>

<template>
  <TooltipProvider>
  <div class="flex h-full w-full bg-background">
    <div class="w-12/100 border-r p-2 flex flex-col gap-8 relative">
      <div v-if="props.title || props.subtitle || props.metaText" class="space-y-1">
        <TooltipRoot>
          <TooltipTrigger as-child>
            <div v-if="props.title" ref="titleRef" class="title-ellipsis-2 max-w-full font-bold text-base leading-6 text-primary">
              {{ props.title }}
            </div>
          </TooltipTrigger>
          <TooltipContent side="right" :avoid-collisions="false">{{ props.title }}</TooltipContent>
        </TooltipRoot>
        <div v-if="props.subtitle" class="flex min-w-0 items-center gap-2 text-xs leading-5 text-muted-foreground">
          <div class="min-w-0 flex-1">
            <TooltipRoot>
              <TooltipTrigger as-child>
                <span ref="subtitleRef" class="block max-w-full truncate">{{ props.subtitle }}</span>
              </TooltipTrigger>
              <TooltipContent side="right" :avoid-collisions="false">{{ props.subtitle }}</TooltipContent>
            </TooltipRoot>
          </div>
          <Button v-if="props.copyText" type="button" variant="outline" size="sm"
            class="h-6 rounded-md px-2 text-[11px]" @click.stop="handleCopySubtitle">
            {{ copyBtnText }}
          </Button>
        </div>
        <div v-if="props.metaText" class="text-xs leading-5 text-muted-foreground">
          {{ props.metaText }}
        </div>
      </div>

      <div class="flex flex-col gap-10 relative">
        <div class="absolute left-[11px] top-2 bottom-2 w-[2px] bg-muted"></div>

        <div v-for="item in props.categories" :key="item.key"
          class="relative flex items-center gap-4 cursor-pointer group" @click="switchCategory(item.key)">
          <div :class="[
            'z-10 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all',
            activeCategory === item.key
              ? 'bg-primary border-primary scale-110'
              : 'bg-background border-muted-foreground'
          ]">
            <div v-if="activeCategory === item.key" class="w-2 h-2 bg-background rounded-full"></div>
          </div>
          <span :class="[
            'text-sm transition-colors',
            activeCategory === item.key
              ? 'font-bold text-primary'
              : 'text-muted-foreground group-hover:text-foreground'
          ]">
            {{ item.label }}
          </span>
        </div>
      </div>

      <DialogRoot v-model:open="sheetOpen">
        <DialogTrigger as-child>
          <button type="button"
            class="cursor-pointer absolute left-4 right-4 bottom-4 flex flex-col items-center gap-1.5 rounded-lg border bg-muted/35 px-3 py-2 text-center text-[12px] leading-5 text-foreground/85 shadow-sm transition-colors hover:bg-muted/55 hover:text-foreground">
            <img src="/favicon.ico" alt="众为咨询" class="h-5 w-5 shrink-0 rounded-sm" />
            <span>本网站由众为工程咨询有限公司提供免费技术支持</span>
          </button>
        </DialogTrigger>
        <DialogPortal>
          <AnimatePresence multiple as="div">
            <DialogOverlay as-child>
              <Motion class="fixed inset-0 z-10 bg-black/45 backdrop-blur-[2px]" :initial="{ opacity: 0 }"
                :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :transition="staticTransition" />
            </DialogOverlay>

            <DialogContent as-child>
              <Motion
                class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-border/60 bg-card/95 shadow-2xl backdrop-blur-xl will-change-transform"
                :style="{
                  y,
                  top: `${sheetTop}px`,
                }" drag="y" :drag-constraints="{ top: 0 }" @drag-end="(e, { offset, velocity }) => {
                  if (offset.y > h * 0.35 || velocity.y > 10) {
                    sheetOpen = false;
                  }
                  else {
                    animate(y, 0, { ...inertiaTransition, min: 0, max: 0 });
                  }
                }">
                <div
                  class="mx-auto mt-2 h-1.5 w-12 cursor-grab rounded-full bg-muted-foreground/35 active:cursor-grabbing" />
                <div class="mx-auto flex h-full w-full max-w-2xl flex-col px-4 pb-5 pt-3">
                  <div class="mb-3">
                    <div class="flex justify-end">
                      <DialogClose
                        class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-muted-foreground/30 text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground">
                        <svg viewBox="0 0 24 24" class="h-4 w-4" aria-hidden="true">
                          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="M18 6L6 18M6 6l12 12" />
                        </svg>
                      </DialogClose>
                    </div>
                    <DialogTitle class="mt-2">
                      <div class="flex items-center gap-3">
                        <img src="/favicon.ico" alt="众为咨询" class="h-7 w-7 shrink-0 rounded-sm" />
                        <span class="text-2xl font-semibold leading-none">关于我们</span>
                      </div>
                    </DialogTitle>
                  </div>

                  <DialogDescription class="mb-4 text-base text-muted-foreground">
                    <div class="flex items-center gap-2">
                      <a :href="OFFICIAL_SITE_URL" target="_blank" rel="noopener noreferrer"
                        class="inline-flex cursor-pointer items-center font-medium text-foreground transition-colors hover:text-primary hover:underline">
                        众为工程咨询有限公司
                      </a>
                      <a :href="OFFICIAL_SITE_URL" target="_blank" rel="noopener noreferrer"
                        class="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-muted-foreground/30 text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground"
                        aria-label="跳转到官网首页" title="官网首页">
                        <svg viewBox="0 0 24 24" class="h-4 w-4" aria-hidden="true">
                          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="M7 7h10v10M7 17L17 7" />
                        </svg>
                      </a>
                    </div>
                  </DialogDescription>

                  <div class="space-y-4 overflow-y-auto pr-1 text-[15px] leading-7">
                    <p>
                      众为工程咨询有限公司 2009
                      年成立，专注工程造价与工程成本管控全过程咨询，是广东省政府审计入库优选单位。公司服务覆盖多领域、全类型客户，累计服务投资额超万亿元，深度参与港珠澳大桥、澳门大学横琴校区等国家级重点工程，参编三十余项国家及省市行业标准。
                    </p>
                    <p>
                      公司立足大湾区，布局全球，设有澳门公司、斯里兰卡分公司，具备跨境与海外项目服务能力，以十五年专业沉淀、万亿级项目经验，为客户提供精准、可靠的工程咨询服务。
                    </p>
                  </div>
                </div>
              </Motion>
            </DialogContent>
          </AnimatePresence>
        </DialogPortal>
      </DialogRoot>

    </div>

    <div class="w-88/100 min-h-0 h-full flex flex-col">
      <ScrollArea class="h-full w-full min-h-0 rightMain">
        <div class="p-3 h-full min-h-0 flex flex-col">
          <keep-alive>
            <component :is="activeComponent" />
          </keep-alive>
        </div>
      </ScrollArea>
    </div>
  </div>
  </TooltipProvider>
</template>
<style scoped>
/* 核心修改：添加 :deep() 穿透 scoped 作用域 */
:deep(.rightMain > div > div) {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.title-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
</style>
