import { computed, ref, watch } from 'vue'

import { formatDateValue } from '../../utils/dateRangeDefaults.js'

const OVERVIEW_DASHBOARD_OPTIONS = [
  { label: '财务看板', value: 'finance' },
  { label: '经营价值看板', value: 'value' },
  { label: '商业化管理', value: 'commercial' },
  { label: '风险看板', value: 'risk' },
  { label: '数字员工看板', value: 'digitalEmployee' },
  { label: '系统看板', value: 'system' }
]

export function useTopBarOverviewRange(props, emit) {
  const calendarOpen = ref(false)
  const draftStart = ref(props.customRange.start)
  const draftEnd = ref(props.customRange.end)
  const overviewDashboardOptions = OVERVIEW_DASHBOARD_OPTIONS
  const overviewDashboardValue = computed({
    get: () => props.overviewDashboard,
    set: (value) => emit('update:overviewDashboard', value)
  })

  const rangeOptions = computed(() =>
    props.ranges.map((range) => ({
      value: range,
      label: String(range)
    }))
  )

  const activeOption = computed(() =>
    rangeOptions.value.find((option) => option.value === props.activeRange) ?? rangeOptions.value[0]
  )

  const isCustomRange = computed(() => props.activeRange === 'custom')
  const activeDateLabel = computed(() => {
    if (isCustomRange.value) return formatRangeLabel(props.customRange.start, props.customRange.end)
    return buildPresetRangeLabel(activeOption.value?.label)
  })

  const canApplyCustomRange = computed(() =>
    Boolean(draftStart.value && draftEnd.value && draftStart.value <= draftEnd.value)
  )

  watch(
    () => props.customRange,
    (range) => {
      draftStart.value = range.start
      draftEnd.value = range.end
    },
    { deep: true }
  )

  function setRange(range) {
    emit('update:activeRange', range)
    calendarOpen.value = false
  }

  function applyCustomRange() {
    if (!canApplyCustomRange.value) return
    emit('update:customRange', { start: draftStart.value, end: draftEnd.value })
    emit('update:activeRange', 'custom')
    calendarOpen.value = false
  }

  return {
    calendarOpen,
    draftStart,
    draftEnd,
    overviewDashboardOptions,
    overviewDashboardValue,
    rangeOptions,
    activeOption,
    isCustomRange,
    activeDateLabel,
    canApplyCustomRange,
    setRange,
    applyCustomRange
  }
}

function formatRangeLabel(start, end) {
  if (!start || !end) return '选择时间段'
  if (start === end) return start
  return `${start} ~ ${end}`
}

function buildPresetRangeLabel(label) {
  const now = new Date()
  const today = formatDateValue(now)

  if (label === '今日') {
    return today
  }

  if (label === '近10日') {
    const start = new Date(now)
    start.setHours(0, 0, 0, 0)
    start.setDate(start.getDate() - 9)
    return `${formatDateValue(start)} ~ ${today}`
  }

  if (label === '本周') {
    const start = new Date(now)
    const day = start.getDay() || 7
    start.setHours(0, 0, 0, 0)
    start.setDate(start.getDate() - day + 1)
    return `${formatDateValue(start)} ~ ${today}`
  }

  if (label === '本月') {
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
  }

  return today
}
