import { defineComponent, ref, watch, onMounted } from 'vue'
import { useQuasar } from 'quasar'
import { storeToRefs } from 'pinia'
import { IMyPage } from 'app/src/model'
import { useGlobalStore } from 'app/src/store'
import { PagesConfigurator } from '@src/components/PagesConfigurator'
import { useI18n } from 'vue-i18n'


export default defineComponent({
  name: 'PagesAdmin',
  components: { PagesConfigurator },
  setup () {
    const $q = useQuasar()
    const { t } = useI18n()

    const globalStore = useGlobalStore()
    const { mypage } = storeToRefs(globalStore)

    // Copia locale per l’editing tramite v-model
    const pagesLocal = ref<IMyPage[]>([])
    const savingAll = ref(false)

    // Mantieni pagesLocal <-> store allineati
    const syncFromStore = () => {
      pagesLocal.value = (mypage.value || []).map(p => ({ ...p }))
    }

    watch(mypage, syncFromStore, { deep: true })
    onMounted(async () => {
      // Se hai una funzione per caricare tutte le pagine, chiamala qui
      // es. await globalStore.loadAllPages()
      syncFromStore()
    })

    // Salva singola pagina (chiamato da PagesConfigurator @save)
    async function saveOne (page: IMyPage) {
      try {
        const saved = await globalStore.savePage({ ...page })
        if (saved && typeof saved === 'object') {
          // rimpiazza nel local e nello store (lo store viene aggiornato da savePage)
          const idx = pagesLocal.value.findIndex(p =>
            (p._id && p._id === saved._id) || (p.path && p.path === saved.path)
          )
          if (idx >= 0) pagesLocal.value[idx] = { ...saved }
          $q.notify({ type: 'positive', message: `Salvata: ${saved.title || saved.path}` })
        } else {
          $q.notify({ type: 'positive', message: 'Salvataggio completato' })
        }
      } catch (err) {
        console.error(err)
        $q.notify({ type: 'negative', message: 'Errore nel salvataggio della pagina' })
      }
    }

    // Salva l’ordinamento (fallback: batch di savePage per aggiornare order)
    async function saveOrder (orders: { id?: string; order: number }[]) {
      try {
        // Applica l'order nella copia locale
        for (const { id, order } of orders) {
          const p = pagesLocal.value.find(x => x._id === id) ||
                    pagesLocal.value.find(x => !id && typeof x.order === 'number' && x.order === order)
          if (p) p.order = order
        }
        // Fallback: se non hai un endpoint /reorder, salvi singolarmente
        await Promise.all(
          pagesLocal.value.map(p => globalStore.savePage({ ...p }))
        )
        $q.notify({ type: 'positive', message: 'Ordinamento salvato' })
      } catch (err) {
        console.error(err)
        $q.notify({ type: 'negative', message: 'Errore nel salvataggio dell’ordinamento' })
      }
    }

    // Ricarica l’elenco (se disponibile una API globale; altrimenti rilegge dallo store)
    async function reloadAll () {
      try {
        // Se esiste: await globalStore.loadAllPages()
        syncFromStore()
        $q.notify({ type: 'info', message: 'Elenco ricaricato' })
      } catch (err) {
        console.error(err)
        $q.notify({ type: 'negative', message: 'Errore nel ricaricare l’elenco' })
      }
    }

    // Salva tutto (batch)
    async function saveAll () {
      try {
        savingAll.value = true
        await Promise.all(
          pagesLocal.value.map(p => globalStore.savePage({ ...p }))
        )
        $q.notify({ type: 'positive', message: 'Tutte le pagine salvate' })
      } catch (err) {
        console.error(err)
        $q.notify({ type: 'negative', message: 'Errore nel salvataggio massivo' })
      } finally {
        savingAll.value = false
      }
    }

    return {
      pagesLocal,
      saveOne,
      saveOrder,
      reloadAll,
      saveAll,
      savingAll,
      t,
    }
  }
})