<template>
  <div class="container">
    <search-table
      :form-model="formModel"
      :form-items="formItems"
      :data="tableData"
      :columns="tableColumns"
      :loading="loading"
      :pagination="pagination"
      :title="pageTitle"
      @update:form-model="handleFormModelUpdate"
      @search="handleSearch"
      @reset="handleReset"
      @refresh="handleRefresh"
    >
      <!-- 自定义表单项：创建时间范围 -->
      <template #form-items>
        <a-col :span="8">
          <a-form-item label="创建时间" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
            <a-range-picker
              v-model="formModel.timeRange"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </template>

      <!-- 工具栏左侧：生成报表按钮 -->
      <template #toolbar-left>
        <a-space>
          <a-button type="primary" @click="handleOpenGenerateModal">
            <template #icon><icon-file-add /></template>
            生成报表
          </a-button>
        </a-space>
      </template>

      <!-- 工具栏右侧：查看和导出按钮 -->
      <template #toolbar-right>
        <a-space>
          <a-button v-if="selectedRecord" type="outline" @click="handleViewContent()">
            <template #icon><icon-eye /></template>
            查看内容
          </a-button>
          <a-dropdown v-if="selectedRecord">
            <a-button type="outline">
              <template #icon><icon-download /></template>
              导出
            </a-button>
            <template #content>
              <a-doption @click="handleExport('csv')">导出 CSV</a-doption>
              <a-doption @click="handleExport('xlsx')">导出 Excel</a-doption>
            </template>
          </a-dropdown>
        </a-space>
      </template>

      <!-- 操作列 -->
      <template #operations="{ record }">
        <a-space>
          <a-button
            v-if="record.status === 'success'"
            type="text"
            size="small"
            @click="handleViewContent(record)"
          >
            查看
          </a-button>
          <a-button
            v-if="record.status === 'success'"
            type="text"
            size="small"
            @click="handleExport('csv', record)"
          >
            CSV
          </a-button>
          <a-button
            v-if="record.status === 'success'"
            type="text"
            size="small"
            @click="handleExport('xlsx', record)"
          >
            Excel
          </a-button>
        </a-space>
      </template>
    </search-table>

    <!-- 生成报表弹窗 -->
    <a-modal
      v-model:visible="generateModalVisible"
      title="生成历史报表"
      :width="600"
      :ok-loading="generating"
      @ok="handleGenerate"
      @cancel="handleCloseGenerateModal"
    >
      <a-form :model="generateForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item
              label="数据源"
              field="data_source"
              :rules="[{ required: true, message: '请选择数据源' }]"
            >
              <a-select v-model="generateForm.data_source" placeholder="请选择" style="width: 100%">
                <a-option value="dc-host">主机</a-option>
                <a-option value="dc-network">网络</a-option>
                <a-option value="dc-database">数据库</a-option>
                <a-option value="dc-middleware">中间件</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="报表标题" field="title">
              <a-input v-model="generateForm.title" placeholder="可选，不填自动生成" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item
          label="指标名称"
          field="metric_names"
          :rules="[{ required: true, message: '请输入指标名称' }]"
        >
          <a-input-tag
            v-model="generateForm.metric_names"
            placeholder="输入后按回车添加（1-20个）"
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item
          label="目标标识"
          field="target_identities"
          :rules="[{ required: true, message: '请输入目标标识' }]"
        >
          <a-input-tag
            v-model="generateForm.target_identities"
            placeholder="输入后按回车添加"
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item label="时间范围" field="timeRange" :rules="[{ required: true, message: '请选择时间范围' }]">
          <a-range-picker
            v-model="generateForm.timeRange"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item
              label="时间间隔"
              field="interval"
              :rules="[{ required: true, message: '请输入时间间隔' }]"
            >
              <a-input v-model="generateForm.interval" placeholder="如: 1 hour, 5 minutes" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="桶聚合"
              field="bucket_aggregation"
              :rules="[{ required: true, message: '请选择桶聚合' }]"
            >
              <a-select v-model="generateForm.bucket_aggregation" placeholder="请选择" style="width: 100%">
                <a-option value="avg">平均值</a-option>
                <a-option value="max">最大值</a-option>
                <a-option value="min">最小值</a-option>
                <a-option value="sum">求和</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>

    <!-- 查看内容弹窗 -->
    <a-modal
      v-model:visible="contentModalVisible"
      :title="contentModalTitle"
      :width="900"
      :footer="false"
    >
      <div v-if="contentLoading" class="loading-container">
        <a-spin />
      </div>
      <div v-else-if="reportContent">
        <!-- 图表展示 -->
        <div ref="chartRef" class="chart-container"></div>

        <!-- 数据表格 -->
        <a-table
          :data="reportContent.series || []"
          :columns="seriesTableColumns"
          :pagination="{ pageSize: 10 }"
          stripe
        />
      </div>
      <a-empty v-else description="暂无数据" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, nextTick } from 'vue'
import { Message } from '@arco-design/web-vue'
import SearchTable from '@/components/search-table/index.vue'
import type { FormItem } from '@/components/search-form/types'
import {
  fetchReportList,
  generateReport,
  fetchReportContent,
  exportReport,
  ReportType,
  type ReportRecord,
  type HistoryReportParams,
} from '@/api/ops/report'
import * as echarts from 'echarts'

// 页面标题
const pageTitle = '历史报表'

// 列表筛选表单模型
const formModel = ref<{
  report_type: string
  status: string
  keyword: string
  timeRange: string[]
}>({
  report_type: ReportType.HISTORY,
  status: '',
  keyword: '',
  timeRange: [],
})

// 表单项配置
const formItems = computed<FormItem[]>(() => [
  {
    field: 'status',
    label: '状态',
    type: 'select',
    span: 8,
    placeholder: '请选择',
    options: [
      { value: '', label: '全部' },
      { value: 'pending', label: '等待中' },
      { value: 'running', label: '生成中' },
      { value: 'success', label: '成功' },
      { value: 'failed', label: '失败' },
    ],
  },
  {
    field: 'keyword',
    label: '标题',
    type: 'input',
    span: 8,
    placeholder: '请输入标题关键字',
  },
])

// 状态
const loading = ref(false)
const generating = ref(false)
const contentLoading = ref(false)
const exporting = ref(false)
const tableData = ref<ReportRecord[]>([])
const selectedRecord = ref<ReportRecord | null>(null)

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
})

// 表格列配置
const tableColumns = computed(() => [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '标题',
    dataIndex: 'title',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    slotName: 'status',
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    width: 180,
  },
  {
    title: '更新时间',
    dataIndex: 'updated_at',
    width: 180,
  },
  {
    title: '操作',
    dataIndex: 'operations',
    width: 180,
    slotName: 'operations',
    fixed: 'right' as const,
  },
])

// 生成报表弹窗
const generateModalVisible = ref(false)
const generateForm = ref<{
  data_source: string
  metric_names: string[]
  target_identities: string[]
  timeRange: string[]
  interval: string
  bucket_aggregation: string
  title: string
}>({
  data_source: '',
  metric_names: [],
  target_identities: [],
  timeRange: [],
  interval: '',
  bucket_aggregation: 'avg',
  title: '',
})

// 查看内容弹窗
const contentModalVisible = ref(false)
const contentModalTitle = ref('')
const reportContent = ref<Record<string, any> | null>(null)
const chartRef = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null

// 时间序列表格列配置
const seriesTableColumns = computed(() => [
  {
    title: '指标名称',
    dataIndex: 'metric_name',
    width: 150,
  },
  {
    title: '时间',
    dataIndex: 'timestamp',
    width: 180,
  },
  {
    title: '值',
    dataIndex: 'value',
    width: 150,
  },
])

// 获取报表列表
const fetchList = async () => {
  loading.value = true

  try {
    const params: any = {
      page: pagination.current,
      size: pagination.pageSize,
      report_type: ReportType.HISTORY,
    }

    if (formModel.value.status) {
      params.status = formModel.value.status
    }

    if (formModel.value.keyword) {
      params.keyword = formModel.value.keyword
    }

    if (formModel.value.timeRange && formModel.value.timeRange.length === 2) {
      params.created_from = formModel.value.timeRange[0]
      params.created_to = formModel.value.timeRange[1]
    }

    const res = await fetchReportList(params)

    if (res.code === 0 && res.details) {
      tableData.value = res.details.data || []
      pagination.total = res.details.total || 0
    } else {
      Message.error(res.message || '获取报表列表失败')
    }
  } catch (error: any) {
    console.error('获取报表列表失败:', error)
    Message.error(error.message || '获取报表列表失败')
  } finally {
    loading.value = false
  }
}

// 处理表单模型更新
const handleFormModelUpdate = (value: any) => {
  formModel.value = {
    ...formModel.value,
    ...value,
  }
}

// 查询
const handleSearch = () => {
  pagination.current = 1
  fetchList()
}

// 重置
const handleReset = () => {
  formModel.value = {
    report_type: ReportType.HISTORY,
    status: '',
    keyword: '',
    timeRange: [],
  }
  pagination.current = 1
  fetchList()
}

// 刷新
const handleRefresh = () => {
  fetchList()
  Message.success('数据已刷新')
}

// 打开生成报表弹窗
const handleOpenGenerateModal = () => {
  generateForm.value = {
    data_source: '',
    metric_names: [],
    target_identities: [],
    timeRange: [],
    interval: '',
    bucket_aggregation: 'avg',
    title: '',
  }
  generateModalVisible.value = true
}

// 关闭生成报表弹窗
const handleCloseGenerateModal = () => {
  generateModalVisible.value = false
}

// 生成报表
const handleGenerate = async () => {
  // 验证必填项
  if (!generateForm.value.data_source) {
    Message.warning('请选择数据源')
    return
  }

  if (generateForm.value.metric_names.length === 0) {
    Message.warning('请输入指标名称')
    return
  }

  if (generateForm.value.metric_names.length > 20) {
    Message.warning('指标名称最多20个')
    return
  }

  if (generateForm.value.target_identities.length === 0) {
    Message.warning('请输入目标标识')
    return
  }

  if (!generateForm.value.timeRange || generateForm.value.timeRange.length !== 2) {
    Message.warning('请选择时间范围')
    return
  }

  if (!generateForm.value.interval) {
    Message.warning('请输入时间间隔')
    return
  }

  if (!generateForm.value.bucket_aggregation) {
    Message.warning('请选择桶聚合')
    return
  }

  generating.value = true

  try {
    const params: HistoryReportParams = {
      data_source: generateForm.value.data_source as any,
      metric_names: generateForm.value.metric_names,
      target_identities: generateForm.value.target_identities,
      start_time: generateForm.value.timeRange[0],
      end_time: generateForm.value.timeRange[1],
      interval: generateForm.value.interval,
      bucket_aggregation: generateForm.value.bucket_aggregation as any,
    }

    const res = await generateReport({
      report_type: ReportType.HISTORY,
      title: generateForm.value.title || undefined,
      params,
    })

    if (res.code === 0 && res.details) {
      if (res.details.status === 'success') {
        Message.success('报表生成成功')
        generateModalVisible.value = false
        fetchList()
      } else if (res.details.status === 'failed') {
        Message.error(res.details.error_message || '报表生成失败')
      } else {
        Message.info('报表正在生成中，请稍后刷新查看')
        generateModalVisible.value = false
        fetchList()
      }
    } else {
      Message.error(res.message || '报表生成失败')
    }
  } catch (error: any) {
    console.error('生成报表失败:', error)
    Message.error(error.message || '生成报表失败')
  } finally {
    generating.value = false
  }
}

// 查看内容
const handleViewContent = async (record?: ReportRecord) => {
  const targetRecord = record || selectedRecord.value
  if (!targetRecord) return

  contentLoading.value = true
  contentModalVisible.value = true
  contentModalTitle.value = targetRecord.title
  reportContent.value = null

  try {
    const res = await fetchReportContent(targetRecord.id)

    if (res.code === 0 && res.details) {
      reportContent.value = res.details

      // 渲染图表
      if (res.details.series) {
        await nextTick()
        renderChart(res.details.series)
      }
    } else {
      Message.error(res.message || '获取报表内容失败')
    }
  } catch (error: any) {
    console.error('获取报表内容失败:', error)
    Message.error(error.message || '获取报表内容失败')
  } finally {
    contentLoading.value = false
  }
}

// 导出报表
const handleExport = async (format: 'csv' | 'xlsx', record?: ReportRecord) => {
  const targetRecord = record || selectedRecord.value
  if (!targetRecord) {
    Message.warning('请选择要导出的报表')
    return
  }

  if (targetRecord.status !== 'success') {
    Message.warning('只能导出生成成功的报表')
    return
  }

  exporting.value = true

  try {
    const blob = await exportReport(targetRecord.id, format)

    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `report_${targetRecord.id}.${format}`

    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)

    Message.success('导出成功')
  } catch (error: any) {
    console.error('导出失败:', error)
    Message.error(error.message || '导出失败')
  } finally {
    exporting.value = false
  }
}

// 渲染图表
const renderChart = (series: any[]) => {
  if (!chartRef.value || series.length === 0) return

  if (chartInstance) {
    chartInstance.dispose()
  }

  chartInstance = echarts.init(chartRef.value)

  // 按指标名称分组
  const groupedData: Record<string, any[]> = {}
  series.forEach((item: any) => {
    const name = item.metric_name || 'value'
    if (!groupedData[name]) {
      groupedData[name] = []
    }
    groupedData[name].push(item)
  })

  // 获取所有时间点
  const timestamps = [...new Set(series.map((item: any) => item.timestamp))].sort()

  const seriesData = Object.keys(groupedData).map((name) => ({
    name,
    type: 'line' as const,
    smooth: true,
    data: timestamps.map((t) => {
      const item = groupedData[name].find((d: any) => d.timestamp === t)
      return item ? item.value : null
    }),
  }))

  const option: echarts.EChartsOption = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: Object.keys(groupedData),
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: timestamps,
    },
    yAxis: {
      type: 'value',
    },
    series: seriesData as any,
  }

  chartInstance.setOption(option)
}

// 初始化
fetchList()
</script>

<script lang="ts">
export default {
  name: 'HistoryReport',
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;

  .chart-container {
    height: 400px;
    width: 100%;
    margin-bottom: 20px;
  }

  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }
}
</style>