gami-web/app/components/popup/DateSelect.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type { PickerOption } from 'vant'
import dayjs from 'dayjs'

type DateRange = {
  start?: string // YYYY-MM-DD
  end?: string // YYYY-MM-DD
}

type PickerValue = [string, string, string] // day, month, year

const ISO_DATE_FORMAT = 'YYYY-MM-DD'
const DISPLAY_DATE_FORMAT = 'DD/MM/YYYY'

const props = withDefaults(
  defineProps<{
    show: boolean
    value?: DateRange
  }>(),
  {
    value: undefined,
  },
)

const emit = defineEmits<{
  (e: 'update:show', value: boolean): void
  (e: 'update:value', value: DateRange | undefined): void
  (e: 'confirm', value: DateRange): void
  (e: 'reset'): void
}>()

const { t, locale } = useI18n()

type ActiveField = 'start' | 'end'

const activeField = ref<ActiveField>('start')
const startDate = ref<string | undefined>(props.value?.start)
const endDate = ref<string | undefined>(props.value?.end)

const nativeSafeArea = useState<{ top: number, bottom: number }>('native-safe-area')
const bottomStyle = computed<Partial<Record<string, string>>>(() => {
  if (!nativeSafeArea.value) return {}

  return {
    paddingBottom: `${nativeSafeArea.value.bottom}px`,
  }
})

const isIsoDate = (value?: string): value is string => {
  return !!value && /^\d{4}-\d{2}-\d{2}$/.test(value)
}

const isValidIsoDate = (iso?: string) => {
  if (!isIsoDate(iso)) return false
  // Strict parse to avoid overflow dates like 2026-02-31 being treated as valid.
  return dayjs(iso, ISO_DATE_FORMAT, true).isValid()
}

const toDisplay = (iso?: string) => {
  if (!isIsoDate(iso)) return ''

  return dayjs(iso, ISO_DATE_FORMAT).format(DISPLAY_DATE_FORMAT)
}

const toIso = (d: string, m: string, y: string) => `${y}-${m}-${d}`

const parseIsoToPicker = (iso?: string): PickerValue | undefined => {
  if (!isIsoDate(iso)) return undefined
  const parts = iso.split('-')
  if (parts.length !== 3) return undefined
  const y = parts[0]!
  const m = parts[1]!
  const d = parts[2]!
  return [d, m, y]
}

const pad2 = (value: string | number) => String(value).padStart(2, '0')

const todayPickerValue = (): PickerValue => {
  const now = new Date()
  return [pad2(now.getDate()), pad2(now.getMonth() + 1), String(now.getFullYear())]
}

const pickerValue = ref<PickerValue>(todayPickerValue())

watch(
  () => props.show,
  (show) => {
    if (!show) return
    // Always re-init internal state from external saved values when opening.
    activeField.value = 'start'
    startDate.value = props.value?.start
    endDate.value = props.value?.end

    // If external start is empty, fill today's date as default for the active field.
    if (!startDate.value) {
      const [d, m, y] = todayPickerValue()
      startDate.value = toIso(d, m, y)
    }

    pickerValue.value = parseIsoToPicker(startDate.value) ?? todayPickerValue()
  },
  { immediate: true },
)

watch(
  () => activeField.value,
  () => {
    if (!props.show) return
    if (activeField.value === 'start') {
      if (!startDate.value) {
        const [d, m, y] = todayPickerValue()
        startDate.value = toIso(d, m, y)
      }
      pickerValue.value = parseIsoToPicker(startDate.value) ?? todayPickerValue()
      return
    }

    if (!endDate.value) {
      const [d, m, y] = todayPickerValue()
      endDate.value = toIso(d, m, y)
    }
    pickerValue.value = parseIsoToPicker(endDate.value) ?? todayPickerValue()
  },
)

const monthNames = computed(() => {
  // Use i18n locale to render month name similar to design
  if (locale.value.startsWith('zh')) {
    return Array.from({ length: 12 }, (_, i) => `${i + 1}月`)
  }
  if (locale.value.startsWith('id')) {
    return ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember']
  }
  return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
})

const formatter = (type: string, option: PickerOption) => {
  if (type === 'month') {
    const idx = Number(option.value ?? 0) - 1
    return {
      ...option,
      text: monthNames.value[idx] ?? String(option.text ?? ''),
    }
  }
  return option
}

const handleChange = (values: unknown) => {
  const { selectedValues } = values as { selectedValues: string[] }
  const d = selectedValues[0]
  const m = selectedValues[1]
  const y = selectedValues[2]

  if (!d || !m || !y) return

  const iso = toIso(pad2(d), pad2(m), y)

  if (activeField.value === 'start') startDate.value = iso
  else endDate.value = iso
}

const handleReset = () => {
  activeField.value = 'start'
  startDate.value = undefined
  endDate.value = undefined
  pickerValue.value = todayPickerValue()
  emit('update:value', undefined)
  emit('reset')
}

const isRangeValid = computed(() => {
  const start = startDate.value
  const end = endDate.value

  if (start && !isValidIsoDate(start)) return false
  if (end && !isValidIsoDate(end)) return false

  if (!start || !end) return true

  const s = dayjs(start, ISO_DATE_FORMAT, true)
  const e = dayjs(end, ISO_DATE_FORMAT, true)
  if (!s.isValid() || !e.isValid()) return false

  return !e.isBefore(s, 'day')
})

const canSave = computed(() => (!startDate.value && !endDate.value) || ((startDate.value && endDate.value) && isRangeValid.value))

const handleSave = () => {
  if (!canSave.value) return
  const next: DateRange = { start: startDate.value, end: endDate.value }

  emit('update:value', next)
  emit('confirm', next)
  emit('update:show', false)
}

const handleUpdateShow = (value: boolean) => {
  emit('update:show', value)
}
</script>

<template>
  <van-popup
    :show="props.show"
    round
    position="bottom"
    class="date-select-popup"
    :overlay="true"
    :overlay-style="{ backgroundColor: 'rgba(0,0,0,0.4)' }"
    @update:show="handleUpdateShow"
  >
    <div class="date-select-popup__container">
      <header class="date-select-popup__header">
        <h3 class="date-select-popup__title">
          {{ t('wallet.dateSelect.title') }}
        </h3>
        <button
          type="button"
          class="date-select-popup__reset"
          @click="handleReset"
        >
          {{ t('wallet.dateSelect.reset') }}
        </button>
      </header>

      <section class="date-select-popup__range">
        <button
          type="button"
          class="date-select-popup__pill"
          :class="{ 'date-select-popup__pill--active': activeField === 'start',
                    'date-select-popup__pill--invalid': activeField === 'start' && !isRangeValid }"
          @click="activeField = 'start'"
        >
          <span
            class="date-select-popup__pill-text"
            :class="{ 'date-select-popup__pill-text--placeholder': !startDate }"
          >
            {{ startDate ? toDisplay(startDate) : t('wallet.dateSelect.startPlaceholder') }}
          </span>
        </button>

        <span class="date-select-popup__dash" />

        <button
          type="button"
          class="date-select-popup__pill"
          :class="{ 'date-select-popup__pill--active': activeField === 'end',
                    'date-select-popup__pill--invalid': activeField === 'end' && !isRangeValid }"
          @click="activeField = 'end'"
        >
          <span
            class="date-select-popup__pill-text"
            :class="{ 'date-select-popup__pill-text--placeholder': !endDate }"
          >
            {{ endDate ? toDisplay(endDate) : t('wallet.dateSelect.endPlaceholder') }}
          </span>
        </button>
      </section>

      <section class="date-select-popup__picker">
        <van-date-picker
          v-model="pickerValue"
          :columns-type="['day', 'month', 'year']"
          :formatter="formatter"
          :show-toolbar="false"
          @change="handleChange"
        />
      </section>

      <footer
        class="date-select-popup__footer"
        :style="bottomStyle"
      >
        <button
          type="button"
          class="date-select-popup__save"
          :class="{ 'date-select-popup__save--disabled': !canSave }"
          :disabled="!canSave"
          @click="handleSave"
        >
          {{ t('wallet.dateSelect.save') }}
        </button>
      </footer>
    </div>
  </van-popup>
</template>

<style scoped lang="scss">
.date-select-popup {
  background-color: transparent;

  &__container {
    background: #fff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    width: 100%;
  }

  &__header {
    height: 50px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #fff;
  }

  &__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 17px;
  }

  &__reset {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    -webkit-tap-highlight-color: transparent;
  }

  &__range {
    height: 49px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
  }

  &__pill {
    height: 37px;
    width: 149px;
    border-radius: 30px;
    background: #f9fafb;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    -webkit-tap-highlight-color: transparent;
  }

  &__pill--active {
    border-color: #1789ff;
  }

  &__pill--invalid {
    border-color: #ff4d4f !important;
  }

  &__pill-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
  }

  &__pill-text--placeholder {
    color: #c9cdd4;
  }

  &__dash {
    width: 16px;
    height: 2px;
    background: #86909c;
    opacity: 0.6;
    border-radius: 2px;
    flex: none;
  }

  &__picker {
    height: 250px;
    padding: 10px 0;
    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
  }

  &__footer {
    height: 54px;
    padding: 3px 16px 4px;
    background: #fff;
    box-sizing: content-box;
  }

  &__save {
    width: 100%;
    height: 47px;
    border: none;
    border-radius: 100px;
    background: linear-gradient(90deg, #2f95ff 28.365%, #50ffd8 100%);
    color: #fff;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }

  &__save--disabled,
  &__save:disabled {
    opacity: 0.5;
  }
}

/* Vant picker style overrides */
:deep(.van-picker) {
  flex: 1;
}

:deep(.van-picker-column__item) {
  font-size: 18px;
  color: var(--color-text-primary);
}

:deep(.van-picker-column__item--selected) {
  font-size: 22px;
  font-weight: 400;
}

/* Highlight bar */
:deep(.van-picker-column) {
  z-index: 1;
}
:deep(.van-picker__frame) {
  z-index: 0;
  background: #e6fffa;
  border-radius: 12px;
}
:deep(.van-picker__frame:after) {
  border-width: 0;
}
</style>