<template>
  <AppLayout title="" :hide-bottom-nav="true" @back-click="router.back()">
    <div v-if="cartItems.length === 0 && !orderComplete" class="h-screen flex flex-col items-center justify-center px-4">
      <FrostedGlass class="p-6 rounded-xl text-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        <h2 class="text-xl font-bold mb-2">购物车为空</h2>
        <p class="text-gray-600 mb-6">您的购物车中没有任何商品</p>
        <button
          @click="router.push('/courses')"
          class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-3 rounded-xl font-medium"
        >
          浏览课程
        </button>
      </FrostedGlass>
    </div>

    <div v-else-if="!orderComplete" class="pb-20">
      <!-- Order Summary -->
      <div class="p-4 bg-gradient-to-r from-green-500/10 to-blue-500/10">
        <FrostedGlass class="rounded-xl p-4">
          <h3 class="font-medium mb-3">订单摘要</h3>
          <div class="space-y-3">
            <div v-for="item in cartItems" :key="`${item.type}-${item.id}`" class="flex justify-between">
              <div class="flex flex-1">
                <div class="w-12 h-12 rounded-lg overflow-hidden mr-3 flex-shrink-0">
                  <img
                    :src="item.cover || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'"
                    :alt="item.title"
                    class="w-full h-full object-cover"
                    @error="handleImageError"
                  />
                </div>
                <div class="flex-1">
                  <p class="font-medium text-sm line-clamp-1">{{ item.title }}</p>
                  <p class="text-xs text-gray-500">
                    {{ item.type === 'course' ? '课程' : '活动' }} · {{ item?.quantity }} 份
                  </p>
                </div>
                <button
                  v-if="mode === 'multiple'"
                  @click="() => {
                    itemToDelete = item
                    showConfirmDialog = true
                  }"
                  class="text-red-500 hover:text-red-600 p-1 -mr-1"
                  title="删除"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
              </div>
              <div class="ml-2 text-right">
                <p class="font-medium text-sm">{{ formatPrice(item?.price * item.quantity) }}</p>
                <p class="text-xs text-gray-500">{{ formatPrice(item.price) }} / 份</p>
              </div>
            </div>
          </div>

          <div class="mt-4 pt-3 border-t border-gray-200">
            <!-- <div class="flex justify-between items-center text-sm">
              <span class="text-gray-600">小计</span>
              <span class="font-medium">{{ formatPrice(getTotalPrice()) }}</span>
            </div>
            <div class="flex justify-between items-center text-sm mt-1">
              <span class="text-gray-600">优惠</span>
              <span class="text-red-500">- ¥0.00</span>
            </div> -->
            <div class="flex justify-between items-center mt-2 font-medium">
              <span>总计</span>
              <span class="text-lg text-green-600">{{ formatPrice(getTotalPrice()) }}</span>
            </div>
          </div>
        </FrostedGlass>
      </div>

      <!-- Checkout Form -->
      <div class="px-4 pt-4">
        <form @submit.prevent="handleSubmit">
          <FrostedGlass v-if="shouldShowInfoEntry" class="rounded-xl p-4 mb-4">
            <!-- 预览个人信息iframe -->
            <iframe
              v-if="!showInfoEntry"
              :src="iframeInfoSrc"
              class="w-full border-0"
              ref="infoEntryIframe"
              style="width: 100%; height: 300px; border: none; display: block;"
              frameborder="0"
              scrolling="auto"
            ></iframe>

            <!-- 编辑按钮 -->
            <!-- <div v-if="!showInfoEntry && iframeInfoSrc" class="mt-3 text-center"> -->
            <div class="mt-3 text-center">
              <div
                @click="handleEditInfo"
                class="px-4 py-2 border border-gray-200 rounded-lg bg-white/50 text-sm"
              >
                编辑信息
              </div>
            </div>
          </FrostedGlass>

          <FrostedGlass class="rounded-xl p-4 mb-6">
            <h3 class="font-medium mb-3">支付方式</h3>
            <div class="space-y-2">
              <label class="flex items-center p-3 border border-gray-200 rounded-lg bg-white/50">
                <input
                  v-model="formData.pay_type"
                  type="radio"
                  value="WeChat"
                  class="mr-3"
                />
                <span class="flex-1">微信支付</span>
                <van-icon name="https://cdn.ipadbiz.cn/mlaj/icon/wxpay3.png" size="1.5rem" />
              </label>

              <!-- <label class="flex items-center p-3 border border-gray-200 rounded-lg bg-white/50">
                <input
                  v-model="formData.paymentMethod"
                  type="radio"
                  value="alipay"
                  class="mr-3"
                />
                <span class="flex-1">支付宝</span>
                <svg class="h-6 w-6 text-blue-500" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12,2C6.5,2 2,6.5 2,12s4.5,10 10,10s10,-4.5 10,-10S17.5,2 12,2zM12,20.5c-4.7,0 -8.5,-3.8 -8.5,-8.5S7.3,3.5 12,3.5s8.5,3.8 8.5,8.5S16.7,20.5 12,20.5z" />
                  <path d="M12,6c-3.3,0 -6,2.7 -6,6s2.7,6 6,6s6,-2.7 6,-6S15.3,6 12,6zM16,13h-3v3h-2v-3H8v-2h3V8h2v3h3V13z" />
                </svg>
              </label> -->

              <!-- <label class="flex items-center p-3 border border-gray-200 rounded-lg bg-white/50">
                <input
                  v-model="formData.paymentMethod"
                  type="radio"
                  value="bank"
                  class="mr-3"
                />
                <span class="flex-1">银行卡</span>
                <svg class="h-6 w-6 text-gray-500" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M20,4H4C2.9,4 2,4.9 2,6v12c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V6C22,4.9 21.1,4 20,4zM20,18H4V12h16V18zM20,8H4V6h16V8z" />
                  <path d="M5,13h2v2h-2z" />
                  <path d="M9,13h2v2h-2z" />
                  <path d="M13,13h2v2h-2z" />
                  <path d="M17,13h2v2h-2z" />
                </svg>
              </label> -->
            </div>
          </FrostedGlass>

          <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 shadow-md px-4 py-3">
            <div class="flex justify-between items-center mb-3">
              <div>
                <span class="text-sm text-gray-500">总计：</span>
                <span class="text-lg font-bold text-green-600">{{ formatPrice(getTotalPrice()) }}</span>
              </div>
              <button
                v-if="mode === 'multiple'"
                type="button"
                @click="() => {
                  showConfirmDialog = true
                  itemToDelete = null
                }"
                class="text-sm text-red-500"
              >
                清空课程
              </button>
            </div>
            <button
              type="submit"
              :disabled="isProcessing"
              class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-3 rounded-xl font-medium disabled:opacity-70 flex items-center justify-center"
            >
              <template v-if="isProcessing">
                <div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                处理中...
              </template>
              <template v-else>
                确认支付
              </template>
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Confirm Dialog -->
    <ConfirmDialog
      v-model:show="showConfirmDialog"
      title="确认删除"
      :message="itemToDelete ? `确定要删除 ${itemToDelete.title || '此商品'} 吗？` : '确定要清空课程吗？'"
      @confirm="() => {
        if (itemToDelete) {
          if (cartItems.length === 1) {
            clearCart()
          } else {
            removeFromCart(itemToDelete.id, itemToDelete.type)
          }
          itemToDelete = null
        } else {
          clearCart()
        }
      }"
      @cancel="itemToDelete = null"
    />


    <!-- 支付弹窗 -->
    <van-popup
      v-model:show="showPayment"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="bg-gradient-to-r from-green-500/10 to-blue-500/10 h-full">
        <WechatPayment
          v-if="showPayment && orderId"
          :order-id="orderId"
          :order-status="orderStatus"
          @success="handlePaymentSuccess"
          @failed="handlePaymentFailed"
          @processing="handlePaymentProcessing"
          @cancel="showPayment = false"
        >
          <template #success-action>
            <button
              @click="handleBack"
              class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-3 rounded-xl font-medium"
            >
              完成
            </button>
          </template>
          <template #failed-action>
            <button
              @click="showPayment = false"
              class="w-full bg-gray-100 text-gray-700 py-3 sm:py-3.5 rounded-xl font-medium text-base sm:text-lg hover:bg-gray-200 transition-colors"
            >
              关闭
            </button>
          </template>
        </WechatPayment>
      </div>
    </van-popup>

    <!-- 个人信息录入弹窗 -->
    <FormPage
      v-model:show="showInfoEntry"
      :iframe-src="iframeSrc"
      :title="iframeTitle"
      :type="iframeType"
      @data-received="handleInfoEntryComplete"
      @close="handleInfoEntryClose"
    />
  </AppLayout>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
import ConfirmDialog from '@/components/ui/ConfirmDialog.vue'
import WechatPayment from '@/components/payment/WechatPayment.vue'
import FormPage from '@/components/infoEntry/formPage.vue'
import { useCart } from '@/contexts/cart'
import { useTitle } from '@vueuse/core'
import { getUserInfoAPI } from "@/api/users";

const $route = useRoute()
const $router = useRouter()
// useTitle($route.meta.title)
const router = useRouter()
const { items: cartItems, mode, getTotalPrice, handleCheckout, clearCart, removeFromCart } = useCart()

// Form state
const formData = ref({
  pay_type: 'WeChat'
})

// 存储当前课程的localStorage键名，用于页面离开时清理
let currentInfoEntryKey = null

onMounted(async () => {
  const { code, data } = await getUserInfoAPI();

  // 页面加载时立即检查cartItems中是否有form_url
  if (cartItems.value && cartItems.value.length > 0) {
    const itemWithForm = cartItems.value.find(item => item.form_url)

    // 如果没有找到包含form_url的项目，或者form_url为空，则跳过个人信息录入
    if (!itemWithForm || !itemWithForm.form_url) {
      console.log('未找到form_url或form_url为空，跳过个人信息录入')
      return
    }

    // 检查用户是否已经录入过个人信息
    const infoEntryKey = `info_entry_completed_${itemWithForm.id}`
    currentInfoEntryKey = infoEntryKey // 保存键名用于清理
    const savedInfoData = localStorage.getItem(infoEntryKey)

    console.log('检查个人信息录入状态:', {
      courseId: itemWithForm.id,
      hasSavedData: !!savedInfoData
    })

    if (!savedInfoData) {
      // 只有未录入过信息时才弹出弹窗
      showInfoEntry.value = true
      // 设置弹窗标题
      iframeTitle.value = '个人信息录入'
      iframeSrc.value = itemWithForm.form_url
      iframeType.value = 'add'
      console.log('首次录入，显示个人信息录入弹窗')
    } else {
      // 已录入过信息，从缓存中恢复数据并显示预览
      try {
        const infoData = JSON.parse(savedInfoData)
        formData.value.customize_id = infoData.customize_id
        iframeInfoSrc.value = infoData.form_url + '&page_type=info' + '&data_id=' + infoData.customize_id
        console.log('从缓存恢复个人信息数据:', infoData)

        // 不再需要动态调整iframe高度
      } catch (error) {
        console.error('解析缓存数据失败:', error)
        // 如果解析失败，重新录入
        showInfoEntry.value = true
        iframeSrc.value = itemWithForm.form_url
        iframeType.value = 'add'
      }
    }
  }
})

// 页面离开时清理localStorage中的录入状态标记
onUnmounted(() => {
  if (currentInfoEntryKey) {
    localStorage.removeItem(currentInfoEntryKey)
    console.log('页面离开，清理个人信息录入状态:', currentInfoEntryKey)
  }
})

// 支付相关状态
const showPayment = ref(false)
const orderId = ref('')
const orderStatus = ref('')
const isProcessing = ref(false)
const orderComplete = ref(false)

// 个人信息录入相关状态
const showInfoEntry = ref(false)
// 个人信息录入弹窗的iframe地址
const iframeSrc = ref(null)
// 个人信息录入弹窗的类型
const iframeType = ref('add')
// 个人信息录入弹窗的标题
const iframeTitle = ref('个人信息录入')
// 个人信息录入弹窗的iframe地址
const iframeInfoSrc = ref(null)
// iframe元素引用
const infoEntryIframe = ref(null)

/**
 * 检查是否需要显示个人信息录入UI
 */
const shouldShowInfoEntry = computed(() => {
  if (!cartItems.value || cartItems.value.length === 0) return false
  const itemWithForm = cartItems.value.find(item => item.form_url)
  return itemWithForm && itemWithForm.form_url
})

/**
 * 监听个人信息录入弹窗状态，动态修改页面标题
 */
watch(showInfoEntry, (newVal) => {
  if (newVal) {
    // 弹窗打开时，修改标题为"个人信息录入"
    // document.title = '个人信息录入'
    // useTitle('个人信息录入')
  } else {
    // 弹窗关闭时，修改标题为"结账"
    useTitle($route.meta.title)
  }
})

// 确认对话框状态
const showConfirmDialog = ref(false)
const itemToDelete = ref(null)

// Format price with Chinese Yuan symbol
const formatPrice = (price) => {
  if (!price && price !== 0) return '¥0.00'
  return `¥${Number(price).toFixed(2)}`
}

// Handle image error
const handleImageError = (e) => {
  e.target.src = '/assets/images/course-placeholder.jpg'
}

// 处理表单提交
const handleSubmit = async (e) => {
  try {
    // 表单验证
    if (!formData.value.pay_type) {
      throw new Error('请选择支付方式')
    }

    isProcessing.value = true

    // 创建订单
    const result = await handleCheckout(formData.value)
    if (!result?.success) {
      throw new Error(result?.message || '订单创建失败，请重试')
    }

    orderId.value = result.orderId || ''
    orderStatus.value = result.orderStatus || ''

    if (!orderId.value) {
      throw new Error('订单号获取失败，请重试')
    }

    // 显示支付组件
    showPayment.value = true

  } catch (error) {
    console.error('订单创建失败:', error)
    alert(error.message || '订单创建失败，请重试')
  } finally {
    isProcessing.value = false
  }
}

// 处理个人信息录入完成
const handleInfoEntryComplete = async (data) => {
  try {
    console.log('收到个人信息录入数据:', data)

    // cartItems是数组，需要找到包含form的项目
    const itemWithForm = cartItems.value.find(item => item.form)
    const formValue = itemWithForm ? itemWithForm.form : null

    // 把个人信息录入数据赋值给formData
    formData.value = { ...formData.value, form: formValue, customize_id: data.id }

    // 标记该课程的个人信息已录入完成，并保存相关数据
    if (itemWithForm && itemWithForm.id) {
      const infoEntryKey = `info_entry_completed_${itemWithForm.id}`
      const infoData = {
        completed: true,
        customize_id: data.id,
        form_url: itemWithForm.form_url,
        timestamp: Date.now()
      }
      localStorage.setItem(infoEntryKey, JSON.stringify(infoData))
      console.log('个人信息录入完成，已保存状态和数据:', infoEntryKey, infoData)
    }

    isProcessing.value = true
  } catch (error) {
  } finally {
    isProcessing.value = false
  }
}

// 处理编辑个人信息
const handleEditInfo = () => {
  // cartItems是数组，需要找到包含form_url的项目
  const itemWithForm = cartItems.value.find(item => item.form_url)
  if (itemWithForm && itemWithForm.form_url && formData.value.customize_id) {
    // 构建编辑URL，添加page_type=edit和data_id参数
    const editUrl = itemWithForm.form_url + '&page_type=edit' + '&data_id=' + formData.value.customize_id
    console.log('打开编辑个人信息弹窗，URL:', editUrl)

    // 设置iframe地址并显示弹窗
    iframeSrc.value = editUrl
    // 设置弹窗类型为编辑
    iframeType.value = 'edit'
    // 设置弹窗标题
    iframeTitle.value = '编辑个人信息'
    showInfoEntry.value = true
  } else {
    console.log('无法编辑：未找到form_url或customize_id')
  }
}

// 处理个人信息录入关闭
const handleInfoEntryClose = () => {
  showInfoEntry.value = false
  // 重置弹窗标题
  iframeTitle.value = '个人信息录入'

  // cartItems是数组，需要找到包含form_url的项目
  const itemWithForm = cartItems.value.find(item => item.form_url)
  if (itemWithForm && itemWithForm.form_url) {
    // 写入地址查询详情
    iframeInfoSrc.value = itemWithForm.form_url + '&page_type=info' + '&data_id=' + formData.value.customize_id
    console.log('个人信息录入弹窗关闭，iframe地址:', iframeInfoSrc.value)

    // 不再需要动态调整iframe高度
  } else {
    console.log('未找到包含form_url的购物车项目')
  }
}

// 处理支付成功
const handlePaymentSuccess = () => {
  orderComplete.value = true
  clearCart();
}

// 处理支付失败
const handlePaymentFailed = (error) => {
  console.error('支付失败:', error)
  // showPayment.value = false
}

// 处理支付处理中
const handlePaymentProcessing = () => {
  console.log('支付处理中...')
}

// 返回详情页
const handleBack = () => {
  router.go(-1)
}
</script>