<template>
  <view class="checkout-page">
    <!-- Empty State -->
    <view v-if="!itemCount" class="checkout-page__empty-card">
      <text class="checkout-page__empty-title">购物车还是空的</text>
      <text class="checkout-page__empty-desc">先去点餐页加购吧</text>
      <view class="checkout-page__empty-btn" @click="goMenu">
        <text>去点餐</text>
      </view>
    </view>

    <template v-else>
      <!-- Scene Tabs -->
      <view class="checkout-page__scene-tabs">
        <view
          v-for="option in appStore.sceneOptions"
          :key="option.value"
          class="checkout-page__scene-tab"
          :class="{ 'checkout-page__scene-tab--active': appStore.scene === option.value }"
          @click="appStore.setScene(option.value)"
        >
          <text>{{ option.label }}</text>
        </view>
      </view>

      <!-- Store Card -->
      <view class="checkout-page__oc-card">
        <view class="checkout-page__store">
          <view class="checkout-page__store-icon">
            <text>🏠</text>
          </view>
          <view class="checkout-page__store-info">
            <text class="checkout-page__store-name">{{ appStore.currentStore.name }}</text>
            <view class="checkout-page__store-meta">
              <view class="checkout-page__mode-badge">
                <text>{{ sceneLabel }}{{ sceneSuffix }}</text>
              </view>
              <text class="checkout-page__store-hint">{{ sceneHint }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Delivery: Address -->
      <view v-if="appStore.scene === 'Delivery'" class="checkout-page__oc-card">
        <view class="checkout-page__dash-divider" />
        <view class="checkout-page__address" @click="goSceneContext">
          <view class="checkout-page__addr-icon">
            <text>📍</text>
          </view>
          <view class="checkout-page__addr-body">
            <view class="checkout-page__addr-name">
              <text>{{ draftName }}</text>
              <text class="checkout-page__addr-phone">{{ draftPhone }}</text>
            </view>
            <text class="checkout-page__addr-detail">
              {{ fulfillmentStore.addressText || '请填写配送地址' }}
            </text>
          </view>
          <text class="checkout-page__addr-arrow">›</text>
        </view>
      </view>

      <!-- Pickup: Contact + info -->
      <view v-if="appStore.scene === 'Pickup'" class="checkout-page__oc-card">
        <view class="checkout-page__oc-card-body">
          <view class="checkout-page__pickup-contact">
            <view class="checkout-page__addr-icon checkout-page__addr-icon--green">
              <text>👤</text>
            </view>
            <view class="checkout-page__pickup-contact-body">
              <view class="checkout-page__addr-name">
                <text>{{ draftName }}</text>
                <text class="checkout-page__addr-phone">{{ draftPhone }}</text>
              </view>
              <text class="checkout-page__addr-detail">自提门店：{{ appStore.currentStore.name }}</text>
            </view>
          </view>
          <view class="checkout-page__pickup-hint">
            <text>🕐</text>
            <text class="checkout-page__pickup-hint-text">预计取餐时间 约 15 分钟后</text>
          </view>
        </view>
      </view>

      <!-- DineIn: Table Number -->
      <view v-if="appStore.scene === 'DineIn'" class="checkout-page__oc-card">
        <view class="checkout-page__oc-card-body">
          <view class="checkout-page__dinein-table">
            <view class="checkout-page__addr-icon checkout-page__addr-icon--green">
              <text>📅</text>
            </view>
            <view class="checkout-page__table-num">
              <text class="checkout-page__table-label">桌号</text>
              <text class="checkout-page__table-value">{{ fulfillmentStore.tableNo || '--' }}</text>
            </view>
          </view>
          <view class="checkout-page__dinein-contact">
            <view class="checkout-page__addr-icon checkout-page__addr-icon--green checkout-page__addr-icon--sm">
              <text>👤</text>
            </view>
            <view>
              <text class="checkout-page__dinein-name">{{ draftName }}</text>
              <text class="checkout-page__dinein-phone">{{ draftPhone }}</text>
            </view>
          </view>
          <view class="checkout-page__pickup-hint">
            <text>🛡</text>
            <text class="checkout-page__pickup-hint-text">下单后商家将尽快制作，请留意取餐提醒</text>
          </view>
        </view>
      </view>

      <!-- Customer Info -->
      <view class="checkout-page__oc-card">
        <view class="checkout-page__oc-card-body">
          <text class="checkout-page__field-title">顾客信息</text>
          <input class="field-input" :value="draftName" placeholder="请输入顾客姓名" @input="handleNameInput" />
          <input class="field-input checkout-page__field-gap" :value="draftPhone" type="number" placeholder="请输入手机号" @input="handlePhoneInput" />
        </view>
      </view>

      <!-- Product List -->
      <view class="checkout-page__oc-card">
        <view class="checkout-page__goods-title">
          <text class="checkout-page__goods-title-text">商品清单</text>
          <text class="checkout-page__goods-count">共 {{ itemCount }} 件</text>
        </view>
        <view class="checkout-page__goods-list">
          <view v-for="line in lineList" :key="line.lineKey" class="checkout-page__good">
            <image
              v-if="line.coverImageUrl"
              class="checkout-page__good-img"
              :src="line.coverImageUrl"
              mode="aspectFill"
            />
            <view class="checkout-page__good-info">
              <text class="checkout-page__good-name">{{ line.name }}</text>
              <text v-if="line.specText" class="checkout-page__good-spec">{{ line.specText }}</text>
            </view>
            <view class="checkout-page__good-right">
              <text class="checkout-page__good-price"><text class="checkout-page__good-unit">¥</text>{{ line.lineAmountText }}</text>
              <text class="checkout-page__good-qty">×{{ line.quantity }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Remark -->
      <view class="checkout-page__oc-card">
        <view class="checkout-page__remark">
          <text class="checkout-page__remark-title">✏️ 订单备注</text>
          <input class="field-input" type="text" placeholder="如少冰、少辣、不要香菜等" :value="remark" @input="handleRemarkInput" />
        </view>
      </view>

      <!-- Fees -->
      <view class="checkout-page__oc-card">
        <view class="checkout-page__fees">
          <view class="checkout-page__fee-row">
            <text class="checkout-page__fee-label">商品小计</text>
            <text class="checkout-page__fee-value">¥{{ estimate.originalAmountText }}</text>
          </view>
          <view class="checkout-page__fee-row">
            <text class="checkout-page__fee-label">打包费</text>
            <text class="checkout-page__fee-value">¥{{ estimate.packagingFeeText }}</text>
          </view>
          <view v-if="appStore.scene === 'Delivery'" class="checkout-page__fee-row">
            <text class="checkout-page__fee-label">配送费</text>
            <text class="checkout-page__fee-value">¥{{ estimate.deliveryFeeText }}</text>
          </view>
          <view v-if="estimate.discountAmount > 0" class="checkout-page__fee-row">
            <text class="checkout-page__fee-label">优惠抵扣</text>
            <text class="checkout-page__fee-value checkout-page__fee-value--green">-¥{{ estimate.discountAmountText }}</text>
          </view>
          <view class="checkout-page__fee-row checkout-page__fee-row--total">
            <text class="checkout-page__fee-label">应付金额</text>
            <text class="checkout-page__fee-value checkout-page__fee-value--total">
              <text class="checkout-page__fee-unit">¥</text>{{ estimate.payableAmountText }}
            </text>
          </view>
        </view>
      </view>

      <!-- Bottom Submit Bar -->
      <view class="checkout-page__submit-bar">
        <view class="checkout-page__submit-left">
          <text class="checkout-page__submit-label">应付金额</text>
          <view class="checkout-page__submit-price">
            <text class="checkout-page__submit-unit">¥</text>
            <text class="checkout-page__submit-value">{{ estimate.payableAmountText }}</text>
          </view>
          <text v-if="estimate.discountAmount > 0" class="checkout-page__submit-saved">已优惠 ¥{{ estimate.discountAmountText }}</text>
        </view>
        <view class="checkout-page__submit-btn" @click="submitOrder">
          <text>{{ submitting ? '提交中...' : '提交订单' }}</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { useCheckoutPage } from './composables/useCheckoutPage'

const {
  appStore,
  draftName,
  draftPhone,
  estimate,
  fulfillmentStore,
  goMenu,
  goSceneContext,
  handleNameInput,
  handlePhoneInput,
  handleRemarkInput,
  itemCount,
  lineList,
  remark,
  sceneHint,
  sceneLabel,
  sceneSuffix,
  submitOrder,
  submitting
} = useCheckoutPage()
</script>

<style lang="scss">
@use './styles/index.scss';
</style>
