<script setup>
import {computed, onMounted, ref} from 'vue';
import request from "@/utils/request.js";
import {
  ElCard,
  ElEmpty,
  ElMessage,
  ElPagination,
  ElSkeleton,
  ElSkeletonItem,
  ElTable,
  ElTableColumn,
  ElTag
} from "element-plus";
import {
  AlertCircle,
  ArrowDownRight,
  ArrowUpRight,
  Calendar,
  Clock,
  CloudRain,
  CloudSun,
  Compass,
  Droplets,
  RefreshCw,
  Thermometer,
  Volume2,
  Wind
} from 'lucide-vue-next';

// Data refs
const currentWeather = ref(null);
const historyData = ref([]);
const loading = ref(true);
const historyLoading = ref(true);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const lastRefreshTime = ref(new Date());

// Format functions
const formatValue = (value, multiplier, unit) => {
  if (!value) return '-';
  // For temperature, noise, rainfall, wind speed, and humidity, display directly
  return `${value} ${unit}`;
};

const formatWindDirection = (degree) => {
  if (!degree) return '-';

  const directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北'];
  const val = Math.floor((parseFloat(degree) + 22.5) / 45);
  return directions[val % 8];
};

const formatTime = (dateString) => {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleString();
};

const getAirQualityLevel = (pm25) => {
  if (!pm25) return { level: '-', color: 'gray' };

  const value = parseInt(pm25);
  if (value <= 35) return { level: '优', color: 'green' };
  if (value <= 75) return { level: '良', color: 'blue' };
  if (value <= 115) return { level: '轻度污染', color: 'orange' };
  if (value <= 150) return { level: '中度污染', color: 'red' };
  return { level: '重度污染', color: 'purple' };
};

const airQuality = computed(() => {
  if (!currentWeather.value) return { level: '-', color: 'gray' };
  return getAirQualityLevel(currentWeather.value.pm25);
});

// Get current weather data
const getCurrentData = async () => {
  loading.value = true;
  try {
    const arr = [{
      column: "create_time",
      type: "orderByDesc"
    }];

    const res = await request.get("/weatherData/findByPage", {
      params: {
        pageNum: 1,
        pageSize: 1,
        conditionJson: encodeURIComponent(JSON.stringify(arr))
      }
    });

    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }

    if (res.data.records && res.data.records.length > 0) {
      currentWeather.value = res.data.records[0];
    }
    lastRefreshTime.value = new Date();
  } catch (error) {
    ElMessage.error('获取当前天气数据失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// Get historical weather data
const getHistoryData = async () => {
  historyLoading.value = true;
  try {
    const arr = [{
      column: "create_time",
      type: "orderByDesc"
    }];

    const res = await request.get("/weatherData/findByPage", {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        conditionJson: encodeURIComponent(JSON.stringify(arr))
      }
    });

    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }

    historyData.value = res.data.records || [];
    total.value = res.data.total || 0;
  } catch (error) {
    ElMessage.error('获取历史天气数据失败');
    console.error(error);
  } finally {
    historyLoading.value = false;
  }
};

// Handle page change
const handlePageChange = (page) => {
  currentPage.value = page;
  getHistoryData();
};

// Handle page size change
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  getHistoryData();
};

// Refresh data
const refreshData = () => {
  getCurrentData();
  getHistoryData();
  ElMessage.success('数据已刷新');
};

// Get weather icon and background based on conditions
const getWeatherInfo = computed(() => {
  if (!currentWeather.value) return { icon: CloudSun, bgClass: 'bg-blue-50' };

  const temp = currentWeather.value.temperature ? parseFloat(currentWeather.value.temperature)  : 20;
  const rainfall = currentWeather.value.rainfall ? parseFloat(currentWeather.value.rainfall)  : 0;
  const humidity = currentWeather.value.humidity ? parseFloat(currentWeather.value.humidity)  : 50;

  if (rainfall > 5) {
    return {
      icon: CloudRain,
      bgClass: 'bg-gradient-to-r from-blue-100 to-blue-200',
      text: '雨天'
    };
  } else if (temp > 30) {
    return {
      icon: Thermometer,
      bgClass: 'bg-gradient-to-r from-orange-50 to-red-100',
      text: '炎热'
    };
  } else if (temp < 5) {
    return {
      icon: Thermometer,
      bgClass: 'bg-gradient-to-r from-blue-50 to-indigo-100',
      text: '寒冷'
    };
  } else if (humidity > 80) {
    return {
      icon: Droplets,
      bgClass: 'bg-gradient-to-r from-blue-50 to-cyan-100',
      text: '潮湿'
    };
  }

  return {
    icon: CloudSun,
    bgClass: 'bg-gradient-to-r from-blue-50 to-cyan-50',
    text: '晴朗'
  };
});

// Get trend indicators
const getTrend = (current, previous, isHigherBetter = false) => {
  if (!current || !previous) return { icon: null, color: 'gray' };

  const curr = parseFloat(current);
  const prev = parseFloat(previous);
  const isHigher = curr > prev;

  if (curr === prev) return { icon: null, color: 'gray' };

  const isPositive = isHigherBetter ? isHigher : !isHigher;

  return {
    icon: isHigher ? ArrowUpRight : ArrowDownRight,
    color: isPositive ? 'green' : 'red'
  };
};

onMounted(() => {
  getCurrentData();
  getHistoryData();
});
</script>

<template>
  <div class="weather-dashboard p-4 max-w-7xl mx-auto">

    <!-- Current Weather Overview -->
    <div class="mb-8">
      <el-card
          :class="[getWeatherInfo.bgClass, 'border-0 shadow-md overflow-hidden transition-all duration-300']"
          :body-style="{ padding: '0' }"
      >
        <div class="p-6 relative overflow-hidden">
          <div class="flex flex-col md:flex-row items-center justify-between gap-6">
            <!-- Weather Icon and Main Info -->
            <div class="flex items-center gap-4">
              <div class="bg-white/80 p-4 rounded-full shadow-md">
                <component :is="getWeatherInfo.icon" class="w-12 h-12 text-blue-500" />
              </div>
              <div>
                <h2 class="text-2xl font-bold text-gray-800">当前天气状况</h2>
                <div class="flex items-center gap-2">
                  <el-tag size="small" :type="airQuality.color === 'gray' ? 'info' : airQuality.color === 'green' ? 'success' : airQuality.color === 'blue' ? 'info' : airQuality.color === 'orange' ? 'warning' : 'danger'">
                    {{ airQuality.level }}
                  </el-tag>
                  <span class="text-gray-600">{{ getWeatherInfo.text }}</span>
                </div>
              </div>
            </div>

            <!-- Temperature and Refresh -->
            <div class="flex flex-col items-end">
              <div v-if="currentWeather && !loading" class="text-4xl font-bold text-gray-800">
                {{ currentWeather.temperature }} °C
              </div>
              <div v-else class="h-10 w-24 bg-gray-200 animate-pulse rounded"></div>

              <div class="flex items-center gap-2 mt-2">
                <Clock class="w-4 h-4 text-gray-500" />
                <span class="text-sm text-gray-600">更新于: {{ formatTime(lastRefreshTime) }}</span>
                <button
                    @click="refreshData"
                    class="ml-2 flex items-center gap-1 text-blue-500 hover:text-blue-700 transition-colors"
                >
                  <RefreshCw class="w-4 h-4" />
                  <span>刷新</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- Current Weather Details -->
    <div class="mb-8">
      <h2 class="text-xl font-bold mb-4 flex items-center gap-2 text-gray-800">
        <AlertCircle class="w-5 h-5" />
        详细气象数据
      </h2>

      <el-card shadow="hover" class="w-full border-0 shadow-md">
        <el-skeleton :loading="loading" animated>
          <template #template>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div v-for="i in 6" :key="i" class="flex items-center gap-2">
                <el-skeleton-item variant="circle" style="width: 40px; height: 40px" />
                <div>
                  <el-skeleton-item variant="text" style="width: 100px" />
                  <el-skeleton-item variant="text" style="width: 150px" />
                </div>
              </div>
            </div>
          </template>

          <template #default>
            <div v-if="currentWeather" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
              <!-- Temperature -->
              <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="bg-orange-50 p-3 rounded-full shadow-sm">
                  <Thermometer class="w-6 h-6 text-orange-500" />
                </div>
                <div class="flex-1">
                  <div class="text-gray-500 text-sm">温度</div>
                  <div class="text-xl font-bold flex items-center gap-1">
                    {{ currentWeather.temperature }} °C
                  </div>
                </div>
              </div>

              <!-- Humidity -->
              <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="bg-blue-50 p-3 rounded-full shadow-sm">
                  <Droplets class="w-6 h-6 text-blue-500" />
                </div>
                <div class="flex-1">
                  <div class="text-gray-500 text-sm">湿度</div>
                  <div class="text-xl font-bold flex items-center gap-1">
                    {{ currentWeather.humidity }} %
                  </div>
                </div>
              </div>

              <!-- Wind -->
              <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="bg-teal-50 p-3 rounded-full shadow-sm">
                  <Wind class="w-6 h-6 text-teal-500" />
                </div>
                <div class="flex-1">
                  <div class="text-gray-500 text-sm">风速/风向</div>
                  <div class="text-xl font-bold">
                    {{ currentWeather.windSpeed }} m/s
                    {{ currentWeather.windLevel ? `(${currentWeather.windLevel}级)` : '' }}
                  </div>
                  <div class="text-sm text-gray-500 flex items-center gap-1">
                    <Compass class="w-4 h-4" />
                    {{ formatWindDirection(currentWeather.windDirectionDegree) }}
                    {{ currentWeather.windDirectionDegree ? `(${currentWeather.windDirectionDegree}°)` : '' }}
                  </div>
                </div>
              </div>

              <!-- Air Quality -->
              <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div :class="`bg-${airQuality.color === 'gray' ? 'gray' : airQuality.color === 'green' ? 'green' : airQuality.color === 'blue' ? 'blue' : airQuality.color === 'orange' ? 'orange' : 'red'}-50 p-3 rounded-full shadow-sm`">
                  <AlertCircle :class="`w-6 h-6 text-${airQuality.color === 'gray' ? 'gray' : airQuality.color === 'green' ? 'green' : airQuality.color === 'blue' ? 'blue' : airQuality.color === 'orange' ? 'orange' : 'red'}-500`" />
                </div>
                <div class="flex-1">
                  <div class="text-gray-500 text-sm">空气质量</div>
                  <div class="text-xl font-bold">
                    {{ airQuality.level }}
                  </div>
                  <div class="text-sm text-gray-500">
                    PM2.5: {{ currentWeather.pm25 || '-' }} μg/m³,
                    PM10: {{ currentWeather.pm10 || '-' }} μg/m³
                  </div>
                </div>
              </div>

              <!-- Noise -->
              <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="bg-purple-50 p-3 rounded-full shadow-sm">
                  <Volume2 class="w-6 h-6 text-purple-500" />
                </div>
                <div class="flex-1">
                  <div class="text-gray-500 text-sm">噪声</div>
                  <div class="text-xl font-bold">
                    {{ currentWeather.noise }} dB
                  </div>
                </div>
              </div>

              <!-- Rainfall -->
              <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="bg-indigo-50 p-3 rounded-full shadow-sm">
                  <CloudRain class="w-6 h-6 text-indigo-500" />
                </div>
                <div class="flex-1">
                  <div class="text-gray-500 text-sm">降雨量</div>
                  <div class="text-xl font-bold">
                    {{ currentWeather.rainfall }} mm
                  </div>
                </div>
              </div>
            </div>

            <div v-else class="text-center py-8">
              <el-empty description="暂无天气数据" />
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </div>

    <!-- Historical Data Table -->
    <div>
      <h2 class="text-xl font-bold mb-4 flex items-center gap-2 text-gray-800">
        <Calendar class="w-5 h-5" />
        历史天气数据
      </h2>

      <el-card shadow="hover" class="w-full border-0 shadow-md">
        <div v-if="historyLoading" class="py-4">
          <el-skeleton :rows="5" animated />
        </div>

        <template v-else>
          <el-table
              :data="historyData"
              stripe
              border
              style="width: 100%"
              max-height="500"
              class="weather-history-table"
              v-loading="historyLoading"
              element-loading-text="加载中..."
          >
            <el-table-column prop="createTime" label="时间" min-width="180" fixed="left">
              <template #default="scope">
                {{ formatTime(scope.row.createTime) }}
              </template>
            </el-table-column>

            <el-table-column label="温度" min-width="100">
              <template #default="scope">
                {{ scope.row.temperature }} °C
              </template>
            </el-table-column>

            <el-table-column label="湿度" min-width="100">
              <template #default="scope">
                {{ scope.row.humidity }} %
              </template>
            </el-table-column>

            <el-table-column label="风速" min-width="120">
              <template #default="scope">
                {{ scope.row.windSpeed }} m/s
                <span v-if="scope.row.windLevel">({{ scope.row.windLevel }}级)</span>
              </template>
            </el-table-column>

            <el-table-column label="风向" min-width="120">
              <template #default="scope">
                {{ formatWindDirection(scope.row.windDirectionDegree) }}
                <span v-if="scope.row.windDirectionDegree">({{ scope.row.windDirectionDegree }}°)</span>
              </template>
            </el-table-column>

            <el-table-column label="PM2.5" min-width="100">
              <template #default="scope">
                {{ scope.row.pm25 || '-' }} μg/m³
              </template>
            </el-table-column>

            <el-table-column label="PM10" min-width="100">
              <template #default="scope">
                {{ scope.row.pm10 || '-' }} μg/m³
              </template>
            </el-table-column>

            <el-table-column label="噪声" min-width="100">
              <template #default="scope">
                {{ scope.row.noise }} dB
              </template>
            </el-table-column>

            <el-table-column label="降雨量" min-width="100">
              <template #default="scope">
                {{ scope.row.rainfall }} mm
              </template>
            </el-table-column>

            <el-table-column label="空气质量" min-width="120">
              <template #default="scope">
                <el-tag
                    :type="getAirQualityLevel(scope.row.pm25).color === 'gray' ? 'info' :
                         getAirQualityLevel(scope.row.pm25).color === 'green' ? 'success' :
                         getAirQualityLevel(scope.row.pm25).color === 'blue' ? 'info' :
                         getAirQualityLevel(scope.row.pm25).color === 'orange' ? 'warning' : 'danger'"
                    size="small"
                >
                  {{ getAirQualityLevel(scope.row.pm25).level }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>

          <!-- Pagination -->
          <div class="flex justify-center mt-4">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                background
            />
          </div>
        </template>
      </el-card>
    </div>

  </div>
</template>

<style>
/* Enhanced styles */
.weather-dashboard {
  --card-transition: all 0.3s ease;
}

.weather-dashboard .el-card {
  transition: var(--card-transition);
}

.weather-dashboard .el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.weather-history-table .el-table__header-wrapper th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .weather-history-table {
    font-size: 0.85rem;
  }
}

/* Animation for refresh */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.weather-dashboard button:active .lucide-refresh-cw {
  animation: spin 0.5s linear;
}
</style>

