<template>
  <view class="container">
    <!-- 阶段一：选购中 (门已开) -->
    <view v-if="doorStatus === 'opened'" class="status-section animate-fade-in">
      <view class="status-icon-wrapper">
        <view class="status-icon door-open">
          <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
            <rect x="20" y="10" width="80" height="100" rx="8" fill="#FFF8E1" stroke="#FFC107" stroke-width="3"/>
            <path d="M 35 10 L 35 110" stroke="#FFC107" stroke-width="2" stroke-dasharray="4,4"/>
            <circle cx="60" cy="60" r="15" fill="#FFC107" opacity="0.3"/>
            <path d="M 55 60 L 65 60 M 60 55 L 60 65" stroke="#FFC107" stroke-width="3" stroke-linecap="round"/>
          </svg>
        </view>
        <view class="status-icon-pulse"></view>
      </view>
      <view class="status-title">门已开，请选购商品</view>
      <view class="status-tip">请在60秒内完成选购并关门</view>
      <view class="countdown-wrapper">
        <view class="countdown" v-if="countdown > 0">
          <text class="countdown-number">{{ countdown }}</text>
          <text class="countdown-label">秒</text>
        </view>
        <view class="countdown warning" v-else>
          <text class="countdown-number">请尽快关门</text>
        </view>
      </view>
      <CustomerServiceButton
        mode="link"
        title="购物-门已开"
        :path="'/pages/shopping/shopping'"
      >
        遇到问题？联系在线客服
      </CustomerServiceButton>
    </view>
    
    <!-- 阶段二：购物完成 (门已关) -->
    <view v-else-if="doorStatus === 'closing'" class="status-section animate-scale-in">
      <view class="status-icon-wrapper">
        <view class="status-icon success">
          <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
            <circle cx="60" cy="60" r="50" fill="#E8F5E9" stroke="#4CAF50" stroke-width="3"/>
            <path d="M 35 60 L 50 75 L 85 40" stroke="#4CAF50" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </view>
      </view>
      <view class="status-title">购物已完成</view>
      <view class="status-tip">
        订单稍后自动扣款，
        <CustomerServiceButton
          mode="link"
          title="购物-扣款疑问"
          :path="'/pages/shopping/shopping'"
        >
          如有疑问请联系客服
        </CustomerServiceButton>
      </view>
      <view class="countdown-wrapper">
        <view class="countdown-return" v-if="returnCountdown > 0">
          <text class="countdown-return-text">{{ returnCountdown }}秒后返回首页</text>
        </view>
      </view>
      <button class="action-button" @click="goHome">
        <text class="button-text">回到首页</text>
      </button>
    </view>
    
    <!-- 阶段三：结算完成 -->
    <view v-else-if="doorStatus === 'closed'" class="status-section animate-slide-up">
      <view class="status-icon-wrapper">
        <view class="status-icon success">
          <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
            <circle cx="60" cy="60" r="50" fill="#E8F5E9" stroke="#4CAF50" stroke-width="3"/>
            <path d="M 35 60 L 50 75 L 85 40" stroke="#4CAF50" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </view>
      </view>
      <view class="status-title">结算完成</view>
      <view class="status-tip">您已成功购买以下商品</view>
      <view class="purchase-info">
        <view class="product-item" v-for="product in purchasedProducts" :key="product.id">
          <view class="product-name">{{ product.name }}</view>
          <view class="product-quantity">×{{ product.quantity }}</view>
          <view class="product-price">¥{{ product.price }}</view>
        </view>
        <view class="total-info">
          <view class="total-label">总计</view>
          <view class="total-price">¥{{ totalPrice }}</view>
        </view>
      </view>
      <button class="action-button primary" @click="goToOrderDetail">
        <text class="button-text">查看订单详情</text>
      </button>
    </view>
    
    <!-- 错误状态 -->
    <view v-else-if="doorStatus === 'error'" class="status-section animate-shake">
      <view class="status-icon-wrapper">
        <view class="status-icon error">
          <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
            <circle cx="60" cy="60" r="50" fill="#FFEBEE" stroke="#F44336" stroke-width="3"/>
            <path d="M 40 40 L 80 80 M 80 40 L 40 80" stroke="#F44336" stroke-width="5" fill="none" stroke-linecap="round"/>
          </svg>
        </view>
      </view>
      <view class="status-title">出错了</view>
      <view class="status-tip">{{ errorMessage }}</view>
      <CustomerServiceButton
        mode="link"
        title="购物-错误求助"
        :path="'/pages/shopping/shopping'"
      >
        联系客服解决
      </CustomerServiceButton>
      <button class="action-button" @click="goHome">
        <text class="button-text">返回首页</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { onShow, onHide } from '@dcloudio/uni-app';
import { pollDeviceStatus, pollRecognizeResult, pollOrderInfo } from '../../api/status';
import type { RecognizeResultResponse, OrderInfoResponse } from '../../api/status';

import { logger } from '../../utils/logger';
import type { OrderProduct } from '../../api/order';

const doorStatus = ref<'opened' | 'closing' | 'closed' | 'error'>('opened');
const countdown = ref(60);
const returnCountdown = ref(5); // 返回首页倒计时
const purchasedProducts = ref<OrderProduct[]>([]);
const totalPrice = ref(0);
const errorMessage = ref('');
const currentDeviceId = ref('');
const currentActivityId = ref('');
const currentOrderNo = ref('');

let countdownTimer: number | null = null;
let returnCountdownTimer: number | null = null; // 返回首页倒计时定时器
let statusCheckTimer: number | null = null;
let isComponentActive = true; // 组件活跃状态标志

// 统一的定时器清理函数
const cleanupTimers = () => {
  if (countdownTimer) {
    clearInterval(countdownTimer);
    countdownTimer = null;
  }
  if (returnCountdownTimer) {
    clearInterval(returnCountdownTimer);
    returnCountdownTimer = null;
  }
  if (statusCheckTimer) {
    clearTimeout(statusCheckTimer);
    statusCheckTimer = null;
  }
};

const handleDoorClosed = (status: any) => {
  doorStatus.value = 'closing';
  currentActivityId.value = status.activityId;
  logger.log('门已关，购物完成，活动ID:', status.activityId);
  if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; }
  if (returnCountdownTimer) { clearInterval(returnCountdownTimer); returnCountdownTimer = null; }
  startReturnCountdown();
  pollOrderAndNavigate();
};

onMounted(() => {
  // 标记当前页面轮询为活跃状态
  uni.setStorageSync('shoppingPollingActive', 'true');
  isComponentActive = true;
  
  // 获取存储的设备信息
  currentDeviceId.value = uni.getStorageSync('currentDeviceId') || '';
  currentOrderNo.value = uni.getStorageSync('currentOrderNo') || '';
  
  if (!currentDeviceId.value) {
    doorStatus.value = 'error';
    errorMessage.value = '未找到设备信息';
    return;
  }
  
  // 开始倒计时
  startCountdown();
  
  // 开始轮询设备状态
  startStatusPolling();
});

onUnmounted(() => {
  // 设置组件为非活跃状态，停止所有轮询
  isComponentActive = false;
  // 清理所有定时器
  cleanupTimers();
});

// 页面显示时重新激活轮询和倒计时
onShow(async () => {
  if (doorStatus.value === 'opened') {
    isComponentActive = true;
    // 先查一次当前门状态，避免退出期间门已关上但页面未感知
    try {
      const status = await pollDeviceStatus(deviceId, 5000, 1000);
      if (status.doorStatus === 'close') {
        // 门已关闭，直接进入结算流程
        countdown.value = 0;
        cleanupTimers();
        handleDoorClosed(status);
        return;
      }
    } catch { /* 查询失败则继续原逻辑 */ }
    if (!countdownTimer) startCountdown();
    startStatusPolling();
  } else if (doorStatus.value === 'closing') {
    isComponentActive = true;
    if (!returnCountdownTimer) startReturnCountdown();
    startStatusPolling();
  }
});

// 页面隐藏时暂停轮询（navigateTo 进入子页面时触发）
onHide(() => {
  isComponentActive = false;
  cleanupTimers();
});

const startCountdown = () => {
  countdownTimer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    }
  }, 1000);
};

// 开始返回首页倒计时
const startReturnCountdown = () => {
  returnCountdown.value = 5; // 重置为5秒
  returnCountdownTimer = setInterval(() => {
    if (returnCountdown.value > 0) {
      returnCountdown.value--;
      if (returnCountdown.value === 0) {
        // 倒计时结束，自动返回首页
        goHome();
      }
    }
  }, 1000);
};

const startStatusPolling = async () => {
  // 检查组件是否仍然活跃
  if (!isComponentActive) {
    return;
  }

  try {
    // 轮询设备状态，等待关门
    const status = await pollDeviceStatus(currentDeviceId.value, 60000, 3000);

    // 再次检查组件是否仍然活跃
    if (!isComponentActive) {
      return;
    }

    logger.log('设备状态更新:', status);

    // 检查门是否关闭
    if (status.doorStatus === 'close') {
      handleDoorClosed(status);
    } else {
      // 继续等待关门，设置延迟后重新轮询
      if (isComponentActive && doorStatus.value === 'opened') {
        statusCheckTimer = setTimeout(() => {
          if (isComponentActive) {
            startStatusPolling();
          }
        }, 3000);
      }
    }
  } catch (error: any) {
    logger.error('状态轮询失败:', error);

    // 再次检查组件是否仍然活跃
    if (!isComponentActive) {
      return;
    }

    // 如果还在开门状态，继续轮询
    if (doorStatus.value === 'opened' || doorStatus.value === 'closing') {
      statusCheckTimer = setTimeout(() => {
        if (isComponentActive) {
          startStatusPolling();
        }
      }, 3000);
    } else {
      doorStatus.value = 'error';
      errorMessage.value = error.message || '获取状态失败';
    }
  }
};

/**
 * 轮询订单信息，获取成功后跳转到订单完成页
 */
const pollOrderAndNavigate = async () => {
  if (!currentActivityId.value) {
    return;
  }

  try {
    const orderInfo = await pollOrderInfo(currentActivityId.value, 60000, 2000);

    if (!isComponentActive) {
      return;
    }

    logger.log('订单信息获取成功:', orderInfo);

    // 存储订单号，跳转到订单完成页
    if (orderInfo.orderId) {
      // 清除返回首页倒计时
      if (returnCountdownTimer) {
        clearInterval(returnCountdownTimer);
        returnCountdownTimer = null;
      }

      // TODO: 微信支付分官方页面，暂不跳转
      // uni.redirectTo({
      //   url: '/pages/orderComplete/orderComplete?orderNo=' + orderInfo.orderId
      // });
    }
  } catch (error: any) {
    logger.error('轮询订单信息失败:', error);
    // 订单信息获取失败不影响用户，保持当前页面
  }
};

const showProblem = () => {
  uni.showActionSheet({
    itemList: ['辅助远程开门', '报修'],
    success: function (res) {
      if (res.tapIndex === 0) {
        uni.showToast({
          title: '正在远程开门...',
          icon: 'loading'
        });
      } else if (res.tapIndex === 1) {
        uni.vibrateShort({ type: 'medium' });
        uni.showToast({
          title: '已提交报修申请',
          icon: 'success'
        });
      }
    }
  });
};

const goToOrderDetail = () => {
  uni.navigateTo({
    url: `/pages/orderDetail/orderDetail?orderNo=${currentOrderNo.value}`
  });
};

const goHome = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  });
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, $color-bg-secondary 0%, $color-bg-primary 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: $spacing-xl;
  padding-top: 2vh;
  box-sizing: border-box;
}

.status-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  max-width: 600rpx;
}

/* ========== 状态图标 ========== */
.status-icon-wrapper {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  margin-bottom: $spacing-xl;
  animation: scaleIn 0.3s ease;
}

.status-icon {
  width: 100%;
  height: 100%;
  
  svg {
    width: 100%;
    height: 100%;
  }
  
  &.door-open {
    animation: doorOpen 0.5s ease;
  }
  
  &.success {
    animation: successPop 0.35s ease;
  }
  
  &.error {
    animation: shake 0.5s $ease-in-out;
  }
}

.status-icon-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: $radius-circle;
  background: $color-primary;
  transform: translate(-50%, -50%);
  animation: pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  opacity: 0.2;
  z-index: -1;
}

@keyframes doorOpen {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes successPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== 状态文本 ========== */
.status-title {
  font-size: 48rpx;
  font-weight: 600;
  margin-bottom: $spacing-sm;
  color: $color-text-primary;
  animation: slideUp 0.3s ease;
}

.status-tip {
  font-size: 30rpx;
  color: $color-text-secondary;
  margin-bottom: $spacing-xl;
  animation: slideUp 0.3s ease 0.05s both;
}

/* ========== 倒计时 ========== */
.countdown-wrapper {
  margin-bottom: $spacing-xl;
  animation: scaleIn 0.35s ease 0.1s both;
}

.countdown {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
  
  &-number {
    font-size: 88rpx;
    font-weight: 700;
    color: $color-text-primary;
    font-variant-numeric: tabular-nums;
  }
  
  &-label {
    font-size: 32rpx;
    color: $color-text-secondary;
  }
  
  &.warning {
    .countdown-number {
      color: $color-error;
      animation: blink 1s infinite;
    }
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.countdown-return {
  padding: $spacing-md $spacing-lg;
  background: $color-bg-tertiary;
  border-radius: $radius-lg;
  
  &-text {
    font-size: 26rpx;
    color: $color-text-secondary;
  }
}

/* ========== 问题链接 ========== */
.problem-link {
  font-size: 28rpx;
  color: $color-primary-dark;
  text-decoration: underline;
  margin-top: $spacing-lg;
  animation: fadeIn 0.4s ease 0.2s both;
}

/* ========== 商品列表 ========== */
.purchase-info {
  width: 100%;
  background: $color-bg-primary;
  border-radius: $radius-lg;
  padding: $spacing-lg;
  margin: $spacing-xl 0;
  box-shadow: $shadow-sm;
  animation: slideUp 0.35s ease 0.15s both;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-sm 0;
  border-bottom: 1rpx solid $color-border;
  
  &:last-child {
    border-bottom: none;
  }
}

.product-name {
  font-size: 28rpx;
  color: $color-text-primary;
  flex: 1;
  text-align: left;
}

.product-quantity {
  font-size: 26rpx;
  color: $color-text-secondary;
  margin: 0 $spacing-md;
}

.product-price {
  font-size: 28rpx;
  color: $color-text-primary;
  font-weight: 500;
}

.total-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: $spacing-md;
  margin-top: $spacing-md;
  border-top: 2rpx solid $color-border;
}

.total-label {
  font-size: 32rpx;
  font-weight: 500;
  color: $color-text-primary;
}

.total-price {
  font-size: 36rpx;
  font-weight: 600;
  color: $color-error;
}

/* ========== 操作按钮 ========== */
.action-button {
  background: $color-bg-primary;
  color: $color-text-primary;
  border: 2rpx solid $color-border;
  padding: $spacing-md $spacing-xl;
  border-radius: $radius-xl;
  font-size: 28rpx;
  font-weight: 500;
  margin-top: $spacing-lg;
  transition: all $duration-fast $ease-out;
  
  &::after {
    border: none;
  }
  
  &:active {
    transform: scale(0.98);
    background: $color-bg-secondary;
  }
  
  &.primary {
    background: linear-gradient(135deg, $color-primary-light 0%, $color-primary 100%);
    border: none;
    box-shadow: $shadow-primary;
    color: $color-text-primary;
    
    &:active {
      box-shadow: 0 4rpx 16rpx rgba(255, 193, 7, 0.3);
    }
  }
  
  .button-text {
    font-size: 28rpx;
    font-weight: 500;
  }
}
</style>