<template>
  <div>
    <div class="month-nav">
      <button type="button" @click="prevMonth">&lsaquo;</button>
      <select v-model.number="selectedMonth">
        <option v-for="(m, idx) in monthNames" :key="m" :value="idx">{{ m }}</option>
      </select>
      <select v-model.number="selectedYear">
        <option v-for="y in yearOptions" :key="y" :value="y">{{ y }}</option>
      </select>
      <button type="button" @click="nextMonth">&rsaquo;</button>
    </div>
    <div class="month-grid">
      <div class="dow" v-for="d in i18n.weekdays_short" :key="d">{{ d }}</div>
      <button
          type="button"
          v-for="day in monthDays"
          :key="day.format('YYYY-MM-DD')"
          class="date-pill"
          :class="{ other: !day.isSame(currentMonth, 'month'), selected: modelValue && day.isSame(dayjs(modelValue), 'day') }"
          @click="$emit('update:modelValue', day.format('YYYY-MM-DD'))"
      >{{ day.date() }}</button>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  name: 'DatePicker',
  emits: ['update:modelValue'],
  props: {
    modelValue: { type: String, default: '' },
    i18n: { type: Object, required: true },
    yearsBack: { type: Number, default: null },
    yearsForward: { type: Number, default: null }
  },
  data() {
    const today = dayjs().startOf('month');
    const initial = this.modelValue ? dayjs(this.modelValue).startOf('month') : today;
    return {
      dayjs,
      currentMonth: this.yearsForward && initial.isBefore(today) ? today : initial
    };
  },
  computed: {
    monthDays() {
      const start = this.currentMonth.startOf('month').startOf('week');
      const end = this.currentMonth.endOf('month').endOf('week');
      let c = start.clone();
      const days = [];
      while (c.isBefore(end) || c.isSame(end, 'day')) {
        days.push(c.clone());
        c = c.add(1, 'day');
      }
      return days;
    },
    monthNames() {
      return this.i18n.months || dayjs.months();
    },
    yearOptions() {
      const current = dayjs().year();
      const years = [];
      if (this.yearsForward) {
        const maxYear = current + this.yearsForward;
        for (let y = current; y <= maxYear; y++) years.push(y);
      } else {
        const minYear = this.yearsBack ? current - this.yearsBack : 1900;
        for (let y = current; y >= minYear; y--) years.push(y);
      }
      return years;
    },
    selectedMonth: {
      get() { return this.currentMonth.month(); },
      set(val) { this.currentMonth = this.currentMonth.month(val); }
    },
    selectedYear: {
      get() { return this.currentMonth.year(); },
      set(val) { this.currentMonth = this.currentMonth.year(val); }
    }
  },
  watch: {
    modelValue(val) {
      if (val) {
        const m = dayjs(val).startOf('month');
        if (this.yearsForward && m.isBefore(dayjs().startOf('month'))) {
          this.currentMonth = dayjs().startOf('month');
        } else {
          this.currentMonth = m;
        }
      }
    }
  },
  methods: {
    prevMonth() {
      const newMonth = this.currentMonth.subtract(1, 'month');
      if (this.yearsForward && newMonth.isBefore(dayjs().startOf('month'))) return;
      this.currentMonth = newMonth;
    },
    nextMonth() {
      const newMonth = this.currentMonth.add(1, 'month');
      if (this.yearsForward) {
        const max = dayjs().add(this.yearsForward, 'year').endOf('year');
        if (newMonth.isAfter(max)) return;
      }
      this.currentMonth = newMonth;
    }
  }
};
</script>
