<template>
  <div v-if="visible" class="eg-lsm-overlay" @click.self="$emit('close')">
    <div class="eg-lsm-dialog">
      <div class="eg-lsm-header">
        <span class="eg-lsm-title">{{ t.localSyncTitle }}</span>
        <button type="button" class="eg-lsm-close" @click="$emit('close')" :title="t.localSyncClose">✕</button>
      </div>

      <div v-if="!hasVersions" class="eg-lsm-empty">{{ t.localSyncEmpty }}</div>
      <div v-else class="eg-lsm-body">
        <ul class="eg-lsm-version-list">
          <li
            v-for="v in versions"
            :key="v.id"
            class="eg-lsm-version-item"
            :class="{ 'eg-lsm-version-item-active': v.id === selectedId }"
            @click="$emit('select', v.id)"
          >
            <span class="eg-lsm-version-date">{{ formatDateTime(v.createdAt) }}</span>
            <span class="eg-lsm-version-rows">{{ v.rowCount }} {{ t.localSyncRows }}</span>
            <span v-if="v.updatedAt !== v.createdAt" class="eg-lsm-version-touched">
              {{ t.localSyncTouchedAt }}: {{ formatDateTime(v.updatedAt) }}
            </span>
          </li>
        </ul>

        <div class="eg-lsm-preview">
          <div v-if="!selectedVersion" class="eg-lsm-preview-loading">{{ t.localSyncLoading }}</div>
          <div v-else class="eg-lsm-grid-wrap">
            <component
              :is="gridOptions"
              :data="selectedVersion.data"
              :columns="columns"
              :height="360"
              :locale="locale"
              :theme="theme"
              locked
              :toolbar="false"
            />
          </div>
        </div>
      </div>

      <div class="eg-lsm-footer">
        <template v-if="confirmingClearId">
          <span class="eg-lsm-confirm-text">{{ t.localSyncConfirmClear }}</span>
          <button type="button" class="eg-lsm-btn" @click="confirmingClearId = null">{{ t.localSyncConfirmNo }}</button>
          <button type="button" class="eg-lsm-btn eg-lsm-btn-danger" @click="onConfirmClear">{{ t.localSyncConfirmYes }}</button>
        </template>
        <template v-else>
          <button
            type="button"
            class="eg-lsm-btn eg-lsm-btn-danger"
            :disabled="!selectedId"
            @click="confirmingClearId = selectedId"
          >{{ t.localSyncClear }}</button>
          <button
            type="button"
            class="eg-lsm-btn"
            :title="t.localSyncSaveHint"
            @click="$emit('save')"
          >{{ t.localSyncSave }}</button>
          <button
            type="button"
            class="eg-lsm-btn eg-lsm-btn-accent"
            :disabled="!selectedId"
            :title="t.localSyncRestoreHint"
            @click="$emit('restore', selectedId)"
          >{{ t.localSyncRestore }}</button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
// "Dumb" presentation component for ExcelGrid.vue's localSyncKey feature —
// lists the locally saved IndexedDB *versions* (see src/utils/idbStore.js)
// for the current key, previews the selected one, and lets the host Restore
// or Delete it. Not exported from src/index.js (same "internal-only"
// convention as EgDatePicker.vue/EgCheckbox.vue) — purpose-built for
// ExcelGrid.vue, not meant for standalone use.
//
// The preview itself is a real, nested ExcelGrid instance (locked/read-only,
// no toolbar) — see the comment on ExcelGridComponent in ExcelGrid.vue for
// why `gridOptions` is passed down as a plain component definition instead
// of importing ExcelGrid.vue here (that would be circular) or using the
// runtime-contaminated `this.$options`.
import { getMessages } from '../utils/i18n.js'

export default {
  name: 'EgLocalSyncModal',
  props: {
    visible: { type: Boolean, default: false },
    gridOptions: { type: Object, required: true },
    columns: { type: Array, default: () => [] },
    versions: { type: Array, default: () => [] }, // [{id, createdAt, updatedAt, rowCount}]
    selectedId: { type: String, default: null },
    selectedVersion: { type: Object, default: null }, // {id, data, createdAt, updatedAt} | null
    locale: { type: String, default: 'en' },
    theme: { type: String, default: 'excel' }
  },
  data() {
    return { confirmingClearId: null }
  },
  computed: {
    t() { return getMessages(this.locale) },
    hasVersions() { return this.versions.length > 0 }
  },
  watch: {
    // A freshly opened modal (or a version that just got deleted/restored)
    // should never inherit a stale "are you sure?" state from last time.
    visible(val) { if (!val) this.confirmingClearId = null },
    versions() { this.confirmingClearId = null }
  },
  methods: {
    formatDateTime(ts) {
      return ts ? new Date(ts).toLocaleString() : ''
    },
    onConfirmClear() {
      const id = this.confirmingClearId
      this.confirmingClearId = null
      this.$emit('clear', id)
    }
  }
}
</script>

<style>
.eg-lsm-overlay {
  position: fixed;
  inset: 0;
  background: var(--eg-color-overlay-bg, var(--eg-color-overlay-bg-default));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
.eg-lsm-dialog {
  background: var(--eg-color-cell-bg, var(--eg-color-cell-bg-default));
  border: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
  border-radius: var(--eg-radius, var(--eg-radius-default));
  box-shadow: var(--eg-shadow-dialog, var(--eg-shadow-dialog-default));
  width: min(1200px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  font-family: inherit;
}
.eg-lsm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
  flex-shrink: 0;
}
.eg-lsm-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--eg-color-text, var(--eg-color-text-default));
}
.eg-lsm-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--eg-color-text-secondary, var(--eg-color-text-secondary-default));
  padding: 4px 6px;
  border-radius: var(--eg-radius, var(--eg-radius-default));
}
.eg-lsm-close:hover {
  background: var(--eg-color-option-hover-bg, var(--eg-color-option-hover-bg-default));
}
.eg-lsm-empty {
  text-align: center;
  padding: 32px 12px;
  color: var(--eg-color-text-muted, var(--eg-color-text-muted-default));
  font-size: var(--eg-font-size, var(--eg-font-size-default));
}
.eg-lsm-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.eg-lsm-version-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  width: 220px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
}
.eg-lsm-version-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--eg-radius, var(--eg-radius-default));
  cursor: pointer;
  font-size: 12px;
  color: var(--eg-color-text, var(--eg-color-text-default));
}
.eg-lsm-version-item:hover {
  background: var(--eg-color-option-hover-bg, var(--eg-color-option-hover-bg-default));
}
.eg-lsm-version-item-active {
  background: var(--eg-color-accent-soft, var(--eg-color-accent-soft-default));
}
.eg-lsm-version-date {
  font-weight: 600;
}
.eg-lsm-version-rows,
.eg-lsm-version-touched {
  color: var(--eg-color-text-secondary, var(--eg-color-text-secondary-default));
  font-size: 11px;
}
.eg-lsm-preview {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  overflow: auto;
}
.eg-lsm-preview-loading {
  text-align: center;
  padding: 32px 12px;
  color: var(--eg-color-text-muted, var(--eg-color-text-muted-default));
  font-size: var(--eg-font-size, var(--eg-font-size-default));
}
.eg-lsm-grid-wrap {
  border: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
  border-radius: var(--eg-radius, var(--eg-radius-default));
  overflow: hidden;
}
.eg-lsm-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--eg-color-border-cell, var(--eg-color-border-cell-default));
  flex-shrink: 0;
}
.eg-lsm-confirm-text {
  font-size: 12px;
  color: var(--eg-color-text-secondary, var(--eg-color-text-secondary-default));
  margin-right: auto;
}
.eg-lsm-btn {
  padding: 6px 14px;
  border-radius: var(--eg-radius, var(--eg-radius-default));
  border: 1px solid var(--eg-color-border, var(--eg-color-border-default));
  background: var(--eg-color-cell-bg, var(--eg-color-cell-bg-default));
  color: var(--eg-color-text, var(--eg-color-text-default));
  font-size: var(--eg-font-size, var(--eg-font-size-default));
  cursor: pointer;
}
.eg-lsm-btn:hover:not(:disabled) {
  background: var(--eg-color-option-hover-bg, var(--eg-color-option-hover-bg-default));
}
.eg-lsm-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.eg-lsm-btn-accent {
  background: var(--eg-color-accent, var(--eg-color-accent-default));
  border-color: var(--eg-color-accent, var(--eg-color-accent-default));
  color: #fff;
}
.eg-lsm-btn-accent:hover:not(:disabled) {
  background: var(--eg-color-accent-dark, var(--eg-color-accent-dark-default));
  border-color: var(--eg-color-accent-dark, var(--eg-color-accent-dark-default));
}
.eg-lsm-btn-danger {
  background: var(--eg-color-cell-bg, var(--eg-color-cell-bg-default));
  border-color: var(--eg-color-error, var(--eg-color-error-default));
  color: var(--eg-color-error, var(--eg-color-error-default));
}
.eg-lsm-btn-danger:hover:not(:disabled) {
  background: var(--eg-color-error-soft, var(--eg-color-error-soft-default));
}
</style>
