<template>
  <div class="analysis-page">
    <!-- Header -->
    <div class="analysis-header">
      <div class="header-left">
        <div class="data-title">📊 经营分析</div>
        <p class="header-desc">全面掌握业务数据，AI驱动的经营决策支持</p>
      </div>
      <div class="header-actions">
        <div class="date-range-picker">
          <select class="form-select" v-model="selectedPeriod" @change="updatePeriod">
            <option value="month">本月</option>
            <option value="quarter">本季度</option>
            <option value="year">本年</option>
            <option value="custom">自定义</option>
          </select>
          <div class="date-inputs" v-if="selectedPeriod === 'custom'">
            <input type="date" class="form-input" v-model="customStartDate">
            <span>至</span>
            <input type="date" class="form-input" v-model="customEndDate">
          </div>
        </div>
        <button class="btn btn-secondary" @click="showComparisonModal = true">
          <i class="fas fa-chart-bar"></i> 对比分析
        </button>
        <button class="btn btn-secondary" @click="exportReport">
          <i class="fas fa-download"></i> 导出报告
        </button>
        <button class="btn btn-primary" @click="showDetailModal = true">
          <i class="fas fa-sliders-h"></i> 自定义仪表板
        </button>
      </div>
    </div>

    <!-- KPI Cards -->
    <div class="kpi-row">
      <div class="kpi-card" @click="filterByMetric('revenue')">
        <div class="kpi-header">
          <span class="kpi-label">营收</span>
          <span class="kpi-trend" :class="{ up: revenueGrowth > 0, down: revenueGrowth < 0 }">
            <i :class="revenueGrowth > 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
            {{ Math.abs(revenueGrowth) }}%
          </span>
        </div>
        <div class="kpi-value">¥{{ formatNumber(totalRevenue) }}</div>
        <div class="kpi-meta">
          <span>环比: {{ lastPeriodRevenue > 0 ? '+' : '' }}{{ revenueGrowth }}%</span>
          <span>同比: +{{ yoyGrowth }}%</span>
        </div>
      </div>

      <div class="kpi-card" @click="filterByMetric('orders')">
        <div class="kpi-header">
          <span class="kpi-label">订单数</span>
          <span class="kpi-trend up">
            <i class="fas fa-arrow-up"></i> 12%
          </span>
        </div>
        <div class="kpi-value">{{ totalOrders }}</div>
        <div class="kpi-meta">
          <span>已完成: {{ completedOrders }}</span>
          <span>进行中: {{ activeOrders }}</span>
        </div>
      </div>

      <div class="kpi-card" @click="filterByMetric('customers')">
        <div class="kpi-header">
          <span class="kpi-label">成交客户</span>
          <span class="kpi-trend up">
            <i class="fas fa-arrow-up"></i> 8%
          </span>
        </div>
        <div class="kpi-value">{{ newCustomers }}</div>
        <div class="kpi-meta">
          <span>新增: {{ newCustomersCount }}</span>
          <span>复购: {{ repeatCustomers }}</span>
        </div>
      </div>

      <div class="kpi-card" @click="filterByMetric('conversion')">
        <div class="kpi-header">
          <span class="kpi-label">转化率</span>
          <span class="kpi-trend up">
            <i class="fas fa-arrow-up"></i> 5%
          </span>
        </div>
        <div class="kpi-value">{{ conversionRate }}%</div>
        <div class="kpi-meta">
          <span>邮件: {{ emailConversion }}%</span>
          <span>WhatsApp: {{ whatsappConversion }}%</span>
        </div>
      </div>

      <div class="kpi-card" @click="filterByMetric('aov')">
        <div class="kpi-header">
          <span class="kpi-label">客单价</span>
          <span class="kpi-trend up">
            <i class="fas fa-arrow-up"></i> 15%
          </span>
        </div>
        <div class="kpi-value">¥{{ formatNumber(avgOrderValue) }}</div>
        <div class="kpi-meta">
          <span>最高: ¥{{ formatNumber(maxOrderValue) }}</span>
          <span>最低: ¥{{ formatNumber(minOrderValue) }}</span>
        </div>
      </div>

      <div class="kpi-card" @click="filterByMetric('roi')">
        <div class="kpi-header">
          <span class="kpi-label">ROI</span>
          <span class="kpi-trend up">
            <i class="fas fa-arrow-up"></i> 22%
          </span>
        </div>
        <div class="kpi-value">{{ roi }}%</div>
        <div class="kpi-meta">
          <span>营销成本: ¥{{ formatNumber(marketingCost) }}</span>
          <span>利润: ¥{{ formatNumber(profit) }}</span>
        </div>
      </div>
    </div>

    <!-- Charts Section -->
    <div class="charts-section">
      <!-- Revenue Trend -->
      <div class="chart-card">
        <div class="chart-header">
          <h4><i class="fas fa-chart-line"></i> 销售趋势</h4>
          <div class="chart-controls">
            <button class="chart-btn" :class="{ active: chartType === 'line' }" @click="chartType = 'line'">
              <i class="fas fa-chart-line"></i>
            </button>
            <button class="chart-btn" :class="{ active: chartType === 'bar' }" @click="chartType = 'bar'">
              <i class="fas fa-chart-bar"></i>
            </button>
            <button class="chart-btn" @click="showChartDetail('revenue')">
              <i class="fas fa-expand"></i>
            </button>
          </div>
        </div>
        <div class="chart-container">
          <div class="chart-bars">
            <div v-for="(data, index) in revenueData" :key="index" class="chart-bar-item">
              <div class="bar-wrapper">
                <div class="bar" :style="{ height: (data.value / maxRevenue * 100) + '%', background: data.color }"></div>
              </div>
              <div class="bar-label">{{ data.month }}</div>
              <div class="bar-value">¥{{ formatNumber(data.value) }}</div>
            </div>
          </div>
        </div>
        <div class="chart-stats">
          <span>平均: ¥{{ formatNumber(avgRevenue) }}</span>
          <span>最高: ¥{{ formatNumber(maxRevenue) }}</span>
          <span>最低: ¥{{ formatNumber(minRevenue) }}</span>
        </div>
      </div>

      <!-- Regional Distribution -->
      <div class="chart-card">
        <div class="chart-header">
          <h4><i class="fas fa-globe"></i> 区域分布</h4>
          <button class="chart-btn" @click="showChartDetail('region')">
            <i class="fas fa-expand"></i>
          </button>
        </div>
        <div class="chart-container">
          <div class="pie-chart">
            <div class="pie-item" v-for="region in regionData" :key="region.name" 
                 :style="{ background: region.color }" 
                 :title="region.name + ': ' + region.percentage + '%'">
            </div>
          </div>
          <div class="legend">
            <div v-for="region in regionData" :key="region.name" class="legend-item">
              <span class="legend-color" :style="{ background: region.color }"></span>
              <span class="legend-label">{{ region.name }}</span>
              <span class="legend-value">{{ region.percentage }}% (¥{{ formatNumber(region.value) }})</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Channel Performance -->
      <div class="chart-card">
        <div class="chart-header">
          <h4><i class="fas fa-bullhorn"></i> 渠道表现</h4>
          <button class="chart-btn" @click="showChartDetail('channel')">
            <i class="fas fa-expand"></i>
          </button>
        </div>
        <div class="channel-metrics">
          <div v-for="channel in channelData" :key="channel.name" class="channel-item">
            <div class="channel-header">
              <span class="channel-name">
                <i :class="channel.icon"></i> {{ channel.name }}
              </span>
              <span class="channel-badge">{{ channel.percentage }}%</span>
            </div>
            <div class="channel-bar">
              <div class="bar-fill" :style="{ width: channel.percentage + '%', background: channel.color }"></div>
            </div>
            <div class="channel-stats">
              <span>发送: {{ channel.sent }}</span>
              <span>打开: {{ channel.opened }}%</span>
              <span>回复: {{ channel.replied }}%</span>
              <span>转化: {{ channel.conversion }}%</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Performance -->
      <div class="chart-card">
        <div class="chart-header">
          <h4><i class="fas fa-boxes"></i> 产品销售排行</h4>
          <button class="chart-btn" @click="showChartDetail('product')">
            <i class="fas fa-expand"></i>
          </button>
        </div>
        <div class="product-ranking">
          <div v-for="(product, index) in topProducts" :key="index" class="product-item">
            <div class="rank-badge">{{ index + 1 }}</div>
            <div class="product-info">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-meta">
                <span>销量: {{ product.quantity }}</span>
                <span>金额: ¥{{ formatNumber(product.revenue) }}</span>
              </div>
            </div>
            <div class="product-bar">
              <div class="bar-fill" :style="{ width: (product.revenue / topProducts[0].revenue * 100) + '%' }"></div>
            </div>
            <div class="product-value">¥{{ formatNumber(product.revenue) }}</div>
          </div>
        </div>
      </div>

      <!-- Customer Cohort Analysis -->
      <div class="chart-card">
        <div class="chart-header">
          <h4><i class="fas fa-users"></i> 客户群体分析</h4>
          <button class="chart-btn" @click="showChartDetail('cohort')">
            <i class="fas fa-expand"></i>
          </button>
        </div>
        <div class="cohort-table">
          <div class="cohort-header">
            <span class="cohort-col">获取月份</span>
            <span class="cohort-col" v-for="month in 6" :key="month">第{{ month }}月</span>
          </div>
          <div v-for="cohort in cohortData" :key="cohort.month" class="cohort-row">
            <span class="cohort-col">{{ cohort.month }}</span>
            <span v-for="(retention, index) in cohort.retention" :key="index" 
                  class="cohort-col retention-cell"
                  :style="{ background: getRetentionColor(retention) }">
              {{ retention }}%
            </span>
          </div>
        </div>
      </div>

      <!-- Sales Funnel -->
      <div class="chart-card">
        <div class="chart-header">
          <h4><i class="fas fa-filter"></i> 销售漏斗</h4>
          <button class="chart-btn" @click="showChartDetail('funnel')">
            <i class="fas fa-expand"></i>
          </button>
        </div>
        <div class="funnel-chart">
          <div v-for="(stage, index) in funnelData" :key="index" class="funnel-stage">
            <div class="funnel-bar" :style="{ width: stage.percentage + '%' }">
              <span class="funnel-label">{{ stage.name }}</span>
              <span class="funnel-value">{{ stage.count }} ({{ stage.percentage }}%)</span>
            </div>
            <div class="funnel-conversion" v-if="index < funnelData.length - 1">
              <i class="fas fa-arrow-down"></i>
              <span>{{ funnelData[index + 1].conversionRate }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Insights & Recommendations -->
    <div class="insights-section">
      <div class="section-header">
        <h4><i class="fas fa-lightbulb"></i> AI 洞察与建议</h4>
        <button class="btn btn-secondary btn-sm" @click="refreshInsights">
          <i class="fas fa-sync"></i> 刷新
        </button>
      </div>
      <div class="insights-grid">
        <div v-for="insight in insights" :key="insight.id" class="insight-card" :class="insight.type">
          <div class="insight-header">
            <i :class="insight.icon"></i>
            <span class="insight-title">{{ insight.title }}</span>
            <span class="insight-badge" :class="insight.type">{{ insight.type }}</span>
          </div>
          <div class="insight-content">
            <div class="insight-main">{{ insight.main }}</div>
            <div class="insight-detail">{{ insight.detail }}</div>
          </div>
          <div class="insight-action">
            <button class="btn btn-sm btn-outline" @click="handleInsight(insight)">
              <i class="fas fa-arrow-right"></i> 查看详情
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Comparison Modal -->
    <div v-if="showComparisonModal" class="modal-overlay" @click.self="showComparisonModal = false">
      <div class="modal comparison-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-chart-bar"></i> 对比分析</div>
          <button class="modal-close" @click="showComparisonModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="comparison-controls">
            <div class="control-group">
              <label>对比周期</label>
              <select class="form-select" v-model="comparisonPeriod">
                <option value="month">本月 vs 上月</option>
                <option value="quarter">本季度 vs 上季度</option>
                <option value="year">本年 vs 去年</option>
              </select>
            </div>
            <div class="control-group">
              <label>对比指标</label>
              <select class="form-select" v-model="comparisonMetric">
                <option value="revenue">营收</option>
                <option value="orders">订单数</option>
                <option value="customers">客户数</option>
                <option value="conversion">转化率</option>
              </select>
            </div>
          </div>
          <div class="comparison-results">
            <div class="comparison-item">
              <div class="comparison-label">当前周期</div>
              <div class="comparison-value current">¥{{ formatNumber(currentValue) }}</div>
            </div>
            <div class="comparison-item">
              <div class="comparison-label">对比周期</div>
              <div class="comparison-value previous">¥{{ formatNumber(previousValue) }}</div>
            </div>
            <div class="comparison-item highlight">
              <div class="comparison-label">增长</div>
              <div class="comparison-value" :class="{ up: comparisonGrowth > 0, down: comparisonGrowth < 0 }">
                {{ comparisonGrowth > 0 ? '+' : '' }}{{ comparisonGrowth }}%
              </div>
            </div>
          </div>
          <div class="comparison-chart">
            <div class="chart-bars">
              <div class="chart-bar-item">
                <div class="bar-wrapper">
                  <div class="bar current" :style="{ height: (currentValue / Math.max(currentValue, previousValue) * 100) + '%' }"></div>
                </div>
                <div class="bar-label">当前</div>
              </div>
              <div class="chart-bar-item">
                <div class="bar-wrapper">
                  <div class="bar previous" :style="{ height: (previousValue / Math.max(currentValue, previousValue) * 100) + '%' }"></div>
                </div>
                <div class="bar-label">对比</div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showComparisonModal = false">关闭</button>
          <button class="btn btn-primary" @click="exportComparison">
            <i class="fas fa-download"></i> 导出对比报告
          </button>
        </div>
      </div>
    </div>

    <!-- Detail Modal -->
    <div v-if="showDetailModal" class="modal-overlay" @click.self="showDetailModal = false">
      <div class="modal detail-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-sliders-h"></i> 自定义仪表板</div>
          <button class="modal-close" @click="showDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="dashboard-settings">
            <h5>选择要显示的指标</h5>
            <div class="metrics-grid">
              <label v-for="metric in availableMetrics" :key="metric.id" class="metric-checkbox">
                <input type="checkbox" v-model="selectedMetrics" :value="metric.id">
                <span class="checkmark"></span>
                <span class="metric-label">{{ metric.name }}</span>
              </label>
            </div>
            <h5 style="margin-top: 20px;">选择要显示的图表</h5>
            <div class="charts-grid">
              <label v-for="chart in availableCharts" :key="chart.id" class="chart-checkbox">
                <input type="checkbox" v-model="selectedCharts" :value="chart.id">
                <span class="checkmark"></span>
                <span class="chart-label">{{ chart.name }}</span>
              </label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="resetDashboard">重置</button>
          <button class="btn btn-secondary" @click="showDetailModal = false">取消</button>
          <button class="btn btn-primary" @click="saveDashboard">保存设置</button>
        </div>
      </div>
    </div>

    <!-- Toast -->
    <transition name="toast">
      <div v-if="showToast" class="toast" :class="toastType">
        <i :class="toastType === 'success' ? 'fas fa-check-circle' : 'fas fa-info-circle'"></i>
        {{ toastMessage }}
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const selectedPeriod = ref('month')
const customStartDate = ref('')
const customEndDate = ref('')
const chartType = ref('bar')
const showComparisonModal = ref(false)
const showDetailModal = ref(false)
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

// Comparison
const comparisonPeriod = ref('month')
const comparisonMetric = ref('revenue')

// Dashboard customization
const selectedMetrics = ref(['revenue', 'orders', 'customers', 'conversion', 'aov', 'roi'])
const selectedCharts = ref(['revenue', 'region', 'channel', 'product', 'cohort', 'funnel'])

// KPI Data
const totalRevenue = 3200000
const lastPeriodRevenue = 2600000
const revenueGrowth = 23
const yoyGrowth = 35
const totalOrders = 156
const completedOrders = 89
const activeOrders = 67
const newCustomers = 89
const newCustomersCount = 34
const repeatCustomers = 55
const conversionRate = 68
const emailConversion = 45
const whatsappConversion = 72
const avgOrderValue = 38000
const maxOrderValue = 520000
const minOrderValue = 8000
const roi = 285
const marketingCost = 450000
const profit = 1280000

// Revenue Data
const revenueData = ref([
  { month: '1月', value: 1200000, color: '#6366F1' },
  { month: '2月', value: 1800000, color: '#6366F1' },
  { month: '3月', value: 1600000, color: '#6366F1' },
  { month: '4月', value: 2400000, color: '#6366F1' },
  { month: '5月', value: 2800000, color: '#6366F1' },
  { month: '6月', value: 3200000, color: '#10B981' }
])

const maxRevenue = computed(() => Math.max(...revenueData.value.map(d => d.value)))
const minRevenue = computed(() => Math.min(...revenueData.value.map(d => d.value)))
const avgRevenue = computed(() => Math.round(revenueData.value.reduce((sum, d) => sum + d.value, 0) / revenueData.value.length))

// Regional Data
const regionData = ref([
  { name: '中东', percentage: 45, value: 1440000, color: '#10B981' },
  { name: '欧洲', percentage: 28, value: 896000, color: '#8B5CF6' },
  { name: '北美', percentage: 15, value: 480000, color: '#06B6D4' },
  { name: '东南亚', percentage: 12, value: 384000, color: '#F59E0B' }
])

// Channel Data
const channelData = ref([
  { name: '邮件营销', icon: 'fas fa-envelope', percentage: 45, color: '#6366F1', sent: 12847, opened: 45, replied: 12, conversion: 8 },
  { name: 'WhatsApp', icon: 'fab fa-whatsapp', percentage: 28, color: '#25D366', sent: 3456, opened: 78, replied: 35, conversion: 18 },
  { name: 'LinkedIn', icon: 'fab fa-linkedin', percentage: 18, color: '#0A66C2', sent: 2345, opened: 52, replied: 22, conversion: 12 },
  { name: '微信企业号', icon: 'fab fa-weixin', percentage: 9, color: '#07C160', sent: 1234, opened: 65, replied: 28, conversion: 15 }
])

// Top Products
const topProducts = ref([
  { name: 'NVMe SSD 2TB', quantity: 1250, revenue: 3500000 },
  { name: 'SATA SSD 2TB', quantity: 890, revenue: 2310000 },
  { name: '企业级SSD 4TB', quantity: 456, revenue: 5472000 },
  { name: 'NVMe SSD 1TB', quantity: 2340, revenue: 3744000 },
  { name: 'SAS SSD 2TB', quantity: 234, revenue: 936000 }
])

// Cohort Data
const cohortData = ref([
  { month: '1月', retention: [100, 85, 72, 65, 58, 52] },
  { month: '2月', retention: [100, 88, 78, 70, 64] },
  { month: '3月', retention: [100, 82, 75, 68] },
  { month: '4月', retention: [100, 86, 79] },
  { month: '5月', retention: [100, 84] },
  { month: '6月', retention: [100] }
])

// Funnel Data
const funnelData = ref([
  { name: '潜客', count: 12847, percentage: 100, conversionRate: 28 },
  { name: '商机', count: 3597, percentage: 28, conversionRate: 45 },
  { name: '报价', count: 1619, percentage: 12.6, conversionRate: 68 },
  { name: '成交', count: 1100, percentage: 8.6, conversionRate: null }
])

// Insights
const insights = ref([
  { id: 1, type: 'opportunity', icon: 'fas fa-lightbulb', title: '增长机会', main: '中东市场表现突出', detail: '本周中东订单增长23%，建议加大营销投入。', badge: '高优先' },
  { id: 2, type: 'warning', icon: 'fas fa-exclamation-triangle', title: '需要关注', main: '欧洲转化率下降', detail: '欧洲转化率下降15%，主要原因是交期延长。', badge: '中优先' },
  { id: 3, type: 'success', icon: 'fas fa-chart-line', title: '优化成果', main: '邮件打开率提升', detail: '优化发送时间后，邮件打开率提升35%。', badge: '已完成' },
  { id: 4, type: 'info', icon: 'fas fa-users', title: '客户洞察', main: '高价值客户识别', detail: '识别出50个高价值客户，平均客单价¥85K。', badge: '新发现' },
  { id: 5, type: 'warning', icon: 'fas fa-clock', title: '交期风险', main: '交期延迟预警', detail: '当前生产周期延长3天，建议提前通知客户。', badge: '风险' },
  { id: 6, type: 'success', icon: 'fas fa-rocket', title: '新机遇', main: '产品创新机会', detail: '新产品NVMe SSD 4TB销售势头强劲，增长45%。', badge: '推荐' }
])

// Comparison Data
const currentValue = ref(3200000)
const previousValue = ref(2600000)
const comparisonGrowth = computed(() => Math.round((currentValue.value - previousValue.value) / previousValue.value * 100))

// Available metrics and charts
const availableMetrics = ref([
  { id: 'revenue', name: '营收' },
  { id: 'orders', name: '订单数' },
  { id: 'customers', name: '成交客户' },
  { id: 'conversion', name: '转化率' },
  { id: 'aov', name: '客单价' },
  { id: 'roi', name: 'ROI' }
])

const availableCharts = ref([
  { id: 'revenue', name: '销售趋势' },
  { id: 'region', name: '区域分布' },
  { id: 'channel', name: '渠道表现' },
  { id: 'product', name: '产品排行' },
  { id: 'cohort', name: '客户群体' },
  { id: 'funnel', name: '销售漏斗' }
])

// Methods
const formatNumber = (num) => {
  if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'
  if (num >= 1000) return (num / 1000).toFixed(1) + 'K'
  return num.toLocaleString()
}

const updatePeriod = () => {
  toast('已切换时间周期', 'success')
}

const filterByMetric = (metric) => {
  toast(`查看${metric}详情`, 'info')
}

const showChartDetail = (chart) => {
  toast(`展开${chart}图表`, 'info')
}

const refreshInsights = () => {
  toast('正在刷新洞察数据...', 'info')
  setTimeout(() => {
    toast('洞察数据已更新', 'success')
  }, 1500)
}

const handleInsight = (insight) => {
  toast(`处理: ${insight.title}`, 'info')
}

const exportReport = () => {
  toast('报告导出中...', 'success')
}

const exportComparison = () => {
  toast('对比报告导出中...', 'success')
}

const getRetentionColor = (retention) => {
  if (retention >= 80) return 'rgba(16, 185, 129, 0.2)'
  if (retention >= 60) return 'rgba(99, 102, 241, 0.2)'
  if (retention >= 40) return 'rgba(245, 158, 11, 0.2)'
  return 'rgba(239, 68, 68, 0.2)'
}

const resetDashboard = () => {
  selectedMetrics.value = ['revenue', 'orders', 'customers', 'conversion', 'aov', 'roi']
  selectedCharts.value = ['revenue', 'region', 'channel', 'product', 'cohort', 'funnel']
  toast('仪表板已重置', 'success')
}

const saveDashboard = () => {
  showDetailModal.value = false
  toast('仪表板设置已保存', 'success')
}

const toast = (message, type = 'success') => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
  setTimeout(() => { showToast.value = false }, 3000)
}
</script>

<style scoped>
.analysis-page { flex: 1; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; background: var(--bg-dark); }
.analysis-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.header-left { display: flex; flex-direction: column; gap: 4px; }
.data-title { font-size: 20px; font-weight: 600; }
.header-desc { font-size: 13px; color: var(--text-secondary); }
.header-actions { display: flex; gap: 8px; align-items: center; }
.date-range-picker { display: flex; align-items: center; gap: 8px; }
.date-inputs { display: flex; align-items: center; gap: 8px; }
.date-inputs input { width: 120px; padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; }
.form-select { padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 13px; }

/* KPI Cards */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
.kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; }
.kpi-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.kpi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.kpi-label { font-size: 12px; color: var(--text-secondary); }
.kpi-trend { font-size: 11px; padding: 2px 8px; border-radius: 10px; display: flex; align-items: center; gap: 4px; }
.kpi-trend.up { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.kpi-trend.down { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.kpi-value { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.kpi-meta { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--text-muted); }

/* Charts Section */
.charts-section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.chart-card:nth-child(1), .chart-card:nth-child(2) { grid-column: span 1; }
.chart-card:nth-child(3), .chart-card:nth-child(4) { grid-column: span 1; }
.chart-card:nth-child(5), .chart-card:nth-child(6) { grid-column: span 1; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.chart-header h4 { font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.chart-header h4 i { color: var(--primary); }
.chart-controls { display: flex; gap: 4px; }
.chart-btn { width: 28px; height: 28px; border-radius: 6px; background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.2s; }
.chart-btn:hover, .chart-btn.active { background: var(--primary); border-color: var(--primary); color: white; }

/* Chart Container */
.chart-container { margin-bottom: 12px; }
.chart-bars { display: flex; align-items: flex-end; justify-content: space-around; height: 200px; gap: 8px; }
.chart-bar-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.bar-wrapper { width: 100%; height: 160px; background: var(--bg-hover); border-radius: 8px 8px 0 0; display: flex; align-items: flex-end; justify-content: center; }
.bar { width: 80%; border-radius: 8px 8px 0 0; background: var(--primary); transition: all 0.3s; }
.bar-label { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.bar-value { font-size: 10px; color: var(--text-secondary); }
.chart-stats { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); padding-top: 12px; border-top: 1px solid var(--border); }

/* Pie Chart */
.pie-chart { width: 120px; height: 120px; border-radius: 50%; display: flex; flex-wrap: wrap; overflow: hidden; margin: 0 auto 16px; }
.pie-item { flex: 1; }
.legend { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-color { width: 12px; height: 12px; border-radius: 3px; }
.legend-label { flex: 1; }
.legend-value { font-size: 11px; color: var(--text-muted); }

/* Channel Metrics */
.channel-metrics { display: flex; flex-direction: column; gap: 12px; }
.channel-item { padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.channel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.channel-name { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.channel-name i { font-size: 14px; }
.channel-badge { font-size: 11px; padding: 2px 8px; background: var(--bg-card); border-radius: 10px; }
.channel-bar { height: 6px; background: var(--bg-dark); border-radius: 3px; margin-bottom: 8px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; }
.channel-stats { display: flex; gap: 12px; font-size: 10px; color: var(--text-muted); }

/* Product Ranking */
.product-ranking { display: flex; flex-direction: column; gap: 10px; }
.product-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--bg-hover); border-radius: 10px; }
.rank-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.product-info { flex: 1; min-width: 0; }
.product-name { font-size: 13px; font-weight: 500; }
.product-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.product-bar { flex: 1; height: 4px; background: var(--bg-dark); border-radius: 2px; margin: 0 12px; }
.product-value { font-size: 13px; font-weight: 600; min-width: 80px; text-align: right; }

/* Cohort Table */
.cohort-table { background: var(--bg-hover); border-radius: 10px; overflow: hidden; }
.cohort-header, .cohort-row { display: grid; grid-template-columns: 80px repeat(6, 1fr); gap: 1px; background: var(--border); padding: 1px; }
.cohort-col { background: var(--bg-hover); padding: 10px; font-size: 11px; text-align: center; }
.cohort-header .cohort-col { background: var(--bg-dark); font-weight: 600; color: var(--text-muted); }
.retention-cell { font-weight: 500; }

/* Funnel Chart */
.funnel-chart { display: flex; flex-direction: column; gap: 12px; }
.funnel-stage { }
.funnel-bar { background: var(--primary); border-radius: 8px; padding: 12px 16px; color: white; display: flex; justify-content: space-between; align-items: center; }
.funnel-label { font-size: 13px; font-weight: 500; }
.funnel-value { font-size: 12px; opacity: 0.9; }
.funnel-conversion { text-align: center; padding: 8px 0; font-size: 11px; color: var(--text-muted); }

/* Insights Section */
.insights-section { margin-bottom: 24px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-header h4 { font-size: 16px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.section-header h4 i { color: var(--primary); }
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.insight-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: all 0.2s; }
.insight-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.insight-card.opportunity { border-left: 4px solid #10B981; }
.insight-card.warning { border-left: 4px solid #F59E0B; }
.insight-card.success { border-left: 4px solid #10B981; }
.insight-card.info { border-left: 4px solid #6366F1; }
.insight-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.insight-header i { font-size: 16px; }
.insight-title { font-size: 13px; font-weight: 600; }
.insight-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; margin-left: auto; }
.insight-badge.opportunity { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.insight-badge.warning { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.insight-badge.success { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.insight-badge.info { background: rgba(99, 102, 241, 0.2); color: #6366F1; }
.insight-content { margin-bottom: 12px; }
.insight-main { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.insight-detail { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.insight-action { display: flex; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal { background: var(--bg-card); border-radius: 16px; width: 100%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.comparison-modal { max-width: 500px; }
.detail-modal { max-width: 700px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.modal-close { width: 32px; height: 32px; background: var(--bg-hover); border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px; border-top: 1px solid var(--border); }

/* Comparison */
.comparison-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.control-group { display: flex; flex-direction: column; gap: 8px; }
.control-group label { font-size: 12px; color: var(--text-secondary); }
.comparison-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.comparison-item { padding: 16px; background: var(--bg-hover); border-radius: 10px; text-align: center; }
.comparison-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.comparison-value { font-size: 20px; font-weight: 700; }
.comparison-value.current { color: var(--primary); }
.comparison-value.previous { color: var(--text-secondary); }
.comparison-value.up { color: var(--success); }
.comparison-value.down { color: #EF4444; }
.comparison-item.highlight { background: rgba(99, 102, 241, 0.1); }
.comparison-chart { margin-top: 20px; }
.chart-bars { display: flex; align-items: flex-end; justify-content: center; gap: 40px; height: 150px; }
.chart-bar-item { display: flex; flex-direction: column; align-items: center; }
.bar-wrapper { width: 60px; height: 120px; background: var(--bg-hover); border-radius: 8px 8px 0 0; display: flex; align-items: flex-end; justify-content: center; }
.bar.current { background: var(--primary); }
.bar.previous { background: var(--text-muted); }

/* Dashboard Settings */
.dashboard-settings { }
.dashboard-settings h5 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.metrics-grid, .charts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metric-checkbox, .chart-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; }
.metric-checkbox input, .chart-checkbox input { width: 16px; height: 16px; }
.checkmark { width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.metric-checkbox input:checked ~ .checkmark, .chart-checkbox input:checked ~ .checkmark { background: var(--primary); border-color: var(--primary); color: white; }

/* Toast */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 2000; }
.toast.success { border-color: var(--success); }
.toast.success i { color: var(--success); }
.toast-enter-active, .toast-leave-active { transition: all 0.3s ease; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(20px); }

/* Responsive */
@media (max-width: 1400px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .charts-section { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .insights-grid { grid-template-columns: 1fr; }
}
</style>
