<template>
  <div class="page-shell orders-page">
    <!-- 顶部导航 -->
    <view class="orders-nav nav-gradient" :style="navSafeStyle">
      <view class="nav-back" @click="goBackToMine"><AppIcon name="back" :size="18" color="#ffffff" /></view>
      <text class="nav-title">我的订单</text>
      <view class="nav-placeholder"></view>
    </view>

    <view class="page-section orders-hero">
      <view class="hero-title">服务进度一目了然</view>
      <view v-if="userInfo.role === 'customer'" class="hero-sub">查看您的预约状态，随时掌握服务进度。</view>
      <view v-else class="hero-sub">按状态查看订单，待开始可点「开始服务」，进行中可填写报告。</view>
    </view>

    <!-- 状态 Tab -->
    <view class="van-tabs">
      <view
        v-for="tab in statusTabs"
        :key="tab.name"
        :class="['van-tabs__tab', { active: currentStatus === tab.name }]"
        @click="currentStatus = tab.name"
      >{{ tab.title }}</view>
    </view>

    <!-- 订单列表 -->
    <view class="page-section section-gap">
      <AppPageState
        :loading="loading"
        :error="loadError"
        :empty="!loading && !loadError && filteredOrders.length === 0"
        empty-title="暂无符合条件的订单"
        empty-hint="切换上方状态或返回首页查看"
        empty-emoji="📋"
        @retry="fetchOrders"
      >
        <div v-for="item in filteredOrders" :key="item.id" class="order-item" @click="goAppointmentDetail(item)">
          <div class="order-head">
            <div class="order-title">{{ item.title }}</div>
            <view :class="`van-tag van-tag--${statusTagBg(item.status)}`">{{ item.statusText }}</view>
          </div>
          <div class="order-desc">
            <span class="desc-icon"><AppIcon name="profile" :size="12" /></span>
            <span>{{ item.desc }}</span>
          </div>
          <div class="order-footer">
            <span class="order-time">
              <AppIcon name="orders" :size="12" color="#94a3b8" />
              <text>{{ item.time }}</text>
            </span>
          </div>
          <div v-if="userInfo.role !== 'customer'">
            <div v-if="item.status === 'new'" class="action-btns">
              <button class="van-button van-button--small van-button--primary" @click.stop="startService(item)">开始服务</button>
              <button class="van-button van-button--small" @click.stop="cancelService(item)">取消</button>
            </div>
            <button v-else-if="item.status === 'doing'" class="van-button van-button--small btn-mt" @click.stop="goReport(item)">填写报告</button>
          </div>
          <div v-else>
            <div v-if="item.status === 'new'" class="action-btns">
              <button class="van-button van-button--small" @click.stop="cancelService(item)">取消预约</button>
            </div>
          </div>
        </div>
      </AppPageState>
    </view>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import AppIcon from '../../components/AppIcon.vue'
import AppPageState from '../../components/AppPageState.vue'
import { messageFromApi, NETWORK_ERROR_MSG } from '../../utils/apiResult.js'
import { navigateTo } from '../../utils/globalState.js'
import { getAppointmentList, startAppointment, cancelAppointment } from '../../api/index.js'
import { getUserSession } from '../../utils/session.js'
import { formatDateTimeCN } from '../../utils/datetime.js'
import { getAppointmentStatusText, getAppointmentTagType } from '../../utils/appointment.js'

const emit = defineEmits(['change-page'])
const userInfo = getUserSession()
const currentUserId = userInfo.id
const goBackToMine = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack()
    return
  }
  navigateTo('mine')
}

const navSafeStyle = (() => {
  const statusBarHeight = uni.getSystemInfoSync?.().statusBarHeight || 20
  let navHeight = statusBarHeight + 44
  const menuRect = uni.getMenuButtonBoundingClientRect?.()
  if (menuRect && menuRect.top && menuRect.height) {
    const verticalGap = Math.max(menuRect.top - statusBarHeight, 4)
    navHeight = statusBarHeight + verticalGap * 2 + menuRect.height
  }
  return `padding-top:${statusBarHeight}px;height:${navHeight}px;`
})()

const currentStatus = ref('new')
const orders = ref([])
const loading = ref(true)
const loadError = ref(null)

const statusTabs = [
  { title: '待开始', name: 'new' },
  { title: '进行中', name: 'doing' },
  { title: '已完成', name: 'done' }
]

const filteredOrders = computed(() => orders.value.filter(o => {
  if (currentStatus.value === 'new') return o.status === 'new'
  if (currentStatus.value === 'doing') return o.status === 'doing'
  if (currentStatus.value === 'done') return o.status === 'done' || o.status === 'cancel'
  return true
}))

const statusTagBg = (status) => {
  return getAppointmentTagType(status)
}

const fetchOrders = async () => {
  if (!currentUserId) {
    loading.value = false
    return
  }
  loadError.value = null
  loading.value = true
  try {
    const res = await getAppointmentList(currentUserId, null, { page: 1, pageSize: 50 })
    if (res && res.code === 200) {
      orders.value = res.data.map((appt) => ({
        id: appt.id,
        title: appt.serviceType || '洗澡美容预约',
        desc: `${appt.petType || ''} - ${appt.petName || ''}`,
        time: formatDateTimeCN(appt.appointmentTime),
        status: appt.status || 'new',
        statusText: getAppointmentStatusText(appt.status),
        petName: appt.petName,
        petType: appt.petType,
        serviceType: appt.serviceType,
        appointmentTime: appt.appointmentTime
      }))
    } else {
      loadError.value = messageFromApi(res, '加载失败')
    }
  } catch (e) {
    loadError.value = NETWORK_ERROR_MSG
  } finally {
    loading.value = false
  }
}

const startService = async (item) => {
  const res = await startAppointment(item.id, userInfo.id)
  if (res.code === 200) {
    uni.showToast({ title: '已开始服务', icon: 'success' })
    fetchOrders()
  } else {
    uni.showToast({ title: res.message || '操作失败', icon: 'none' })
  }
}

const cancelService = async (item) => {
  uni.showModal({
    title: '提示',
    content: '确定取消该预约？',
    success: async (res) => {
      if (!res.confirm) return
      const r = await cancelAppointment(item.id)
      if (r.code === 200) {
        uni.showToast({ title: '已取消', icon: 'success' })
        fetchOrders()
      }
    }
  })
}

const goAppointmentDetail = (item) => {
  if (!item?.id) return
  uni.navigateTo({ url: `/pages/appointment/AppointmentDetail?id=${item.id}` })
}

const goReport = (item) => {
  uni.setStorageSync('petstore_report_prefill', JSON.stringify({
    appointmentId: item.id, petName: item.petName, serviceType: item.serviceType, appointmentTime: item.appointmentTime
  }))
  uni.navigateTo({ url: '/pages/report/Report' })
}

onMounted(() => fetchOrders())
</script>

<style scoped>
.orders-page { padding-bottom: 120rpx; }
.nav-placeholder { width: 32px; }
.btn-mt { margin-top: 10px; }
.orders-hero {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid #dcefe3;
  border-radius: 14px;
  background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%);
}
.hero-title { font-size: 16px; font-weight: 700; color: #166534; }
.hero-sub { margin-top: 4px; font-size: 12px; color: #4b5563; line-height: 1.45; }
.orders-nav {
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.nav-back { font-size: 20px; color: #fff; }
.nav-title { font-size: 18px; font-weight: 700; color: #fff; }
.order-item { background: #fff; margin-bottom: 12px; border-radius: 14px; padding: 16px; border: 1px solid #e8edf4; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); cursor: pointer; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-title { font-size: 15px; font-weight: 700; color: #1f2937; margin-bottom: 6px; }
.order-desc { font-size: 13px; color: #6b7280; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.desc-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #eef2f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-footer { display: flex; justify-content: space-between; align-items: center; }
.order-time { font-size: 12px; color: #94a3b8; display: inline-flex; align-items: center; gap: 4px; }
.action-btns { display: flex; gap: 8px; margin-top: 10px; }
</style>
