<script lang="ts" setup>
import { computed, ref } from 'vue'

interface DateRange {
  start_date: string
  end_date: string
}

interface Props {
  modelValue: DateRange
  presets?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  presets: true,
})

const emit = defineEmits<{
  'update:modelValue': [value: DateRange]
}>()

const activePreset = ref<string>('custom')

function formatDate(date: Date): string {
  return date.toISOString().split('T')[0]
}

const presetOptions = computed<Array<{ label: string; key: string }>>(() => [
  { label: 'Last 30d', key: 'last_30d' },
  { label: 'This month', key: 'this_month' },
  { label: 'Last month', key: 'last_month' },
  { label: 'This quarter', key: 'this_quarter' },
  { label: 'This year', key: 'this_year' },
  { label: 'Last year', key: 'last_year' },
  { label: 'Custom', key: 'custom' },
])

function applyPreset(key: string): void {
  activePreset.value = key
  const now = new Date()
  let start: Date
  let end: Date = new Date(now)

  switch (key) {
    case 'last_30d':
      start = new Date(now)
      start.setDate(start.getDate() - 30)
      break
    case 'this_month':
      start = new Date(now.getFullYear(), now.getMonth(), 1)
      break
    case 'last_month':
      start = new Date(now.getFullYear(), now.getMonth() - 1, 1)
      end = new Date(now.getFullYear(), now.getMonth(), 0)
      break
    case 'this_quarter': {
      const quarter = Math.floor(now.getMonth() / 3)
      start = new Date(now.getFullYear(), quarter * 3, 1)
      break
    }
    case 'this_year':
      start = new Date(now.getFullYear(), 0, 1)
      break
    case 'last_year':
      start = new Date(now.getFullYear() - 1, 0, 1)
      end = new Date(now.getFullYear() - 1, 11, 31)
      break
    default:
      return
  }

  emit('update:modelValue', {
    start_date: formatDate(start),
    end_date: formatDate(end),
  })
}

function updateStartDate(value: string): void {
  activePreset.value = 'custom'
  emit('update:modelValue', {
    ...props.modelValue,
    start_date: value,
  })
}

function updateEndDate(value: string): void {
  activePreset.value = 'custom'
  emit('update:modelValue', {
    ...props.modelValue,
    end_date: value,
  })
}
</script>

<template>
  <div>
    <div v-if="presets" class="d-flex flex-wrap gap-2 mb-4">
      <VChip
        v-for="preset in presetOptions"
        :key="preset.key"
        :color="activePreset === preset.key ? 'primary' : undefined"
        :variant="activePreset === preset.key ? 'elevated' : 'tonal'"
        size="small"
        class="cursor-pointer"
        @click="applyPreset(preset.key)"
      >
        {{ preset.label }}
      </VChip>
    </div>

    <VRow>
      <VCol cols="12" sm="6">
        <VTextField
          :model-value="modelValue.start_date"
          label="Start Date"
          type="date"
          density="compact"
          variant="outlined"
          @update:model-value="updateStartDate($event as string)"
        />
      </VCol>
      <VCol cols="12" sm="6">
        <VTextField
          :model-value="modelValue.end_date"
          label="End Date"
          type="date"
          density="compact"
          variant="outlined"
          @update:model-value="updateEndDate($event as string)"
        />
      </VCol>
    </VRow>
  </div>
</template>
