import { computed, ref } from 'vue'

import {
  metricBlueprints,
  trendRanges,
  trendSeries,
  spendByCategory,
  exceptionMix,
  departmentRangeOptions,
  bottlenecks,
  budgetSummary
} from '../data/metrics.js'

export function useOverviewView() {
  const activeTrendRange = ref(trendRanges[0])
  const activeDepartmentRange = ref(departmentRangeOptions[0])

  const demoTotals = {
    pendingCount: 128,
    pendingAmount: 361600,
    avgSla: 6.8,
    autoPassRate: 78,
    riskCount: 14,
    slaRate: 96
  }

  const demoDepartments = [
    { name: '销售部', amount: 182000, color: 'var(--theme-primary)' },
    { name: '研发中心', amount: 146000, color: 'var(--chart-blue)' },
    { name: '市场部', amount: 96000, color: 'var(--chart-amber)' },
    { name: '运营部', amount: 68600, color: 'var(--chart-purple)' },
    { name: '行政部', amount: 48300, color: 'var(--chart-blue)' }
  ]

  const formatCompact = (value) => {
    if (value >= 1_000_000) return `¥${(value / 1_000_000).toFixed(1)}M`
    if (value >= 1_000) return `¥${(value / 1_000).toFixed(1)}K`
    return `¥${value}`
  }

  const formatCurrency = (value) => formatCompact(value)

  const formatMetricValue = (metric, value) => {
    if (metric.key === 'pendingAmount') return formatCurrency(Math.round(value))
    if (metric.key === 'avgSla') return `${value.toFixed(1)} ${metric.unit}`
    if (metric.unit === '%') return `${Math.round(value)} ${metric.unit}`
    if (metric.unit) return `${Math.round(value)} ${metric.unit}`
    return `${Math.round(value)}`
  }

  const kpiMetrics = computed(() => metricBlueprints.map((metric, index) => {
    const rawValue = demoTotals[metric.key]
    const displayValue = formatMetricValue(metric, rawValue)

    return {
      ...metric,
      displayValue,
      changeText: metric.change,
      delay: index * 55
    }
  }))

  const activeTrend = computed(() => trendSeries[activeTrendRange.value])
  const spendTotal = computed(() => spendByCategory.reduce((sum, item) => sum + item.value, 0))
  const riskTotal = computed(() => exceptionMix.reduce((sum, item) => sum + item.value, 0))

  const spendLegend = computed(() => spendByCategory.map((item) => ({
    ...item,
    display: `${Math.round((item.value / spendTotal.value) * 100)}%`
  })))

  const riskLegend = computed(() => exceptionMix.map((item) => ({
    ...item,
    display: `${item.value} 单`
  })))

  const rankedDepartments = computed(() => {
    const rows = demoDepartments
    const max = Math.max(...rows.map((item) => item.amount), 1)

    return rows.slice(0, 5).map((item, index) => ({
      ...item,
      rank: index + 1,
      shortName: item.name,
      amountLabel: formatCurrency(item.amount),
      width: `${Math.max((item.amount / max) * 100, 18)}%`,
      color: item.color
    }))
  })

  return {
    activeDepartmentRange,
    activeTrend,
    activeTrendRange,
    bottlenecks,
    budgetSummary,
    departmentRangeOptions,
    exceptionMix,
    formatCompact,
    formatCurrency,
    formatMetricValue,
    kpiMetrics,
    metricBlueprints,
    rankedDepartments,
    riskLegend,
    riskTotal,
    spendByCategory,
    spendLegend,
    spendTotal,
    trendRanges,
    trendSeries
  }
}