<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="avatar-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
      <view class="avatar-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="avatar-demo-hero">
          <XtfText class="avatar-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="avatar-demo-title" level="display" color="inverse" text="Avatar" />
          <XtfText class="avatar-demo-intro" level="caption" color="inverse" text="用于展示用户头像、名称首字和在线状态。" />
        </view>
        <view class="avatar-demo-section">
          <XtfText class="avatar-demo-section-title" level="h3" text="图片与文本" />
          <XtfText class="avatar-demo-section-desc" level="caption" color="secondary" text="图片不可用时自动显示文本首字。" />
          <view class="avatar-demo-row">
            <view id="avatar-local" class="avatar-demo-avatar-item"><XtfAvatar src="/static/logo.png" size="xl" status="online" clickable @click="recordClick" /></view>
            <view id="avatar-initial-lin" class="avatar-demo-avatar-item"><XtfAvatar text="  Lin  " size="xl" theme="success" status="away" clickable @click="recordClick" /></view>
            <view id="avatar-initial-cjk" class="avatar-demo-avatar-item"><XtfAvatar name=" 王小明 " size="xl" theme="warning" status="busy" clickable @click="recordClick" /></view>
            <view class="avatar-demo-avatar-item"><XtfAvatar text="?" size="xl" theme="info" status="offline" clickable @click="recordClick" /></view>
            <view id="avatar-initial-john" class="avatar-demo-avatar-item"><XtfAvatar name="  John   Smith  " size="xl" theme="info" /></view>
            <view id="avatar-initial-blank-text" class="avatar-demo-avatar-item"><XtfAvatar text="   " name="John Smith" size="xl" /></view>
            <view id="avatar-fallback-icon" class="avatar-demo-avatar-item"><XtfAvatar text="   " name="   " size="xl" /></view>
          </view>
        </view>
        <view class="avatar-demo-section">
          <XtfText class="avatar-demo-section-title" level="h3" text="尺寸" />
          <XtfText class="avatar-demo-section-desc" level="caption" color="secondary" text="xs、sm、md、lg 和 xl 预设。" />
          <view class="avatar-demo-row avatar-demo-row-bottom">
            <view class="avatar-demo-avatar-item"><XtfAvatar text="X" size="xs" /></view>
            <view class="avatar-demo-avatar-item"><XtfAvatar text="S" size="sm" theme="success" /></view>
            <view class="avatar-demo-avatar-item"><XtfAvatar text="M" size="md" theme="warning" /></view>
            <view class="avatar-demo-avatar-item"><XtfAvatar text="L" size="lg" theme="danger" /></view>
            <view class="avatar-demo-avatar-item"><XtfAvatar text="XL" size="xl" theme="info" /></view>
          </view>
        </view>
        <view class="avatar-demo-section">
          <XtfText class="avatar-demo-section-title" level="h3" text="形状与主题" />
          <XtfText class="avatar-demo-section-desc" level="caption" color="secondary" text="circle、rounded、square 和语义主题色。" />
          <view class="avatar-demo-row">
            <view class="avatar-demo-avatar-item"><XtfAvatar text="C" size="xl" shape="circle" /></view>
            <view class="avatar-demo-avatar-item"><XtfAvatar text="R" size="xl" shape="rounded" theme="success" /></view>
            <view class="avatar-demo-avatar-item"><XtfAvatar text="S" size="xl" shape="square" theme="danger" /></view>
            <view class="avatar-demo-avatar-item"><XtfAvatar text="#" size="xl" color="#7c3aed" text-color="#ffffff" /></view>
          </view>
        </view>
        <view class="avatar-demo-section">
          <XtfText class="avatar-demo-section-title" level="h3" text="点击事件" />
          <XtfText class="avatar-demo-section-desc" level="caption" color="secondary" text="点击与非点击对照" />
          <view class="avatar-demo-event-panel">
            <view id="avatar-clickable" class="avatar-demo-avatar-item"><XtfAvatar text="Tap" size="lg" theme="info" clickable @click="recordClick" /></view>
            <view id="avatar-not-clickable" class="avatar-demo-avatar-item"><XtfAvatar text="No" size="lg" theme="secondary" :clickable="false" @click="recordBlockedClick" /></view>
            <XtfText class="avatar-demo-event-label" level="label" color="secondary" text="点击次数" />
            <XtfText id="avatar-click-count" class="avatar-demo-event-value" level="h3" color="primary" align="right" :text="clickCount.toString()" />
          </view>
          <text id="avatar-blocked-click-count" class="avatar-demo-result">非点击事件：{{ blockedClickCount }}</text>
        </view>
        <view id="avatar-recovery-scene" class="avatar-demo-section">
          <XtfText class="avatar-demo-section-title" level="h3" text="图片状态切换" />
          <view class="avatar-demo-row">
            <view id="avatar-recovery" class="avatar-demo-avatar-item"><XtfAvatar :src="recoverySrc" name="John Smith" size="xl" clickable @load="recordLoad" @error="recordError" @click="recordClick" /></view>
            <text id="avatar-image-state" class="avatar-demo-result">{{ imageState }}</text>
          </view>
          <view class="avatar-demo-controls">
            <button id="avatar-src-bad" class="avatar-demo-control" @click="setSource('bad')">坏图</button>
            <button id="avatar-src-local" class="avatar-demo-control" @click="setSource('local')">本地图片</button>
            <button id="avatar-src-empty" class="avatar-demo-control" @click="setSource('empty')">清空 src</button>
          </view>
          <text id="avatar-current-src" class="avatar-demo-result">src：{{ recoverySrc }}</text>
          <text id="avatar-load-count" class="avatar-demo-result">load：{{ loadCount }}</text>
          <text id="avatar-error-count" class="avatar-demo-result">error：{{ errorCount }}</text>
          <text id="avatar-last-error" class="avatar-demo-result">失败地址：{{ lastErrorSrc }}</text>
        </view>
        <view id="avatar-decoration-scene" class="avatar-demo-section">
          <XtfText class="avatar-demo-section-title" level="h3" text="在线状态、描边与发光" />
          <view class="avatar-demo-row">
            <view id="avatar-ring" class="avatar-demo-avatar-item"><XtfAvatar text="Lin" size="xl" status="online" ring ring-color="#16a34a" /></view>
            <view id="avatar-glow" class="avatar-demo-avatar-item"><XtfAvatar name="王小明" size="xl" status="busy" theme="warning" glow /></view>
            <view id="avatar-ring-glow" class="avatar-demo-avatar-item"><XtfAvatar name="John Smith" size="xl" status="away" theme="danger" ring glow /></view>
          </view>
        </view>
        <view id="avatar-dynamic-scene" class="avatar-demo-section">
          <XtfText class="avatar-demo-section-title" level="h3" text="动态尺寸与形状" />
          <view class="avatar-demo-row">
            <view id="avatar-dynamic" class="avatar-demo-avatar-item"><XtfAvatar text="Lin" :size="dynamicSize" :shape="dynamicShape" theme="success" /></view>
            <text id="avatar-dynamic-state" class="avatar-demo-result">{{ dynamicSize }} / {{ dynamicShape }}</text>
          </view>
          <view class="avatar-demo-controls">
            <button id="avatar-size-next" class="avatar-demo-control" @click="nextSize">切换尺寸</button>
            <button id="avatar-shape-next" class="avatar-demo-control" @click="nextShape">切换形状</button>
          </view>
          <view class="avatar-demo-row">
            <view id="avatar-size-numeric" class="avatar-demo-avatar-item"><XtfAvatar text="80" size="80" /></view>
            <view id="avatar-size-invalid" class="avatar-demo-avatar-item"><XtfAvatar text="Bad" size="invalid" /></view>
            <view id="avatar-size-negative" class="avatar-demo-avatar-item"><XtfAvatar text="Neg" size="-10px" /></view>
            <view id="avatar-size-zero" class="avatar-demo-avatar-item"><XtfAvatar text="0" size="0" /></view>
          </view>
        </view>
        <view class="avatar-demo-section"><XtfText level="h3" text="两色头像与独立描边" /><button id="basic-avatar-gradient-toggle" @click="gradient = !gradient">切换结束色</button><XtfAvatar id="basic-avatar-gradient" name="Lin" :size="96" color="#2563eb" :gradient-end-color="gradient ? '#7c3aed' : ''" ring ring-color="#16a34a" /><text class="avatar-demo-result">绿色描边保持独立</text></view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { 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 XtfAvatar from "@/uni_modules/xtf-linkuiunix/components/xtf-avatar/xtf-avatar.uvue"

const clickCount = ref(0)
const gradient = ref(true)
const blockedClickCount = ref(0)
const loadCount = ref(0)
const errorCount = ref(0)
const lastErrorSrc = ref("")
const badSrc = "/static/avatar-intentionally-missing.png"
const recoverySrc = ref(badSrc)
const imageState = ref("加载中")
const sizes = ["lg", "hero", "96", "48px", "invalid", "0", "-10px"]
const shapes = ["circle", "rounded", "square", "rect", "squircle"]
let sizeIndex = 0
let shapeIndex = 0
const dynamicSize = ref("lg")
const dynamicShape = ref<"circle" | "rounded" | "square" | "rect" | "squircle">("circle")

function setSource(kind: string): void {
  const src = kind == "bad" ? badSrc : (kind == "local" ? "/static/logo.png" : "")
  if (src == recoverySrc.value) return
  imageState.value = src.length == 0 ? "空 src / 文本回退" : "加载中"
  recoverySrc.value = src
}
function recordLoad(): void { loadCount.value += 1; imageState.value = "图片已加载" }
function recordError(src: string): void { errorCount.value += 1; lastErrorSrc.value = src; imageState.value = "加载失败 / 文本回退" }
function recordBlockedClick(): void { blockedClickCount.value += 1 }
function nextSize(): void { sizeIndex = (sizeIndex + 1) % sizes.length; dynamicSize.value = sizes[sizeIndex] }
function nextShape(): void {
  shapeIndex = (shapeIndex + 1) % shapes.length
  dynamicShape.value = shapes[shapeIndex] as "circle" | "rounded" | "square" | "rect" | "squircle"
}

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

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