/*
 * Silex website builder, free/libre no-code tool for makers.
 * Copyright (c) 2023 lexoyo and Silex Labs foundation
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

import { ConnectorId, WebsiteId, WebsiteData, ConnectorUser, ConnectorType, ApiError } from '../../types'
import { websiteLoad, websiteSave } from '../api'
import { cmdLogin, eventLoggedIn, eventLoggedOut, getCurrentUser, updateUser } from './LoginDialog'
import { addTempDataToAssetUrl, addTempDataToStyles, removeTempDataFromAssetUrl, removeTempDataFromStyles } from '../assetUrl'
import { PublicationStatus, PublishableEditor } from './PublicationManager'
import { ClientEvent } from '../events'
import { ProjectData } from 'grapesjs'
import { html, render, TemplateResult } from 'lit-html'
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'

export const cmdPauseAutoSave = 'pause-auto-save'

const loader = document.querySelector('.silex-loader') as HTMLDivElement
if (loader) {
  loader.innerHTML = ''
  render(getLoaderHtml('Loading', 0, 0), loader)
  setTimeout(() => loader.classList.add('silex-loader--active'))
}

function getLoaderHtml(text: string, current: number, total: number): TemplateResult {
  return html`
    <div class="silex-loader__text">
      <div>${ unsafeHTML(text) }</div>
      <progress
        class="silex-loader__progress"
        max="${total}" value="${current}"></progress>
    </div>
  `
}

// Wait for the next frame to avoid blocking the main thread
function nextFrame(): Promise<void> {
  const fn = window.requestIdleCallback ?? window.requestAnimationFrame
  return new Promise(resolve => fn(() => resolve()))
}

// Mechanism to keep only the last save during publication
let lastPendingSaving: WebsiteData = null

// Mechanism to avoid concurrent saving
// Note: there is already such a mechanism in grapesjs but it fails when the save is delayed by the publication
let isSaving = false

export const storagePlugin = (editor: PublishableEditor) => {
  // Add useful commands
  editor.Commands.add(cmdPauseAutoSave, {
    run: () => {
      if(!editor.StorageManager.isAutosave()) throw new Error('Autosave is not enabled')
      editor.StorageManager.setAutosave(false)
    },
    stop: () => {
      editor.editor.set('changesCount', 0)
      editor.UndoManager.clear()
      editor.StorageManager.setAutosave(true)
    },
  })
  // Add the storage connector
  editor.Storage.add('connector', {
    async load(options: { id: WebsiteId, connectorId: ConnectorId }): Promise<ProjectData> {
      try {
        const user: ConnectorUser = await getCurrentUser(editor) ?? await updateUser(editor, ConnectorType.STORAGE, options.connectorId)
        if (!user) throw new ApiError('Not logged in', 401)
        const data = await websiteLoad({ websiteId: options.id, connectorId: user.storage.connectorId }) as WebsiteData
        if (data.assets) data.assets = addTempDataToAssetUrl(data.assets, options.id, user.storage.connectorId)
        if (data.styles) data.styles = addTempDataToStyles(data.styles, options.id, user.storage.connectorId)
        //setTimeout(() => progressiveLoadPages(editor, data))
        if (!data.pages) {
          // This happens when the website was just created
          // Let grapesjs create the pages in the frontend
          return data
        } else {
          await progressiveLoadPages(editor, data)
          return {}
        }
      } catch (err) {
        editor.UndoManager.clear()
        if (err.httpStatusCode === 401) {
          editor.once(eventLoggedIn, async () => {
            try {
              editor.runCommand(cmdPauseAutoSave)
              await editor.Storage.load(options)
              editor.once('canvas:frame:load', () => editor.stopCommand(cmdPauseAutoSave))
            } catch (err) {
              console.error('connectorPlugin load error', err)
              throw err
            }
          })
          editor.Commands.run(cmdLogin)
        }
        console.error('connectorPlugin load error', err)
        throw err
      }
    },

    async store(data: WebsiteData, options: { id: WebsiteId, connectorId: ConnectorId }) {
      // Be sure that it is immutable
      const myData = { ...data }
      return await this.addToQueue(myData, options)
    },

    async addToQueue(data: WebsiteData, options) {
      // Handle concurrent saving
      if (lastPendingSaving && lastPendingSaving !== data) {
        // Cancel previous saving
      }
      lastPendingSaving = data
      // Go ahaed and save
      return this.doStore(lastPendingSaving, options)
    },

    async doStore(data, options) {
      if (editor.PublicationManager.status === PublicationStatus.STATUS_PENDING) {
        // Publication is pending, save is delayed
        return new Promise((resolve) => {
          editor.once(ClientEvent.PUBLISH_END, () => {
            resolve(this.doStore(data, options))
          })
        })
      }
      try {
        if (isSaving) {
          // Concurrent saving, save is delayed
          editor.once('storage:start:store', () => {
            this.doStore(data, options)
          })
        } else {
          if (lastPendingSaving === data) {
            lastPendingSaving = null
            isSaving = true
            const user = await getCurrentUser(editor)
            if (user) {
              data.assets = removeTempDataFromAssetUrl(data.assets)
              data.styles = removeTempDataFromStyles(data.styles)
              await websiteSave({ websiteId: options.id, connectorId: user.storage.connectorId, data })
              isSaving = false
            } else {
              // Not logged in save is delayed
              editor.once(eventLoggedIn, () => {
                isSaving = false
                return editor.Storage.store(data, options)
              })
              editor.Commands.run(cmdLogin)
            }
          } else {
            // Canceled saving
          }
        }
      } catch (err) {
        console.error('connectorPlugin store error', err)
        isSaving = false
        throw err
      }
    }
  })
  // Handle errors
  editor.on('storage:error:load', (err: Error) => {
    handleError(err)
  })
  editor.on('storage:error:store', (err: Error) => {
    handleError(err)
  })
  editor.on('asset:upload:end', (err: Error) => {
    editor.store()
  })
  editor.on('asset:upload:error', (err: Error) => {
    handleError(err)
  })
  function handleError(_err: Error | string) {
    const err: Error = typeof _err === 'string' ? JSON.parse(_err) : _err
    console.error('Error with loading or saving website or uploading asset', err, err instanceof ApiError)
    if (err instanceof ApiError) {
      console.error('ApiError', err.httpStatusCode, err.message)
      switch (err.httpStatusCode) {
      case 404:
        return editor.Modal.open({
          title: 'Website not found',

          content: `This website could not be found.<br><hr>${err.message}`,
        })
      case 403:
        return editor.Modal.open({
          title: 'Access denied',
          content: `You are not allowed to access this website.<br><hr>${err.message}`,
        })
      case 401:
        editor.trigger(eventLoggedOut)
        return
      default:
        return editor.Modal.open({
          title: 'Error',
          content: `An error occured.<br>${err.message}`,
        })
      }
    } else {
      return editor.Modal.open({
        title: 'Error',
        content: `An error occured.<br>${err.message}`,
      })
    }
  }
}

async function progressiveLoadPages(editor: PublishableEditor, data: ProjectData) {
  editor.Pages.getAll().forEach(page => editor.Pages.remove(page))
  const max = data.pages.length + 1
  let i = 0
  for (const page of data.pages) {
    loader && render(getLoaderHtml(`Loading page <strong>${++i}</strong> / ${data.pages.length}`, i, max), loader)
    //await new Promise(resolve => setTimeout(resolve, 1000 * 60 * 1000))
    await nextFrame()
    const newPage = editor.Pages.add({
      ...page,
    })
  }

  // Charger les styles, assets, etc. après les pages
  loader && render(getLoaderHtml('Loading styles and assets', data.pages.length + 1, max), loader)
  if (data.styles) editor.setStyle(data.styles)
  if (data.assets) editor.AssetManager.add(data.assets)

  await nextFrame()
  setTimeout(() => {
    // FIXME: Why is this setTimeout needed?
    editor.trigger('storage:end:load', data)
    editor.trigger('canvas:frame:load', editor)
  })

  // Sélectionner la première page
  const firstPage = editor.Pages.getAll()[0]
  if (firstPage) editor.Pages.select(firstPage)
}