<script setup>
import { ref, watch } from 'vue'
import { useTranslation } from 'i18next-vue'
import ModalDialog from './ModalDialog.vue'
import { useExecutionLogs } from '../composables/useExecutionLogs.js'

const emit = defineEmits(['close', 'cleaned'])

const { t } = useTranslation()
const { getCountByDateRange, removeByDateRange } = useExecutionLogs()

const today = new Date().toISOString().slice(0, 10)

const fromDate = ref('')
const toDate = ref('')
const matchCount = ref(null)
const confirmed = ref(false)
const deleting = ref(false)
const fromError = ref('')
const toError = ref('')

watch([fromDate, toDate], async () => {
  confirmed.value = false
  fromError.value = ''
  toError.value = ''
  matchCount.value = null
  if (!fromDate.value || !toDate.value) return
  if (fromDate.value > toDate.value) {
    toError.value = t('cleanJournal.errorToBeforeFrom')
    return
  }
  matchCount.value = await getCountByDateRange(fromDate.value, toDate.value)
})

async function onConfirm() {
  if (!fromDate.value || !toDate.value || fromDate.value > toDate.value) return
  if (!confirmed.value) return
  deleting.value = true
  try {
    await removeByDateRange(fromDate.value, toDate.value)
    emit('cleaned')
    emit('close')
  } finally {
    deleting.value = false
  }
}
</script>

<template>
  <ModalDialog :title="$t('cleanJournal.title')" @close="emit('close')">
    <p class="hint">{{ $t('cleanJournal.hint') }}</p>

    <div class="date-fields">
      <div class="date-field">
        <label for="clean-from">{{ $t('cleanJournal.from') }}</label>
        <input
          id="clean-from"
          v-model="fromDate"
          data-testid="clean-journal-from"
          type="date"
          :max="today"
        />
      </div>
      <div class="date-field">
        <label for="clean-to">{{ $t('cleanJournal.to') }}</label>
        <input
          id="clean-to"
          v-model="toDate"
          data-testid="clean-journal-to"
          type="date"
          :max="today"
        />
        <p v-if="toError" class="field-error" data-testid="clean-journal-date-error">
          {{ toError }}
        </p>
      </div>
    </div>

    <p
      v-if="matchCount !== null"
      class="match-count"
      :class="{ 'match-zero': matchCount === 0 }"
      data-testid="clean-journal-count"
    >
      <i class="bi bi-info-circle"></i>
      {{ $t('cleanJournal.matchCount', { count: matchCount }) }}
    </p>

    <label
      v-if="matchCount !== null && matchCount > 0"
      class="checkbox-label"
      data-testid="clean-journal-confirm-label"
    >
      <input v-model="confirmed" type="checkbox" data-testid="clean-journal-confirm-checkbox" />
      <span>{{ $t('cleanJournal.confirmLabel') }}</span>
    </label>

    <div class="confirm-actions">
      <button class="btn" data-testid="clean-journal-cancel" @click="emit('close')">
        {{ $t('import.cancel') }}
      </button>
      <button
        class="btn btn-danger"
        data-testid="clean-journal-delete"
        :disabled="!confirmed || deleting || matchCount === 0 || matchCount === null"
        @click="onConfirm"
      >
        <i class="bi bi-trash"></i>
        {{ $t('cleanJournal.deleteBtn') }}
      </button>
    </div>
  </ModalDialog>
</template>

<style scoped>
.hint {
  font-size: 14px;
  color: var(--front-color2);
  margin-bottom: 12px;
}

.date-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 130px;
}

.date-field label {
  font-size: 14px;
  font-weight: 600;
}

.field-error {
  color: var(--btn-danger-bg);
  font-size: 13px;
  margin: 0;
}

.match-count {
  margin-top: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--btn-danger-bg);
}

.match-count.match-zero {
  color: var(--front-color2);
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  cursor: pointer;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.checkbox-label input[type='checkbox'] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.checkbox-label span {
  flex: 1 1 0;
  min-width: 0;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.confirm-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
