<template>
  <base-card class="date-range-selector" variant="elevated" :clickable="true" @click="handleClick">
    <view class="selector-content">
      <!-- 入住日期 -->
      <view class="date-column">
        <text class="date-label">{{ checkInLabel }}</text>
        <view class="date-display">
          <text class="date-month">{{ checkInMonth }}</text>
          <text class="date-unit">月</text>
          <text class="date-day">{{ checkInDay }}</text>
          <text class="date-unit">日</text>
        </view>
        <text class="date-weekday">{{ checkInWeekday }}</text>
      </view>

      <!-- 分隔线和天数 -->
      <view class="divider-section">
        <view class="divider-line"></view>
        <view class="night-badge">
          <text class="night-text">{{ nightCount }}晚</text>
        </view>
        <view class="divider-line"></view>
      </view>

      <!-- 退房日期 -->
      <view class="date-column">
        <text class="date-label">{{ checkOutLabel }}</text>
        <view class="date-display">
          <text class="date-month">{{ checkOutMonth }}</text>
          <text class="date-unit">月</text>
          <text class="date-day">{{ checkOutDay }}</text>
          <text class="date-unit">日</text>
        </view>
        <text class="date-weekday">{{ checkOutWeekday }}</text>
      </view>
    </view>

    <!-- 右侧箭头 -->
    <view class="arrow-icon">
      <u-icon name="arrow-right" :size="20" color="#9CA3AF" />
    </view>
  </base-card>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import BaseCard from '../base/BaseCard.vue';

interface Props {
  checkIn: string;           // 入住日期 YYYY-MM-DD
  checkOut: string;          // 退房日期 YYYY-MM-DD
  checkInLabel?: string;     // 入住标签
  checkOutLabel?: string;    // 退房标签
}

const props = withDefaults(defineProps<Props>(), {
  checkInLabel: '入住',
  checkOutLabel: '退房'
});

const emit = defineEmits<{
  'click': [];
}>();

// 计算入住日期信息
const checkInDate = computed(() => new Date(props.checkIn));
const checkInMonth = computed(() => checkInDate.value.getMonth() + 1);
const checkInDay = computed(() => checkInDate.value.getDate());
const checkInWeekday = computed(() => getWeekdayText(checkInDate.value));

// 计算退房日期信息
const checkOutDate = computed(() => new Date(props.checkOut));
const checkOutMonth = computed(() => checkOutDate.value.getMonth() + 1);
const checkOutDay = computed(() => checkOutDate.value.getDate());
const checkOutWeekday = computed(() => getWeekdayText(checkOutDate.value));

// 计算住宿天数
const nightCount = computed(() => {
  const diff = checkOutDate.value.getTime() - checkInDate.value.getTime();
  return Math.max(1, Math.ceil(diff / (1000 * 60 * 60 * 24)));
});

// 获取星期文本
function getWeekdayText(date: Date): string {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const targetDate = new Date(date);
  targetDate.setHours(0, 0, 0, 0);

  const diffDays = Math.round((targetDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));

  if (diffDays === 0) return '今天';
  if (diffDays === 1) return '明天';
  if (diffDays === 2) return '后天';

  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  return weekDays[date.getDay()];
}

// 点击事件
function handleClick() {
  emit('click');
}
</script>

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

.date-range-selector {
  position: relative;
}

.selector-content {
  @include flex-between;
  gap: $spacing-lg;
}

/* ========== 日期列 ========== */
.date-column {
  flex: 1;
  @include flex-column(flex-start, flex-start);
  gap: $spacing-xs;
}

.date-label {
  font-size: $font-sm;
  color: $text-secondary;
  font-weight: $font-medium;
}

.date-display {
  @include flex-row(flex-start, baseline);
  gap: 4rpx;
}

.date-month,
.date-day {
  font-size: $font-xl;
  font-weight: $font-bold;
  color: $text-primary;
  line-height: 1;
}

.date-unit {
  font-size: $font-sm;
  color: $text-secondary;
  font-weight: $font-regular;
}

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

/* ========== 分隔区域 ========== */
.divider-section {
  @include flex-column(center, center);
  gap: $spacing-xs;
  padding: 0 $spacing-md;
}

.divider-line {
  width: 2rpx;
  height: 40rpx;
  background: $border-base;
}

.night-badge {
  background: $primary-50;
  border-radius: $radius-round;
  padding: 4rpx $spacing-md;
}

.night-text {
  font-size: $font-xs;
  color: $primary-600;
  font-weight: $font-semibold;
  line-height: 1;
}

/* ========== 箭头图标 ========== */
.arrow-icon {
  position: absolute;
  right: $spacing-xl;
  top: 50%;
  transform: translateY(-50%);
}
</style>
