<template>
	<XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">

		<scroll-view class="button-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
			<view class="button-demo-page xtf-safe-bottom xtf-page-scroll-content">
				<view class="button-demo-hero">
					<XtfText class="button-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
					<XtfText class="button-demo-title" level="display" color="inverse" text="Button" />
					<XtfText class="button-demo-intro" level="caption" color="inverse" text="用于触发操作、提交状态与强调业务动作的基础按钮。" />
				</view>

				<view class="button-demo-section">
					<XtfText class="button-demo-section-title" level="h3" text="基础与语义主题" />
					<XtfText class="button-demo-section-desc" level="caption" color="secondary" text="默认 primary，以及 success、warning、danger、info 语义色。" />
					<view class="button-demo-stack">
						<view class="button-demo-item"><XtfButton label="Primary action" block /></view>
						<view class="button-demo-row">
							<view class="button-demo-half"><XtfButton label="Success" theme="success" block /></view>
							<view class="button-demo-half button-demo-half-right"><XtfButton label="Warning" theme="warning" block /></view>
						</view>
						<view class="button-demo-row">
							<view class="button-demo-half"><XtfButton label="Danger" theme="danger" block /></view>
							<view class="button-demo-half button-demo-half-right"><XtfButton label="Info" theme="info" block /></view>
						</view>
					</view>
				</view>

				<view class="button-demo-section">
					<XtfText class="button-demo-section-title" level="h3" text="按钮类型" />
					<XtfText class="button-demo-section-desc" level="caption" color="secondary" text="同一主题在不同视觉层级下的呈现。" />
					<view class="button-demo-stack">
						<view class="button-demo-item"><XtfButton label="Solid" type="solid" block /></view>
						<view class="button-demo-item"><XtfButton label="Light" type="light" block /></view>
						<view class="button-demo-item"><XtfButton label="Outline" type="outline" block /></view>
						<view class="button-demo-item"><XtfButton label="Ghost" type="ghost" block /></view>
						<view class="button-demo-item"><XtfButton label="Neo" type="neo" block /></view>
					</view>
				</view>

				<view class="button-demo-section">
					<XtfText class="button-demo-section-title" level="h3" text="尺寸" />
					<XtfText class="button-demo-section-desc" level="caption" color="secondary" text="xs、sm、md、lg、xl 尺寸预设。" />
					<view class="button-demo-size-item"><XtfButton label="Extra small" size="xs" /></view>
					<view class="button-demo-size-item"><XtfButton label="Small" size="sm" /></view>
					<view class="button-demo-size-item"><XtfButton label="Medium" size="md" /></view>
					<view class="button-demo-size-item"><XtfButton label="Large" size="lg" /></view>
					<view class="button-demo-size-item"><XtfButton label="Extra large" size="xl" /></view>
				</view>

				<view class="button-demo-section">
					<XtfText class="button-demo-section-title" level="h3" text="形状与宽度" />
					<XtfText class="button-demo-section-desc" level="caption" color="secondary" text="round、square 和 block 属性。" />
					<view class="button-demo-row">
						<view class="button-demo-half"><XtfButton label="Round" round type="light" block /></view>
						<view class="button-demo-half button-demo-half-right"><XtfButton label="Square" shape="square" type="outline" block /></view>
					</view>
					<view class="button-demo-top-item"><XtfButton label="Block button" theme="success" block /></view>
				</view>

				<view class="button-demo-section">
					<XtfText class="button-demo-section-title" level="h3" text="自定义颜色" />
					<XtfText class="button-demo-section-desc" level="caption" color="secondary" text="color 和 soft-color 覆盖语义主题色。" />
					<view class="button-demo-item"><XtfButton label="Custom solid" color="#7c3aed" block /></view>
					<view class="button-demo-item"><XtfButton label="Custom light" type="light" color="#0f766e" soft-color="#ccfbf1" block /></view>
					<view class="button-demo-item"><XtfButton label="Custom outline" type="outline" color="#c2410c" block /></view>
				</view>

				<view class="button-demo-section">
					<XtfText class="button-demo-section-title" level="h3" text="状态与事件" />
					<XtfText class="button-demo-section-desc" level="caption" color="secondary" text="加载、禁用、点击节流、点击和长按事件。" />
					<view class="button-demo-stack">
						<view class="button-demo-item"><XtfButton :label="loading ? 'Submitting' : 'Submit request'" :loading="loading" block @click="submit" /></view>
						<view class="button-demo-item"><XtfButton label="Disabled action" disabled type="light" block /></view>
						<view class="button-demo-item"><XtfButton label="Tap once per second" :throttle="1000" type="outline" block @click="countTap" /></view>
						<view class="button-demo-item"><XtfButton label="Press and hold" theme="info" type="light" block @longpress="countLongPress" /></view>
					</view>
					<view class="button-demo-event-panel">
						<XtfText class="button-demo-event-label" level="label" color="secondary" text="Throttle clicks" />
						<XtfText class="button-demo-event-value" level="h3" color="primary" :text="tapCount.toString()" />
						<XtfText class="button-demo-event-label button-demo-event-label-spaced" level="label" color="secondary" text="Long presses" />
						<XtfText class="button-demo-event-value" level="h3" color="primary" :text="longPressCount.toString()" />
					</view>
				</view>

				<view class="button-demo-section">
					<XtfText class="button-demo-section-title" level="h3" text="前后插槽" />
					<XtfText class="button-demo-section-desc" level="caption" color="secondary" text="prefix 与 suffix 插槽可放入图标或自定义内容。" />
					<view class="button-demo-item">
						<XtfButton label="Search" type="outline" block @click="countTap">
							<template #prefix><XtfIcon name="search" size="sm" theme="primary" /></template>
							<template #suffix><XtfIcon name="expand_more" size="sm" theme="primary" /></template>
						</XtfButton>
					</view>
					<view class="button-demo-item">
						<XtfButton label="Saved" theme="success" type="light" block>
							<template #prefix><XtfIcon name="success" size="sm" theme="success" /></template>
						</XtfButton>
					</view>
				</view>
				<view class="button-demo-section">
					<XtfText level="h3" text="可操作状态与键盘" />
					<button id="basic-button-lock" @click="locked = !locked">全局禁用 {{ locked }}</button>
					<button id="basic-button-reset" @click="reset">重置提交与事件</button>
					<XtfConfigProvider :theme="demoTheme" :disabled="locked" component-size="sm">
						<XtfButton id="basic-button" :disabled="false" :loading="loading" :throttle="1000" label="确认提交订单 A001，长文案在窄容器中省略" block @click="recordClick" @tap="recordTap" @longpress="countLongPress"><template #prefix><XtfIcon name="check" size="xs" theme="inverse" /></template></XtfButton>
					</XtfConfigProvider>
					<text id="basic-button-result">{{ submitResult }} · click={{ rawClicks }} tap={{ rawTaps }} 同一事件={{ sameEvent }} · {{ eventType }}</text>
				</view>
			</view>

		</scroll-view>
	</XtfConfigProvider>
</template>

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

const loading = ref(false)
const tapCount = ref(0)
const longPressCount = ref(0)
const locked = ref(false), rawClicks = ref(0), rawTaps = ref(0), sameEvent = ref(false), eventType = ref('')
const submitResult = ref('等待提交')
let submitTimer = 0
let clickEvent: UniPointerEvent | null = null

function submit(): void {
	if (loading.value) return
	loading.value = true
	submitResult.value = '正在提交订单 A001'
	submitTimer = setTimeout(() => { submitTimer = 0; loading.value = false; submitResult.value = '订单 A001 已提交' }, 1200) as number
}
function recordClick(event: UniPointerEvent): void { rawClicks.value++; clickEvent = event; eventType.value = event.type; submit() }
function recordTap(event: UniPointerEvent): void { rawTaps.value++; sameEvent.value = clickEvent === event }
function reset(): void { if (submitTimer > 0) clearTimeout(submitTimer); submitTimer = 0; loading.value = false; locked.value = false; rawClicks.value = 0; rawTaps.value = 0; tapCount.value = 0; longPressCount.value = 0; sameEvent.value = false; submitResult.value = '等待提交'; clickEvent = null }
onUnmounted(() => { if (submitTimer > 0) clearTimeout(submitTimer) })

function countTap(): void {
	tapCount.value += 1
}

function countLongPress(): void {
	longPressCount.value += 1
}
</script>

<style>
.button-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }
.button-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.button-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.button-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.button-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.button-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.button-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); }
.button-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.button-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.button-demo-stack { display: flex; flex-direction: column; }
.button-demo-item { margin-bottom: 14rpx; }
.button-demo-row { display: flex; flex-direction: row; margin-bottom: 14rpx; }
.button-demo-half { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.button-demo-half-right { margin-left: 14rpx; }
.button-demo-size-item { display: flex; flex-direction: row; align-items: center; margin-bottom: 16rpx; }
.button-demo-top-item { margin-top: 14rpx; }
.button-demo-event-panel { display: flex; flex-direction: row; align-items: center; padding: 18rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }
.button-demo-event-label { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.button-demo-event-label-spaced { margin-left: 24rpx; }
.button-demo-event-value { margin-left: 8rpx; color: var(--xtf-color-primary, #2563eb); font-size: 26rpx; font-weight: 700; }
</style>
