<template>
  <view class="page-merchant-detail">
    <!-- 顶部轮播图 -->
    <view class="hero-section">
      <swiper
        class="hero-swiper"
        :indicator-dots="true"
        :autoplay="true"
        :circular="true"
        indicator-color="rgba(255, 255, 255, 0.5)"
        indicator-active-color="#ffffff"
      >
        <swiper-item v-for="(image, index) in merchantImages" :key="index">
          <image :src="image" class="hero-image" mode="aspectFill" />
        </swiper-item>
      </swiper>

      <!-- 返回按钮 -->
      <view class="back-button" @tap="handleBack">
        <u-icon name="arrow-left" :size="20" color="#ffffff" />
      </view>
    </view>

    <!-- 商家信息卡片 -->
    <view class="merchant-info-card">
      <view class="merchant-header">
        <image :src="merchantData.logo || DEFAULT_AVATAR" class="merchant-logo" mode="aspectFill" />
        <view class="merchant-basic">
          <text class="merchant-name">{{ merchantData.shopName }}</text>
          <view class="merchant-rating">
            <view class="rating-stars">
              <u-icon
                v-for="i in 5"
                :key="i"
                name="star-fill"
                :size="16"
                :color="i <= Math.floor(merchantData.rating || 0) ? '#FFB800' : '#E5E5E5'"
              />
            </view>
            <text class="rating-score">{{ formatRating(merchantData.rating) }}</text>
            <text class="rating-count">({{ merchantData.reviewCount || 0 }}条评价)</text>
          </view>
        </view>
      </view>

      <!-- 商家标签 -->
      <view v-if="merchantData.tags && merchantData.tags.length > 0" class="merchant-tags">
        <view v-for="tag in merchantData.tags" :key="tag" class="tag-item">
          <text class="tag-text">{{ tag }}</text>
        </view>
      </view>

      <!-- 商家描述 -->
      <view v-if="merchantData.description" class="merchant-description">
        <text class="description-text">{{ merchantData.description }}</text>
      </view>

      <!-- 地址信息 -->
      <view class="merchant-address" @tap="handleOpenMap">
        <view class="address-icon">
          <u-icon name="map-fill" :size="18" color="#FF6B35" />
        </view>
        <text class="address-text">{{ fullAddress }}</text>
        <view class="address-action">
          <text class="action-label">导航</text>
          <u-icon name="arrow-right" :size="14" color="#999" />
        </view>
      </view>
    </view>

    <!-- 预订筛选器 -->
    <view class="booking-filter">
      <view class="filter-title">
        <u-icon name="calendar" :size="18" color="#FF6B35" />
        <text class="title-text">选择入住信息</text>
      </view>

      <view class="filter-items">
        <!-- 日期选择 -->
        <view class="filter-item" @tap="openDatePicker">
          <view class="item-label">
            <u-icon name="calendar" :size="16" color="#666" />
            <text class="label-text">入住日期</text>
          </view>
          <view class="item-value">
            <text class="value-text">{{ dateRangeText }}</text>
            <u-icon name="arrow-right" :size="14" color="#999" />
          </view>
        </view>

        <!-- 人数选择 -->
        <view class="filter-item" @tap="openRoomGuestPicker">
          <view class="item-label">
            <u-icon name="account" :size="16" color="#666" />
            <text class="label-text">入住人数</text>
          </view>
          <view class="item-value">
            <text class="value-text">{{ guestText }}</text>
            <u-icon name="arrow-right" :size="14" color="#999" />
          </view>
        </view>
      </view>
    </view>

    <!-- 房源列表 -->
    <view class="rooms-section">
      <view class="section-title-bar">
        <view class="title-left">
          <view class="title-icon">
            <u-icon name="home-fill" :size="20" color="#FF6B35" />
          </view>
          <text class="title-main">精选房源</text>
        </view>
        <view v-if="rooms.length > 0" class="title-right">
          <text class="room-count">共{{ rooms.length }}间</text>
        </view>
      </view>

      <!-- 骨架屏 -->
      <view v-if="isLoadingRooms" class="skeleton-list">
        <view v-for="i in 3" :key="i" class="skeleton-room">
          <view class="skeleton-img" />
          <view class="skeleton-info">
            <view class="skeleton-line title" />
            <view class="skeleton-line" />
            <view class="skeleton-line short" />
            <view class="skeleton-line price" />
          </view>
        </view>
      </view>

      <!-- 房源卡片 -->
      <view v-else-if="rooms.length > 0" class="rooms-grid">
        <view
          v-for="room in displayRooms"
          :key="room.id"
          class="room-card"
          @tap="handleRoomClick(room.id)"
        >
          <!-- 左侧图片 -->
          <view class="room-image-wrapper">
            <image :src="room.coverImage" class="room-image" mode="aspectFill" />
            <view v-if="!room.isAvailable" class="unavailable-badge">
              <text class="badge-text">已满</text>
            </view>
          </view>

          <!-- 右侧内容 -->
          <view class="room-content">
            <view class="room-header">
              <text class="room-name">{{ room.name }}</text>
              <view class="room-type-tag">
                <text class="type-text">{{ room.type }}</text>
              </view>
            </view>

            <view class="room-specs">
              <view class="spec-item">
                <u-icon name="grid" :size="12" color="#999" />
                <text class="spec-text">{{ room.area }}㎡</text>
              </view>
              <view class="spec-divider" />
              <view class="spec-item">
                <u-icon name="bed" :size="12" color="#999" />
                <text class="spec-text">{{ room.bedType }}</text>
              </view>
              <view class="spec-divider" />
              <view class="spec-item">
                <u-icon name="account" :size="12" color="#999" />
                <text class="spec-text">{{ room.maxGuests }}人</text>
              </view>
            </view>

            <view v-if="room.facilities && room.facilities.length > 0" class="room-tags">
              <text
                v-for="(facility, idx) in room.facilities.slice(0, 2)"
                :key="idx"
                class="facility-badge"
              >
                {{ facility }}
              </text>
            </view>

            <view class="room-bottom">
              <view class="room-price">
                <text class="price-symbol">¥</text>
                <text class="price-value">{{ room.currentPrice || room.price }}</text>
                <text class="price-unit">/晚</text>
              </view>
              <view
                class="book-btn"
                :class="{ disabled: !room.isAvailable }"
                @tap.stop="handleBookRoom(room)"
              >
                <text class="btn-text">{{ room.isAvailable ? '预订' : '满房' }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-rooms">
        <u-icon name="home" :size="60" color="#CCCCCC" />
        <text class="empty-title">暂无可预订房源</text>
        <text class="empty-desc">请尝试调整入住日期或人数</text>
      </view>
    </view>

    <!-- 用户评价 -->
    <view v-if="shouldShowReviews" class="reviews-section">
      <view class="section-title-bar">
        <view class="title-left">
          <view class="title-icon">
            <u-icon name="chat-fill" :size="20" color="#FF6B35" />
          </view>
          <text class="title-main">用户评价</text>
        </view>
        <view class="title-right">
          <text class="review-count">{{ totalReviews }}条</text>
          <view v-if="reviews.length > 0 && totalReviews > reviews.length" class="view-all" @tap="handleViewAllReviews">
            <text class="view-all-text">查看全部</text>
            <u-icon name="arrow-right" :size="14" color="#FF6B35" />
          </view>
        </view>
      </view>

      <!-- 评价列表 -->
      <view v-if="reviews.length > 0" class="reviews-list">
        <view v-for="review in displayReviews" :key="review.id" class="review-item">
          <view class="review-header">
            <image :src="review.userAvatar" class="user-avatar" mode="aspectFill" />
            <view class="user-info">
              <text class="user-name">{{ review.userName }}</text>
              <view class="review-rating">
                <u-icon
                  v-for="i in 5"
                  :key="i"
                  name="star-fill"
                  :size="12"
                  :color="i <= review.rating ? '#FFB800' : '#E5E5E5'"
                />
              </view>
            </view>
            <text class="review-date">{{ formatReviewDate(review.createdAt) }}</text>
          </view>

          <text v-if="review.content" class="review-content">{{ review.content }}</text>

          <view v-if="review.images && review.images.length > 0" class="review-images">
            <image
              v-for="(img, idx) in review.images"
              :key="idx"
              :src="img"
              class="review-image"
              mode="aspectFill"
              @tap="previewImage(review.images, idx)"
            />
          </view>

          <view v-if="review.reply" class="merchant-reply">
            <view class="reply-header">
              <u-icon name="shop" :size="14" color="#FF6B35" />
              <text class="reply-label">商家回复</text>
            </view>
            <text class="reply-content">{{ review.reply }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-reviews">
        <u-icon name="chat" :size="48" color="#CCCCCC" />
        <text class="empty-text">暂无评价</text>
      </view>
    </view>

    <!-- 弹窗 -->
    <DatePicker
      ref="datePickerRef"
      :check-in="bookingParams.checkIn"
      :check-out="bookingParams.checkOut"
      @change="handleDateChange"
    />
    <RoomGuestPicker
      ref="roomGuestPickerRef"
      :room-count="bookingParams.roomCount"
      :adult-count="bookingParams.adultCount"
      :child-count="bookingParams.childCount"
      @change="handleRoomGuestChange"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, reactive } from 'vue';
import { getMerchantById } from '@/api/user/merchant';
import { getRoomList } from '@/api/user/room';
import { getReviewList } from '@/api/user/review';
import { getDefaultDates, formatDateShort, calculateNights } from '@/utils/date';
import type { Merchant } from '@/types/merchant';
import type { Room, Review, RoomCardData, ReviewCardData, BookingParams } from '@/types/room';
import DatePicker from '@/components/DatePicker.vue';
import RoomGuestPicker from '@/components/RoomGuestPicker.vue';

// 常量
const DEFAULT_AVATAR = '/static/default-avatar.png';
const MAX_REVIEW_DISPLAY = 5;
const ROOM_PAGE_SIZE = 50;
const REVIEW_PAGE_SIZE = 10;

// 获取默认日期
const { today, tomorrow } = getDefaultDates();

// 商家数据
const merchantId = ref(0);
const merchantData = ref<Partial<Merchant>>({});

// 预订参数
const bookingParams = reactive<BookingParams>({
  checkIn: today,
  checkOut: tomorrow,
  roomCount: 1,
  adultCount: 1,
  childCount: 0,
});

// 房源数据
const rooms = ref<Room[]>([]);
const isLoadingRooms = ref(false);

// 评价数据
const reviews = ref<Review[]>([]);
const totalReviews = computed(() => merchantData.value.reviewCount || reviews.value.length);

// 弹窗引用
const datePickerRef = ref();
const roomGuestPickerRef = ref();

// 计算属性
const merchantImages = computed(() => {
  const coverImage = merchantData.value.coverImage;
  const images = merchantData.value.images || [];

  // 第一张使用封面图，后面使用店铺图片
  const result: string[] = [];

  if (coverImage) {
    result.push(coverImage);
  }

  if (images.length > 0) {
    result.push(...images);
  }

  // 如果没有任何图片，使用默认头像
  if (result.length === 0) {
    result.push(DEFAULT_AVATAR);
  }

  return result;
});

const fullAddress = computed(() => {
  const parts: string[] = [];
  const m = merchantData.value;
  if (m.province) parts.push(m.province);
  if (m.city) parts.push(m.city);
  if (m.district) parts.push(m.district);
  if (m.address) parts.push(m.address);
  return parts.join(' ');
});

const dateRangeText = computed(() => {
  const checkIn = formatDateShort(bookingParams.checkIn);
  const checkOut = formatDateShort(bookingParams.checkOut);
  const nights = calculateNights(bookingParams.checkIn, bookingParams.checkOut);
  return `${checkIn} - ${checkOut} (${nights}晚)`;
});

const guestText = computed(() => {
  const parts: string[] = [];
  if (bookingParams.roomCount > 0) parts.push(`${bookingParams.roomCount}间`);
  if (bookingParams.adultCount > 0) parts.push(`${bookingParams.adultCount}成人`);
  if (bookingParams.childCount > 0) parts.push(`${bookingParams.childCount}儿童`);
  return parts.join(' · ');
});

const shouldShowReviews = computed(() => {
  return totalReviews.value > 0 || reviews.value.length > 0;
});

const displayRooms = computed<RoomCardData[]>(() =>
  rooms.value.map(transformRoomData)
);

const displayReviews = computed<ReviewCardData[]>(() =>
  reviews.value.slice(0, MAX_REVIEW_DISPLAY).map(transformReviewData)
);

// 数据转换
function transformRoomData(room: Room): RoomCardData {
  return {
    id: room.id,
    name: room.name,
    coverImage: room.coverImage,
    type: room.type,
    area: room.area,
    bedType: room.bedType,
    maxGuests: room.maxGuests,
    price: room.price,
    currentPrice: room.currentPrice,
    facilities: room.facilities || [],
    isAvailable: room.isAvailable !== false,
    floor: room.floor,
    roomNumber: room.roomNumber,
  };
}

function transformReviewData(review: Review): ReviewCardData {
  return {
    id: review.id,
    userName: review.isAnonymous ? '匿名用户' : review.userName || `用户${review.userId}`,
    userAvatar: review.userAvatar || DEFAULT_AVATAR,
    rating: review.rating,
    content: review.content || '',
    images: review.images || [],
    reply: review.merchantReply || '',
    createdAt: review.createdAt,
  };
}

// 格式化评分
function formatRating(rating: any): string {
  const num = Number(rating);
  if (isNaN(num) || num === 0) return '暂无';
  return num.toFixed(1);
}

// 格式化评价日期
function formatReviewDate(dateStr: string): string {
  const date = new Date(dateStr);
  const now = new Date();
  const diffTime = now.getTime() - date.getTime();
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

  if (diffDays === 0) return '今天';
  if (diffDays === 1) return '昨天';
  if (diffDays < 7) return `${diffDays}天前`;
  if (diffDays < 30) return `${Math.floor(diffDays / 7)}周前`;
  if (diffDays < 365) return `${Math.floor(diffDays / 30)}个月前`;
  return `${Math.floor(diffDays / 365)}年前`;
}

// 初始化URL参数
function initializeFromUrl() {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1] as any;
  const options = currentPage.options || currentPage.$page?.options || {};

  merchantId.value = Number(options.id) || 0;

  if (options.checkIn) bookingParams.checkIn = options.checkIn;
  if (options.checkOut) bookingParams.checkOut = options.checkOut;
  if (options.roomCount) bookingParams.roomCount = Number(options.roomCount);
  if (options.adultCount) bookingParams.adultCount = Number(options.adultCount);
  if (options.childCount) bookingParams.childCount = Number(options.childCount);
}

// 获取商家信息
async function fetchMerchantData() {
  if (!merchantId.value) return;

  try {
    const response = await getMerchantById(merchantId.value);
    merchantData.value = response.data || {};
  } catch (error) {
    console.error('获取商家信息失败:', error);
    uni.showToast({ title: '加载商家信息失败', icon: 'none' });
  }
}

// 获取房源列表
async function fetchRoomList() {
  if (!merchantId.value) return;

  isLoadingRooms.value = true;

  try {
    const response = await getRoomList({
      merchantId: merchantId.value,
      pageSize: ROOM_PAGE_SIZE,
      checkIn: bookingParams.checkIn,
      checkOut: bookingParams.checkOut,
      roomCount: bookingParams.roomCount,
      adultCount: bookingParams.adultCount,
    });
    rooms.value = response.data?.list || [];
  } catch (error) {
    console.error('获取房源列表失败:', error);
    uni.showToast({ title: '加载房源失败，请重试', icon: 'none' });
  } finally {
    isLoadingRooms.value = false;
  }
}

// 获取评价列表
async function fetchReviewList() {
  if (!merchantId.value) return;

  try {
    const response = await getReviewList({
      merchantId: merchantId.value,
      pageSize: REVIEW_PAGE_SIZE,
    });
    reviews.value = response.data?.list || [];
  } catch (error) {
    console.error('获取评价列表失败:', error);
  }
}

// 弹窗操作
function openDatePicker() {
  datePickerRef.value?.open();
}

function openRoomGuestPicker() {
  roomGuestPickerRef.value?.open();
}

// 弹窗回调
function handleDateChange(checkIn: string, checkOut: string) {
  bookingParams.checkIn = checkIn;
  bookingParams.checkOut = checkOut;
  fetchRoomList();
}

function handleRoomGuestChange(rooms: number, adults: number, children: number) {
  bookingParams.roomCount = rooms;
  bookingParams.adultCount = adults;
  bookingParams.childCount = children;
  fetchRoomList();
}

// 导航操作
function handleBack() {
  uni.navigateBack();
}

function handleOpenMap() {
  const { latitude, longitude, shopName } = merchantData.value;

  if (!latitude || !longitude) {
    uni.showToast({ title: '暂无位置信息', icon: 'none' });
    return;
  }

  uni.openLocation({
    latitude,
    longitude,
    name: shopName || '商家位置',
    address: fullAddress.value,
    success: () => {
      console.log('打开地图成功');
    },
    fail: () => {
      uni.showToast({ title: '打开地图失败', icon: 'none' });
    },
  });
}

function handleRoomClick(roomId: number) {
  const queryParams = [
    `id=${roomId}`,
    `checkIn=${bookingParams.checkIn}`,
    `checkOut=${bookingParams.checkOut}`,
  ].join('&');
  uni.navigateTo({ url: `/pages/room-detail/index?${queryParams}` });
}

function handleBookRoom(room: RoomCardData) {
  if (!room.isAvailable) {
    uni.showToast({ title: '该房源暂不可预订', icon: 'none' });
    return;
  }

  const queryParams = [
    `roomId=${room.id}`,
    `merchantId=${merchantId.value}`,
    `checkIn=${bookingParams.checkIn}`,
    `checkOut=${bookingParams.checkOut}`,
  ].join('&');

  uni.navigateTo({ url: `/pages/order-create/index?${queryParams}` });
}

function handleViewAllReviews() {
  uni.showToast({ title: '功能开发中', icon: 'none' });
}

function previewImage(images: string[], current: number) {
  uni.previewImage({
    urls: images,
    current: current,
  });
}

// 生命周期
onMounted(() => {
  initializeFromUrl();

  if (merchantId.value) {
    fetchMerchantData();
    fetchRoomList();
    fetchReviewList();
  } else {
    uni.showToast({ title: '商家信息不存在', icon: 'none' });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.page-merchant-detail {
  min-height: 100vh;
  background: #F5F7FA;
  padding-bottom: 40rpx;
}

/* ========== 顶部轮播图 ========== */
.hero-section {
  position: relative;
  width: 100%;
  height: 500rpx;
}

.hero-swiper {
  width: 100%;
  height: 100%;
}

.hero-image {
  width: 100%;
  height: 100%;
}

.back-button {
  position: absolute;
  top: 40rpx;
  left: 24rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10rpx);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:active {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
  }
}

/* ========== 商家信息卡片 ========== */
.merchant-info-card {
  position: relative;
  z-index: 10;
  margin: -60rpx 24rpx 24rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

.merchant-header {
  display: flex;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.merchant-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  border: 2rpx solid #F0F0F0;
}

.merchant-basic {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.merchant-name {
  font-size: 36rpx;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.3;
}

.merchant-rating {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.rating-stars {
  display: flex;
  gap: 4rpx;
}

.rating-score {
  font-size: 28rpx;
  font-weight: 600;
  color: #FFB800;
}

.rating-count {
  font-size: 24rpx;
  color: #999;
}

.merchant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 20rpx;
}

.tag-item {
  padding: 8rpx 16rpx;
  background: linear-gradient(135deg, #FFF5E6 0%, #FFE8CC 100%);
  border-radius: 8rpx;
  border: 1rpx solid #FFD699;
}

.tag-text {
  font-size: 22rpx;
  color: #FF8C00;
  font-weight: 500;
}

.merchant-description {
  padding: 20rpx 0;
  border-top: 1rpx solid #F0F0F0;
  border-bottom: 1rpx solid #F0F0F0;
  margin-bottom: 20rpx;
}

.description-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.merchant-address {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx;
  background: #F8F9FA;
  border-radius: 12rpx;
  transition: all 0.3s ease;

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

.address-icon {
  flex-shrink: 0;
}

.address-text {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
}

.address-action {
  display: flex;
  align-items: center;
  gap: 4rpx;
  flex-shrink: 0;
}

.action-label {
  font-size: 24rpx;
  color: #FF6B35;
  font-weight: 500;
}

/* ========== 预订筛选器 ========== */
.booking-filter {
  margin: 0 24rpx 24rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.filter-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 24rpx;
}

.title-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
}

.filter-items {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.filter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background: #F8F9FA;
  border-radius: 12rpx;
  transition: all 0.3s ease;

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

.item-label {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.label-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.item-value {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.value-text {
  font-size: 26rpx;
  color: #666;
}

/* ========== 房源列表 ========== */
.rooms-section {
  margin: 0 24rpx 32rpx;
}

.section-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

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

.title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-main {
  font-size: 32rpx;
  font-weight: 700;
  color: #1A1A1A;
}

.title-right {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.room-count {
  font-size: 24rpx;
  color: #999;
  padding: 6rpx 16rpx;
  background: #F0F0F0;
  border-radius: 20rpx;
}

.review-count {
  font-size: 24rpx;
  color: #999;
}

.view-all {
  display: flex;
  align-items: center;
  gap: 4rpx;
  padding: 8rpx 16rpx;
  background: #FFF5F0;
  border-radius: 20rpx;
  transition: all 0.3s ease;

  &:active {
    background: #FFE8DD;
    transform: scale(0.95);
  }
}

.view-all-text {
  font-size: 24rpx;
  color: #FF6B35;
  font-weight: 500;
}

/* ========== 骨架屏 ========== */
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.skeleton-room {
  display: flex;
  gap: 20rpx;
  padding: 24rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
}

.skeleton-img {
  width: 200rpx;
  height: 160rpx;
  border-radius: 12rpx;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

.skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.skeleton-line {
  height: 28rpx;
  border-radius: 6rpx;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;

  &.title {
    width: 70%;
    height: 32rpx;
  }

  &.short {
    width: 50%;
  }

  &.price {
    width: 40%;
    height: 36rpx;
    margin-top: auto;
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ========== 房源卡片 ========== */
.rooms-grid {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.room-card {
  display: flex;
  gap: 20rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

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

.room-image-wrapper {
  position: relative;
  width: 200rpx;
  height: 160rpx;
  flex-shrink: 0;
}

.room-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.unavailable-badge {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  padding: 4rpx 12rpx;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4rpx);
  border-radius: 12rpx;
}

.badge-text {
  font-size: 20rpx;
  color: #FFFFFF;
  font-weight: 500;
}

.room-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.room-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.room-name {
  flex: 1;
  font-size: 28rpx;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.room-type-tag {
  flex-shrink: 0;
  padding: 4rpx 12rpx;
  background: #F0F7FF;
  border-radius: 8rpx;
}

.type-text {
  font-size: 20rpx;
  color: #4A90E2;
  font-weight: 500;
}

.room-specs {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.spec-text {
  font-size: 22rpx;
  color: #666;
}

.spec-divider {
  width: 2rpx;
  height: 20rpx;
  background: #E0E0E0;
}

.room-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 12rpx;
}

.facility-badge {
  padding: 4rpx 10rpx;
  background: #FFF5E6;
  border-radius: 6rpx;
  font-size: 20rpx;
  color: #FF8C00;
  border: 1rpx solid #FFE8CC;
}

.room-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-price {
  display: flex;
  align-items: baseline;
  gap: 2rpx;
}

.price-symbol {
  font-size: 22rpx;
  color: #FF6B35;
  font-weight: 600;
}

.price-value {
  font-size: 36rpx;
  color: #FF6B35;
  font-weight: 700;
  line-height: 1;
}

.price-unit {
  font-size: 22rpx;
  color: #999;
}

.book-btn {
  padding: 12rpx 28rpx;
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.25);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3);
  }

  &.disabled {
    background: #E0E0E0;
    box-shadow: none;
  }
}

.btn-text {
  font-size: 24rpx;
  color: #FFFFFF;
  font-weight: 600;
}

/* ========== 空状态 ========== */
.empty-rooms,
.empty-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
  background: #FFFFFF;
  border-radius: 16rpx;
}

.empty-title {
  font-size: 28rpx;
  color: #666;
  margin-top: 24rpx;
}

.empty-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 12rpx;
}

.empty-text {
  font-size: 26rpx;
  color: #999;
  margin-top: 16rpx;
}

/* ========== 评价列表 ========== */
.reviews-section {
  margin: 0 24rpx 32rpx;
}

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

.review-item {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.user-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

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

.user-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.review-rating {
  display: flex;
  gap: 4rpx;
}

.review-date {
  font-size: 22rpx;
  color: #999;
  flex-shrink: 0;
}

.review-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16rpx;
  display: block;
}

.review-images {
  display: flex;
  gap: 12rpx;
  margin-bottom: 16rpx;
  flex-wrap: wrap;
}

.review-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
}

.merchant-reply {
  padding: 20rpx;
  background: #F8F9FA;
  border-radius: 12rpx;
  border-left: 4rpx solid #FF6B35;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 12rpx;
}

.reply-label {
  font-size: 24rpx;
  color: #FF6B35;
  font-weight: 600;
}

.reply-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
</style>
