<script setup lang="ts">
import { CalendarIcon } from 'lucide-vue-next'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import DateTimePicker from '@/components/ui/date-picker/DateTimePicker.vue'

interface Props {
  startModelValue: string
  endModelValue: string
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
})

const emit = defineEmits<{
  'update:startModelValue': [value: string]
  'update:endModelValue': [value: string]
}>()

const { t } = useI18n()

const displayValue = computed(() => {
  if (props.startModelValue && props.endModelValue) {
    return `${props.startModelValue.replace('T', ' ')} ~ ${props.endModelValue.replace('T', ' ')}`
  }
  if (props.startModelValue) {
    return `${props.startModelValue.replace('T', ' ')} ~ `
  }
  if (props.endModelValue) {
    return `~ ${props.endModelValue.replace('T', ' ')}`
  }
  return ''
})

const buttonTitle = computed(() => props.title || t('admin.cards.timeRange'))

function setQuickRange(range: 'today' | 'week' | 'month') {
  const now = new Date()
  const today = now.toISOString().split('T')[0]
  const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0]

  switch (range) {
    case 'today': {
      emit('update:startModelValue', `${today}T00:00`)
      emit('update:endModelValue', `${today}T23:59`)
      break
    }
    case 'week': {
      const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
      emit('update:startModelValue', `${weekAgo.toISOString().split('T')[0]}T00:00`)
      emit('update:endModelValue', `${today}T23:59`)
      break
    }
    case 'month': {
      emit('update:startModelValue', `${firstDayOfMonth}T00:00`)
      emit('update:endModelValue', `${today}T23:59`)
      break
    }
  }
}

function clearFilter() {
  emit('update:startModelValue', '')
  emit('update:endModelValue', '')
}
</script>

<template>
  <UiPopover>
    <UiPopoverTrigger as-child>
      <UiButton variant="outline" size="sm" class="h-8 border-dashed w-auto">
        <CalendarIcon class="size-4 mr-2" />
        {{ buttonTitle }}
        <template v-if="displayValue">
          <UiSeparator orientation="vertical" class="h-4 mx-2" />
          <span class="text-xs">{{ displayValue }}</span>
        </template>
      </UiButton>
    </UiPopoverTrigger>
    <UiPopoverContent class="w-auto p-4" align="start">
      <div class="space-y-3">
        <div class="text-sm font-medium">
          {{ t('admin.cards.selectTimeRange') }}
        </div>
        <div class="flex items-center gap-2">
          <DateTimePicker
            :model-value="startModelValue"
            :placeholder="t('admin.cards.startTime')"
            class="w-[180px]"
            @update:model-value="emit('update:startModelValue', $event)"
          />
          <span class="text-muted-foreground text-sm">~</span>
          <DateTimePicker
            :model-value="endModelValue"
            :placeholder="t('admin.cards.endTime')"
            class="w-[180px]"
            @update:model-value="emit('update:endModelValue', $event)"
          />
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-1">
            <UiButton variant="ghost" size="sm" class="h-7 text-xs" @click="setQuickRange('today')">
              {{ t('admin.cards.today') }}
            </UiButton>
            <UiButton variant="ghost" size="sm" class="h-7 text-xs" @click="setQuickRange('week')">
              {{ t('admin.cards.last7Days') }}
            </UiButton>
            <UiButton variant="ghost" size="sm" class="h-7 text-xs" @click="setQuickRange('month')">
              {{ t('admin.cards.thisMonth') }}
            </UiButton>
          </div>
          <UiButton variant="ghost" size="sm" class="h-7 text-xs" @click="clearFilter">
            {{ t('admin.cards.reset') }}
          </UiButton>
        </div>
      </div>
    </UiPopoverContent>
  </UiPopover>
</template>
