<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
    <view class="back-top-demo-status">
      <text id="back-top-status" class="back-top-demo-status-text">{{ scrollTop.toFixed(0) }}px / {{ threshold }}px · {{ scrollTop >= threshold ? '显示' : '隐藏' }} · {{ progress }}%</text>
      <text id="back-top-click-count" class="back-top-demo-status-text">点击 {{ clickCount }} 次</text>
      <view class="back-top-demo-actions">
        <XtfButton id="back-top-below" class="back-top-demo-action" label="阈值 -1" size="sm" type="outline" @click="scrollToPosition(threshold - 1)" />
        <XtfButton id="back-top-equal" class="back-top-demo-action" label="等于阈值" size="sm" type="outline" @click="scrollToPosition(threshold)" />
        <XtfButton id="back-top-above" label="阈值 +1" size="sm" type="outline" @click="scrollToPosition(threshold + 1)" />
      </view>
    </view>
    <scroll-view id="back-top-scroll" ref="scrollViewRef" class="back-top-demo-scroll xtf-page-scroll" :scroll-top="scrollTarget" @scroll="handleScroll" direction="vertical">
      <view class="back-top-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view id="back-top-start" class="back-top-demo-hero">
          <XtfText class="back-top-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="back-top-demo-title" level="display" color="inverse" text="Back Top" />
          <XtfText class="back-top-demo-intro" level="caption" color="inverse" text="回到顶部" />
        </view>

        <view class="back-top-demo-section">
          <XtfText class="back-top-demo-section-title" level="h3" text="显示阈值" />
          <view class="back-top-demo-actions">
            <XtfButton v-for="value in thresholds" :id="'back-top-threshold-' + value" :key="value" class="back-top-demo-action" :label="value + 'px'" size="sm" :type="threshold == value ? 'solid' : 'outline'" @click="threshold = value" />
          </view>
        </view>

        <view class="back-top-demo-section">
          <XtfText class="back-top-demo-section-title" level="h3" text="位置与类型" />
          <view class="back-top-demo-actions">
            <XtfButton class="back-top-demo-action" label="靠右" size="sm" :type="right == 28 ? 'solid' : 'outline'" @click="right = 28" />
            <XtfButton class="back-top-demo-action" label="内收" size="sm" :type="right == 72 ? 'solid' : 'outline'" @click="right = 72" />
            <XtfButton id="back-top-bottom" label="底部位置" size="sm" type="outline" @click="bottom = bottom == 72 ? 160 : 72" />
          </view>
          <view class="back-top-demo-actions">
            <XtfButton v-for="value in variants" :key="value" class="back-top-demo-action" :label="value" size="sm" :type="variant == value ? 'solid' : 'outline'" @click="variant = value" />
          </view>
        </view>

        <view class="back-top-demo-section">
          <XtfText class="back-top-demo-section-title" level="h3" text="尺寸与形状" />
          <view class="back-top-demo-actions">
            <XtfButton v-for="value in sizes" :key="value" class="back-top-demo-action" :label="value" size="sm" :type="size == value ? 'solid' : 'outline'" @click="size = value" />
          </view>
          <view class="back-top-demo-actions">
            <XtfButton v-for="value in shapes" :key="value" class="back-top-demo-action" :label="value" size="sm" :type="shape == value ? 'solid' : 'outline'" @click="shape = value" />
          </view>
        </view>

        <view class="back-top-demo-section">
          <XtfText class="back-top-demo-section-title" level="h3" text="内容" />
          <view class="back-top-demo-actions">
            <XtfButton id="back-top-text-toggle" class="back-top-demo-action" :label="showText ? '隐藏文字' : '显示文字'" size="sm" type="outline" @click="showText = !showText" />
            <XtfButton id="back-top-progress-toggle" class="back-top-demo-action" :label="showProgress ? '隐藏进度' : '显示进度'" size="sm" type="outline" @click="showProgress = !showProgress" />
            <XtfButton id="back-top-direction" label="切换方向" size="sm" type="outline" @click="contentDirection = contentDirection == 'row' ? 'column' : 'row'" />
          </view>
          <view class="back-top-demo-actions">
            <XtfButton id="back-top-image-toggle" class="back-top-demo-action" :label="showImage ? '使用图标' : '使用图片'" size="sm" type="outline" @click="showImage = !showImage" />
            <XtfButton id="back-top-slot-toggle" :label="useSlot ? '默认内容' : '自定义插槽'" size="sm" type="outline" @click="useSlot = !useSlot" />
          </view>
        </view>

        <view v-for="item in items" :key="item" class="back-top-demo-item">
          <XtfText class="back-top-demo-item-index" level="label" color="primary" :text="item.toString()" />
          <XtfText class="back-top-demo-item-label" level="body" :text="'滚动内容 ' + item" />
        </view>
        <text id="back-top-end" class="back-top-demo-end">到底了</text>
      </view>
    </scroll-view>
    <XtfBackTop id="back-top-control" target="#back-top-scroll" :scroll-top="scrollTop" :threshold="threshold" :right="right" :bottom="bottom" :variant="variant" :size="size" :shape="shape" :text="showText ? '顶部' : ''" :image="showImage ? '/static/logo.png' : ''" :image-size="36" :show-progress="showProgress" :progress="progress" :content-direction="contentDirection" @click="handleBackTopClick">
      <template v-if="useSlot" #default>
        <view id="back-top-slot" class="back-top-demo-slot">
          <XtfIcon name="north" :size="32" color="#ffffff" />
          <text class="back-top-demo-slot-text">回顶</text>
        </view>
      </template>
    </XtfBackTop>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { nextTick, ref } from "vue"
import XtfBackTop from "@/uni_modules/xtf-linkuiunix/components/xtf-back-top/xtf-back-top.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"
import XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"

type BackTopVariant = "solid" | "soft" | "outline" | "glass" | "minimal" | "elevated"
type BackTopSize = "sm" | "md" | "lg"
type BackTopShape = "round" | "square" | "pill"
type BackTopDirection = "row" | "column"

const scrollTop = ref(0)
const scrollTarget = ref(0)
const scrollViewRef = ref<UniScrollViewElement | null>(null)
const threshold = ref(400)
const thresholds = [200, 400, 700]
const right = ref(28)
const bottom = ref(72)
const variant = ref<BackTopVariant>("solid")
const variants: BackTopVariant[] = ["solid", "soft", "outline", "glass", "minimal", "elevated"]
const size = ref<BackTopSize>("md")
const sizes: BackTopSize[] = ["sm", "md", "lg"]
const shape = ref<BackTopShape>("round")
const shapes: BackTopShape[] = ["round", "square", "pill"]
const contentDirection = ref<BackTopDirection>("column")
const showText = ref(true)
const showProgress = ref(false)
const showImage = ref(false)
const useSlot = ref(false)
const progress = ref(0)
const clickCount = ref(0)
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

function handleScroll(event: UniScrollEvent): void {
  scrollTop.value = Math.max(0, event.detail.scrollTop)
  const scrollView = scrollViewRef.value
  const viewportHeight = scrollView != null ? scrollView.clientHeight : 0
  const scrollRange = event.detail.scrollHeight - viewportHeight
  progress.value = viewportHeight > 0 && scrollRange > 0
    ? Math.max(0, Math.min(100, Math.round(scrollTop.value / scrollRange * 100)))
    : 0
}

function scrollToPosition(value: number): void {
  // 先同步真实位置，确保手动滚动后重复点击同一目标仍能生效。
  scrollTarget.value = scrollTop.value
  nextTick(() => {
    scrollTarget.value = value
  })
}

function handleBackTopClick(): void {
  // click 是操作通知，不代表滚动已经完成；位置仍由 scroll 事件更新。
  clickCount.value += 1
}
</script>

<style>
.back-top-demo-status { display: flex; flex-direction: column; flex-shrink: 0; padding: 12px; background-color: var(--xtf-color-surface, #ffffff); }
.back-top-demo-status-text { font-size: 13px; line-height: 20px; color: var(--xtf-color-text-secondary, #334155); }
.back-top-demo-scroll { display: flex; flex: 1; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.back-top-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; box-sizing: border-box; background-color: var(--xtf-color-page, #f8fafc); }
.back-top-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.back-top-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.back-top-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.back-top-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; }
.back-top-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.back-top-demo-section-title { margin-bottom: 12px; color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.back-top-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.back-top-demo-action { margin-right: 6px; margin-bottom: 6px; }
.back-top-demo-item { display: flex; flex-direction: row; align-items: center; min-height: 112rpx; margin-top: 16rpx; padding-left: 24rpx; padding-right: 24rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface, #ffffff); }
.back-top-demo-item-index { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 48rpx; height: 48rpx; border-radius: 9999rpx; background-color: var(--xtf-color-primary-soft, #dbeafe); color: var(--xtf-color-primary, #2563eb); font-weight: 700; text-align: center; }
.back-top-demo-item-label { margin-left: 20rpx; color: var(--xtf-color-text, #0f172a); }
.back-top-demo-end { padding: 24px; font-size: 14px; color: var(--xtf-color-text-secondary, #475569); text-align: center; }
.back-top-demo-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; background-color: #15803d; }
.back-top-demo-slot-text { font-size: 11px; color: #ffffff; }
</style>
