<template>
  <view class="page-order-create">
    <!-- 房源信息卡片 -->
    <view class="room-card" v-if="room">
      <view class="room-cover-wrapper">
        <image class="room-cover" :src="room.coverImage || '/static/default-room.png'" mode="aspectFill" />
        <view class="room-badge">精选</view>
      </view>
      <view class="room-info">
        <text class="room-name">{{ room.name }}</text>
        <tag-list v-if="roomTags.length" :tags="roomTags" type="primary" size="small" />
        <view class="room-price-row">
          <text class="room-stock-tip" v-if="maxRoomCount <= 3">仅剩{{ maxRoomCount }}套</text>
        </view>
      </view>
    </view>

    <!-- 入住信息 -->
    <view class="section">
      <view class="section-header">
        <view class="section-icon">
          <u-icon name="calendar" :size="24" color="#667eea" />
        </view>
        <text class="section-title">入住信息</text>
      </view>

      <view class="date-selector" @tap="openCalendarPicker">
        <view class="date-box">
          <text class="date-label">入住日期</text>
          <text class="date-value">{{ checkInLabel || '请选择' }}</text>
          <text class="date-weekday">{{ checkInWeekday }}</text>
        </view>
        <view class="date-divider">
          <view class="divider-line"></view>
          <text class="divider-icon">→</text>
          <view class="divider-line"></view>
        </view>
        <view class="date-box">
          <text class="date-label">离店日期</text>
          <text class="date-value">{{ checkOutLabel || '请选择' }}</text>
          <text class="date-weekday">{{ checkOutWeekday }}</text>
        </view>
        <view class="night-badge">
          <text class="night-text">{{ nightCount }}晚</text>
        </view>
      </view>

      <!-- 房间和人数选择 -->
      <view class="count-section">
        <view class="count-row">
          <view class="count-left">
            <view class="count-icon">
              <u-icon name="home" :size="24" color="#667eea" />
            </view>
            <view class="count-text-group">
              <text class="count-label">房间套数</text>
              <text class="count-sublabel">最多{{ maxRoomCount }}套可订</text>
            </view>
          </view>
          <view class="count-stepper">
            <view class="stepper-btn" :class="{ disabled: roomCount <= 1 }" @tap="decreaseRoomCount">
              <text class="stepper-icon">-</text>
            </view>
            <text class="stepper-value">{{ roomCount }}</text>
            <view class="stepper-btn" :class="{ disabled: roomCount >= maxRoomCount }" @tap="increaseRoomCount">
              <text class="stepper-icon">+</text>
            </view>
          </view>
        </view>

        <view class="count-divider"></view>

        <view class="count-row">
          <view class="count-left">
            <view class="count-icon">
              <u-icon name="account" :size="24" color="#667eea" />
            </view>
            <view class="count-text-group">
              <text class="count-label">入住人数</text>
              <text class="count-sublabel">最多{{ maxGuestCount }}人</text>
            </view>
          </view>
          <view class="count-stepper">
            <view class="stepper-btn" :class="{ disabled: guestCount <= 1 }" @tap="decreaseGuestCount">
              <text class="stepper-icon">-</text>
            </view>
            <text class="stepper-value">{{ guestCount }}</text>
            <view class="stepper-btn" :class="{ disabled: guestCount >= maxGuestCount }" @tap="increaseGuestCount">
              <text class="stepper-icon">+</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 价格明细 -->
      <view class="price-detail">
        <view class="price-row">
          <text class="price-label">房费 ({{ nightCount }}晚 × {{ roomCount }}套)</text>
          <text class="price-value">¥{{ roomAmount }}</text>
        </view>

        <!-- 优惠券选择 -->
        <view class="coupon-row" @tap="selectCoupon">
          <view class="coupon-left">
            <u-icon name="coupon" :size="20" color="#ff6b6b" />
            <text class="coupon-label">优惠券</text>
          </view>
          <view class="coupon-right">
            <text v-if="selectedCoupon" class="coupon-selected">
              -¥{{ couponDiscount }}
            </text>
            <text v-else class="coupon-placeholder">
              {{ availableCouponCount > 0 ? `${availableCouponCount}张可用` : '暂无可用' }}
            </text>
            <u-icon name="arrow-right" :size="16" color="#999" />
          </view>
        </view>

        <view class="price-divider"></view>
        <view class="price-row total">
          <text class="price-label">合计</text>
          <view class="price-total">
            <text class="price-symbol">¥</text>
            <text class="price-amount">{{ finalPrice }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系人信息 -->
    <view class="section">
      <view class="section-header">
        <view class="section-icon">
          <u-icon name="account" :size="24" color="#667eea" />
        </view>
        <text class="section-title">联系人信息</text>
        <view class="guest-selector" @tap="openGuestPicker">
          <u-icon name="account-fill" :size="18" color="#667eea" />
          <text class="guest-selector-text">选择常住人</text>
        </view>
      </view>

      <view class="form-group">
        <view class="form-item">
          <view class="form-label-row">
            <text class="form-label">入住人姓名</text>
            <text class="form-required">*</text>
          </view>
          <input
            class="form-input"
            v-model="contactName"
            placeholder="请输入真实姓名"
            placeholder-class="input-placeholder"
          />
        </view>

        <view class="form-item">
          <view class="form-label-row">
            <text class="form-label">手机号码</text>
            <text class="form-required">*</text>
          </view>
          <input
            class="form-input"
            v-model="contactPhone"
            type="number"
            placeholder="用于接收订单通知"
            maxlength="11"
            placeholder-class="input-placeholder"
          />
        </view>

        <view class="form-item">
          <view class="form-label-row">
            <text class="form-label">身份证号</text>
            <text class="form-optional">选填</text>
          </view>
          <input
            class="form-input"
            v-model="contactIdCard"
            placeholder="入住时需提供"
            maxlength="18"
            placeholder-class="input-placeholder"
          />
        </view>

        <view class="form-item">
          <view class="form-label-row">
            <text class="form-label">特殊需求</text>
            <text class="form-optional">选填</text>
          </view>
          <textarea
            class="form-textarea"
            v-model="remark"
            placeholder="如需加床、禁烟房等，请在此备注"
            placeholder-class="input-placeholder"
          />
        </view>
      </view>
    </view>

    <!-- 温馨提示 -->
    <view class="tips-section">
      <view class="tips-title">
        <u-icon name="info-circle-fill" :size="20" color="#667eea" />
        <text class="tips-title-text">温馨提示</text>
      </view>
      <view class="tips-content">
        <text class="tips-item">• 请确保入住人信息真实有效</text>
        <text class="tips-item">• 入住时需出示有效身份证件</text>
        <text class="tips-item">• 如需取消订单，请提前联系商家</text>
      </view>
    </view>

    <!-- 底部提交栏 -->
    <view class="submit-bar">
      <view class="submit-left">
        <text class="submit-label">应付金额</text>
        <view class="submit-price">
          <text class="submit-symbol">¥</text>
          <text class="submit-amount">{{ finalPrice }}</text>
        </view>
      </view>
      <view class="submit-btn" @tap="handleSubmit">
        <text class="submit-text">提交订单</text>
      </view>
    </view>

    <!-- 日期选择弹窗 -->
    <RoomCalendarPicker
      ref="calendarPickerRef"
      :roomId="roomId"
      :checkIn="checkInDate"
      :checkOut="checkOutDate"
      @change="onDateChange"
    />

    <!-- 常住人选择弹窗 -->
    <u-popup v-model:show="showGuestPicker" mode="bottom" :round="20">
      <view class="guest-picker">
        <view class="picker-header">
          <text class="picker-title">选择常住人</text>
          <text class="picker-close" @tap="showGuestPicker = false">✕</text>
        </view>
        <view class="picker-body">
          <view
            v-for="guest in guestList"
            :key="guest.id"
            class="guest-option"
            @tap="selectGuest(guest)"
          >
            <view class="guest-option-info">
              <view class="guest-option-header">
                <text class="guest-option-name">{{ guest.name }}</text>
                <view v-if="guest.isDefault" class="guest-default-badge">默认</view>
              </view>
              <text class="guest-option-phone">{{ guest.phone }}</text>
              <text v-if="guest.idCard" class="guest-option-id">{{ maskIdCard(guest.idCard) }}</text>
            </view>
            <u-icon name="arrow-right" :size="20" color="#999" />
          </view>
        </view>
        <view class="picker-footer">
          <view class="manage-guest-btn" @tap="manageGuests">
            <u-icon name="setting" :size="20" color="#667eea" />
            <text class="manage-guest-text">管理常住人</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getRoomDetail, getRoomCalendar } from '@/api/user/room';
import { createOrder } from '@/api/user/order';
import { getAvailableCoupons } from '@/api/coupon';
import { getGuestList } from '@/api/guest';
import RoomCalendarPicker from '@/components/RoomCalendarPicker.vue';
import TagList from '@/components/business/TagList.vue';

const roomId = ref(0);
const merchantId = ref(0);
const checkInDate = ref('');
const checkOutDate = ref('');
const room = ref<any>(null);
const calendarPickerRef = ref();

const roomCount = ref(1);
const guestCount = ref(1);
const contactName = ref('');
const contactPhone = ref('');
const contactIdCard = ref('');
const remark = ref('');

// 优惠券相关
const availableCoupons = ref<any[]>([]);
const selectedCoupon = ref<any>(null);

// 常住人相关
const guestList = ref<any[]>([]);
const showGuestPicker = ref(false);

// 房态数据：记录每日剩余库存
const calendarStock = ref<Map<string, number>>(new Map());
const calendarPrice = ref<Map<string, number>>(new Map());

const typeLabels: Record<string, string> = {
  hotel: '酒店',
  homestay: '民宿',
  apartment: '公寓',
  hostel: '青旅',
};

const weekdayLabels = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

// 房源标签
const roomTags = computed(() => {
  const tags = [];
  if (room.value?.type) {
    tags.push(typeLabels[room.value.type] || room.value.type);
  }
  if (room.value?.bedType) {
    tags.push(room.value.bedType);
  }
  return tags;
});

const nightCount = computed(() => {
  if (!checkInDate.value || !checkOutDate.value) return 1;
  const diff = new Date(checkOutDate.value).getTime() - new Date(checkInDate.value).getTime();
  return Math.max(1, Math.ceil(diff / (1000 * 60 * 60 * 24)));
});

const checkInLabel = computed(() => {
  if (!checkInDate.value) return '';
  const d = new Date(checkInDate.value);
  return `${d.getMonth() + 1}月${d.getDate()}日`;
});

const checkOutLabel = computed(() => {
  if (!checkOutDate.value) return '';
  const d = new Date(checkOutDate.value);
  return `${d.getMonth() + 1}月${d.getDate()}日`;
});

const checkInWeekday = computed(() => {
  if (!checkInDate.value) return '';
  const d = new Date(checkInDate.value);
  return weekdayLabels[d.getDay()];
});

const checkOutWeekday = computed(() => {
  if (!checkOutDate.value) return '';
  const d = new Date(checkOutDate.value);
  return weekdayLabels[d.getDay()];
});

// 最大房间套数：取入住日期区间内每日最小剩余库存
const maxRoomCount = computed(() => {
  if (!checkInDate.value || !checkOutDate.value || calendarStock.value.size === 0) return 1;
  const checkIn = new Date(checkInDate.value);
  const checkOut = new Date(checkOutDate.value);
  let minStock = Infinity;
  for (let d = new Date(checkIn); d < checkOut; d.setDate(d.getDate() + 1)) {
    const dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    const stock = calendarStock.value.get(dateStr);
    if (stock === undefined || stock <= 0) return 1;
    minStock = Math.min(minStock, stock);
  }
  return minStock === Infinity ? 1 : minStock;
});

// 最大入住人数：房源maxGuests * 房间套数
const maxGuestCount = computed(() => {
  const base = room.value?.maxGuests || 1;
  return base * roomCount.value;
});

// 房费总额
const roomAmount = computed(() => {
  if (!room.value || !checkInDate.value || !checkOutDate.value) return 0;

  // 如果有日历价格数据，使用日历价格计算
  if (calendarPrice.value.size > 0) {
    const checkIn = new Date(checkInDate.value);
    const checkOut = new Date(checkOutDate.value);
    let totalPrice = 0;

    for (let d = new Date(checkIn); d < checkOut; d.setDate(d.getDate() + 1)) {
      const dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
      const price = Number(calendarPrice.value.get(dateStr) || room.value.price || 0);
      totalPrice += price;
    }

    return (totalPrice * roomCount.value).toFixed(2);
  }

  // 否则使用基础价格
  return (Number(room.value.price || 0) * nightCount.value * roomCount.value).toFixed(2);
});

// 优惠券折扣金额
const couponDiscount = computed(() => {
  if (!selectedCoupon.value) return '0';
  const coupon = selectedCoupon.value.coupon;
  const amount = parseFloat(roomAmount.value);

  if (coupon.type === 'fixed') {
    return Math.min(coupon.value, amount).toFixed(2);
  } else if (coupon.type === 'percent') {
    return (amount * (1 - coupon.value / 100)).toFixed(2);
  }
  return '0';
});

// 最终支付金额（房费 - 优惠券）
// 注意：平台服务费5%是从用户实际支付金额中抽取的，不额外收取
const finalPrice = computed(() => {
  const amount = parseFloat(roomAmount.value);
  const discount = parseFloat(couponDiscount.value);
  return Math.max(0, amount - discount).toFixed(2);
});

// 可用优惠券数量
const availableCouponCount = computed(() => {
  return availableCoupons.value.filter((item: any) => {
    const coupon = item.coupon;
    const amount = parseFloat(roomAmount.value);
    return amount >= coupon.minAmount;
  }).length;
});

function initFromUrl() {
  const pages = getCurrentPages();
  const page = pages[pages.length - 1] as any;
  const options = page.options || page.$page?.options || {};

  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);
  const fmt = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;

  roomId.value = Number(options.roomId) || 0;
  merchantId.value = Number(options.merchantId) || 0;
  checkInDate.value = options.checkIn || fmt(today);
  checkOutDate.value = options.checkOut || fmt(tomorrow);
}

onMounted(() => {
  initFromUrl();
  if (roomId.value) {
    fetchRoom();
    fetchCalendarStock();
    fetchAvailableCoupons();
    fetchGuestList();
  }
});

onShow(() => {
  // 页面显示时重新加载常住人列表（从添加常住人页面返回时）
  if (roomId.value) {
    fetchGuestList();
  }
});

// 日期变化时重新获取房态
watch([checkInDate, checkOutDate], () => {
  if (roomId.value) {
    fetchCalendarStock();
  }
});

async function fetchRoom() {
  try {
    const res = await getRoomDetail(roomId.value);
    room.value = res.data;
  } catch (e) {
    console.error(e);
  }
}

async function fetchCalendarStock() {
  if (!checkInDate.value || !checkOutDate.value) return;
  try {
    const res = await getRoomCalendar(roomId.value, checkInDate.value, checkOutDate.value);
    const data = res.data || [];
    const stockMap = new Map<string, number>();
    const priceMap = new Map<string, number>();
    for (const item of data) {
      stockMap.set(item.date, (item.stock || 0) - (item.sold || 0));
      priceMap.set(item.date, Number(item.price || room.value?.price || 0));
    }
    calendarStock.value = stockMap;
    calendarPrice.value = priceMap;
  } catch (e) {
    console.error(e);
  }
}

async function fetchAvailableCoupons() {
  try {
    const res = await getAvailableCoupons({
      merchantId: merchantId.value,
      roomId: roomId.value
    });
    availableCoupons.value = res.data || [];
  } catch (e) {
    console.error(e);
  }
}

async function fetchGuestList() {
  try {
    const res = await getGuestList();
    console.log('常住人列表数据:', res.data);
    guestList.value = res.data?.data || [];
    // 如果有默认常住人，自动填充
    const defaultGuest = guestList.value.find((g: any) => g.isDefault);
    if (defaultGuest && !contactName.value) {
      console.log('默认常住人:', defaultGuest);
      fillGuestInfo(defaultGuest);
    }
  } catch (e) {
    console.error(e);
  }
}

function selectCoupon() {
  if (availableCouponCount.value === 0) {
    uni.showToast({ title: '暂无可用优惠券', icon: 'none' });
    return;
  }

  const amount = parseFloat(roomAmount.value);
  const usableCoupons = availableCoupons.value.filter((item: any) => {
    return amount >= item.coupon.minAmount;
  });

  const items = usableCoupons.map((item: any) => {
    const coupon = item.coupon;
    let desc = '';
    if (coupon.type === 'fixed') {
      desc = `满${coupon.minAmount}减${coupon.value}`;
    } else {
      desc = `满${coupon.minAmount}打${coupon.value / 10}折`;
    }
    return `${coupon.name} (${desc})`;
  });

  items.push('不使用优惠券');

  uni.showActionSheet({
    itemList: items,
    success: (res) => {
      if (res.tapIndex < usableCoupons.length) {
        selectedCoupon.value = usableCoupons[res.tapIndex];
      } else {
        selectedCoupon.value = null;
      }
    },
  });
}

function decreaseRoomCount() {
  if (roomCount.value > 1) {
    roomCount.value--;
    // 如果入住人数超过新的最大值，自动调整
    if (guestCount.value > maxGuestCount.value) {
      guestCount.value = maxGuestCount.value;
    }
  }
}

function increaseRoomCount() {
  if (roomCount.value < maxRoomCount.value) {
    roomCount.value++;
  }
}

function decreaseGuestCount() {
  if (guestCount.value > 1) {
    guestCount.value--;
  }
}

function increaseGuestCount() {
  if (guestCount.value < maxGuestCount.value) {
    guestCount.value++;
  }
}

async function handleSubmit() {
  if (!contactName.value) {
    uni.showToast({ title: '请输入入住人姓名', icon: 'none' });
    return;
  }
  if (!contactPhone.value || !/^1[3-9]\d{9}$/.test(contactPhone.value)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
    return;
  }

  try {
    const res = await createOrder({
      roomId: roomId.value,
      checkInDate: checkInDate.value,
      checkOutDate: checkOutDate.value,
      roomCount: roomCount.value,
      guestCount: guestCount.value,
      contactName: contactName.value,
      contactPhone: contactPhone.value,
      contactIdCard: contactIdCard.value || undefined,
      remark: remark.value,
      couponId: selectedCoupon.value?.coupon?.id || undefined,
    });
    uni.showToast({ title: '订单创建成功', icon: 'success' });
    const orderNo = res.data?.orderNo;
    if (orderNo) {
      uni.redirectTo({ url: `/pages/order-detail/index?orderNo=${orderNo}` });
    }
  } catch (e: any) {
    uni.showToast({ title: e.message || '订单创建失败', icon: 'none' });
  }
}

function openCalendarPicker() {
  calendarPickerRef.value?.open();
}

function onDateChange(checkIn: string, checkOut: string) {
  checkInDate.value = checkIn;
  checkOutDate.value = checkOut;
}

function openGuestPicker() {
  if (guestList.value.length === 0) {
    uni.showModal({
      title: '提示',
      content: '暂无常住人，是否前往添加？',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({ url: '/pages/guest/index' });
        }
      }
    });
    return;
  }
  showGuestPicker.value = true;
}

function selectGuest(guest: any) {
  fillGuestInfo(guest);
  showGuestPicker.value = false;
  uni.showToast({ title: '已选择常住人', icon: 'success' });
}

function fillGuestInfo(guest: any) {
  contactName.value = guest.name || '';
  contactPhone.value = guest.phone || '';
  contactIdCard.value = guest.idCard || '';
}

function maskIdCard(idCard: string) {
  if (!idCard || idCard.length < 8) return idCard;
  return idCard.substring(0, 6) + '********' + idCard.substring(idCard.length - 4);
}

function manageGuests() {
  showGuestPicker.value = false;
  uni.navigateTo({ url: '/pages/guest/index' });
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/common.scss';

.page-order-create {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  padding-bottom: 160rpx;
}

// 房源卡片
.room-card {
  display: flex;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  margin: 24rpx;
  border-radius: 24rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, $primary-color 0%, #ff6b9d 100%);
  }
}

.room-cover-wrapper {
  position: relative;
  flex-shrink: 0;
}

.room-cover {
  width: 180rpx;
  height: 180rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.room-badge {
  position: absolute;
  top: 8rpx;
  left: 8rpx;
  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
  color: #ffffff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-weight: 600;
  box-shadow: 0 2rpx 8rpx rgba(255, 107, 157, 0.3);
}

.room-info {
  flex: 1;
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.room-name {
  font-size: 32rpx;
  font-weight: 700;
  color: $text-primary;
  line-height: 1.4;
  margin-bottom: 12rpx;
}

.room-price-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.room-stock-tip {
  font-size: 22rpx;
  color: #ff4d4f;
  background: #fff1f0;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-weight: 500;
}

// 通用区块
.section {
  background: #ffffff;
  margin: 24rpx;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  position: relative;
}

.section-icon {
  font-size: 40rpx;
  margin-right: 12rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: $text-primary;
  flex: 1;
}

.guest-selector {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 20rpx;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
  border-radius: 24rpx;
  border: 2rpx solid #91d5ff;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, #d6f0ff 0%, #e0e8ff 100%);
  }
}

.guest-selector-text {
  font-size: 24rpx;
  font-weight: 600;
  color: #667eea;
}

// 日期选择器
.date-selector {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 20rpx;
  padding: 32rpx 24rpx;
  display: flex;
  align-items: center;
  position: relative;
  border: 2rpx solid #e8e8e8;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  }
}

.date-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date-label {
  font-size: 24rpx;
  color: $text-secondary;
  margin-bottom: 8rpx;
}

.date-value {
  font-size: 32rpx;
  font-weight: 700;
  color: $text-primary;
  margin-bottom: 4rpx;
}

.date-weekday {
  font-size: 22rpx;
  color: $text-tertiary;
}

.date-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 16rpx;
}

.divider-line {
  width: 1rpx;
  height: 20rpx;
  background: #e8e8e8;
}

.divider-icon {
  font-size: 28rpx;
  color: $primary-color;
  margin: 4rpx 0;
}

.night-badge {
  position: absolute;
  top: -12rpx;
  right: 24rpx;
  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.3);
}

.night-text {
  font-size: 24rpx;
  font-weight: 700;
  color: #ffffff;
}

// 数量选择
.count-section {
  margin-top: 24rpx;
  background: #f8f9fa;
  border-radius: 20rpx;
  padding: 8rpx 0;
}

.count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 24rpx;
}

.count-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.count-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.count-text-group {
  display: flex;
  flex-direction: column;
}

.count-label {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 4rpx;
}

.count-sublabel {
  font-size: 22rpx;
  color: $text-tertiary;
}

.count-divider {
  height: 1rpx;
  background: #e8e8e8;
  margin: 0 24rpx;
}

.count-stepper {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 4rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.stepper-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 12rpx;
  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.9);
  }

  &.disabled {
    background: #f0f0f0;
    opacity: 0.5;
  }
}

.stepper-icon {
  font-size: 36rpx;
  font-weight: 700;
  color: #ffffff;
}

.stepper-value {
  min-width: 80rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 700;
  color: $text-primary;
}

// 价格明细
.price-detail {
  margin-top: 32rpx;
  background: linear-gradient(135deg, #fff7e6 0%, #fff1f0 100%);
  border-radius: 20rpx;
  padding: 24rpx;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }

  &.total {
    margin-top: 16rpx;
    padding-top: 16rpx;
  }
}

.price-label {
  font-size: 26rpx;
  color: $text-secondary;
}

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

.price-divider {
  height: 1rpx;
  background: rgba(0, 0, 0, 0.06);
  margin: 16rpx 0;
}

.price-total {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 28rpx;
  font-weight: 700;
  color: $primary-color;
  margin-right: 4rpx;
}

.price-amount {
  font-size: 40rpx;
  font-weight: 700;
  color: $primary-color;
}

// 优惠券行
.coupon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  cursor: pointer;
}

.coupon-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.coupon-label {
  font-size: 26rpx;
  color: $text-secondary;
}

.coupon-right {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.coupon-selected {
  font-size: 28rpx;
  font-weight: 600;
  color: #ff4d4f;
}

.coupon-placeholder {
  font-size: 26rpx;
  color: #999;
}

// 表单
.form-group {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.form-item {
  display: flex;
  flex-direction: column;
}

.form-label-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.form-label {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
}

.form-required {
  font-size: 28rpx;
  color: #ff4d4f;
  margin-left: 4rpx;
}

.form-optional {
  font-size: 22rpx;
  color: $text-tertiary;
  margin-left: 8rpx;
  background: #f0f0f0;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
}

.form-input {
  height: 88rpx;
  background: #f8f9fa;
  border: 2rpx solid #e8e8e8;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: $text-primary;
  transition: all 0.3s ease;

  &:focus {
    background: #ffffff;
    border-color: $primary-color;
    box-shadow: 0 0 0 4rpx rgba(255, 107, 157, 0.1);
  }
}

.form-textarea {
  min-height: 160rpx;
  background: #f8f9fa;
  border: 2rpx solid #e8e8e8;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  font-size: 28rpx;
  color: $text-primary;
  line-height: 1.6;
  transition: all 0.3s ease;

  &:focus {
    background: #ffffff;
    border-color: $primary-color;
    box-shadow: 0 0 0 4rpx rgba(255, 107, 157, 0.1);
  }
}

.input-placeholder {
  color: #bfbfbf;
}

// 温馨提示
.tips-section {
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
  margin: 24rpx;
  border-radius: 20rpx;
  padding: 24rpx;
  border-left: 6rpx solid #1890ff;
}

.tips-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #1890ff;
  margin-bottom: 16rpx;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.tips-item {
  font-size: 24rpx;
  color: #595959;
  line-height: 1.6;
}

// 底部提交栏
.submit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
  z-index: 100;
}

.submit-left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.submit-label {
  font-size: 24rpx;
  color: $text-secondary;
  margin-bottom: 4rpx;
}

.submit-price {
  display: flex;
  align-items: baseline;
}

.submit-symbol {
  font-size: 28rpx;
  font-weight: 700;
  color: $primary-color;
  margin-right: 4rpx;
}

.submit-amount {
  font-size: 48rpx;
  font-weight: 700;
  color: $primary-color;
}

.submit-btn {
  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
  border-radius: 48rpx;
  height: 96rpx;
  width: 280rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 157, 0.4);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.3);
  }
}

.submit-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2rpx;
}

// 常住人选择弹窗
.guest-picker {
  background: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.picker-title {
  font-size: 32rpx;
  font-weight: 700;
  color: $text-primary;
}

.picker-close {
  font-size: 40rpx;
  color: #999;
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 16rpx 0;
}

.guest-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: all 0.2s ease;

  &:active {
    background: #f8f9fa;
  }

  &:last-child {
    border-bottom: none;
  }
}

.guest-option-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.guest-option-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.guest-option-name {
  font-size: 30rpx;
  font-weight: 600;
  color: $text-primary;
}

.guest-default-badge {
  padding: 4rpx 12rpx;
  background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 100%);
  color: #ffffff;
  font-size: 20rpx;
  border-radius: 8rpx;
  font-weight: 600;
}

.guest-option-phone {
  font-size: 26rpx;
  color: $text-secondary;
}

.guest-option-id {
  font-size: 24rpx;
  color: $text-tertiary;
}

.picker-footer {
  padding: 24rpx 32rpx;
  border-top: 1rpx solid #f0f0f0;
}

.manage-guest-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  height: 88rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2rpx solid #e8e8e8;
  border-radius: 16rpx;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    background: #f0f0f0;
  }
}

.manage-guest-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #667eea;
}
</style>