<template>
  <view class="order-history-container">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <!-- 左上角：返回主页按钮（箭头+文字 垂直排列） -->
      <view class="nav-left" @click="goBackToHome">
        <text class="nav-icon">←</text>
      </view>

      <!-- 页面标题居中 -->
      <text class="page-title">历史订单</text>

      <!-- 右上角留空 -->
      <view class="nav-right"></view>
    </view>

    <!-- 主要内容区域 -->
    <view class="content-wrapper">
      <!-- 订单列表 -->
      <view v-if="orderList.length > 0" class="order-list">
        <view v-for="order in orderList" :key="order.id" class="order-item">
          <view class="order-header">
            <text class="order-id">订单号: {{ order.order_no }}</text>
            <text class="order-status" :class="getOrderStatusClass(order.status)">{{ getOrderStatusText(order.status) }}</text>
          </view>

          <view class="order-addresses">
            <view class="address-item">
              <text class="address-icon">📍</text>
              <view class="address-info">
                <text class="address-label">取货地址</text>
                <text class="address-text">{{ order.pickup_address.detail }}</text>
                <text class="contact-info">联系人: {{ order.pickup_contact.name }} {{ order.pickup_contact.phone }}</text>
              </view>
            </view>

            <view class="address-line"></view>

            <view class="address-item">
              <text class="address-icon">🏠</text>
              <view class="address-info">
                <text class="address-label">收货地址</text>
                <text class="address-text">{{ order.delivery_address.detail }}</text>
                <text class="contact-info">联系人: {{ order.delivery_contact.name }} {{ order.delivery_contact.phone }}</text>
              </view>
            </view>
          </view>

          <view class="order-details">
            <text class="order-info">配送费: ¥{{ order.delivery_fee }}</text>
            <text class="order-info">预计距离: {{ order.distance }}km</text>
            <text class="order-info">预计时间: {{ order.estimated_time }}分钟</text>
          </view>

          <view class="order-actions">
            <button class="action-btn primary" @click="viewOrderDetail(order.id, order.status)">查看详情</button>
          </view>
        </view>
      </view>

      <!-- 无数据时显示 -->
      <view v-else class="no-data">
        <text class="no-data-text">暂无历史订单</text>
      </view>
    </view>
  </view>
</template>

<script lang="uts">
import type { DeliveryTaskType } from '@/types/mall-types.uts'
import supa, { supaReady } from '@/components/supadb/aksupainstance.uts'
import { getCurrentUserId, getCurrentUser } from '@/utils/store.uts'

export default {
  data() {
    return {
      // 模拟历史订单数据
      orderList: [] as Array<DeliveryTaskType>
    }
  },

  onLoad() {
    this.loadOrderHistory()
  },

  onShow() {
    // 页面每次显示时都检查是否有新的已完成订单
    this.checkForNewCompletedOrder()
  },

  methods: {
    // 检查是否有新的已完成订单
    checkForNewCompletedOrder() {
      const completedOrderFromStorage = uni.getStorageSync('completed_order_for_history')
      if (completedOrderFromStorage) {
        // 如果有，将其添加到订单列表的开头
        // 检查是否已经存在于列表中，避免重复添加
        const exists = this.orderList.some(order => order.id === completedOrderFromStorage.id)
        if (!exists) {
          this.orderList.unshift(completedOrderFromStorage)
        }
        // 清除本地存储，防止下次进入页面时重复添加
        uni.removeStorageSync('completed_order_for_history')
      }
    },

    // 加载历史订单（从数据库读取）
    async loadOrderHistory() {
      try {
        const ready = await Promise.race([supaReady, new Promise(resolve => setTimeout(() => resolve(false), 1500))])
        if (!ready) console.warn('supaReady timeout/failed in loadOrderHistory - proceeding')
      } catch (e) {
        console.warn('supaReady failed', e)
      }

      // Ensure profile is loaded so getCurrentUserId returns ak_users.id when available
      try {
        await getCurrentUser()
      } catch (e) {
        console.warn('getCurrentUser failed in loadOrderHistory', e)
      }

      const uid = getCurrentUserId()
      console.log('loadOrderHistory: currentUserId=', uid)

      // 首先查 ml_delivery_tasks 中分配给当前用户的任务（仅包含已接/分配的 status >= 2）
      let dtRes: any = { data: [] }
      try {
        let queryUid = uid
        // 如果 uid 为空，尝试从 supa session 获取 auth id 并映射到 ak_users.id
        if (!queryUid || queryUid === '') {
          try {
            const sess = supa.getSession && supa.getSession()
            const sessId = sess && sess.user && sess.user.getString && sess.user.getString('id')
            console.log('loadOrderHistory: session id fallback=', sessId)
            if (sessId) {
              const akRes = await supa.from('ak_users').select('id').eq('auth_id', sessId).limit(1).execute()
              if (akRes && Array.isArray(akRes.data) && akRes.data.length > 0) {
                queryUid = (akRes.data[0] as any).id
                console.log('loadOrderHistory: mapped ak_users.id=', queryUid)
              }
            }
          } catch (mapErr) {
            console.warn('loadOrderHistory: ak_users mapping failed', mapErr)
          }
        }

        if (queryUid && queryUid !== '') {
          dtRes = await supa.from('ml_delivery_tasks')
            .select('order_id,status')
            .eq('driver_id', queryUid)
            .gte('status', 2)
            .order('created_at', { ascending: false })
            .limit(200)
            .execute()
        } else {
          dtRes = { data: [] }
        }
        console.log('loadOrderHistory: delivery_tasks dtRes=', dtRes)
      } catch (err) {
        console.error('loadOrderHistory: delivery_tasks query failed', err)
        dtRes = { data: [] }
      }

      const orderIds = (dtRes && Array.isArray(dtRes.data)) ? dtRes.data.map((r: any) => r.order_id) : []

      // 如果没有通过 delivery_tasks 找到订单，改为直接读取最近完成/已取货订单（兼容测试环境）
      let ordersRes
      try {
        if (orderIds.length > 0) {
          ordersRes = await supa.from('ml_orders').select('*').in('id', orderIds).order('created_at', { ascending: false }).limit(200).execute()
        } else {
          ordersRes = await supa.from('ml_orders').select('*').in('order_status', [4,5]).order('created_at', { ascending: false }).limit(200).execute()
        }
      } catch (err) {
        console.error('loadOrderHistory: ml_orders query failed', err)
        ordersRes = { data: [] }
      }

      console.log('loadOrderHistory: ordersRes=', ordersRes)

      const mapOrder = (r: any) => ({
        id: r.id,
        order_no: r.order_no || String(r.cid || ''),
        status: r.order_status ?? r.status ?? 0,
        pickup_address: r.pickup_address || r.shipping_address || { detail: '', area: '' },
        delivery_address: r.delivery_address || r.shipping_address || { detail: '', area: '' },
        pickup_contact: r.pickup_contact || r.shipping_contact || { name: '', phone: '' },
        delivery_contact: r.delivery_contact || r.shipping_contact || { name: '', phone: '' },
        delivery_fee: r.delivery_fee || r.delivery_fees || 0,
        distance: r.distance || 0,
        estimated_time: r.estimated_time || 0,
        created_at: r.created_at
      })

      this.orderList = (ordersRes && ordersRes.data) ? ordersRes.data.map(mapOrder) : []

      // 额外：把当前分配给本司机但尚未完成的任务对应订单也展示在列表顶部（便于查看当前任务）
      try {
        if (uid && uid !== '') {
          // 仅获取已经被接取/分配给本司机的任务（status >= 2），包括进行中和已取货但未完成的
          const taskRes: any = await supa.from('ml_delivery_tasks')
            .select('order_id,status')
            .eq('driver_id', uid)
            .gte('status', 2)
            .order('created_at', { ascending: false })
            .limit(50)
            .execute()
          if (taskRes && Array.isArray(taskRes.data) && taskRes.data.length > 0) {
            const taskOrderIds = taskRes.data.map((t: any) => t.order_id).filter((id: any) => id)
            if (taskOrderIds.length > 0) {
              const curOrdersRes: any = await supa.from('ml_orders').select('*').in('id', taskOrderIds).execute()
              const curMapped = (curOrdersRes && Array.isArray(curOrdersRes.data)) ? curOrdersRes.data.map(mapOrder) : []
              // 把当前任务对应订单插入到列表最前面（避免重复）
              curMapped.forEach((o: any) => {
                if (!this.orderList.some((ex: any) => ex.id === o.id)) {
                  this.orderList.unshift(o)
                }
              })
            }
          }
        }
      } catch (err) {
        console.error('loadOrderHistory: fetch current tasks failed', err)
      }

      // 检查是否有新完成的订单（在加载初始数据后）
      this.checkForNewCompletedOrder()
    },

    // 获取订单状态样式
    getOrderStatusClass(status: number): string {
      switch (status) {
        case 1: return 'status-pending'
        case 2: return 'status-accepted'
        case 3: return 'status-picking'
        case 4: return 'status-picked' // 已取货
        case 5: return 'status-delivered' // 已送达
        default: return 'status-default'
      }
    },

    // 获取订单状态文本
    getOrderStatusText(status: number): string {
      switch (status) {
        case 1: return '待接取'
        case 2: return '已接取'
        case 3: return '取货中'
        case 4: return '已取货'
        case 5: return '已完成'
        default: return '未知状态'
      }
    },

    // 查看订单详情
    viewOrderDetail(orderId: string, status: number) {
      uni.navigateTo({
        url: `/pages/mall/delivery/order-detail?id=${orderId}&status=${status}`
      })
    },

    // 返回主页
    goBackToHome() {
      uni.reLaunch({
        url: '/pages/mall/delivery/index'
      })
    }
  }
}
</script>

<style scoped>
.order-history-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx 30rpx;
}

.page-header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #e9ecef;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative;
  min-height: 80rpx; /* 确保有足够空间放垂直排列的按钮和标题 */
}

.nav-left {
  position: absolute;
  top: 20rpx;
  left: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10rpx;
  border-radius: 8rpx;
  transition: background-color 0.2s ease;
}

.nav-left:hover {
  background-color: #f0f0f0; /* 悬停效果 */
}

.nav-left:active {
  background-color: #e0e0e0; /* 点击效果 */
}

.nav-icon {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.nav-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
}

.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 20rpx; /* 与 nav-left 保持一定距离 */
}

.nav-right {
  /* 为了保持左右对齐，右侧需要一个占位元素 */
  width: 1rpx;
  height: 1rpx;
}

.content-wrapper {
  margin-top: 20rpx;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border-left: 6rpx solid #74b9ff;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #f8f9fa;
}

.order-id {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.order-status {
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
  font-weight: 500;
}

.status-pending {
  background-color: #E3F2FD;
  color: #1976D2;
}

.status-accepted {
  background-color: #FFF3E0;
  color: #F57C00;
}

.status-picking {
  background-color: #FFF3E0;
  color: #F57C00;
}

.status-picked { 
  background-color: #E8F5E8;
  color: #388E3C;
}

.status-delivered { 
  background-color: #E8F5E8;
  color: #388E3C;
}

.status-default {
  background-color: #F8F8F8;
  color: #666;
}

.order-addresses {
  margin-bottom: 20rpx;
}

.address-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
}

.address-icon {
  font-size: 28rpx;
  margin-right: 15rpx;
  margin-top: 5rpx;
}

.address-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.address-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.address-text {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.contact-info {
  font-size: 24rpx;
  color: #666;
}

.address-line {
  width: 2rpx;
  height: 30rpx;
  background-color: #ddd;
  margin: 10rpx 0 10rpx 14rpx;
}

.order-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 15rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #666;
}

.order-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 24rpx;
  color: #666;
  margin: 0 5rpx;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
  font-weight: 500;
  padding: 0 10rpx;
  box-sizing: border-box;
}

.primary {
  background-color: #4CAF50;
  color: #fff;
}

.secondary {
  background-color: #f0f0f0;
  color: #333;
  border: 1rpx solid #ddd;
}

.no-data {
  text-align: center;
  padding: 80rpx 30rpx;
  border-radius: 16rpx;
  background-color: #fff;
}

.no-data-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 15rpx;
}
</style>