<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <div class="header-content">
        <h1>管理后台</h1>
        <p>泉友米车友会</p>
      </div>
      <van-button class="logout-btn" size="small" round @click="logout">
        <van-icon name="logout" /> 退出
      </van-button>
    </div>
    
    <div class="dashboard-content">
      <div class="content-header">
        <h2>活动管理</h2>
        <van-button type="primary" round icon="plus" @click="createNewActivity">
          创建活动
        </van-button>
      </div>
      
      <div class="activity-cards">
        <div v-for="activity in activities" :key="activity.id" class="activity-card" @click="viewActivityDetail(activity)">
          <div class="card-header">
            <h3>{{ activity.title }}</h3>
            <van-tag :type="activity.status === 'upcoming' ? 'primary' : 'default'">
              {{ activity.status === 'upcoming' ? '进行中' : '已结束' }}
            </van-tag>
          </div>
          <p class="card-desc">{{ activity.description }}</p>
          <div class="card-info">
            <div class="info-row">
              <van-icon name="location-o" />
              <span>{{ activity.location }}</span>
            </div>
            <div class="info-row">
              <van-icon name="clock-o" />
              <span>{{ formatDate(activity.startTime) }}</span>
            </div>
          </div>
          <div class="card-footer">
            <van-icon name="arrow" />
          </div>
        </div>
        
        <van-empty v-if="!activities.length" description="暂无活动" />
      </div>
    </div>
    
    <!-- 活动表单弹窗 -->
    <van-popup v-model:show="showActivityForm" position="bottom" round>
      <div class="form-popup">
        <div class="popup-header">
          <h3>创建活动</h3>
          <van-icon name="cross" @click="closeActivityForm" />
        </div>
        <van-form @submit="submitActivity" class="popup-form">
          <van-cell-group>
            <van-field 
              v-model="activityForm.title" 
              label="活动标题" 
              placeholder="请输入活动标题" 
              required 
              :rules="[{ required: true, message: '请输入活动标题' }]"
            />
            <van-field 
              v-model="activityForm.description" 
              label="活动描述" 
              type="textarea" 
              placeholder="请输入活动描述，包括活动内容、注意事项等" 
              rows="3"
              autosize
              maxlength="500"
              show-word-limit
            />
            <van-field 
              v-model="activityForm.price" 
              label="人均费用" 
              type="number" 
              placeholder="请输入人均费用(选填)"
            >
              <template #left-icon>
                <van-icon name="gold-coin-o" style="margin-right: 8px;" />
              </template>
              <template #button>
                <span style="color: #999;">元</span>
              </template>
            </van-field>
            <van-field 
              v-model="activityForm.budget" 
              label="活动预算" 
              type="number" 
              placeholder="请输入预算金额(选填)"
            >
              <template #left-icon>
                <van-icon name="balance-o" style="margin-right: 8px;" />
              </template>
            </van-field>
            <van-field 
              v-model="activityForm.location" 
              label="活动地点" 
              placeholder="点击选择地点"
              readonly
              is-link
              required
              :rules="[{ required: true, message: '请选择活动地点' }]"
              @click="openMapPicker"
            >
              <template #left-icon>
                <van-icon name="location-o" style="margin-right: 8px;" />
              </template>
            </van-field>
            <van-field 
              v-model="startTimeDisplay" 
              label="开始时间" 
              placeholder="请选择开始时间"
              readonly
              is-link
              required
              :rules="[{ required: true, message: '请选择开始时间' }]"
              @click="showStartTimePicker = true"
            >
              <template #left-icon>
                <van-icon name="clock-o" style="margin-right: 8px;" />
              </template>
            </van-field>
            <van-field 
              v-model="deadlineDisplay" 
              label="报名截止" 
              placeholder="请选择报名截止时间"
              readonly
              is-link
              required
              :rules="[{ required: true, message: '请选择报名截止时间' }]"
              @click="showDeadlinePicker = true"
            >
              <template #left-icon>
                <van-icon name="calendar-o" style="margin-right: 8px;" />
              </template>
            </van-field>
          </van-cell-group>
          <div class="form-actions">
            <van-button round block type="primary" native-type="submit" size="large">
              创建活动
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    
    <!-- 开始时间选择器 -->
    <van-popup v-model:show="showStartTimePicker" position="bottom" round>
      <div class="datetime-picker-popup">
        <div class="picker-header">
          <van-button size="small" @click="showStartTimePicker = false">取消</van-button>
          <h3>选择开始时间</h3>
          <van-button size="small" type="primary" @click="confirmStartTime">确定</van-button>
        </div>
        <div class="picker-body">
          <input 
            type="datetime-local" 
            v-model="startTimeInput"
            class="datetime-input"
          />
        </div>
      </div>
    </van-popup>
    
    <!-- 报名截止时间选择器 -->
    <van-popup v-model:show="showDeadlinePicker" position="bottom" round>
      <div class="datetime-picker-popup">
        <div class="picker-header">
          <van-button size="small" @click="showDeadlinePicker = false">取消</van-button>
          <h3>选择报名截止时间</h3>
          <van-button size="small" type="primary" @click="confirmDeadline">确定</van-button>
        </div>
        <div class="picker-body">
          <input 
            type="datetime-local" 
            v-model="deadlineInput"
            class="datetime-input"
          />
        </div>
      </div>
    </van-popup>
    
    <!-- 地图选点弹窗 -->
    <van-popup v-model:show="showMapPicker" position="bottom" round :style="{ height: '80%' }">
      <div class="map-picker">
        <div class="map-picker-header">
          <van-icon name="arrow-left" @click="showMapPicker = false" />
          <h3>选择地点</h3>
          <van-button type="primary" size="small" @click="confirmLocation">确定</van-button>
        </div>
        <div class="map-search">
          <van-search 
            v-model="searchKeyword" 
            placeholder="搜索地点" 
            @search="searchLocation"
            @clear="clearSearch"
            show-action
            action-text="搜索"
          />
        </div>
        <div v-if="searchResults.length" class="search-results">
          <div 
            v-for="(result, index) in searchResults" 
            :key="index" 
            class="search-result-item"
            @click="selectSearchResult(result)"
          >
            <div class="result-name">{{ result.name }}</div>
            <div class="result-address">{{ result.address }}</div>
          </div>
        </div>
        <div id="map-picker-container" class="map-container"></div>
        <div class="selected-location">
          <van-icon name="location-o" />
          <span>{{ selectedLocation.name || '请在地图上选择位置' }}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import api from '../../api';

const router = useRouter();
const activities = ref([]);

const showActivityForm = ref(false);
const showMapPicker = ref(false);
const showStartTimePicker = ref(false);
const showDeadlinePicker = ref(false);
const searchKeyword = ref('');
const searchResults = ref([]);
const selectedLocation = ref({});
let pickerMap = null;
let pickerMarker = null;
let geocoder = null;

const activityForm = ref({
  title: '',
  description: '',
  budget: '',
  location: '',
  locationLat: null,
  locationLng: null,
  startTime: '',
  registrationDeadline: ''
});

// 日期时间选择器的值
const startTimeInput = ref('');
const deadlineInput = ref('');

// 显示格式化的日期时间
const startTimeDisplay = computed(() => {
  if (!activityForm.value.startTime) return '';
  return formatDateTime(activityForm.value.startTime);
});

const deadlineDisplay = computed(() => {
  if (!activityForm.value.registrationDeadline) return '';
  return formatDateTime(activityForm.value.registrationDeadline);
});

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 格式化日期时间显示
const formatDateTime = (dateTime) => {
  if (!dateTime) return '';
  const date = new Date(dateTime);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 开始时间确认
const confirmStartTime = () => {
  if (!startTimeInput.value) {
    showToast('请选择开始时间');
    return;
  }
  const selectedDate = new Date(startTimeInput.value);
  activityForm.value.startTime = selectedDate.toISOString();
  showStartTimePicker.value = false;
};

// 报名截止时间确认
const confirmDeadline = () => {
  if (!deadlineInput.value) {
    showToast('请选择报名截止时间');
    return;
  }
  const selectedDate = new Date(deadlineInput.value);
  if (activityForm.value.startTime && selectedDate > new Date(activityForm.value.startTime)) {
    showToast('报名截止时间不能晚于活动开始时间');
    return;
  }
  activityForm.value.registrationDeadline = selectedDate.toISOString();
  showDeadlinePicker.value = false;
};

// 打开地图选择器
const openMapPicker = () => {
  showMapPicker.value = true;
};

// 关闭活动表单
const closeActivityForm = () => {
  showActivityForm.value = false;
  activityForm.value = {
    title: '',
    description: '',
    budget: '',
    location: '',
    locationLat: null,
    locationLng: null,
    startTime: '',
    registrationDeadline: ''
  };
  startTimeInput.value = '';
  deadlineInput.value = '';
};

const loadActivities = async () => {
  try {
    const { data } = await api.getActivities();
    activities.value = data;
  } catch (error) {
    showToast('加载失败');
  }
};

const createNewActivity = () => {
  activityForm.value = {
    title: '',
    description: '',
    budget: '',
    location: '',
    locationLat: null,
    locationLng: null,
    startTime: '',
    registrationDeadline: ''
  };
  startTimeInput.value = '';
  deadlineInput.value = '';
  showActivityForm.value = true;
};

const viewActivityDetail = (activity) => {
  router.push(`/admin/activity/${activity.id}`);
};

const initMapPicker = async () => {
  try {
    console.log('开始初始化地图选择器...');
    const AMap = await window.loadAMap();
    console.log('地图API加载完成');
    
    if (pickerMap) {
      console.log('销毁旧地图实例');
      pickerMap.destroy();
    }
    
    const center = activityForm.value.locationLat && activityForm.value.locationLng
      ? [activityForm.value.locationLng, activityForm.value.locationLat]
      : [118.6762, 24.8742];
    
    console.log('地图中心点:', center);
    
    pickerMap = new AMap.Map('map-picker-container', {
      zoom: 15,
      center: center
    });
    
    console.log('地图实例创建完成');
    
    geocoder = new AMap.Geocoder();
    console.log('地理编码器创建完成');
    
    pickerMarker = new AMap.Marker({
      position: center,
      map: pickerMap,
      draggable: true
    });
    
    console.log('地图标记创建完成');
    
    if (activityForm.value.location) {
      selectedLocation.value = {
        name: activityForm.value.location,
        lat: activityForm.value.locationLat,
        lng: activityForm.value.locationLng
      };
    }
    
    pickerMap.on('click', (e) => {
      const { lng, lat } = e.lnglat;
      pickerMarker.setPosition([lng, lat]);
      
      selectedLocation.value = {
        name: '获取地址中...',
        lat: lat,
        lng: lng
      };
      
      if (geocoder) {
        geocoder.getAddress([lng, lat], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            selectedLocation.value.name = result.regeocode.formattedAddress;
          } else {
            console.warn('逆地理编码失败:', status, result);
            selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
          }
        });
      } else {
        selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
      }
    });
    
    pickerMarker.on('dragend', (e) => {
      const { lng, lat } = e.lnglat;
      
      selectedLocation.value = {
        name: '获取地址中...',
        lat: lat,
        lng: lng
      };
      
      if (geocoder) {
        geocoder.getAddress([lng, lat], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            selectedLocation.value.name = result.regeocode.formattedAddress;
          } else {
            console.warn('逆地理编码失败:', status, result);
            selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
          }
        });
      } else {
        selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
      }
    });
    
    console.log('地图初始化完成');
  } catch (error) {
    console.error('地图初始化失败:', error);
    showToast('地图加载失败: ' + error.message);
  }
};

const searchLocation = async () => {
  if (!searchKeyword.value.trim()) {
    showToast('请输入搜索关键词');
    return;
  }
  
  try {
    console.log('开始搜索地点:', searchKeyword.value);
    const AMap = await window.loadAMap();
    
    if (!AMap.PlaceSearch) {
      console.error('PlaceSearch插件未加载');
      showToast('地图搜索功能未就绪');
      return;
    }
    
    const placeSearch = new AMap.PlaceSearch({ 
      pageSize: 10, 
      pageIndex: 1,
      city: '泉州',
      citylimit: false,
      extensions: 'base'
    });
    
    placeSearch.search(searchKeyword.value, (status, result) => {
      console.log('搜索状态:', status);
      console.log('搜索结果:', result);
      
      if (status === 'complete' && result.info === 'OK') {
        if (result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
          searchResults.value = result.poiList.pois.map(poi => ({
            name: poi.name,
            address: poi.address || poi.district || '',
            lat: poi.location.lat,
            lng: poi.location.lng
          }));
          console.log('搜索成功，找到', searchResults.value.length, '个结果');
        } else {
          searchResults.value = [];
          showToast('未找到相关地点');
        }
      } else if (status === 'no_data') {
        searchResults.value = [];
        showToast('未找到相关地点');
      } else {
        console.error('搜索失败:', status, result);
        searchResults.value = [];
        showToast('搜索失败: ' + (result.info || status));
      }
    });
  } catch (error) {
    console.error('搜索异常:', error);
    showToast('搜索失败: ' + error.message);
  }
};

const selectSearchResult = (result) => {
  selectedLocation.value = result;
  pickerMarker.setPosition([result.lng, result.lat]);
  pickerMap.setCenter([result.lng, result.lat]);
  searchResults.value = [];
  searchKeyword.value = '';
};

const clearSearch = () => {
  searchResults.value = [];
};

const confirmLocation = () => {
  if (selectedLocation.value.lat && selectedLocation.value.lng) {
    activityForm.value.location = selectedLocation.value.name;
    activityForm.value.locationLat = selectedLocation.value.lat;
    activityForm.value.locationLng = selectedLocation.value.lng;
    showMapPicker.value = false;
  } else {
    showToast('请在地图上选择位置');
  }
};

watch(showMapPicker, (val) => {
  if (val) {
    setTimeout(() => {
      initMapPicker();
    }, 300);
  }
});

const submitActivity = async () => {
  try {
    const formData = { ...activityForm.value };
    // 清理空字符串，转换为null
    if (formData.budget === '' || formData.budget === undefined) {
      formData.budget = null;
    }
    if (formData.price === '' || formData.price === undefined) {
      formData.price = null;
    }
    
    await api.createActivity(formData);
    showToast('创建成功');
    closeActivityForm();
    loadActivities();
  } catch (error) {
    showToast('创建失败');
  }
};

const logout = () => {
  localStorage.removeItem('token');
  router.push('/admin/login');
};

onMounted(() => {
  loadActivities();
});
</script>

<style scoped>
.dashboard {
  min-height: 100vh;
  background: #f8f9fa;
}

.dashboard-header {
  background: #fff;
  padding: 24px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  font-size: 24px;
  margin: 0 0 4px;
  font-weight: 700;
  color: #1a1a1a;
}

.header-content p {
  font-size: 14px;
  margin: 0;
  color: #666;
}

.logout-btn {
  background: #f5f5f5;
  border: none;
  color: #666;
  font-weight: 500;
}

.logout-btn:active {
  background: #e8e8e8;
}

.dashboard-content {
  padding: 20px 16px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.content-header h2 {
  font-size: 20px;
  margin: 0;
  color: #1a1a1a;
  font-weight: 700;
}

.activity-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.activity-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

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

.card-header h3 {
  font-size: 17px;
  margin: 0;
  color: #1a1a1a;
  font-weight: 700;
  line-height: 1.4;
  flex: 1;
}

.card-desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f5f5f5;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
}

.info-row .van-icon {
  font-size: 16px;
  color: #FF6700;
}

.card-footer {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #ddd;
  font-size: 16px;
}

/* 弹窗 */
.form-popup {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px 16px 0 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.popup-header h3 {
  font-size: 18px;
  margin: 0;
  color: #1a1a1a;
  font-weight: 700;
}

.popup-header .van-icon {
  font-size: 20px;
  color: #999;
  cursor: pointer;
}

.popup-form {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.popup-form .van-cell-group {
  margin: 0;
  background: #fff;
}

.popup-form .van-cell {
  padding: 14px 20px;
}

.popup-form .van-field__label {
  width: 90px;
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

.popup-form .van-field__control {
  color: #1a1a1a;
  font-size: 14px;
}

.popup-form .van-field__control::placeholder {
  color: #bbb;
}

.form-actions {
  margin: 0;
  padding: 16px 20px 20px;
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #f5f5f5;
}

.form-actions .van-button {
  height: 48px;
  font-size: 16px;
  font-weight: 600;
}

/* 地图选点 */
.map-picker {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.map-picker-header h3 {
  flex: 1;
  text-align: center;
  font-size: 16px;
  margin: 0;
  color: #333;
}

.map-picker-header .van-icon {
  font-size: 20px;
  color: #333;
}

.map-search {
  padding: 12px 16px;
  background: #fff;
}

.search-results {
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.search-result-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.search-result-item:active {
  background: #f5f5f5;
}

.result-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.result-address {
  font-size: 12px;
  color: #999;
}

.map-container {
  flex: 1;
  width: 100%;
}

.selected-location {
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.selected-location .van-icon {
  color: #FF6700;
  font-size: 18px;
}

.selected-location span {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.datetime-picker-popup {
  background: #fff;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.picker-header h3 {
  font-size: 16px;
  margin: 0;
  color: #333;
  font-weight: 600;
}

.picker-body {
  padding: 20px;
}

.datetime-input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  outline: none;
  color: #333;
}

.datetime-input:focus {
  border-color: #FF6700;
}
</style>
