<template>
  <div class="page-shell">
    <section class="page-hero">
      <div class="page-eyebrow">Overview</div>
      <h1 class="page-title">企业缺勤全景概览</h1>
      <p class="page-description">
        通过总量、时序、结构分布三个层面快速识别缺勤风险的整体轮廓，适合作为答辩时的第一屏总览。
      </p>
    </section>

    <el-row :gutter="20" class="kpi-row">
      <el-col :xs="24" :sm="12" :lg="6" v-for="kpi in kpiData" :key="kpi.title">
        <el-card class="metric-card kpi-card" shadow="never">
          <div class="kpi-index">{{ kpi.index }}</div>
          <div class="kpi-title">{{ kpi.title }}</div>
          <div class="kpi-value">{{ kpi.value }}</div>
          <div class="kpi-unit">{{ kpi.unit }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :xl="12">
        <el-card class="panel-card" shadow="never">
          <div class="section-heading">
            <div>
              <h3 class="section-title">月度缺勤事件趋势</h3>
              <p class="section-caption">观察不同月份的事件量与时长波动。</p>
            </div>
            <span class="soft-tag">Trend</span>
          </div>
          <div ref="trendChartRef" class="chart-frame"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :xl="12">
        <el-card class="panel-card" shadow="never">
          <div class="section-heading">
            <div>
              <h3 class="section-title">星期分布</h3>
              <p class="section-caption">识别工作周内的缺勤集中区间。</p>
            </div>
            <span class="soft-tag">Weekday</span>
          </div>
          <div ref="weekdayChartRef" class="chart-frame"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :xl="12">
        <el-card class="panel-card" shadow="never">
          <div class="section-heading">
            <div>
              <h3 class="section-title">请假原因大类分布</h3>
              <p class="section-caption">呈现引发缺勤的主要业务原因结构。</p>
            </div>
            <span class="soft-tag">Reason Mix</span>
          </div>
          <div ref="reasonChartRef" class="chart-frame"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :xl="12">
        <el-card class="panel-card" shadow="never">
          <div class="section-heading">
            <div>
              <h3 class="section-title">季节影响分布</h3>
              <p class="section-caption">展示季节变化与缺勤总量之间的关系。</p>
            </div>
            <span class="soft-tag">Season</span>
          </div>
          <div ref="seasonChartRef" class="chart-frame"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getReasons, getSeasons, getStats, getTrend, getWeekday } from '@/api/overview'

const trendChartRef = ref(null)
const weekdayChartRef = ref(null)
const reasonChartRef = ref(null)
const seasonChartRef = ref(null)

const kpiData = ref([
  { index: '01', title: '缺勤事件数', value: '-', unit: '条' },
  { index: '02', title: '员工覆盖数', value: '-', unit: '人' },
  { index: '03', title: '平均缺勤时长', value: '-', unit: '小时' },
  { index: '04', title: '高风险事件占比', value: '-', unit: '%' }
])

onMounted(async () => {
  try {
    const stats = await getStats()
    kpiData.value = [
      { index: '01', title: '缺勤事件数', value: stats.total_records, unit: '条' },
      { index: '02', title: '员工覆盖数', value: stats.total_employees, unit: '人' },
      { index: '03', title: '平均缺勤时长', value: stats.avg_absent_hours, unit: '小时' },
      { index: '04', title: '高风险事件占比', value: (stats.high_risk_ratio * 100).toFixed(1), unit: '%' }
    ]
  } catch (e) {
    console.error('Failed to load stats:', e)
  }

  initTrendChart()
  initWeekdayChart()
  initReasonChart()
  initSeasonChart()
})

async function initTrendChart() {
  const chart = echarts.init(trendChartRef.value)
  const data = await getTrend()
  chart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: 32, right: 18, top: 30, bottom: 30, containLabel: true },
    xAxis: { type: 'category', data: data.months, axisLine: { lineStyle: { color: '#B6C1CE' } } },
    yAxis: { type: 'value', name: '小时', splitLine: { lineStyle: { color: '#E5EBF2' } } },
    series: [{
      type: 'line',
      smooth: true,
      data: data.total_hours,
      areaStyle: { opacity: 0.18, color: '#0F766E' },
      lineStyle: { width: 3, color: '#0F766E' },
      itemStyle: { color: '#0F766E' }
    }]
  })
}

async function initWeekdayChart() {
  const chart = echarts.init(weekdayChartRef.value)
  const data = await getWeekday()
  chart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: 32, right: 18, top: 30, bottom: 30, containLabel: true },
    xAxis: { type: 'category', data: data.weekdays, axisLine: { lineStyle: { color: '#B6C1CE' } } },
    yAxis: { type: 'value', name: '小时', splitLine: { lineStyle: { color: '#E5EBF2' } } },
    series: [{ type: 'bar', barWidth: 34, data: data.total_hours, itemStyle: { color: '#C2410C', borderRadius: [10, 10, 0, 0] } }]
  })
}

async function initReasonChart() {
  const chart = echarts.init(reasonChartRef.value)
  const data = await getReasons()
  chart.setOption({
    tooltip: { trigger: 'item' },
    legend: { bottom: 0, icon: 'circle' },
    series: [{
      type: 'pie',
      radius: ['42%', '72%'],
      center: ['50%', '45%'],
      data: data.reasons.map(item => ({ value: item.count, name: item.name }))
    }]
  })
}

async function initSeasonChart() {
  const chart = echarts.init(seasonChartRef.value)
  const data = await getSeasons()
  chart.setOption({
    tooltip: { trigger: 'item' },
    color: ['#0F766E', '#3B82F6', '#F59E0B', '#DC2626'],
    series: [{ type: 'pie', radius: ['38%', '70%'], data: data.seasons.map(item => ({ value: item.total_hours, name: item.name })) }]
  })
}
</script>

<style scoped>
.kpi-row {
  margin-bottom: 2px;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 156px;
}

.kpi-card::after {
  content: '';
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(194, 65, 12, 0.08));
}

.kpi-index {
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #91a0b5;
}

.kpi-title {
  font-size: 14px;
  color: var(--text-subtle);
}

.kpi-value {
  margin-top: 14px;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-main);
}

.kpi-unit {
  margin-top: 8px;
  font-size: 13px;
  color: #8a97ab;
}
</style>
