<script setup lang="ts">
import type { PoiSummary } from '@/domain/poi'
import type { BudgetLevel, Interest, Pace, PlanningRequest, Theme, Transport, TravelPreferences } from '@/domain/travel'
import { getPoiRepository } from '@/data/poi'
import { createPlan, isRemoteTravelAssistantEnabled, loadPlanningRequest, loadPreferences, savePlan, savePreferences } from '@/services/travel-assistant'
import { useLocationStore } from '@/stores'

interface PlannerPreset {
  themes?: unknown
  interests?: unknown
  extraRequirements?: unknown
}

const PRESET_STORAGE_KEY = 'guangming:planner-preset'
const MIN_DURATION_MINUTES = 2 * 60
const MAX_DURATION_MINUTES = 10 * 60
const DURATION_STEP_MINUTES = 30
const MIN_CUSTOM_POIS = 2
const MAX_CUSTOM_POIS = 8
const themeOptions: Theme[] = ['亲子', '情侣', '朋友', '银发', '研学']
const interestOptions: Interest[] = ['自然风光', '文化场馆', '生态科普', '美食', '摄影']
const paceOptions: Array<{ label: string, description: string, value: Pace }> = [
  { label: '轻松', description: '少走慢游', value: 'relaxed' },
  { label: '适中', description: '均衡安排', value: 'moderate' },
  { label: '紧凑', description: '尽量多看', value: 'compact' },
]
const transportOptions: Array<{ label: string, value: Transport }> = [
  { label: '公共交通', value: 'public_transport' },
  { label: '自驾', value: 'driving' },
  { label: '步行', value: 'walking' },
]
const budgetOptions: Array<{ label: string, value: BudgetLevel }> = [
  { label: '经济', value: 'economy' },
  { label: '适中', value: 'standard' },
  { label: '品质', value: 'quality' },
]

const form = reactive<TravelPreferences>({
  destination: '深圳市光明区',
  themes: ['亲子'],
  duration: 'half_day',
  pace: 'relaxed',
  interests: ['自然风光'],
  adults: 2,
  children: 0,
  childAges: [],
  transport: 'public_transport',
  budgetLevel: 'standard',
  extraRequirements: '',
})

const planningMode = ref<PlanningRequest['mode']>('quick')
const durationMinutes = ref(4 * 60)
const selectedPoiIds = ref<string[]>([])
const customStartsFromCurrentLocation = ref(false)
const submitting = ref(false)
const locationStore = useLocationStore()
const remoteEnabled = computed(() => isRemoteTravelAssistantEnabled())
const locationAvailable = computed(() => locationStore.status === 'ready' && Boolean(locationStore.snapshot))
const poiSummaries = shallowRef<PoiSummary[]>(getPoiRepository().getPoiSummaries())
const poiGroups = computed(() => {
  const groups = new Map<string, PoiSummary[]>()
  poiSummaries.value.forEach((poi) => {
    const current = groups.get(poi.categoryName) ?? []
    current.push(poi)
    groups.set(poi.categoryName, current)
  })
  return [...groups.entries()].map(([categoryName, pois]) => ({ categoryName, pois }))
})
const durationText = computed(() => {
  const hours = Math.floor(durationMinutes.value / 60)
  const minutes = durationMinutes.value % 60
  return minutes ? `${hours} 小时 ${minutes} 分钟` : `${hours} 小时`
})
const usesCurrentLocation = computed(() => locationAvailable.value
  && (planningMode.value === 'quick' || customStartsFromCurrentLocation.value))
const planningEngineLabel = computed(() => remoteEnabled.value
  ? '在线智能服务'
  : '本地智能规划')
const locationActionText = computed(() => {
  if (locationStore.status === 'locating')
    return '定位中…'
  if (locationStore.status === 'denied')
    return '开启位置权限'
  return locationAvailable.value ? '刷新当前位置' : '获取当前位置'
})
const locationDescription = computed(() => {
  if (locationStore.status === 'locating')
    return '正在获取位置，请稍候。'
  if (planningMode.value === 'quick') {
    return locationAvailable.value
      ? '将从当前位置出发并优先安排较近点位；可随时刷新。'
      : '尚未获取位置，提交后会按光明区全域生成路线。'
  }
  if (!locationAvailable.value)
    return '可选获取位置，用于优化自选点位的起点和顺序。'
  return customStartsFromCurrentLocation.value
    ? '已将当前位置设为自选路线起点。'
    : '位置已就绪；如需从当前位置出发，请开启下方选项。'
})

function assignPreferences(preferences: TravelPreferences) {
  Object.assign(form, {
    ...preferences,
    themes: [...preferences.themes],
    interests: [...preferences.interests],
    childAges: [...preferences.childAges],
  })
}

function isStringArray<T extends string>(value: unknown, allowed: readonly T[]): value is T[] {
  return Array.isArray(value) && value.every(item => typeof item === 'string' && allowed.includes(item as T))
}

function applyPreset() {
  let preset: PlannerPreset | null = null
  try {
    const value = uni.getStorageSync(PRESET_STORAGE_KEY)
    preset = value && typeof value === 'object' ? value as PlannerPreset : null
    uni.removeStorageSync(PRESET_STORAGE_KEY)
  }
  catch {
    preset = null
  }

  if (!preset)
    return
  if (isStringArray(preset.themes, themeOptions))
    form.themes = [...preset.themes]
  if (isStringArray(preset.interests, interestOptions))
    form.interests = [...preset.interests]
  if (typeof preset.extraRequirements === 'string')
    form.extraRequirements = preset.extraRequirements.slice(0, 500)
}

function toggleTheme(theme: Theme) {
  const index = form.themes.indexOf(theme)
  if (index >= 0)
    form.themes.splice(index, 1)
  else
    form.themes.push(theme)
}

function toggleInterest(interest: Interest) {
  const index = form.interests.indexOf(interest)
  if (index >= 0)
    form.interests.splice(index, 1)
  else
    form.interests.push(interest)
}

function setPlanningMode(mode: PlanningRequest['mode']) {
  planningMode.value = mode
}

function togglePoi(poiId: string) {
  const index = selectedPoiIds.value.indexOf(poiId)
  if (index >= 0) {
    selectedPoiIds.value.splice(index, 1)
    return
  }
  if (selectedPoiIds.value.length >= MAX_CUSTOM_POIS) {
    uni.showToast({ title: `最多选择 ${MAX_CUSTOM_POIS} 个点位`, icon: 'none' })
    return
  }
  selectedPoiIds.value.push(poiId)
}

function changeDuration(event: { detail: { value: number } }) {
  const value = Number(event.detail.value)
  if (!Number.isFinite(value))
    return
  durationMinutes.value = Math.min(
    MAX_DURATION_MINUTES,
    Math.max(MIN_DURATION_MINUTES, Math.round(value / DURATION_STEP_MINUTES) * DURATION_STEP_MINUTES),
  )
}

function changeCustomOrigin(event: Event) {
  const value = (event as Event & { detail?: { value?: unknown } }).detail?.value
  customStartsFromCurrentLocation.value = Boolean(value)
}

function changeAdults(delta: number) {
  form.adults = Math.min(20, Math.max(0, form.adults + delta))
}

function changeChildren(delta: number) {
  const next = Math.min(20, Math.max(0, form.children + delta))
  while (form.childAges.length < next)
    form.childAges.push(6)
  form.childAges.splice(next)
  form.children = next
}

function setAge(index: number, event: { detail: { value: number } }) {
  form.childAges[index] = event.detail.value
}

function isPermissionDenied(error: unknown): boolean {
  if (!error || typeof error !== 'object')
    return false
  const message = String((error as { errMsg?: unknown }).errMsg ?? '')
  return /auth deny|auth denied|authorize:fail|permission/i.test(message)
}

function requestCurrentLocation() {
  if (locationStore.status === 'locating')
    return
  if (locationStore.status === 'denied') {
    uni.openSetting({
      success: (settings) => {
        if (settings.authSetting['scope.userLocation'])
          locateFromUserAction()
      },
    })
    return
  }
  locateFromUserAction()
}

function locateFromUserAction() {
  locationStore.startLocating()
  uni.getLocation({
    type: 'gcj02',
    isHighAccuracy: true,
    highAccuracyExpireTime: 8000,
    success: (result) => {
      const updated = locationStore.updateLocation(
        Number(result.longitude),
        Number(result.latitude),
        Number(result.accuracy ?? result.horizontalAccuracy),
      )
      if (!updated) {
        locationStore.failLocation('error', '定位结果无效，请稍后重试')
        uni.showToast({ title: '定位结果无效', icon: 'none' })
        return
      }
      if (planningMode.value === 'custom')
        customStartsFromCurrentLocation.value = true
      uni.showToast({ title: '已更新当前位置', icon: 'success' })
    },
    fail: (error) => {
      if (isPermissionDenied(error)) {
        locationStore.failLocation('denied', '位置权限未开启')
        uni.showModal({
          title: '需要位置权限',
          content: '开启后可从当前位置出发规划路线，也可不授权并使用全域规划。',
          confirmText: '去设置',
          success: result => result.confirm && requestCurrentLocation(),
        })
        return
      }
      locationStore.failLocation('unavailable', '暂时无法获取位置')
      uni.showToast({ title: '定位失败，可继续使用全域规划', icon: 'none' })
    },
  })
}

function showDurationFitNotice(status: 'overflow' | 'underfilled'): Promise<void> {
  return new Promise((resolve) => {
    uni.showModal({
      title: status === 'overflow' ? '时间不足' : '行程时间提示',
      content: status === 'overflow'
        ? '当前点位与行程安排无法在所选时长内完整体验，请在查看路线后适当精简点位或延长时长。'
        : '当前规划路径与所需时间差距较大，请结合实际交通、现场开放情况和个人节奏调整行程。',
      showCancel: false,
      confirmText: '查看路线',
      complete: () => resolve(),
    })
  })
}

async function submit() {
  if (!form.themes.length && !form.interests.length) {
    uni.showToast({ title: '请至少选择一项主题或偏好', icon: 'none' })
    return
  }
  if (form.adults + form.children < 1) {
    uni.showToast({ title: '出行总人数至少为 1', icon: 'none' })
    return
  }
  if (planningMode.value === 'custom'
    && (selectedPoiIds.value.length < MIN_CUSTOM_POIS || selectedPoiIds.value.length > MAX_CUSTOM_POIS)) {
    uni.showToast({ title: `请选择 ${MIN_CUSTOM_POIS}-${MAX_CUSTOM_POIS} 个点位`, icon: 'none' })
    return
  }

  submitting.value = true
  try {
    const preferences: TravelPreferences = {
      ...form,
      duration: durationMinutes.value <= 4 * 60 ? 'half_day' : 'full_day',
      themes: [...form.themes],
      interests: [...form.interests],
      childAges: [...form.childAges],
    }
    const snapshot = locationStore.snapshot
    const origin = usesCurrentLocation.value && snapshot
      ? {
          longitude: snapshot.longitude,
          latitude: snapshot.latitude,
          coordinateSystem: snapshot.coordinateSystem,
        }
      : undefined
    const request: PlanningRequest = {
      mode: planningMode.value,
      preferences,
      durationMinutes: durationMinutes.value,
      selectedPoiIds: planningMode.value === 'custom' ? [...selectedPoiIds.value] : [],
      origin,
    }
    const response = await createPlan(request)
    savePreferences(preferences)
    savePlan(response)
    if (response.itinerary.durationFitStatus === 'overflow' || response.itinerary.durationFitStatus === 'underfilled')
      await showDurationFitNotice(response.itinerary.durationFitStatus)
    uni.navigateTo({ url: '/pages/itinerary/index' })
  }
  catch (error) {
    uni.showModal({
      title: '暂时无法生成路线',
      content: error instanceof Error ? error.message : '请检查选择后重试',
      showCancel: false,
    })
  }
  finally {
    submitting.value = false
  }
}

onShow(() => {
  const storedRequest = loadPlanningRequest()
  const storedPreferences = storedRequest?.preferences ?? loadPreferences()
  if (storedPreferences)
    assignPreferences(storedPreferences)
  if (storedRequest) {
    planningMode.value = storedRequest.mode
    durationMinutes.value = storedRequest.durationMinutes
    selectedPoiIds.value = [...storedRequest.selectedPoiIds]
    customStartsFromCurrentLocation.value = false
  }
  else if (storedPreferences) {
    durationMinutes.value = storedPreferences.duration === 'half_day' ? 4 * 60 : 8 * 60
  }
  applyPreset()
})
</script>

<template>
  <view class="planner-page">
    <view class="planner-intro">
      <view class="planner-intro__icon">
        <text>智游</text>
      </view>
      <view class="planner-intro__bubble">
        <text class="planner-intro__title">定制你的光明文旅路线</text>
        <text class="planner-intro__copy">可以一键生成推荐路线，也可先选好想去的点位再编排。</text>
        <view class="planner-intro__mode">
          <view class="planner-intro__dot" />
          {{ planningEngineLabel }}
        </view>
      </view>
    </view>

    <view class="planner-form">
      <view class="planner-form__header">
        <view>
          <text class="planner-form__title">出行画像</text>
          <text class="planner-form__subtitle">选择会作为路线编排依据</text>
        </view>
        <text class="planner-form__district">深圳 · 光明</text>
      </view>

      <view class="form-section planning-mode-section">
        <view class="form-section__heading">
          <text class="form-section__label">规划模式</text>
        </view>
        <view class="planning-mode-grid">
          <button
            class="planning-mode-card"
            :class="{ 'planning-mode-card--active': planningMode === 'quick' }"
            @click="setPlanningMode('quick')"
          >
            <text class="planning-mode-card__title">当前位置快速规划</text>
            <text class="planning-mode-card__copy">根据时长和偏好智能选点</text>
          </button>
          <button
            class="planning-mode-card"
            :class="{ 'planning-mode-card--active': planningMode === 'custom' }"
            @click="setPlanningMode('custom')"
          >
            <text class="planning-mode-card__title">自选点位规划</text>
            <text class="planning-mode-card__copy">从全部 POI 中选 2-8 个编排</text>
          </button>
        </view>
        <text v-if="remoteEnabled && planningMode === 'custom'" class="planning-mode-tip">
          在线 AI 将在你选择的点位内建议顺序，本机负责定位、交通与时长核算。
        </text>
      </view>

      <view class="planning-origin" :class="{ 'planning-origin--ready': locationAvailable }">
        <view class="planning-origin__heading">
          <text class="planning-origin__title">
            {{ usesCurrentLocation ? '已使用当前位置' : '当前位置为可选项' }}
          </text>
          <button :disabled="locationStore.status === 'locating'" @click="requestCurrentLocation">
            {{ locationActionText }}
          </button>
        </view>
        <text class="planning-origin__copy">{{ locationDescription }}</text>
        <view v-if="planningMode === 'custom' && locationAvailable" class="origin-switch">
          <text>自选路线从当前位置出发</text>
          <switch
            :checked="customStartsFromCurrentLocation"
            color="#167a5b"
            @change="changeCustomOrigin"
          />
        </view>
        <text class="planning-origin__privacy">定位仅由你主动触发，精确坐标不写入本机路线缓存。</text>
      </view>

      <view v-if="planningMode === 'custom'" class="form-section custom-poi-section">
        <view class="form-section__heading custom-poi-heading">
          <view>
            <text class="form-section__label">选择想去的点位</text>
            <text class="form-section__hint">至少 2 个，最多 8 个</text>
          </view>
          <text class="custom-poi-count" :class="{ 'custom-poi-count--ready': selectedPoiIds.length >= MIN_CUSTOM_POIS }">
            已选 {{ selectedPoiIds.length }}/{{ MAX_CUSTOM_POIS }}
          </text>
        </view>
        <scroll-view class="poi-picker" scroll-y enhanced show-scrollbar>
          <view v-for="group in poiGroups" :key="group.categoryName" class="poi-group">
            <text class="poi-group__title">{{ group.categoryName }} · {{ group.pois.length }}</text>
            <button
              v-for="poi in group.pois"
              :key="poi.id"
              class="poi-option"
              :class="{ 'poi-option--active': selectedPoiIds.includes(poi.id) }"
              @click="togglePoi(poi.id)"
            >
              <view class="poi-option__content">
                <text class="poi-option__name">{{ poi.name }}</text>
                <text class="poi-option__meta">{{ poi.categoryName }} · 推荐 {{ poi.recommendationIndex }}/5</text>
              </view>
              <text class="poi-option__check">
                {{ selectedPoiIds.includes(poi.id) ? selectedPoiIds.indexOf(poi.id) + 1 : '＋' }}
              </text>
            </button>
          </view>
        </scroll-view>
      </view>

      <view class="form-section">
        <view class="form-section__heading">
          <text class="form-section__label">{{ planningMode === 'quick' ? '出行主题' : '路线偏好' }}</text>
          <text class="form-section__hint">多选</text>
        </view>
        <view class="option-grid option-grid--themes">
          <button
            v-for="theme in themeOptions"
            :key="theme"
            class="option"
            :class="{ 'option--active': form.themes.includes(theme) }"
            @click="toggleTheme(theme)"
          >
            <text v-if="form.themes.includes(theme)" class="option__check">✓</text>
            {{ theme }}
          </button>
        </view>
      </view>

      <view class="form-section">
        <view class="form-section__heading duration-heading">
          <text class="form-section__label">游玩时长</text>
          <text class="duration-value">{{ durationText }}</text>
        </view>
        <slider
          :value="durationMinutes"
          :min="MIN_DURATION_MINUTES"
          :max="MAX_DURATION_MINUTES"
          :step="DURATION_STEP_MINUTES"
          active-color="#167a5b"
          background-color="#dce8e2"
          block-color="#167a5b"
          block-size="22"
          @change="changeDuration"
        />
        <view class="duration-scale">
          <text>2 小时</text>
          <text>30 分钟步进</text>
          <text>10 小时</text>
        </view>
      </view>

      <view class="form-section">
        <view class="form-section__heading">
          <text class="form-section__label">行程节奏</text>
        </view>
        <view class="option-grid option-grid--three">
          <button
            v-for="pace in paceOptions"
            :key="pace.value"
            class="option option--stack"
            :class="{ 'option--active': form.pace === pace.value }"
            @click="form.pace = pace.value"
          >
            <text>{{ pace.label }}</text><text class="option__sub">{{ pace.description }}</text>
          </button>
        </view>
      </view>

      <view class="form-section">
        <view class="form-section__heading">
          <text class="form-section__label">特色偏好</text>
          <text class="form-section__hint">多选</text>
        </view>
        <view class="option-grid option-grid--interests">
          <button
            v-for="interest in interestOptions"
            :key="interest"
            class="option"
            :class="{ 'option--active': form.interests.includes(interest) }"
            @click="toggleInterest(interest)"
          >
            <text v-if="form.interests.includes(interest)" class="option__check">✓</text>
            {{ interest }}
          </button>
        </view>
      </view>

      <view class="form-section">
        <view class="form-section__heading">
          <text class="form-section__label">出行方式</text>
        </view>
        <view class="option-grid option-grid--three">
          <button
            v-for="transport in transportOptions"
            :key="transport.value"
            class="option"
            :class="{ 'option--active': form.transport === transport.value }"
            @click="form.transport = transport.value"
          >
            {{ transport.label }}
          </button>
        </view>
      </view>

      <view class="form-section">
        <view class="form-section__heading">
          <text class="form-section__label">预算偏好</text>
        </view>
        <view class="option-grid option-grid--three">
          <button
            v-for="budget in budgetOptions"
            :key="budget.value"
            class="option"
            :class="{ 'option--active': form.budgetLevel === budget.value }"
            @click="form.budgetLevel = budget.value"
          >
            {{ budget.label }}
          </button>
        </view>
      </view>

      <view class="form-section">
        <view class="form-section__heading">
          <text class="form-section__label">同行人数</text>
          <text class="form-section__hint">儿童年龄会影响推荐</text>
        </view>
        <view class="people-grid">
          <view class="counter-card">
            <view><text class="counter-card__label">成人</text><text class="counter-card__hint">18 岁以上</text></view>
            <view class="counter">
              <button @click="changeAdults(-1)">−</button><text>{{ form.adults }}</text><button @click="changeAdults(1)">＋</button>
            </view>
          </view>
          <view class="counter-card">
            <view><text class="counter-card__label">儿童</text><text class="counter-card__hint">0–17 岁</text></view>
            <view class="counter">
              <button @click="changeChildren(-1)">−</button><text>{{ form.children }}</text><button @click="changeChildren(1)">＋</button>
            </view>
          </view>
        </view>
        <view v-if="form.children" class="ages">
          <view v-for="(_, index) in form.childAges" :key="index" class="age-row">
            <text>儿童 {{ index + 1 }}</text>
            <slider
              :value="form.childAges[index]"
              min="0"
              max="17"
              active-color="#167a5b"
              background-color="#dce8e2"
              block-color="#167a5b"
              block-size="18"
              @change="setAge(index, $event)"
            />
            <text class="age-row__value">{{ form.childAges[index] }} 岁</text>
          </view>
        </view>
      </view>

      <view class="form-section form-section--last">
        <view class="form-section__heading">
          <text class="form-section__label">补充说明</text>
          <text class="form-section__hint">选填</text>
        </view>
        <view class="textarea-wrap">
          <textarea
            v-model="form.extraRequirements"
            class="textarea"
            maxlength="500"
            placeholder="例如：下午下雨，只安排室内项目；带婴儿车，不爬山…"
            placeholder-class="textarea__placeholder"
          />
          <text class="textarea__count">{{ form.extraRequirements.length }}/500</text>
        </view>
      </view>

      <button class="planner-submit" :disabled="submitting" @click="submit">
        <text class="planner-submit__spark">✦</text>
        <text>{{ submitting ? '正在编排路线…' : planningMode === 'quick' ? '开始快速规划' : `编排 ${selectedPoiIds.length} 个自选点位` }}</text>
      </button>
    </view>

    <text class="planner-footer">匿名使用 · 偏好和路线仅保存在本机</text>
  </view>
</template>

<route lang="yaml">
layout: map
style:
  navigationBarTitleText: 智能路线规划
  navigationBarBackgroundColor: '#ffffff'
  navigationBarTextStyle: black
  backgroundColor: '#f4f8f6'
</route>

<style scoped lang="scss">
.planner-page {
  min-height: 100vh;
  padding: 28rpx 20rpx calc(50rpx + env(safe-area-inset-bottom));
  color: #17221d;
  background: #f4f8f6;
}

.planner-intro {
  display: flex;
  gap: 18rpx;
  align-items: flex-end;
  padding: 20rpx 10rpx 30rpx;
}

.planner-intro__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 124rpx;
  height: 124rpx;
  font-size: 21rpx;
  font-weight: 800;
  color: #22e2b6;
  background: #0b3933;
  border: 8rpx solid #d9f4e7;
  border-radius: 42rpx;
  box-shadow: 0 14rpx 30rpx rgb(5 112 68 / 15%);
}

.planner-intro__bubble {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24rpx;
  background: #fff;
  border: 1rpx solid #d4e8df;
  border-radius: 24rpx;
  box-shadow: 0 12rpx 32rpx rgb(20 80 54 / 7%);
}

.planner-intro__title {
  font-size: 28rpx;
  font-weight: 800;
  line-height: 40rpx;
  color: #087846;
}

.planner-intro__copy {
  margin-top: 8rpx;
  font-size: 20rpx;
  line-height: 32rpx;
  color: #64716b;
}

.planner-intro__mode {
  display: flex;
  gap: 8rpx;
  align-items: center;
  margin-top: 12rpx;
  font-size: 17rpx;
  color: #718078;
}

.planner-intro__dot {
  width: 11rpx;
  height: 11rpx;
  background: #08a865;
  border-radius: 50%;
  box-shadow: 0 0 0 5rpx rgb(8 168 101 / 12%);
}

.planner-form {
  padding: 0 28rpx 32rpx;
  background: #fff;
  border: 1rpx solid #d9e6e0;
  border-radius: 28rpx;
  box-shadow: 0 20rpx 60rpx rgb(19 75 50 / 8%);
}

.planner-form__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 0;
  border-bottom: 1rpx solid #e9efec;
}

.planner-form__title,
.planner-form__subtitle,
.planner-form__district {
  display: block;
}

.planning-origin {
  padding: 18rpx 20rpx;
  margin-top: 22rpx;
  color: #68766f;
  background: #f4f7f5;
  border: 1rpx solid #e1e8e4;
  border-radius: 14rpx;
}

.planning-mode-section {
  padding-top: 26rpx;
}

.planning-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14rpx;
}

.planning-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 140rpx;
  padding: 20rpx;
  margin: 0;
  line-height: 1.45;
  text-align: left;
  background: #f7faf8;
  border: 2rpx solid #dce7e1;
  border-radius: 18rpx;
}

.planning-mode-card::after,
.planning-origin button::after,
.poi-option::after {
  border: 0;
}

.planning-mode-card--active {
  color: #fff;
  background: linear-gradient(145deg, #087f51, #086a47);
  border-color: #08784c;
  box-shadow: 0 10rpx 24rpx rgb(5 118 69 / 18%);
}

.planning-mode-card__title {
  font-size: 23rpx;
  font-weight: 800;
  line-height: 34rpx;
}

.planning-mode-card__copy {
  margin-top: 8rpx;
  font-size: 17rpx;
  line-height: 27rpx;
  color: #77857e;
}

.planning-mode-card--active .planning-mode-card__copy {
  color: rgb(255 255 255 / 75%);
}

.planning-mode-tip {
  display: block;
  margin-top: 14rpx;
  font-size: 18rpx;
  line-height: 30rpx;
  color: #7a6750;
}

.planning-origin__heading {
  display: flex;
  gap: 16rpx;
  align-items: center;
  justify-content: space-between;
}

.planning-origin__heading button {
  flex: none;
  width: auto;
  height: 54rpx;
  padding: 0 18rpx;
  margin: 0;
  font-size: 18rpx;
  line-height: 54rpx;
  color: #167a5b;
  background: #fff;
  border: 1rpx solid #cfe0d8;
  border-radius: 27rpx;
}

.planning-origin__heading button[disabled] {
  opacity: 0.55;
}

.planning-origin--ready {
  color: #245641;
  background: #eaf7f0;
  border-color: #cde8da;
}

.planning-origin__title,
.planning-origin__copy {
  display: block;
}

.origin-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14rpx;
  margin-top: 14rpx;
  font-size: 19rpx;
  border-top: 1rpx solid #d9e8e0;
}

.origin-switch switch {
  transform: scale(0.78);
  transform-origin: right center;
}

.planning-origin__privacy {
  display: block;
  margin-top: 12rpx;
  font-size: 16rpx;
  line-height: 26rpx;
  color: #8a9690;
}

.custom-poi-section {
  padding-bottom: 22rpx;
}

.custom-poi-heading {
  justify-content: space-between;
}

.custom-poi-heading > view {
  display: flex;
  flex-direction: column;
  gap: 5rpx;
}

.custom-poi-count {
  flex: none;
  padding: 7rpx 13rpx;
  font-size: 18rpx;
  color: #65726b;
  background: #edf2ef;
  border-radius: 999rpx;
}

.custom-poi-count--ready {
  color: #08794b;
  background: #e4f5ec;
}

.poi-picker {
  box-sizing: border-box;
  height: 620rpx;
  padding: 4rpx 16rpx 16rpx;
  background: #f7faf8;
  border: 1rpx solid #dfe9e4;
  border-radius: 18rpx;
}

.poi-group {
  padding-top: 18rpx;
}

.poi-group__title {
  display: block;
  margin: 0 4rpx 10rpx;
  font-size: 18rpx;
  font-weight: 700;
  color: #6b7972;
}

.poi-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 86rpx;
  padding: 13rpx 15rpx;
  margin: 0 0 10rpx;
  color: #27332d;
  text-align: left;
  background: #fff;
  border: 1rpx solid #e0e8e4;
  border-radius: 14rpx;
}

.poi-option--active {
  color: #075f3d;
  background: #e9f7f0;
  border-color: #87c7aa;
}

.poi-option__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.poi-option__name {
  overflow: hidden;
  font-size: 21rpx;
  font-weight: 700;
  line-height: 31rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poi-option__meta {
  margin-top: 3rpx;
  font-size: 16rpx;
  line-height: 25rpx;
  color: #849089;
}

.poi-option__check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42rpx;
  height: 42rpx;
  margin-left: 16rpx;
  font-size: 20rpx;
  font-weight: 800;
  color: #128056;
  background: #eef6f2;
  border-radius: 50%;
}

.poi-option--active .poi-option__check {
  color: #fff;
  background: #138056;
}

.duration-heading {
  justify-content: space-between;
}

.duration-value {
  padding: 7rpx 13rpx;
  font-size: 20rpx;
  font-weight: 800;
  color: #08794b;
  background: #e7f6ee;
  border-radius: 999rpx;
}

.duration-scale {
  display: flex;
  justify-content: space-between;
  font-size: 17rpx;
  color: #89958f;
}

.planning-origin__title {
  font-size: 22rpx;
  font-weight: 700;
  line-height: 32rpx;
}

.planning-origin__copy {
  margin-top: 4rpx;
  font-size: 18rpx;
  line-height: 30rpx;
}

.planner-form__title {
  font-size: 31rpx;
  font-weight: 800;
}

.planner-form__subtitle {
  margin-top: 5rpx;
  font-size: 18rpx;
  color: #8b9892;
}

.planner-form__district {
  padding: 8rpx 14rpx;
  font-size: 17rpx;
  font-weight: 700;
  color: #07814d;
  background: #e9f7f0;
  border-radius: 999rpx;
}

.form-section {
  padding: 32rpx 0;
  border-bottom: 1rpx solid #edf1ef;
}

.form-section--last {
  border-bottom: 0;
}

.form-section__heading {
  display: flex;
  gap: 12rpx;
  align-items: center;
  margin-bottom: 20rpx;
}

.form-section__label {
  font-size: 25rpx;
  font-weight: 700;
}

.form-section__hint {
  font-size: 19rpx;
  color: #9aa49f;
}

.option-grid {
  display: grid;
  gap: 14rpx;
}

.option-grid--themes {
  grid-template-columns: repeat(3, 1fr);
}

.option-grid--interests {
  grid-template-columns: repeat(2, 1fr);
}

.option-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.option-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.option {
  display: flex;
  gap: 6rpx;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72rpx;
  padding: 10rpx 8rpx;
  margin: 0;
  font-size: 22rpx;
  line-height: 32rpx;
  color: #46514b;
  background: #fff;
  border: 1rpx solid #dfe6e2;
  border-radius: 14rpx;
}

.option::after,
.counter button::after,
.planner-submit::after {
  border: 0;
}

.option--stack {
  flex-direction: column;
}

.option--active {
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #079c5c, #087d4d);
  border-color: #078e55;
  box-shadow: 0 8rpx 18rpx rgb(5 142 84 / 18%);
}

.option__sub {
  font-size: 16rpx;
  line-height: 24rpx;
  color: #99a49e;
}

.option--active .option__sub {
  color: rgb(255 255 255 / 76%);
}

.option__check {
  font-size: 18rpx;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14rpx;
}

.counter-card {
  padding: 19rpx;
  border: 1rpx solid #e2e9e5;
  border-radius: 16rpx;
}

.counter-card__label,
.counter-card__hint {
  display: block;
}

.counter-card__label {
  font-size: 23rpx;
  font-weight: 700;
}

.counter-card__hint {
  margin-top: 3rpx;
  font-size: 16rpx;
  color: #9aa49f;
}

.counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16rpx;
}

.counter button {
  width: 52rpx;
  height: 52rpx;
  padding: 0;
  margin: 0;
  font-size: 28rpx;
  line-height: 50rpx;
  color: #087d4d;
  background: #eaf7f0;
  border: 0;
  border-radius: 12rpx;
}

.counter text {
  min-width: 36rpx;
  font-size: 27rpx;
  font-weight: 800;
  text-align: center;
}

.ages {
  padding: 18rpx;
  margin-top: 16rpx;
  background: #f4f9f6;
  border-radius: 14rpx;
}

.age-row {
  display: grid;
  grid-template-columns: 116rpx 1fr 66rpx;
  align-items: center;
  font-size: 18rpx;
}

.age-row__value {
  font-weight: 700;
  color: #07814d;
  text-align: right;
}

.textarea-wrap {
  position: relative;
}

.textarea {
  box-sizing: border-box;
  width: 100%;
  height: 180rpx;
  padding: 22rpx 24rpx 50rpx;
  font-size: 22rpx;
  line-height: 34rpx;
  color: #29342f;
  background: #fbfcfc;
  border: 1rpx solid #e0e6e3;
  border-radius: 16rpx;
}

.textarea__placeholder {
  color: #aeb7b2;
}

.textarea__count {
  position: absolute;
  right: 18rpx;
  bottom: 16rpx;
  font-size: 17rpx;
  color: #a1aaa5;
}

.planner-submit {
  display: flex;
  gap: 15rpx;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 94rpx;
  margin: 28rpx 0 0;
  font-size: 28rpx;
  font-weight: 800;
  line-height: 94rpx;
  color: #fff;
  background: linear-gradient(100deg, #079c5c, #067d4a);
  border: 0;
  border-radius: 20rpx;
  box-shadow: 0 13rpx 28rpx rgb(3 129 75 / 25%);
}

.planner-submit[disabled] {
  opacity: 0.68;
}

.planner-submit__spark {
  font-size: 31rpx;
}

.planner-footer {
  display: block;
  padding: 36rpx 20rpx 4rpx;
  font-size: 20rpx;
  line-height: 32rpx;
  color: #718078;
  text-align: center;
}
</style>
