<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="countdown-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="countdown-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="countdown-demo-hero">
          <XtfText class="countdown-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="countdown-demo-title" level="display" color="inverse" text="Countdown" />
        </view>

        <view id="countdown-modes" class="countdown-demo-section">
          <text class="countdown-demo-section-title">展示模式与格式</text>
          <view class="countdown-demo-item"><XtfCountdown :time="90061000" format="DD:HH:MM:SS" show-labels /></view>
          <view class="countdown-demo-item"><XtfCountdown :time="3723000" mode="flip" /></view>
          <view class="countdown-demo-item"><XtfCountdown :time="125000" format="MM:SS" mode="text" separator=" / " /></view>
        </view>

        <view id="countdown-order" class="countdown-demo-section">
          <text class="countdown-demo-section-title">订单支付</text>
          <text class="countdown-demo-note">订单 #2026101701 · ¥128.00</text>
          <XtfCountdown ref="orderCountdown" :time="10000" :auto-start="false" format="MM:SS" @finish="orderFinish" />
          <text id="order-status" class="countdown-demo-note">{{ orderStatus }}</text>
          <view class="countdown-demo-actions">
            <XtfButton id="order-create" custom-class="countdown-demo-action" label="创建订单" size="sm" @click="createOrder" />
            <XtfButton id="order-pay" custom-class="countdown-demo-action" label="立即支付" size="sm" theme="success" :disabled="orderStatus != '待支付'" @click="payOrder" />
          </view>
        </view>

        <view id="countdown-code" class="countdown-demo-section">
          <text class="countdown-demo-section-title">验证码</text>
          <XtfCountdown ref="codeCountdown" :time="5000" :auto-start="false" format="SS" mode="text" @finish="codeFinish" />
          <text id="code-status" class="countdown-demo-note">{{ codeStatus }}</text>
          <view class="countdown-demo-actions"><XtfButton id="code-send" label="发送验证码" size="sm" :disabled="codeSending" @click="sendCode" /></view>
        </view>

        <view id="countdown-manual" class="countdown-demo-section">
          <text class="countdown-demo-section-title">手动计时</text>
          <XtfCountdown ref="manualCountdown" :time="15000" format="MM:SS:ms" millisecond :auto-start="false" @change="recordChange" @finish="recordFinish" />
          <view class="countdown-demo-actions">
            <XtfButton id="manual-start" custom-class="countdown-demo-action" label="开始" size="sm" @click="start" />
            <XtfButton id="manual-pause" custom-class="countdown-demo-action" label="暂停" size="sm" type="light" @click="pause" />
            <XtfButton id="manual-resume" custom-class="countdown-demo-action" label="恢复" size="sm" type="outline" @click="resume" />
            <XtfButton id="manual-reset" custom-class="countdown-demo-action" label="重置" size="sm" theme="danger" type="light" @click="reset" />
          </view>
          <text id="manual-status" class="countdown-demo-note">{{ manualStatus }}</text>
          <text id="manual-events" class="countdown-demo-note">{{ eventText }} · change {{ changeCount }} · finish {{ finishCount }}</text>
        </view>

        <view id="countdown-external" class="countdown-demo-section">
          <text class="countdown-demo-section-title">外部时长与精度</text>
          <XtfCountdown :time="externalTime" :auto-start="externalAutoStart" :millisecond="externalMillisecond" format="MM:SS:ms" @change="externalChange" @finish="externalFinish" />
          <text id="external-status" class="countdown-demo-note">time {{ externalTime }}ms · {{ externalText }}</text>
          <view class="countdown-demo-setting"><text class="countdown-demo-label">自动开始</text><switch id="external-auto" :checked="externalAutoStart" @change="toggleAutoStart" /></view>
          <view class="countdown-demo-setting"><text class="countdown-demo-label">毫秒精度</text><switch id="external-ms" :checked="externalMillisecond" @change="toggleMillisecond" /></view>
          <view class="countdown-demo-actions">
            <XtfButton id="external-short" custom-class="countdown-demo-action" label="设为 3 秒" size="sm" @click="setExternalTime(3000)" />
            <XtfButton id="external-long" custom-class="countdown-demo-action" label="设为 8 秒" size="sm" type="light" @click="setExternalTime(8000)" />
          </view>
        </view>

        <view id="countdown-boundary" class="countdown-demo-section">
          <text class="countdown-demo-section-title">边界时长</text>
          <XtfCountdown ref="boundaryCountdown" :time="0" :auto-start="false" format="SS:ms" millisecond @change="boundaryChange" @finish="boundaryFinish" />
          <text id="boundary-status" class="countdown-demo-note">{{ boundaryText }} · finish {{ boundaryFinishCount }}</text>
          <view class="countdown-demo-actions">
            <XtfButton id="boundary-zero" custom-class="countdown-demo-action" label="重置 0" size="sm" type="light" @click="resetBoundary(0)" />
            <XtfButton id="boundary-negative" custom-class="countdown-demo-action" label="重置负数" size="sm" type="light" @click="resetBoundary(-1000)" />
            <XtfButton id="boundary-nan" custom-class="countdown-demo-action" label="重置 NaN" size="sm" type="light" @click="resetBoundary(Number.NaN)" />
            <XtfButton id="boundary-run" custom-class="countdown-demo-action" label="运行 200ms" size="sm" @click="runBoundary" />
            <XtfButton id="boundary-resume" custom-class="countdown-demo-action" label="再次恢复" size="sm" type="outline" @click="resumeBoundary" />
          </view>
        </view>

        <view id="countdown-events" class="countdown-demo-section">
          <text class="countdown-demo-section-title">事件记录</text>
          <text v-if="logs.length == 0" class="countdown-demo-note">暂无记录</text>
          <text v-for="(entry, index) in logs" :key="entry" :id="'countdown-log-' + index" class="countdown-demo-log">{{ entry }}</text>
          <view class="countdown-demo-actions"><XtfButton id="logs-clear" label="清空记录" size="sm" type="light" @click="clearLogs" /></view>
        </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 XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfCountdown from "@/uni_modules/xtf-linkuiunix/components/xtf-countdown/xtf-countdown.uvue"

type TimeParts = { DD: string; HH: string; MM: string; SS: string; ms: string }
const orderCountdown = ref<any>(null)
const codeCountdown = ref<any>(null)
const manualCountdown = ref<any>(null)
const boundaryCountdown = ref<any>(null)
const orderStatus = ref("未创建")
const codeSending = ref(false)
const codeStatus = ref("可发送")
const manualStatus = ref("等待开始")
const eventText = ref("等待 change")
const changeCount = ref(0)
const finishCount = ref(0)
const externalTime = ref(6000)
const externalAutoStart = ref(true)
const externalMillisecond = ref(false)
const externalText = ref("等待 change")
const boundaryText = ref("等待 reset")
const boundaryFinishCount = ref(0)
const logs = ref<string[]>([])
let logSequence = 0
let lastManualSecond = ""

function log(message: string): void {
  logSequence += 1
  logs.value.unshift(logSequence.toString() + " · " + message)
  if (logs.value.length > 12) logs.value.pop()
}
function clearLogs(): void { logs.value = [] }
function createOrder(): void {
  orderCountdown.value?.reset(10000)
  orderStatus.value = "待支付"
  orderCountdown.value?.start()
  log("订单创建，支付窗口 10 秒")
}
function payOrder(): void {
  if (orderStatus.value != "待支付") return
  orderCountdown.value?.pause()
  if (orderStatus.value != "待支付") return
  orderStatus.value = "已支付"
  log("订单支付成功，计时停止")
}
function orderFinish(): void {
  if (orderStatus.value != "待支付") return
  orderStatus.value = "已超时关闭"
  log("订单 finish，超时关闭")
}
function sendCode(): void {
  if (codeSending.value) return
  codeSending.value = true
  codeStatus.value = "已发送，5 秒后可重发"
  codeCountdown.value?.reset(5000)
  codeCountdown.value?.start()
  log("验证码已发送")
}
function codeFinish(): void { codeSending.value = false; codeStatus.value = "倒计时结束，可重新发送"; log("验证码 finish，恢复发送") }
function start(): void { manualCountdown.value?.start(); manualStatus.value = "已请求开始"; log("手动 start") }
function pause(): void { manualCountdown.value?.pause(); manualStatus.value = "已暂停"; log("手动 pause：" + eventText.value) }
function resume(): void { manualCountdown.value?.resume(); manualStatus.value = "已请求恢复"; log("手动 resume") }
function reset(): void { manualCountdown.value?.reset(); manualStatus.value = "已重置为 15 秒，等待开始"; log("手动 reset：" + eventText.value) }
function recordChange(value: TimeParts): void {
  changeCount.value += 1
  eventText.value = value.MM + ":" + value.SS + ":" + value.ms
  const second = value.MM + ":" + value.SS
  if (second != lastManualSecond) { lastManualSecond = second; log("手动 change " + eventText.value) }
}
function recordFinish(): void { finishCount.value += 1; manualStatus.value = "已结束"; log("手动 finish #" + finishCount.value.toString()) }
function setExternalTime(value: number): void { externalTime.value = value; log("外部 time = " + value.toString()) }
function toggleAutoStart(event: UniSwitchChangeEvent): void { externalAutoStart.value = event.detail.value; log("autoStart = " + externalAutoStart.value.toString()) }
function toggleMillisecond(event: UniSwitchChangeEvent): void { externalMillisecond.value = event.detail.value; log("millisecond = " + externalMillisecond.value.toString()) }
function externalChange(value: TimeParts): void { externalText.value = "change " + value.MM + ":" + value.SS + ":" + value.ms }
function externalFinish(): void { externalText.value = "finish"; log("外部计时 finish") }
function resetBoundary(value: number): void { boundaryCountdown.value?.reset(value); log("边界 reset(" + value.toString() + ")：" + boundaryText.value) }
function boundaryChange(value: TimeParts): void { boundaryText.value = "change " + value.SS + ":" + value.ms }
function boundaryFinish(): void { boundaryFinishCount.value += 1; log("边界 finish #" + boundaryFinishCount.value.toString()) }
function runBoundary(): void { boundaryCountdown.value?.reset(200); boundaryCountdown.value?.start(); log("边界开始 200ms") }
function resumeBoundary(): void { boundaryCountdown.value?.resume(); log("边界 resume") }
</script>

<style>
.countdown-demo-scroll { flex: 1; flex-direction: column; width: 100%; min-height: 0; }
.countdown-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.countdown-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #2563eb; }
.countdown-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.countdown-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }
.countdown-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding-top: 24rpx; border-top-width: 1rpx; border-top-style: solid; border-top-color: var(--xtf-color-border, #cbd5e1); }
.countdown-demo-section-title { margin-bottom: 20rpx; color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.countdown-demo-item { display: flex; flex-direction: column; margin-bottom: 20rpx; }
.countdown-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20rpx; }
.countdown-demo-action { margin-right: 12rpx; margin-bottom: 12rpx; }
.countdown-demo-note { margin-top: 12rpx; margin-bottom: 12rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 24rpx; line-height: 1.5; }
.countdown-demo-setting { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 16rpx; }
.countdown-demo-label { color: var(--xtf-color-text, #0f172a); font-size: 26rpx; }
.countdown-demo-log { margin-top: 8rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.5; }
</style>
