<template>
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="时段调整" show-back />
    <!-- Tabs -->
    <view class="tabs">
      <view
        v-for="(tab, i) in tabs"
        :key="i"
        class="tab"
        :class="{ 'tab--active': activeTab === i }"
        @tap="activeTab = i"
      >
        <text class="tab-text">{{ tab }}</text>
      </view>
    </view>

    <!-- ① Add slot -->
    <view v-if="activeTab === 0" class="panel">
      <view class="form-card">
        <view class="form-row">
          <text class="form-label">日期</text>
          <picker mode="date" :value="addForm.date" @change="(e: any) => addForm.date = e.detail.value">
            <view class="picker-display">
              <text class="picker-text">{{ addForm.date || '请选择' }}</text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>
        <view class="form-row">
          <text class="form-label">开始时间</text>
          <picker mode="time" :value="addForm.startTime" @change="(e: any) => addForm.startTime = e.detail.value">
            <view class="picker-display">
              <text class="picker-text">{{ addForm.startTime || '请选择' }}</text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>
        <view class="form-row">
          <text class="form-label">结束时间</text>
          <picker mode="time" :value="addForm.endTime" @change="(e: any) => addForm.endTime = e.detail.value">
            <view class="picker-display">
              <text class="picker-text">{{ addForm.endTime || '请选择' }}</text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>
        <view class="form-row form-row--last">
          <text class="form-label">容量</text>
          <input
            class="form-input"
            type="number"
            v-model="addForm.capacityStr"
            placeholder="如：10"
            placeholder-style="color:#bbb"
          />
        </view>
      </view>
      <view class="action-wrap">
        <view class="action-btn" :class="{ 'action-btn--loading': submitting }" @tap="submitAddSlot">
          <text class="action-btn-text">{{ submitting ? '提交中...' : '新增时段' }}</text>
        </view>
      </view>
    </view>

    <!-- ② Close slot -->
    <view v-else-if="activeTab === 1" class="panel">
      <view class="date-picker-row">
        <picker mode="date" :value="closeDate" @change="(e: any) => { closeDate = e.detail.value; loadSlotsForClose() }">
          <view class="picker-display">
            <text class="picker-label">选择日期：</text>
            <text class="picker-text">{{ closeDate }}</text>
            <text class="picker-arrow">›</text>
          </view>
        </picker>
      </view>

      <view v-if="slotsLoading" class="skeleton-list">
        <view v-for="i in 4" :key="i" class="skeleton-item" />
      </view>

      <view v-else-if="!daySlots.length" class="empty-state">
        <text class="empty-icon">📭</text>
        <text class="empty-text">该日暂无时段</text>
      </view>

      <view v-else class="slot-list">
        <view v-for="slot in daySlots" :key="slot.id" class="slot-row">
          <view class="slot-info">
            <text class="slot-time">{{ slot.startTime }} – {{ slot.endTime }}</text>
            <view class="slot-badge" :class="slotBadgeClass(slot.status)">
              <text class="slot-badge-text">{{ slot.status }}</text>
            </view>
          </view>
          <text class="slot-count">{{ slot.bookedCount }}/{{ slot.capacity }}</text>
          <view
            v-if="slot.status !== 'CLOSED'"
            class="close-btn"
            @tap="closeSlot(slot)"
          >
            <text class="close-btn-text">关闭</text>
          </view>
          <view v-else class="closed-tag">
            <text class="closed-tag-text">已关闭</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ③ Batch generate -->
    <view v-else class="panel">
      <view class="form-card">
        <view class="form-row">
          <text class="form-label">开始日期</text>
          <picker mode="date" :value="genForm.startDate" @change="(e: any) => genForm.startDate = e.detail.value">
            <view class="picker-display">
              <text class="picker-text">{{ genForm.startDate || '请选择' }}</text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>
        <view class="form-row form-row--last">
          <text class="form-label">结束日期</text>
          <picker mode="date" :value="genForm.endDate" @change="(e: any) => genForm.endDate = e.detail.value">
            <view class="picker-display">
              <text class="picker-text">{{ genForm.endDate || '请选择' }}</text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>
      </view>
      <text class="gen-hint">将根据排课模板，自动生成所选日期范围内的时段</text>
      <view class="action-wrap">
        <view class="action-btn" :class="{ 'action-btn--loading': submitting }" @tap="submitGenerate">
          <text class="action-btn-text">{{ submitting ? '生成中...' : '批量生成' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CustomNavBar from '../../components/CustomNavBar.vue'
import { getSystemLayout } from '../../utils/system'
import { useAdminStore } from '../../stores/admin'
import { formatDate } from '../../utils/format'
import type { TimeSlot } from '@mp-pilates/shared'

const adminStore = useAdminStore()

const navBarHeight = ref('64px')
const tabs = ['新增时段', '关闭时段', '批量生成']
const activeTab = ref(0)
const submitting = ref(false)
const slotsLoading = ref(false)

// ── Add slot form ────────────────────────────────────────────────
const addForm = ref({
  date: formatDate(new Date()),
  startTime: '09:00',
  endTime: '10:00',
  capacityStr: '10',
})

async function submitAddSlot() {
  if (submitting.value) return
  if (!addForm.value.date || !addForm.value.startTime || !addForm.value.endTime) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
    return
  }
  const capacity = parseInt(addForm.value.capacityStr, 10)
  submitting.value = true
  try {
    await adminStore.createManualSlot({
      date: addForm.value.date,
      startTime: addForm.value.startTime,
      endTime: addForm.value.endTime,
      capacity: isNaN(capacity) ? undefined : capacity,
    })
    uni.showToast({ title: '新增成功', icon: 'success' })
  } catch (e: any) {
    uni.showToast({ title: e?.message ?? '新增失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}

// ── Close slot ────────────────────────────────────────────────────
const closeDate = ref(formatDate(new Date()))
const daySlots = ref<TimeSlot[]>([])

async function loadSlotsForClose() {
  slotsLoading.value = true
  try {
    daySlots.value = await adminStore.fetchSlotsByDate(closeDate.value)
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    slotsLoading.value = false
  }
}

async function closeSlot(slot: TimeSlot) {
  uni.showModal({
    title: '确认关闭',
    content: `关闭 ${slot.startTime}–${slot.endTime} 时段？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          await adminStore.closeSlot(slot.id)
          uni.showToast({ title: '已关闭', icon: 'success' })
          await loadSlotsForClose()
        } catch {
          uni.showToast({ title: '操作失败', icon: 'none' })
        }
      }
    },
  })
}

function slotBadgeClass(status: string) {
  if (status === 'OPEN') return 'badge--open'
  if (status === 'FULL') return 'badge--full'
  return 'badge--closed'
}

// ── Batch generate ────────────────────────────────────────────────
const genForm = ref({
  startDate: formatDate(new Date()),
  endDate: formatDate(new Date(Date.now() + 7 * 86400000)),
})

async function submitGenerate() {
  if (submitting.value) return
  if (!genForm.value.startDate || !genForm.value.endDate) {
    uni.showToast({ title: '请选择日期范围', icon: 'none' })
    return
  }
  submitting.value = true
  try {
    const result = await adminStore.generateSlots(genForm.value.startDate, genForm.value.endDate)
    uni.showToast({ title: `生成 ${result.count} 个时段`, icon: 'success' })
  } catch (e: any) {
    uni.showToast({ title: e?.message ?? '生成失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}

onMounted(() => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
})
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f5f3f0;
  padding-bottom: 40rpx;
}

/* ── Tabs ────────────────────────────────── */
.tabs {
  display: flex;
  background: #ffffff;
  border-bottom: 1rpx solid #eee;
}

.tab {
  flex: 1;
  padding: 28rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-text {
  font-size: 28rpx;
  color: #999;
  font-weight: 500;
}

.tab--active .tab-text {
  color: #1a1a2e;
  font-weight: 700;
}

.tab--active {
  border-bottom: 4rpx solid $primary-dark;
}

/* ── Panel ───────────────────────────────── */
.panel {
  padding: 24rpx;
}

/* ── Form card ───────────────────────────── */
.form-card {
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
  margin-bottom: 24rpx;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 28rpx;
  border-bottom: 1rpx solid #f5f5f5;

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

.form-label { font-size: 28rpx; color: #555; width: 160rpx; flex-shrink: 0; }

.form-input { flex: 1; text-align: right; font-size: 28rpx; color: #222; background: transparent; }

.picker-display { display: flex; align-items: center; gap: 8rpx; }
.picker-label { font-size: 28rpx; color: #555; }
.picker-text { font-size: 28rpx; color: #222; }
.picker-arrow { font-size: 26rpx; color: #bbb; }

/* ── Date picker row ─────────────────────── */
.date-picker-row {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

/* ── Skeleton ────────────────────────────── */
.skeleton-list { }

.skeleton-item {
  height: 88rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}

/* ── Empty ───────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
  gap: 16rpx;
}

.empty-icon { font-size: 64rpx; }
.empty-text { font-size: 28rpx; color: #bbb; }

/* ── Slot list ───────────────────────────── */
.slot-list { }

.slot-row {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.slot-info { flex: 1; display: flex; align-items: center; gap: 12rpx; }
.slot-time { font-size: 28rpx; font-weight: 600; color: #1a1a2e; }

.slot-badge {
  border-radius: 16rpx;
  padding: 4rpx 16rpx;
}

.badge--open { background: rgba(39,174,96,0.1); }
.badge--open .slot-badge-text { font-size: 20rpx; color: #27ae60; }
.badge--full { background: rgba(230,126,34,0.1); }
.badge--full .slot-badge-text { font-size: 20rpx; color: #e67e22; }
.badge--closed { background: rgba(0,0,0,0.06); }
.badge--closed .slot-badge-text { font-size: 20rpx; color: #999; }

.slot-count { font-size: 24rpx; color: #888; }

.close-btn {
  background: rgba(192,57,43,0.1);
  border-radius: 20rpx;
  padding: 8rpx 24rpx;
}

.close-btn-text { font-size: 26rpx; color: #c0392b; font-weight: 600; }

.closed-tag {
  background: rgba(0,0,0,0.06);
  border-radius: 20rpx;
  padding: 8rpx 24rpx;
}

.closed-tag-text { font-size: 26rpx; color: #bbb; }

/* ── Generate hint ───────────────────────── */
.gen-hint {
  font-size: 24rpx;
  color: #999;
  line-height: 1.6;
  display: block;
  padding: 0 8rpx 24rpx;
}

/* ── Action button ───────────────────────── */
.action-wrap { }

.action-btn {
  width: 100%;
  height: 96rpx;
  border-radius: 48rpx;
  background: linear-gradient(90deg, #1a1a2e, #2d2d5e);
  display: flex;
  align-items: center;
  justify-content: center;

  &--loading { opacity: 0.6; }
}

.action-btn-text { font-size: 30rpx; font-weight: 700; color: $primary-dark; }
</style>
