<!-- 数据分析端 - 报表详情页 -->
<template>
  <view class="page">
    <!-- 固定顶部导航栏 -->
    <AnalyticsTopBar 
      :title="report.title || '报表详情'"
      :lastUpdateTime="formatTime(report.generated_at)"
      :sidebarVisible="showSidebarMenu"
      @menu-click="handleMenu"
      @refresh="refreshReport"
      @search="handleSearch"
      @notification="handleNotification"
      @fullscreen="handleFullscreen"
      @mobile="handleMobile"
      @dropdown="handleDropdown"
      @settings="handleSettings"
    />
    
    <view class="page-layout">
      <!-- 侧边栏菜单组件 -->
      <AnalyticsSidebarMenu 
        :visible="showSidebarMenu" 
        :currentPath="currentPath"
        @visible-change="handleSidebarUpdate"
      />
      
      <!-- 主内容区域 -->
      <view class="main-content">
        <view class="report-detail-page">
          <!-- 报表头部 -->
          <view class="report-header">
            <view class="header-info">
              <text class="report-title">{{ report.title }}</text>
              <view class="report-meta">
                <text class="meta-item">{{ getReportTypeText() }}</text>
                <text class="meta-item">{{ report.period }}</text>
                <text class="meta-item">{{ formatTime(report.generated_at) }}</text>
              </view>
            </view>
            <view class="header-actions">
              <button class="action-btn export" @click="exportReport">📊 导出</button>
              <button class="action-btn refresh" @click="refreshReport">🔄 刷新</button>
            </view>
          </view>

          <!-- 核心指标概览 -->
          <view class="metrics-overview">
            <view class="section-title">核心指标</view>
            <view class="metrics-grid">
              <view v-for="metric in coreMetrics" :key="metric.key" class="metric-card">
                <view class="metric-icon" :style="{ backgroundColor: metric.color }">{{ metric.icon }}</view>
                <view class="metric-content">
                  <text class="metric-value">{{ formatMetricValue(metric.value, metric.format) }}</text>
                  <text class="metric-label">{{ metric.label }}</text>
                  <view class="metric-change" :class="{ positive: metric.change > 0, negative: metric.change < 0 }">
                    <text class="change-icon">{{ metric.change > 0 ? '↗' : metric.change < 0 ? '↘' : '→' }}</text>
                    <text class="change-value">{{ Math.abs(metric.change) }}%</text>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 趋势图表 -->
          <view class="chart-section">
            <view class="section-header">
              <text class="section-title">趋势分析</text>
              <view class="chart-tabs">
                <text v-for="tab in chartTabs" :key="tab.key" 
                      class="chart-tab" 
                      :class="{ active: activeChartTab === tab.key }"
                      @click="switchChartTab(tab.key)">{{ tab.label }}</text>
              </view>
            </view>
            
            <view class="chart-container">
              <canvas class="chart-canvas" canvas-id="trendChart" @touchstart="onChartTouch" @touchmove="onChartTouch" @touchend="onChartTouch"></canvas>
            </view>
            
            <view class="chart-legend">
              <view v-for="legend in chartLegends" :key="legend.key" class="legend-item">
                <view class="legend-color" :style="{ backgroundColor: legend.color }"></view>
                <text class="legend-label">{{ legend.label }}</text>
              </view>
            </view>
          </view>

          <!-- 数据表格 -->
          <view class="data-table">
            <view class="section-title">详细数据</view>
            
            <view class="table-filters">
              <view class="filter-item">
                <text class="filter-label">排序方式:</text>
                <picker :value="sortIndex" :range="sortOptions" @change="onSortChange">
                  <text class="filter-value">{{ sortOptions[sortIndex] }}</text>
                </picker>
              </view>
              <view class="filter-item">
                <text class="filter-label">显示条数:</text>
                <picker :value="limitIndex" :range="limitOptions" @change="onLimitChange">
                  <text class="filter-value">{{ limitOptions[limitIndex] }}</text>
                </picker>
              </view>
            </view>
            
            <view class="table-container">
              <scroll-view scroll-x="true" class="table-scroll">
                <view class="table">
                  <view class="table-header">
                    <text v-for="column in tableColumns" :key="column.key" 
                          class="table-cell header-cell" 
                          :style="{ width: column.width }">{{ column.title }}</text>
                  </view>
                  
                  <view v-for="(row, index) in tableData" :key="index" class="table-row">
                    <text v-for="column in tableColumns" :key="column.key" 
                          class="table-cell data-cell" 
                          :style="{ width: column.width }"
                          :class="{ number: column.type === 'number', currency: column.type === 'currency' }">
                      {{ formatCellValue(row[column.key], column) }}
                    </text>
                  </view>
                </view>
              </scroll-view>
            </view>
            
            <view class="table-pagination">
              <button class="page-btn" :disabled="currentPage <= 1" @click="previousPage">上一页</button>
              <text class="page-info">{{ currentPage }} / {{ totalPages }}</text>
              <button class="page-btn" :disabled="currentPage >= totalPages" @click="nextPage">下一页</button>
            </view>
          </view>

          <!-- 数据洞察 -->
          <view class="data-insights">
            <view class="section-title">数据洞察</view>
            
            <view v-for="insight in dataInsights" :key="insight.id" class="insight-card">
              <view class="insight-header">
                <view class="insight-icon" :class="insight.type">{{ getInsightIcon(insight.type) }}</view>
                <text class="insight-title">{{ insight.title }}</text>
              </view>
              <text class="insight-content">{{ insight.content }}</text>
              <view class="insight-actions">
                <text class="insight-impact" :class="insight.impact">{{ getImpactText(insight.impact) }}</text>
                <text class="insight-action" @click="viewInsightDetail(insight)">查看详情 ></text>
              </view>
            </view>
          </view>

          <!-- 报表配置 -->
          <view class="report-config">
            <view class="section-title">报表配置</view>
            
            <view class="config-item">
              <text class="config-label">自动刷新</text>
              <switch :checked="autoRefresh" @change="toggleAutoRefresh" />
            </view>
            
            <view class="config-item">
              <text class="config-label">刷新间隔</text>
              <picker :value="intervalIndex" :range="intervalOptions" @change="onIntervalChange">
                <text class="config-value">{{ intervalOptions[intervalIndex] }}</text>
              </picker>
            </view>
            
            <view class="config-item">
              <text class="config-label">邮件通知</text>
              <switch :checked="emailNotify" @change="toggleEmailNotify" />
            </view>
            
            <view class="config-actions">
              <button class="config-btn save" @click="saveConfig">保存配置</button>
              <button class="config-btn reset" @click="resetConfig">重置配置</button>
            </view>
          </view>

          <!-- 相关报表 -->
          <view class="related-reports">
            <view class="section-title">相关报表</view>
            
            <view class="report-list">
              <view v-for="relatedReport in relatedReports" :key="relatedReport.id" 
                    class="report-item" @click="viewRelatedReport(relatedReport)">
                <view class="report-icon">📊</view>
                <view class="report-info">
                  <text class="report-name">{{ relatedReport.title }}</text>
                  <text class="report-desc">{{ relatedReport.description }}</text>
                  <text class="report-time">{{ formatTime(relatedReport.generated_at) }}</text>
                </view>
                <text class="report-arrow">></text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="uts">
import AnalyticsSidebarMenu from '@/components/analytics/AnalyticsSidebarMenu.uvue'
import AnalyticsTopBar from '@/components/analytics/AnalyticsTopBar.uvue'
import supa from '@/components/supadb/aksupainstance.uts'

type ReportType = {
  id: string
  title: string
  type: string
  period: string
  generated_at: string
  description: string
}

type MetricType = {
  key: string
  label: string
  value: number
  format: string
  icon: string
  color: string
  change: number
}

type ChartTabType = {
  key: string
  label: string
}

type ChartLegendType = {
  key: string
  label: string
  color: string
}

type TableColumnType = {
  key: string
  title: string
  width: string
  type: string
}

type InsightType = {
  id: string
  type: string
  title: string
  content: string
  impact: string
}

export default {
  components: {
    AnalyticsSidebarMenu,
    AnalyticsTopBar
  },
  data() {
    return {
      showSidebarMenu: false,
      currentPath: '/pages/mall/analytics/report-detail',
      report: {
        id: '',
        title: '',
        type: '',
        period: '',
        generated_at: '',
        description: ''
      } as ReportType,
      coreMetrics: [] as Array<MetricType>,
      chartTabs: [] as Array<ChartTabType>,
      activeChartTab: '',
      chartLegends: [] as Array<ChartLegendType>,
      tableColumns: [] as Array<TableColumnType>,
      allRows: [] as Array<any>,
      tableData: [] as Array<any>,
      dataInsights: [] as Array<InsightType>,
      relatedReports: [] as Array<ReportType>,
      sortIndex: 0,
      sortOptions: [] as Array<string>,
      limitIndex: 1,
      limitOptions: ['10条', '20条', '50条', '100条'],
      currentPage: 1,
      totalPages: 1,
      autoRefresh: false,
      intervalIndex: 1,
      intervalOptions: ['1分钟', '5分钟', '10分钟', '30分钟', '1小时'],
      emailNotify: false
    }
  },
  onLoad(options: any) {
    // 兼容两种参数名：reportId 和 id
    const reportId = (options.reportId || options.id) as string
    if (reportId) {
      this.loadReportDetail(reportId)
    } else {
      uni.showToast({
        title: '缺少报表ID',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
    this.currentPath = '/pages/mall/analytics/report-detail'
  },

  onShow() {
    this.currentPath = '/pages/mall/analytics/report-detail'
  },

  methods: {
    handleMenu() {
      this.showSidebarMenu = true
    },
    handleSidebarUpdate(visible: boolean) {
      this.showSidebarMenu = visible
    },
    safeNumber(v: any): number {
      const n = Number(v)
      return isFinite(n) ? n : 0
    },

    async loadReportDetail(reportId: string) {
      try {
        uni.showLoading({ title: '加载中...' })

        // 1. 加载报表主体
        const reportRes: any = await supa
          .from('analytics_reports')
          .select('id, title, type, period, generated_at, description')
          .eq('id', reportId)

        const reportRows: Array<any> = Array.isArray(reportRes.data) ? (reportRes.data as Array<any>) : []
        if (reportRows.length === 0) {
          uni.showToast({ title: '报表不存在', icon: 'none' })
          return
        }
        const r = reportRows[0]
        this.report = {
          id: `${r.id}`,
          title: `${r.title}`,
          type: `${r.type}`,
          period: `${r.period}`,
          generated_at: `${r.generated_at}`,
          description: `${r.description || ''}`
        }

        // 2. 加载核心指标
        const metricRes: any = await supa
          .from('analytics_report_metrics')
          .select('metric_key, metric_label, metric_value_num, format, icon, color, change_pct')
          .eq('report_id', reportId)

        const metricRows: Array<any> = Array.isArray(metricRes.data) ? (metricRes.data as Array<any>) : []
        this.coreMetrics = metricRows.map((m: any) => ({
          key: `${m.metric_key}`,
          label: `${m.metric_label}`,
          value: this.safeNumber(m.metric_value_num),
          format: `${m.format || 'number'}`,
          icon: `${m.icon || '📊'}`,
          color: `${m.color || '#4caf50'}`,
          change: this.safeNumber(m.change_pct)
        }))

        // 3. 配置表头与排序选项（固定结构）
        this.tableColumns = [
          { key: 'date', title: '日期', width: '120rpx', type: 'text' },
          { key: 'sales', title: '销售额', width: '120rpx', type: 'currency' },
          { key: 'orders', title: '订单数', width: '100rpx', type: 'number' },
          { key: 'users', title: '用户数', width: '100rpx', type: 'number' },
          { key: 'conversion', title: '转化率', width: '100rpx', type: 'percent' },
          { key: 'avg_value', title: '客单价', width: '120rpx', type: 'currency' }
        ]
        this.sortOptions = ['按日期降序', '按销售额降序', '按订单数降序', '按转化率降序']

        // 4. 加载明细行（趋势/表格）
        const rowsRes: any = await supa
          .from('analytics_report_rows')
          .select('row_date, gmv, orders, users, conversion, avg_order_amount')
          .eq('report_id', reportId)
          .order('row_date', { ascending: true } as any)

        const rows: Array<any> = Array.isArray(rowsRes.data) ? (rowsRes.data as Array<any>) : []
        this.allRows = rows
        this.currentPage = 1
        this.updateTotalPages()
        this.generateTableData()

        // 5. 加载洞察
        const insightRes: any = await supa
          .from('analytics_insights')
          .select('id, type, title, content, impact')
          .eq('report_id', reportId)
          .order('created_at', { ascending: false } as any)

        const insRows: Array<any> = Array.isArray(insightRes.data) ? (insightRes.data as Array<any>) : []
        this.dataInsights = insRows.map((it: any) => ({
          id: `${it.id}`,
          type: `${it.type || 'info'}`,
          title: `${it.title}`,
          content: `${it.content}`,
          impact: `${it.impact || 'medium'}`
        }))

        // 6. 相关报表（同类型最近报表）
        const relatedRes: any = await supa
          .from('analytics_reports')
          .select('id, title, type, period, generated_at, description')
          .eq('type', this.report.type)
          .neq('id', reportId)
          .order('generated_at', { ascending: false } as any)
          .limit(3 as any)

        const relRows: Array<any> = Array.isArray(relatedRes.data) ? (relatedRes.data as Array<any>) : []
        this.relatedReports = relRows.map((it: any) => ({
          id: `${it.id}`,
          title: `${it.title}`,
          type: `${it.type}`,
          period: `${it.period}`,
          generated_at: `${it.generated_at}`,
          description: `${it.description || ''}`
        }))
      } catch (e) {
        console.error('loadReportDetail failed', e)
        uni.showToast({ title: '报表加载失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    
    updateTotalPages() {
      const total = this.allRows.length
      const limit = parseInt(this.limitOptions[this.limitIndex])
      this.totalPages = total > 0 ? Math.ceil(total / limit) : 1
    },

    generateTableData() {
      this.tableData = []
      const total = this.allRows.length
      if (total === 0) {
        return
      }
      const limit = parseInt(this.limitOptions[this.limitIndex])
      const start = (this.currentPage - 1) * limit
      const end = Math.min(start + limit, total)
      
      for (let i = start; i < end; i++) {
        const row = this.allRows[i]
        this.tableData.push({
          date: `${row.row_date}`,
          sales: this.safeNumber(row.gmv),
          orders: this.safeNumber(row.orders),
          users: this.safeNumber(row.users),
          conversion: this.safeNumber(row.conversion).toFixed(1),
          avg_value: this.safeNumber(row.avg_order_amount).toFixed(2)
        })
      }
    },
    
    getReportTypeText(): string {
      const types: Record<string, string> = {
        sales: '销售报表',
        user: '用户报表',
        product: '商品报表',
        financial: '财务报表',
        marketing: '营销报表'
      }
      return types[this.report.type] || '其他报表'
    },
    
    formatMetricValue(value: number, format: string): string {
      switch (format) {
        case 'currency':
          return `¥${(value / 10000).toFixed(1)}万`
        case 'percent':
          return `${value}%`
        case 'number':
          return value.toLocaleString()
        default:
          return value.toString()
      }
    },
    
    formatTime(timeStr: string): string {
      return timeStr.replace('T', ' ').split('.')[0]
    },
    
    getInsightIcon(type: string): string {
      const icons: Record<string, string> = {
        positive: '✅',
        warning: '⚠️',
        negative: '❌',
        info: 'ℹ️'
      }
      return icons[type] || 'ℹ️'
    },
    
    getImpactText(impact: string): string {
      const impacts: Record<string, string> = {
        high: '高影响',
        medium: '中影响',
        low: '低影响'
      }
      return impacts[impact] || '未知影响'
    },
    
    formatCellValue(value: any, column: TableColumnType): string {
      switch (column.type) {
        case 'currency':
          return `¥${parseFloat(value).toLocaleString()}`
        case 'percent':
          return `${value}%`
        case 'number':
          return parseInt(value).toLocaleString()
        default:
          return value.toString()
      }
    },
    
    switchChartTab(tabKey: string) {
      this.activeChartTab = tabKey
      // 这里可以重新绘制图表
    },
    
    onChartTouch(e: any) {
      // 处理图表触摸事件
    },
    
    onSortChange(e: any) {
      this.sortIndex = e.detail.value
      this.generateTableData()
    },
    
    onLimitChange(e: any) {
      this.limitIndex = e.detail.value
      this.currentPage = 1
      this.updateTotalPages()
      this.generateTableData()
    },
    
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.generateTableData()
      }
    },
    
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
        this.generateTableData()
      }
    },
    
    exportReport() {
      uni.showActionSheet({
        itemList: ['导出Excel', '导出PDF', '导出图片'],
        success: (res) => {
          const formats = ['Excel', 'PDF', '图片']
          uni.showToast({
            title: `正在导出${formats[res.tapIndex]}`,
            icon: 'loading'
          })
          
          setTimeout(() => {
            uni.showToast({
              title: '导出成功',
              icon: 'success'
            })
          }, 2000)
        }
      })
    },
    
    refreshReport() {
      uni.showLoading({ title: '刷新中...' })
      setTimeout(() => {
        uni.hideLoading()
        this.loadReportDetail(this.report.id)
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        })
      }, 1500)
    },
    
    viewInsightDetail(insight: InsightType) {
      uni.navigateTo({
        url: `/pages/mall/analytics/insight-detail?insightId=${insight.id}`
      })
    },
    
    viewRelatedReport(report: ReportType) {
      uni.navigateTo({
        url: `/pages/mall/analytics/report-detail?reportId=${report.id}`
      })
    },
    
    toggleAutoRefresh(e: any) {
      this.autoRefresh = e.detail.value
    },
    
    onIntervalChange(e: any) {
      this.intervalIndex = e.detail.value
    },
    
    toggleEmailNotify(e: any) {
      this.emailNotify = e.detail.value
    },
    
    saveConfig() {
      uni.showToast({
        title: '配置已保存',
        icon: 'success'
      })
    },
    handleSearch() {
      uni.showToast({ title: '搜索', icon: 'none' })
    },
    handleNotification() {
      uni.showToast({ title: '通知', icon: 'none' })
    },
    handleFullscreen() {
      uni.showToast({ title: '全屏', icon: 'none' })
    },
    handleMobile() {
      uni.showToast({ title: '移动端', icon: 'none' })
    },
    handleDropdown() {
      uni.showToast({ title: '下拉菜单', icon: 'none' })
    },
    handleSettings() {
      uni.showToast({ title: '设置', icon: 'none' })
    },
    
    resetConfig() {
      this.autoRefresh = false
      this.intervalIndex = 1
      this.emailNotify = false
      uni.showToast({
        title: '配置已重置',
        icon: 'success'
      })
    }
  }
}
</script>

<style>
.page {
  min-height: 100vh;
  background: #f6f7fb;
}

/* 页面布局：宽屏时侧边栏+内容，窄屏时全屏内容 */
.page-layout {
  display: flex;
  flex-direction: row !important;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 64px; /* 为固定顶部导航栏留出空间 */
}

.menu-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  background: #f3f4f6;
}

.menu-icon .icon {
  font-size: 18px;
  color: #333;
}

.report-detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.report-header, .metrics-overview, .chart-section, .data-table, .data-insights, .report-config, .related-reports {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-info {
  flex: 1;
}

.report-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.report-meta {
  display: flex;
  gap: 20rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #666;
  background-color: #f0f0f0;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
}

.header-actions {
  display: flex;
  gap: 15rpx;
}

.action-btn.export, .action-btn.refresh {
  padding: 15rpx 25rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
}

.action-btn.export {
  background-color: #4caf50;
  color: #fff;
}

.action-btn.refresh {
  background-color: #2196f3;
  color: #fff;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 25rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.metrics-grid {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.metric-card {
  flex: 1;
  min-width: 300rpx;
  display: flex;
  align-items: center;
  padding: 25rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.metric-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-right: 20rpx;
}

.metric-content {
  flex: 1;
}

.metric-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.metric-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.metric-change {
  display: flex;
  align-items: center;
}

.metric-change.positive {
  color: #4caf50;
}

.metric-change.negative {
  color: #ff4444;
}

.change-icon {
  font-size: 20rpx;
  margin-right: 5rpx;
}

.change-value {
  font-size: 22rpx;
  font-weight: bold;
}

.chart-tabs {
  display: flex;
  gap: 15rpx;
}

.chart-tab {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #f0f0f0;
}

.chart-tab.active {
  background-color: #2196f3;
  color: #fff;
}

.chart-container {
  height: 500rpx;
  margin: 30rpx 0;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
}

.chart-canvas {
  width: 100%;
  height: 100%;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 40rpx;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
}

.legend-label {
  font-size: 24rpx;
  color: #666;
}

.table-filters {
  display: flex;
  gap: 40rpx;
  margin-bottom: 25rpx;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-label {
  font-size: 24rpx;
  color: #666;
  margin-right: 10rpx;
}

.filter-value, .config-value {
  font-size: 24rpx;
  color: #333;
  padding: 10rpx 20rpx;
  background-color: #f0f0f0;
  border-radius: 6rpx;
}

.table-container {
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  margin-bottom: 25rpx;
}

.table-scroll {
  white-space: nowrap;
}

.table {
  min-width: 100%;
}

.table-header, .table-row {
  display: flex;
  border-bottom: 1rpx solid #eee;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  padding: 20rpx 15rpx;
  font-size: 24rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-cell {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #333;
}

.data-cell {
  color: #666;
}

.data-cell.number, .data-cell.currency {
  text-align: right;
}

.table-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30rpx;
}

.page-btn {
  padding: 15rpx 30rpx;
  background-color: #2196f3;
  color: #fff;
  border: none;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.page-btn:disabled {
  background-color: #ccc;
}

.page-info {
  font-size: 24rpx;
  color: #666;
}

.insight-card {
  padding: 25rpx;
  background-color: #f8f9fa;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.insight-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.insight-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  margin-right: 15rpx;
}

.insight-icon.positive {
  background-color: #e8f5e8;
}

.insight-icon.warning {
  background-color: #fff8e1;
}

.insight-icon.negative {
  background-color: #ffebee;
}

.insight-icon.info {
  background-color: #e3f2fd;
}

.insight-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}

.insight-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15rpx;
}

.insight-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.insight-impact {
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
  color: #fff;
}

.insight-impact.high {
  background-color: #ff4444;
}

.insight-impact.medium {
  background-color: #ffa726;
}

.insight-impact.low {
  background-color: #4caf50;
}

.insight-action {
  font-size: 22rpx;
  color: #2196f3;
}

.config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.config-item:last-of-type {
  border-bottom: none;
}

.config-label {
  font-size: 26rpx;
  color: #333;
}

.config-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}

.config-btn {
  flex: 1;
  height: 70rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  border: none;
}

.config-btn.save {
  background-color: #4caf50;
  color: #fff;
}

.config-btn.reset {
  background-color: #f0f0f0;
  color: #666;
}

.report-list {
  margin-top: 25rpx;
}

.report-item {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.report-item:last-child {
  border-bottom: none;
}

.report-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.report-info {
  flex: 1;
}

.report-name {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.report-desc {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.report-time {
  font-size: 20rpx;
  color: #999;
}

.report-arrow {
  font-size: 24rpx;
  color: #999;
}

/* 响应式：窄屏时全屏显示 */
@media screen and (max-width: 959px) {
  .page-layout {
    flex-direction: column !important;
  }
  
  .main-content {
    width: 100%;
  }
}
</style>
