<template>
  <view class="calendar-screen">
    <view class="calendar-texture"></view>

    <!-- 固定头部 -->
    <view class="calendar-fixed-header">
      <!-- 状态栏占位 -->
      <view class="status-bar-placeholder"></view>

      <!-- Header -->
      <view class="calendar-header">
        <view class="calendar-back" @click="$emit('back')">‹</view>
        <view class="calendar-title">
          <text class="calendar-year">{{ year }}年 {{ lunarMonths[month] }}</text>
          <text class="calendar-subtitle">Year of the Dragon</text>
        </view>
        <view class="calendar-header-spacer"></view>
      </view>
    </view>

    <!-- 头部占位 -->
    <view class="calendar-header-placeholder"></view>

    <!-- Content -->
    <scroll-view scroll-y class="calendar-scroll">
      <!-- Controls -->
      <view class="calendar-controls">
        <button class="calendar-nav-button" @click="prevMonth">‹</button>
        <text class="calendar-month">
          {{ month + 1 }} <text class="calendar-month-unit">月</text>
        </text>
        <button class="calendar-nav-button" @click="nextMonth">›</button>
      </view>

      <!-- Weekdays -->
      <view class="calendar-weekdays">
        <text v-for="(d, i) in weekdays" :key="i" class="calendar-weekday"
          :class="{ 'calendar-weekday-weekend': i === 0 || i === 6 }">
          {{ d }}
        </text>
      </view>

      <!-- Calendar Grid -->
      <view class="calendar-grid">
        <view v-for="cell in calendarCells" :key="cell.key" class="calendar-cell"
          :class="cell.day ? ['calendar-cell-filled', cellSelected(cell.day) ? 'is-selected' : '', cellToday(cell.day) ? 'is-today' : ''] : 'calendar-cell-empty'"
          @click="cell.day && selectDay(cell.day)">
          <template v-if="cell.day">
            <text class="calendar-cell-day"
              :class="{ 'is-selected': cellSelected(cell.day), 'is-today': cellToday(cell.day) }">
              {{ cell.day }}
            </text>
            <text class="calendar-cell-lunar" :class="{ 'is-selected': cellSelected(cell.day) }">
              {{ lunarDay(cell.day) }}
            </text>
            <view v-if="cellToday(cell.day) && !cellSelected(cell.day)" class="calendar-today-dot"></view>
          </template>
        </view>
      </view>

      <!-- Detail Card -->
      <view class="calendar-detail-wrapper">
        <view class="calendar-detail">
          <view class="calendar-detail-corner"></view>
          <view class="calendar-detail-header">
            <view class="calendar-detail-date">
              <text class="calendar-detail-day">{{ selected.getDate() }}</text>
              <view class="calendar-detail-meta">
                <text class="calendar-detail-lunar">{{ lunarDay(selected.getDate()) }}</text>
                <text class="calendar-detail-weekday">{{ weekdayText(selected.getDay()) }}</text>
              </view>
            </view>
            <view class="calendar-detail-badge">今日运势</view>
          </view>

          <view class="calendar-detail-body">
            <view class="calendar-detail-row">
              <view class="calendar-detail-icon calendar-detail-icon-yi">宜</view>
              <view class="calendar-detail-tags">
                <text v-for="(item, i) in yiJi.yi" :key="i" class="calendar-detail-tag">{{ item }}</text>
              </view>
            </view>

            <view class="calendar-detail-row">
              <view class="calendar-detail-icon calendar-detail-icon-ji">忌</view>
              <view class="calendar-detail-tags">
                <text v-for="(item, i) in yiJi.ji" :key="i" class="calendar-detail-tag calendar-detail-tag-ji">{{ item
                  }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- CTA -->
      <view class="calendar-cta">
        <button class="calendar-cta-card" @click="$emit('auspicious')">
          <view class="calendar-cta-glow"></view>
          <view class="calendar-cta-content">
            <view>
              <text class="calendar-cta-title">精准八字择吉</text>
              <text class="calendar-cta-subtitle">结婚 · 开业 · 乔迁 · 动土</text>
            </view>
            <view class="calendar-cta-arrow">›</view>
          </view>
          <view class="calendar-cta-tags">
            <text class="calendar-cta-tag">个人定制</text>
            <text class="calendar-cta-tag">避讳冲煞</text>
          </view>
        </button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

const props = defineProps<{
  onBack?: () => void;
  onNavigateToAuspicious?: () => void;
}>();

const weekdays = ["日", "一", "二", "三", "四", "五", "六"];
const lunarMonths = ["正月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "冬月", "腊月"];
const lunarDays = [
  "初一", "初二", "初三", "初四", "初五", "初六", "初七", "初八", "初九", "初十",
  "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",
  "廿一", "廿二", "廿三", "廿四", "廿五", "廿六", "廿七", "廿八", "廿九", "三十"
];
const yiJiData = [
  { yi: ["出行", "开市", "交易", "裁衣", "安床"], ji: ["动土", "安葬", "破土", "作灶", "入宅"] },
  { yi: ["嫁娶", "订盟", "纳采", "祭祀", "祈福"], ji: ["开仓", "出货", "盖屋", "造桥", "破土"] },
  { yi: ["解除", "扫舍", "整手足甲", "沐浴"], ji: ["安门", "分居", "修造", "动土"] },
  { yi: ["塑绘", "开光", "进人口", "纳畜"], ji: ["嫁娶", "安葬", "行丧", "伐木"] },
  { yi: ["祭祀", "会亲友", "纳财", "捕捉"], ji: ["嫁娶", "开市", "安床", "探病"] }
];

const current = ref(new Date());
const selected = ref(new Date());

const year = computed(() => current.value.getFullYear());
const month = computed(() => current.value.getMonth());

const daysInMonth = computed(() => new Date(year.value, month.value + 1, 0).getDate());
const firstDayOfMonth = computed(() => new Date(year.value, month.value, 1).getDay());

const calendarCells = computed(() => {
  const cells: { key: string; day?: number }[] = [];
  for (let i = 0; i < firstDayOfMonth.value; i++) {
    cells.push({ key: `empty-${i}` });
  }
  for (let d = 1; d <= daysInMonth.value; d++) {
    cells.push({ key: `d-${d}`, day: d });
  }
  return cells;
});

const lunarDay = (d: number) => lunarDays[(d - 1) % 30];
const getYiJi = (d: number) => yiJiData[d % yiJiData.length];
const yiJi = computed(() => getYiJi(selected.value.getDate()));
const weekdayText = (d: number) => ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][d];

const selectDay = (d: number) => {
  selected.value = new Date(year.value, month.value, d);
};
const prevMonth = () => {
  current.value = new Date(year.value, month.value - 1, 1);
  if (month.value === selected.value.getMonth()) {
    selected.value = new Date(year.value, month.value, 1);
  }
};
const nextMonth = () => {
  current.value = new Date(year.value, month.value + 1, 1);
  if (month.value === selected.value.getMonth()) {
    selected.value = new Date(year.value, month.value + 1, 1);
  }
};

const cellSelected = (d: number) => selected.value.getDate() === d && selected.value.getMonth() === month.value;
const cellToday = (d: number) => {
  const today = new Date();
  return today.getFullYear() === year.value && today.getMonth() === month.value && today.getDate() === d;
};
</script>

<style scoped>
.calendar-screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fdfbf7;
  font-family: SimSun, "Songti SC", "Songti TC", "Noto Serif SC", STSong, serif;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 固定头部容器 */
.calendar-fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fdfbf7;
}

/* 状态栏占位 */
.status-bar-placeholder {
  height: var(--status-bar-height, 0);
  width: 100%;
  flex-shrink: 0;
}

/* 头部占位，防止内容被固定头部遮挡 */
.calendar-header-placeholder {
  height: calc(var(--status-bar-height, 0) + 120rpx);
  flex-shrink: 0;
}

.calendar-texture {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background-image: url("https://www.transparenttextures.com/patterns/rice-paper.png");
}

.calendar-header {
  position: relative;
  z-index: 10;
  padding: 28rpx 32rpx;
  border-bottom: 1px solid #eaddcf;
  background: rgba(255, 253, 249, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.04);
}

.calendar-back {
  padding: 16rpx;
  margin-left: -12rpx;
  color: #5a5a5a;
  background: transparent;
  border: none;
}

.calendar-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.calendar-year {
  font-size: 18px;
  font-weight: bold;
  color: #2c2c2c;
  letter-spacing: 0.3em;
}

.calendar-subtitle {
  font-size: 10px;
  color: #8a8a8a;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.calendar-header-spacer {
  width: 48rpx;
}

.calendar-scroll {
  flex: 1;
  position: relative;
  z-index: 10;
  padding-bottom: 80rpx;
  height: 0;
}

.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 48rpx 16rpx;
}

.calendar-nav-button {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  border: 1px solid #eaddcf;
  color: #8b2323;
  background: #fffdf9;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  line-height: 1;
  padding: 0;
}

.calendar-month {
  font-size: 24px;
  font-weight: bold;
  color: #2c2c2c;
}

.calendar-month-unit {
  font-size: 12px;
  color: #8a8a8a;
  margin-left: 8rpx;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 0 32rpx;
  margin-bottom: 12rpx;
}

.calendar-weekday {
  font-size: 12px;
  font-weight: 600;
  color: #5a5a5a;
  letter-spacing: 0.1em;
}

.calendar-weekday-weekend {
  color: #8b2323;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 32rpx;
  gap: 12rpx 0;
  margin-bottom: 32rpx;
}

.calendar-cell {
  height: 112rpx;
}

.calendar-cell-filled {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 12rpx;
  transition: all 0.2s ease;
}

.calendar-cell-filled.is-selected {
  background: #8b2323;
  box-shadow: 0 6rpx 12rpx rgba(139, 35, 35, 0.2);
}

.calendar-cell-filled.is-today:not(.is-selected) {
  background: rgba(139, 35, 35, 0.05);
}

.calendar-cell-day {
  font-size: 18px;
  font-weight: bold;
  color: #2c2c2c;
  letter-spacing: 0.1em;
}

.calendar-cell-day.is-selected {
  color: #fdfbf7;
}

.calendar-cell-day.is-today:not(.is-selected) {
  color: #8b2323;
}

.calendar-cell-lunar {
  font-size: 10px;
  color: #8a8a8a;
  transform: scale(0.95);
}

.calendar-cell-lunar.is-selected {
  color: rgba(253, 251, 247, 0.8);
}

.calendar-today-dot {
  position: absolute;
  bottom: 6rpx;
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: #8b2323;
}

.calendar-detail-wrapper {
  padding: 0 32rpx;
}

.calendar-detail {
  background: #fffdf9;
  border: 1px solid #eaddcf;
  border-radius: 20rpx;
  box-shadow: 0 12rpx 20rpx -8rpx rgba(0, 0, 0, 0.12);
  padding: 32rpx 32rpx 28rpx;
  position: relative;
  overflow: hidden;
}

.calendar-detail-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 96rpx;
  height: 96rpx;
  background: rgba(139, 35, 35, 0.05);
  border-bottom-left-radius: 160rpx;
}

.calendar-detail-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24rpx;
  border-bottom: 1px solid #eaddcf;
  padding-bottom: 16rpx;
}

.calendar-detail-date {
  display: flex;
  align-items: flex-end;
  gap: 16rpx;
}

.calendar-detail-day {
  font-size: 44px;
  font-weight: bold;
  color: #2c2c2c;
  letter-spacing: 0.05em;
}

.calendar-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.calendar-detail-lunar {
  font-size: 16px;
  font-weight: bold;
  color: #2c2c2c;
}

.calendar-detail-weekday {
  font-size: 12px;
  color: #8a8a8a;
}

.calendar-detail-badge {
  display: inline-block;
  padding: 6rpx 12rpx;
  background: #8b2323;
  color: #fdfbf7;
  font-size: 10px;
  letter-spacing: 0.2em;
  border-radius: 6rpx;
}

.calendar-detail-body {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.calendar-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}

.calendar-detail-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  border: 1px solid #2c2c2c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.calendar-detail-icon-yi {
  color: #2c2c2c;
}

.calendar-detail-icon-ji {
  border-color: #8b2323;
  color: #8b2323;
}

.calendar-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  padding-top: 6rpx;
}

.calendar-detail-tag {
  font-size: 14px;
  color: #5a5a5a;
  padding: 6rpx 12rpx;
  background: #f7f2ea;
  border-radius: 8rpx;
}

.calendar-detail-tag-ji {
  color: #8b2323;
  background: rgba(139, 35, 35, 0.08);
}

.calendar-cta {
  padding: 24rpx 32rpx 64rpx;
}

.calendar-cta-card {
  width: 100%;
  background: #2c2c2c;
  border-radius: 20rpx;
  padding: 32rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.18);
  text-align: left;
}

.calendar-cta-glow {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  width: 180rpx;
  height: 180rpx;
  background: #d4af37;
  opacity: 0.25;
  filter: blur(40rpx);
  border-radius: 50%;
}

.calendar-cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.calendar-cta-title {
  font-size: 18px;
  font-weight: bold;
  color: #d4af37;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 6rpx;
}

.calendar-cta-subtitle {
  font-size: 12px;
  color: rgba(242, 230, 216, 0.8);
  display: block;
}

.calendar-cta-arrow {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.calendar-cta-tags {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12rpx;
  margin-top: 16rpx;
}

.calendar-cta-tag {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
}
</style>
