<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="steps-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="steps-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="steps-demo-hero">
          <XtfText class="steps-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="steps-demo-title" level="display" color="inverse" text="Steps" />
          <XtfText class="steps-demo-intro" level="caption" color="inverse" text="订单、审批与服务开通" />
        </view>

        <view class="steps-demo-section steps-demo-order">
          <XtfText level="h3" text="横向订单流程" />
          <text class="steps-demo-section-desc">订单 SO-20261017 · {{ orderCurrent == orderSteps.length ? '已完成' : '处理中' }}</text>
          <XtfSteps :items="orderSteps" :current="orderCurrent" />
          <view class="steps-demo-actions">
            <XtfButton custom-class="steps-order-prev" label="上一步" size="sm" type="outline" :disabled="orderCurrent <= 0" @click="previousOrder" />
            <XtfButton custom-class="steps-order-next" label="下一步" size="sm" :disabled="orderCurrent >= orderSteps.length" @click="nextOrder" />
            <XtfButton custom-class="steps-order-reset" label="重置" size="sm" type="ghost" @click="resetOrder" />
          </view>
          <text class="steps-demo-state steps-order-current">current={{ orderCurrent }}</text>
        </view>

        <view class="steps-demo-section steps-demo-navigation">
          <XtfText level="h3" text="垂直审批导航" />
          <text class="steps-demo-section-desc">申请 AP-2086 · {{ navigationEnabled ? '允许切换' : '只读' }}</text>
          <view class="steps-demo-toggle"><text class="steps-demo-state">允许导航</text><switch class="steps-navigation-toggle" :checked="navigationEnabled" @change="toggleNavigation" /></view>
          <XtfSteps :items="reviewSteps" :current="reviewCurrent" direction="vertical" :clickable="navigationEnabled" @click="selectStep" @step-click="recordStepClick" />
          <text class="steps-demo-state steps-navigation-current">current={{ reviewCurrent }}</text>
          <text class="steps-demo-event steps-navigation-event">{{ selectedTitle }}</text>
          <text class="steps-demo-state steps-event-counts">click={{ clickCount }} / step-click={{ stepClickCount }}</text>
        </view>

        <view class="steps-demo-section steps-demo-retry">
          <XtfText level="h3" text="付款失败与重试" />
          <text class="steps-demo-section-desc">{{ paymentFailed ? '付款失败：余额不足' : '付款成功，订单已完成' }}</text>
          <XtfSteps :items="paymentSteps" :current="paymentFailed ? 1 : 3" :custom-style="paymentTheme" />
          <view class="steps-demo-actions">
            <XtfButton custom-class="steps-payment-retry" label="重新付款" size="sm" :disabled="!paymentFailed" @click="retryPayment" />
            <XtfButton custom-class="steps-payment-reset" label="重置失败" size="sm" type="outline" @click="resetPayment" />
          </view>
          <text class="steps-demo-state steps-payment-state">{{ paymentFailed ? 'PAY-2086 / error' : 'PAY-2086 / finish' }}</text>
        </view>

        <view class="steps-demo-section steps-demo-icons">
          <XtfText level="h3" text="图标与节点模式" />
          <text class="steps-demo-section-desc">运单 SF-6018 · 运输中</text>
          <XtfSteps :items="deliverySteps" :current="2" mode="icon" :node-size="52" :line-thickness="6" />
        </view>

        <view class="steps-demo-section steps-demo-slots">
          <XtfText level="h3" text="服务开通与业务插槽" />
          <text class="steps-demo-section-desc">服务 SV-301 · 审核中</text>
          <XtfSteps :items="slotSteps" direction="vertical" :current="1">
            <template #icon="slotProps"><XtfTag size="xs" :text="(slotProps.index + 1).toString()" theme="info" /></template>
            <template #title="slotProps"><text class="steps-demo-slot-title">{{ slotProps.item.title + ' 阶段' }}</text></template>
            <template #desc="slotProps"><text class="steps-demo-slot-desc">{{ slotProps.item.desc + ' / ' + slotProps.item.status }}</text><text class="steps-demo-slot-meta">{{ slotProps.item.name + ' / ' + slotProps.item.id + ' / ' + slotProps.item.owner + ' / ' + slotProps.item.business.code }}</text></template>
          </XtfSteps>
        </view>

        <view class="steps-demo-section steps-demo-boundary">
          <XtfText level="h3" text="流程边界" />
          <text class="steps-demo-section-desc">{{ boundaryLabel }}</text>
          <XtfSteps :items="orderSteps" :current="boundaryCurrent" />
          <view class="steps-demo-actions">
            <XtfButton custom-class="steps-boundary-negative" label="未开始" size="sm" type="outline" @click="setBoundary(-1, '未开始')" />
            <XtfButton custom-class="steps-boundary-complete" label="已完成" size="sm" type="outline" @click="setBoundary(99, '已完成')" />
            <XtfButton custom-class="steps-boundary-invalid" label="异常恢复" size="sm" type="outline" @click="setBoundary('invalid', '已恢复到第一步')" />
          </view>
          <text class="steps-demo-state steps-boundary-current">current={{ boundaryCurrent }}</text>
          <XtfSteps :items="[]" :current="99" custom-class="steps-empty" />
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, 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 XtfSteps from "@/uni_modules/xtf-linkuiunix/components/xtf-steps/xtf-steps.uvue"
import XtfTag from "@/uni_modules/xtf-linkuiunix/components/xtf-tag/xtf-tag.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"

const orderCurrent = ref(0)
const orderSteps = [{ name: "create", id: "SO-2086", title: "提交订单", desc: "订单创建" }, { name: "pay", id: "PAY-2086", title: "支付订单", desc: "确认付款" }, { name: "complete", id: "DONE-2086", title: "完成", desc: "归档订单" }]
function previousOrder(): void { orderCurrent.value = Math.max(0, orderCurrent.value - 1) }
function nextOrder(): void { orderCurrent.value = Math.min(orderSteps.length, orderCurrent.value + 1) }
function resetOrder(): void { orderCurrent.value = 0 }

const reviewCurrent = ref(1)
const navigationEnabled = ref(true)
const clickCount = ref(0)
const stepClickCount = ref(0)
const selectedTitle = ref("未选择")
const reviewSteps = [
  { name: "apply", id: "AP-2086", owner: "申请人", title: "创建申请", desc: "已提交采购清单、预算说明和供应商报价，申请资料已归档，支持返回查看原始材料。" },
  { name: "manager", id: "RV-2086", owner: "部门主管", title: "主管审核", desc: "主管正在核对预算用途与采购必要性。涉及多个部门的申请需要补充会签意见，审核意见将随流程保留。" },
  { name: "finance", id: "FI-2086", owner: "财务专员", title: "财务复核", desc: "复核发票抬头、付款账户、税务信息及合同附件；材料不全时退回补充，不会自动进入发布阶段。" },
  { name: "publish", id: "PB-2086", owner: "系统", title: "发布结果", desc: "财务审核通过后开放，当前禁止跳转。", disabled: true }
]
function toggleNavigation(event: UniSwitchChangeEvent): void { navigationEnabled.value = event.detail.value }
function selectStep(payload: any): void {
  // Steps is controlled: the parent explicitly commits the requested current index.
  reviewCurrent.value = payload.index as number
  clickCount.value += 1
  selectedTitle.value = payload.item.name + " / " + payload.item.id + " / " + payload.item.owner
}
function recordStepClick(_payload: any): void { stepClickCount.value += 1 }

const paymentFailed = ref(true)
const paymentSteps = computed((): any[] => [{ name: "create", title: "创建订单" }, { name: "pay", id: "PAY-2086", title: "付款", desc: paymentFailed.value ? "余额不足" : "付款成功", status: paymentFailed.value ? "error" : "finish" }, { name: "done", title: "完成" }])
const paymentTheme = { "--xtf-steps-process-border": "#0f766e", "--xtf-steps-process-line": "#0f766e", "--xtf-steps-finish-border": "#15803d", "--xtf-steps-finish-line": "#15803d", "--xtf-steps-error-border": "#be123c" } as UTSJSONObject
function retryPayment(): void { paymentFailed.value = false }
function resetPayment(): void { paymentFailed.value = true }

const deliverySteps = [{ title: "已下单", icon: "success" }, { title: "仓库备货", icon: "search" }, { title: "运输中", icon: "share" }, { title: "已签收", mode: "dot" }]
const slotSteps = [
  { name: "prepare", id: "SV-301", owner: "客户", business: { code: "BIZ-301" }, title: "准备资料", desc: "核验账号" },
  { name: "review", id: "SV-302", owner: "审核员", business: { code: "BIZ-302" }, title: "提交审核", desc: "预计 1 个工作日" },
  { name: "activate", id: "SV-303", owner: "系统", business: { code: "BIZ-303" }, title: "开通服务", desc: "等待审核结果" }
]
const boundaryCurrent = ref<string | number>(-1)
const boundaryLabel = ref("未开始")
function setBoundary(current: string | number, label: string): void { boundaryCurrent.value = current; boundaryLabel.value = label }
</script>

<style>
.steps-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }
.steps-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.steps-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.steps-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.steps-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.steps-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.steps-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); }
.steps-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.steps-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20rpx; }
.steps-order-prev, .steps-order-next, .steps-order-reset, .steps-payment-retry, .steps-payment-reset, .steps-boundary-negative, .steps-boundary-complete, .steps-boundary-invalid { margin-right: 12rpx; margin-bottom: 12rpx; }
.steps-demo-toggle { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 20rpx; }
.steps-demo-state { margin-top: 12rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.5; }
.steps-demo-event { margin-top: 16rpx; padding: 16rpx; border-radius: 8rpx; background-color: #eff6ff; color: #2563eb; font-size: 22rpx; line-height: 1.5; }
.steps-demo-slot-title { color: #0f766e; font-size: 25rpx; font-weight: 700; line-height: 1.3; }
.steps-demo-slot-desc { margin-top: 6rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 20rpx; line-height: 1.5; }
.steps-demo-slot-meta { margin-top: 6rpx; color: #0f766e; font-size: 20rpx; line-height: 1.5; }
</style>
