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

		<scroll-view class="text-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
			<view class="text-demo-page xtf-safe-bottom xtf-page-scroll-content">
				<view class="text-demo-hero">
					<XtfText class="text-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
					<XtfText class="text-demo-title" level="display" color="inverse" text="Text" />
					<XtfText class="text-demo-intro" level="caption" color="inverse" text="为标题、正文、辅助说明和交互文本提供统一的排版能力。" />
				</view>

				<view class="text-demo-section">
					<XtfText class="text-demo-section-title" level="h3" text="排版层级" />
					<XtfText class="text-demo-section-desc" level="caption" color="secondary" text="从展示标题到微文案的字号和字重预设。" />
					<view class="text-demo-item"><XtfText level="display" text="Display" /></view>
					<view class="text-demo-item"><XtfText level="title" text="Title heading" /></view>
					<view class="text-demo-item"><XtfText level="h1" text="Heading one" /></view>
					<view class="text-demo-item"><XtfText level="h2" text="Heading two" /></view>
					<view class="text-demo-item"><XtfText level="h3" text="Heading three" /></view>
					<view class="text-demo-item"><XtfText level="h4" text="Heading four" /></view>
					<view class="text-demo-item"><XtfText level="body" text="Body text for regular content and descriptions." /></view>
					<view class="text-demo-item"><XtfText level="caption" text="Caption text for secondary context." /></view>
					<view class="text-demo-item"><XtfText level="micro" text="Micro information" /></view>
					<XtfText level="label" text="Form label" />
				</view>

				<view class="text-demo-section">
					<XtfText class="text-demo-section-title" level="h3" text="语义颜色" />
					<XtfText class="text-demo-section-desc" level="caption" color="secondary" text="颜色随 Provider 主题变量更新。" />
					<view class="text-demo-item"><XtfText color="primary" text="Primary text" /></view>
					<view class="text-demo-item"><XtfText color="success" text="Success text" /></view>
					<view class="text-demo-item"><XtfText color="warning" text="Warning text" /></view>
					<view class="text-demo-item"><XtfText color="danger" text="Danger text" /></view>
					<view class="text-demo-item"><XtfText color="secondary" text="Secondary text" /></view>
					<view class="text-demo-item"><XtfText color="disabled" text="Disabled text" /></view>
					<XtfText color="link" text="Link style text" />
				</view>

				<view class="text-demo-section">
					<XtfText class="text-demo-section-title" level="h3" text="对齐与强调" />
					<XtfText class="text-demo-section-desc" level="caption" color="secondary" text="align、bold、underline、delete-line。" />
					<view class="text-demo-item"><XtfText align="left" text="Left aligned text" /></view>
					<view class="text-demo-item"><XtfText align="center" text="Center aligned text" /></view>
					<view class="text-demo-item"><XtfText align="right" text="Right aligned text" /></view>
					<view class="text-demo-item"><XtfText bold text="Bold emphasis" /></view>
					<view class="text-demo-item"><XtfText underline text="Underline emphasis" /></view>
					<view class="text-demo-item"><XtfText delete-line text="Deleted text" /></view>
					<XtfText text="Regular paragraph text remains predictable across Web and native platforms." />
				</view>

				<view class="text-demo-section">
					<XtfText class="text-demo-section-title" level="h3" text="单行省略与复制" />
					<XtfText class="text-demo-section-desc" level="caption" color="secondary" text="点击下方文本复制，结果仅在系统回调后更新。" />
					<view class="text-demo-ellipsis-box"><XtfText :lines="1" text="This is a long line that demonstrates native single-line ellipsis behavior across the supported platforms." /></view>
					<view class="text-demo-copy-box"><XtfText copyable color="primary" text="Tap this text to copy its content" @copy="countCopy" @copy-error="copyError" /></view>
					<XtfText class="text-demo-copy-count" level="caption" color="secondary" :text="'Copied: ' + copyCount" />
				</view>
				<view class="text-demo-section">
					<XtfText level="h3" text="订单摘要与展开" />
					<view class="text-demo-ellipsis-box"><XtfText id="text-multiline" :lines="expanded ? 0 : 2" :indent="indented" :delete-line="deleted" :text="summary" /></view>
					<button id="text-expand" @click="expanded = !expanded">{{ expanded ? '收起为两行' : '展开全文' }}</button>
					<button id="text-indent" @click="indented = !indented">切换首行缩进</button>
					<button id="text-delete" @click="deleted = !deleted">切换删除线</button>
				</view>
				<view class="text-demo-section">
					<XtfText level="h3" text="独立复制、插槽与事件" />
					<input id="text-source" v-model="source" placeholder="复制源，支持空文本" />
					<view class="text-demo-copy-box"><XtfText id="text-slot-copy" :text="source" :copyable="copyable" :clickable="clickable" selectable @copy="countCopy" @copy-error="copyError" @click="clicks++" @tap="taps++" @longpress="longpresses++"><text>复制订单编号（插槽展示）</text></XtfText></view>
					<button id="text-copyable" @click="copyable = !copyable">复制 {{ copyable }}</button>
					<button id="text-clickable" @click="clickable = !clickable">点击事件 {{ clickable }}</button>
					<button id="text-reset" @click="reset">外部重置</button>
					<text id="text-events">click={{ clicks }} tap={{ taps }} longpress={{ longpresses }} / {{ copyResult }}</text>
				</view>
			</view>
		</scroll-view>
	</XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
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 { ref } from "vue"

const copyCount = ref(0)

const expanded = ref(false), indented = ref(true), deleted = ref(false)
const source = ref("ORDER-A001"), copyable = ref(true), clickable = ref(false)
const clicks = ref(0), taps = ref(0), longpresses = ref(0), copyResult = ref("等待复制回调")
const summary = "订单 A001：三件商品已付款，仓库正在安排出库。收货地址和发票资料已经确认，请留意物流通知。".repeat(6)
function countCopy(value: string): void {
	copyCount.value += 1
	copyResult.value = "复制成功：" + value
}
function copyError(error: any): void { copyResult.value = "复制失败：" + JSON.stringify(error) }
function reset(): void { source.value = "ORDER-A001"; copyable.value = true; clickable.value = false; clicks.value = 0; taps.value = 0; longpresses.value = 0; copyCount.value = 0; copyResult.value = "等待复制回调"; expanded.value = false; indented.value = true; deleted.value = false }
</script>

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