const {
  ipcRenderer,
  contextBridge,
  ipcMain
} = require('electron')

const addEvent = function (el, type, fn) {
  if (el.addEventListener)
    el.addEventListener(type, fn, false);
  else
    el.attachEvent('on' + type, fn);
};

const extend = function (obj, ext) {
  for (var key in ext)
    if (ext.hasOwnProperty(key))
      obj[key] = ext[key];
  return obj;
};

const interact = require('./interact.min.js')
let state = {
  mode: 'init', // 'init', 'standard', 'edit-video'
  editVideo: {

  },
  currentScale: 1,
  translate: {
    translateX: 0,
    translateY: 0
  },
  elements: [

  ],
  workspaceRect: {
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0
  },
  isLocked: false
}

// 撤销/重做历史记录
let history = {
  undoStack: [],
  redoStack: [],
  maxSize: 50
}

// 保存当前状态到历史记录
function saveStateToHistory() {
  // 创建状态快照（深拷贝）
  const snapshot = {
    elements: state.elements.map(el => ({
      path: el.path,
      type: el.type,
      x: parseFloat(el.element.dataset.x) || 0,
      y: parseFloat(el.element.dataset.y) || 0,
      width: el.width,
      height: el.height,
      loopPairs: el.loopPairs,
      activeLoopPair: el.activeLoopPair
    })),
    currentScale: state.currentScale,
    translate: { ...state.translate }
  }
  
  history.undoStack.push(snapshot)
  
  // 限制历史记录大小
  if (history.undoStack.length > history.maxSize) {
    history.undoStack.shift()
  }
  
  // 清空重做栈
  history.redoStack = []
  
  console.log('State saved to history, undo stack size:', history.undoStack.length)
}

// 撤销
function undo() {
  if (history.undoStack.length === 0) {
    console.log('Nothing to undo')
    return
  }
  
  // 保存当前状态到重做栈
  const currentSnapshot = {
    elements: state.elements.map(el => ({
      path: el.path,
      type: el.type,
      x: parseFloat(el.element.dataset.x) || 0,
      y: parseFloat(el.element.dataset.y) || 0,
      width: el.width,
      height: el.height,
      loopPairs: el.loopPairs,
      activeLoopPair: el.activeLoopPair
    })),
    currentScale: state.currentScale,
    translate: { ...state.translate }
  }
  history.redoStack.push(currentSnapshot)
  
  // 恢复上一个状态
  const snapshot = history.undoStack.pop()
  restoreStateFromSnapshot(snapshot)
  
  console.log('Undo performed, undo stack:', history.undoStack.length, 'redo stack:', history.redoStack.length)
}

// 重做
function redo() {
  if (history.redoStack.length === 0) {
    console.log('Nothing to redo')
    return
  }
  
  // 保存当前状态到撤销栈
  const currentSnapshot = {
    elements: state.elements.map(el => ({
      path: el.path,
      type: el.type,
      x: parseFloat(el.element.dataset.x) || 0,
      y: parseFloat(el.element.dataset.y) || 0,
      width: el.width,
      height: el.height,
      loopPairs: el.loopPairs,
      activeLoopPair: el.activeLoopPair
    })),
    currentScale: state.currentScale,
    translate: { ...state.translate }
  }
  history.undoStack.push(currentSnapshot)
  
  // 恢复重做状态
  const snapshot = history.redoStack.pop()
  restoreStateFromSnapshot(snapshot)
  
  console.log('Redo performed, undo stack:', history.undoStack.length, 'redo stack:', history.redoStack.length)
}

// 从快照恢复状态
function restoreStateFromSnapshot(snapshot) {
  // 清除当前所有元素
  state.elements.forEach(el => el.element.remove())
  state.elements = []
  
  // 恢复缩放和平移
  updateScaleAndTranslate(snapshot.currentScale, snapshot.translate)
  
  // 恢复所有元素
  snapshot.elements.forEach(elementData => {
    addMediaWithPath(elementData.path, elementData.type, elementData)
  })
}

let videoExample = {
  loopPairs: [[0, 119], [44, 56]], // can derive A, B, C & color coding from index
  activeLoopPair: 0
}
function closeEditVideo() {
  //state.editVideo.videoElement.removeEventListener('timeupdate', onPlayerProgress)
  state.mode = 'standard'
  updateScaleAndTranslate(state.editVideo.backupState.currentScale, state.editVideo.backupState.translate)
  state.editVideo.video.element.className = state.editVideo.backupState.elementClasses
  document.querySelector('#root').classList.remove('disableBorder')
  document.querySelector('#editVideoTools').classList.add('hide')
  state.editVideo = {}
}

function editVideo(video) {
  console.log('video', video)
  state.mode = 'edit-video'
  document.querySelector('#root').style.cursor = ""
  state.editVideo.video = video
  state.editVideo.backupState = {
    currentScale: state.currentScale,
    translate: Object.assign({}, state.translate),
    elementClasses: video.element.className
  }
  updateScaleAndTranslate(1, {
    translateX: 0,
    translateY: 0
  })

  video.element.className = "editVideo"
  document.querySelector('#root').classList.add('disableBorder')
  document.querySelector('#editVideoTools').classList.remove('hide')

  document.getElementById('eventTrigger').dataset.changesliders = JSON.stringify(video.loopPairs[video.activeLoopPair])

  if (video.type == 'youtube') {
    state.editVideo.videoElement = document.querySelector('.editVideo iframe').contentDocument.querySelector('video')
  } else {
    state.editVideo.videoElement = document.querySelector('.editVideo')
  }

  //state.editVideo.videoElement.addEventListener('timeupdate', onPlayerProgress)
  //

  console.log(video)
}

function onPlayerProgress(e) {
  //am i editvideo?
  //  handle edit stuff
  let sliderPositions = document.querySelectorAll('.noUi-handle')
  let leftSliderPercent = Math.min(sliderPositions[0]['ariaValueText'], sliderPositions[1]['ariaValueText'])
  let rightSliderPercent = Math.max(sliderPositions[0]['ariaValueText'], sliderPositions[1]['ariaValueText'])
  //state.editVideo.video
  let sliderElement = document.querySelector('#slider')
  let currentTimePercent = (this.currentTime / this.duration * 100)

  if (this != state.editVideo.videoElement) {

    let leftPercent = parseFloat(this.dataset.loopLeft)
    let rightPercent = parseFloat(this.dataset.loopRight)
    //console.log('im not edit video',leftPercent, rightPercent)
    if (leftPercent > currentTimePercent) {
      this.currentTime = percentToCurrentTime(leftPercent, this.duration)
      currentTimePercent = (this.currentTime / this.duration * 100)
    }
    if (rightPercent < currentTimePercent) {
      this.currentTime = percentToCurrentTime(leftPercent, this.duration)
      currentTimePercent = (this.currentTime / this.duration * 100)
    }
    return;
  }

  //console.log('im edit video')

  state.editVideo.video.loopPairs[state.editVideo.video.activeLoopPair][0] = leftSliderPercent
  state.editVideo.video.loopPairs[state.editVideo.video.activeLoopPair][1] = rightSliderPercent
  this.dataset.loopLeft = leftSliderPercent
  this.dataset.loopRight = rightSliderPercent

  //console.log(state.editVideo.video.loopPairs, leftSliderPercent, rightSliderPercent)

  if (sliderElement.classList.contains('noUi-state-drag')) {
    dragPercent = parseFloat(sliderElement.querySelector('.noUi-active')['ariaValueNow'])
    this.currentTime = percentToCurrentTime(dragPercent, this.duration)
  } else {
    if (leftSliderPercent > currentTimePercent) {
      this.currentTime = percentToCurrentTime(leftSliderPercent, this.duration)
      currentTimePercent = (this.currentTime / this.duration * 100)
    }
    if (rightSliderPercent < currentTimePercent) {
      //.noUi-state-drag
      if (sliderElement.classList.contains('noUi-state-drag')) {
        this.currentTime = percentToCurrentTime(rightSliderPercent, this.duration)
      } else
        this.currentTime = percentToCurrentTime(leftSliderPercent, this.duration)

      currentTimePercent = (this.currentTime / this.duration * 100)
    }
  }
  let progressBarWidth = sliderElement.getBoundingClientRect().width // 10

  let progressBarTimePosition = progressBarWidth * (currentTimePercent / 100) // 4
  //    transform: translateX(41.4966%);
  document.getElementById('progressbar').style.transform = `translateX(${progressBarTimePosition}px)`
  //sliderElement.style.background = `linear-gradient(90deg, rgba(78,47,102,1) 0%, rgba(91,52,122,1) ${progressBarTimePosition}px, rgba(113,80,136,1) ${progressBarTimePosition}px, rgba(121,76,157,1) 100%)`

}
function percentToCurrentTime(percent, duration) {
  if (percent >= 100) return duration
  if (percent <= 0) return 0
  let ct = (percent * duration) / 100
  console.log("percentToCurrentTime", ct)
  return ct
}

function newScene() {
  document.getElementById('itemHolder').innerHTML = ''
  updateScaleAndTranslate(1, {
    translateX: 0,
    translateY: 0
  });
  initWorkspace()
  refreshWorkspace()

  state.elements = []
  document.querySelector('#welcome').classList.remove("hide")
}

function loadState(loadedState, filePath) {
  // file stuff

  if (state.mode == 'init')
    init();


  newScene()
  updateScaleAndTranslate(loadedState.currentScale, loadedState.translate)

  setTimeout(function () {
    for (var i in loadedState.elements) {
      addMediaWithPath(loadedState.elements[i].path, loadedState.elements[i].type, loadedState.elements[i])
    }
    ipcRenderer.send('loaded-state', filePath)
  }, 1000);
}

document.addEventListener('keydown', evt => {
  if (state.isLocked) return
  mouseObj.keys[evt.key] = true

  if (evt.key === 'Escape') {
    // 取消选择框
    if (mouseObj.selecting) {
      hideSelectionBox()
    }
  } else if (evt.key === 'h' && evt.ctrlKey) {
    evt.preventDefault()
    ipcRenderer.send('show-help')
    console.log('Ctrl+H was pressed')
  } else if (evt.key === 'c' && evt.ctrlKey) {
    evt.preventDefault()
    copySelected()
    console.log('Ctrl+C was pressed')
  } else if (evt.key === 'z' && evt.ctrlKey && !evt.shiftKey) {
    evt.preventDefault()
    undo()
    console.log('Ctrl+Z was pressed (Undo)')
  } else if (evt.key === 'y' && evt.ctrlKey) {
    evt.preventDefault()
    redo()
    console.log('Ctrl+Y was pressed (Redo)')
  } else if (evt.key === 'z' && evt.ctrlKey && evt.shiftKey) {
    evt.preventDefault()
    redo()
    console.log('Ctrl+Shift+Z was pressed (Redo)')
  } else if (evt.key === 'Delete') {
    console.log('delete selected')
    deleteSelected()
  } else if (evt.key === 'v' && evt.ctrlKey) {
    evt.preventDefault()
    ipcRenderer.send('handle-paste')
    console.log('Ctrl+V was pressed');
  } else if (evt.key === 'l' && evt.ctrlKey) {
    evt.preventDefault()
    ipcRenderer.send('trigger-load')
    console.log('Ctrl+L was pressed');
  } else if (evt.key === 's' && evt.ctrlKey) {
    evt.preventDefault()
    ipcRenderer.send('trigger-save')
    console.log('Ctrl+S was pressed');
  } else if (evt.key === 'n' && evt.ctrlKey) {
    evt.preventDefault()
    newScene()
    console.log('Ctrl+N was pressed');
  } else if (evt.key === 'w' && evt.ctrlKey) {
    evt.preventDefault()
    ipcRenderer.send('trigger-close')
    console.log('Ctrl+W was pressed');
  } else if (evt.key === 'f' && evt.ctrlKey) {
    evt.preventDefault()
    ipcRenderer.send('trigger-maximize')
    console.log('Ctrl+F was pressed');
  } else if (evt.key === 'm' && evt.ctrlKey) {
    evt.preventDefault()
    ipcRenderer.send('trigger-minimize')
    console.log('Ctrl+M was pressed');
  } else if (evt.key === ' ' && evt.ctrlKey) {
    mouseObj.ctrlSpace = true;
    console.log('Ctrl+space was pressed');
  } else if (evt.key === ' ') {
    mouseObj.space = true;
  }
});

document.addEventListener('keyup', evt => {
  mouseObj.keys[evt.key] = false
  console.log('keyup', evt.key);
  if (evt.key === ' ' || evt.key == 'Control') {
    mouseObj.ctrlSpace = false;
    console.log('Ctrl+space was released');
    if (evt.key === ' ') {
      mouseObj.space = false;
    }
  }

})

function getSelected() {
  if (document.querySelector('.editVideo')) return { type: 'edit-video' }
  let lastIndex = state.elements.length - 1
  if (!state.elements[lastIndex] || !state.elements[lastIndex].element.classList.contains('selectedItem')) return null

  return state.elements[lastIndex]
}
document.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  console.log(state)
  if (mouseObj.dragging) {
    mouseObj.dragging = false;
    return;
  }


})
let mouseObj = {
  initPos: null,
  initClientPos: null,
  dragging: false,
  ctrlSpace: false,
  space: false,
  keys: new Object(),
  //time dragging & distance dragged
  selecting: false,
  selectionStart: null
}
document.addEventListener('mousedown', (e) => {
  if (state.isLocked) return
  mouseObj.initPos = { x: e.clientX, y: e.clientY }
  mouseObj.initClientPos = { x: e.screenX, y: e.screenY }
  mouseObj.initTranslate = { x: (parseFloat(document.body.dataset.translateX) || 0), y: (parseFloat(document.body.dataset.translateY) || 0) }
  ipcRenderer.send('record-window-size', window.innerHeight, window.innerHeight)
  mouseObj.dragging = false
  
  // 左键点击空白区域开始选择（不按任何修饰键）
  if (e.button === 0 && !mouseObj.keys[' '] && !mouseObj.keys['Control'] && 
      (e.target.id === 'root' || e.target.id === 'workspaceBox' || e.target.id === 'itemHolder')) {
    mouseObj.selecting = true
    mouseObj.selectionStart = { x: e.clientX, y: e.clientY }
  }
})
document.addEventListener('mousemove', (e) => {
  if (state.isLocked) return

  // 处理选择框拖动
  if (mouseObj.selecting && e.buttons === 1) {
    updateSelectionBox(e.clientX, e.clientY)
    e.preventDefault()
    return
  }

  // ctrl + space + mouse drag = zoom 
  if (e.buttons == 1 && mouseObj.keys[' '] && mouseObj.keys['Control']) {
    //console.log(`handleZoom(${e.movementX})`);
    handleZoom(e.movementX, mouseObj.initPos.x, mouseObj.initPos.y)
    e.preventDefault()
  } else if (e.buttons == 1 && mouseObj.space) {
    e.preventDefault()
    handleMove(e.movementX, e.movementY)
  } else if (e.buttons == 4) { // middle mouse drag = move
    e.preventDefault()
    handleMove(e.movementX, e.movementY)
  } else if (e.buttons == 2) {
    e.preventDefault()
    ipcRenderer.send('move-electron-window', e.screenX, e.screenY, mouseObj.initPos)
    mouseObj.dragging = true;

  }

})
function handleMove(dX, dY) {
  currentScale = parseFloat(document.body.dataset.currentScale) || 1


  let translateX = (parseFloat(document.body.dataset.translateX) || 0);
  let translateY = (parseFloat(document.body.dataset.translateY) || 0);//(parseFloat(document.body.dataset.translateY) || 0);
  translateX += dX
  translateY += dY //- mouseObj.initTranslate.y 

  updateScaleAndTranslate(currentScale, { translateX, translateY })
}

function handleZoom(_delta, clientX, clientY) {
  if (document.querySelector('.editVideo')) return;
  currentScale = parseFloat(document.body.dataset.currentScale) || 1
  let delta = _delta / 60

  const nextScale = Math.max(currentScale + delta * (currentScale / 2), 0.01)
  const ratio = 1 - nextScale / currentScale
  let translateX = (parseFloat(document.body.dataset.translateX) || 0);
  let translateY = (parseFloat(document.body.dataset.translateY) || 0);

  translateX += (clientX - translateX) * ratio
  translateY += (clientY - translateY) * ratio

  currentScale = nextScale
  updateScaleAndTranslate(currentScale, { translateX, translateY })
  //zoom(nextScale, e)
}
document.addEventListener('mouseup', (e) => {
  if (state.isLocked) return
  
  // 处理选择框结束
  if (mouseObj.selecting) {
    finishSelection()
    hideSelectionBox()
    if (e.button === 0) {
      return
    }
  }
  
  console.log(e.button, mouseObj.dragging)
  if (e.button == 2) {
    if (mouseObj.dragging) {

      distance = Math.sqrt(
        Math.pow(e.screenX - mouseObj.initClientPos.x, 2)
        +
        Math.pow(e.screenY - mouseObj.initClientPos.y, 2));
      console.log(distance)
      if (distance < 4) {

        ipcRenderer.send('show-context-menu', getSelected()?.type || "void")
      }
      mouseObj.dragging = false;

    } else {
      ipcRenderer.send('show-context-menu', getSelected()?.type || "void")
    }
  }
})
ipcRenderer.on('close-edit-video', (event, newState) => {
  closeEditVideo()
})
ipcRenderer.on('edit-video', (event, newState) => {
  editVideo(getSelected())
})
ipcRenderer.on('new-scene', (event) => {
  newScene()
})
ipcRenderer.on('load-scene', (event, newState, filePath) => {
  loadState(newState, filePath)
})
ipcRenderer.on('lock-window', (event) => {
  state.isLocked = true
  document.body.classList.add('locked')
  clearAllSelected() // 取消所有选中的对象
})
ipcRenderer.on('unlock-window', (event) => {
  state.isLocked = false
  document.body.classList.remove('locked')
})
ipcRenderer.on('save-scene', (event, filePath) => {
  var stateCopy = JSON.parse(JSON.stringify(state));
  for (var i = 0; i < stateCopy.elements.length; i++) {
    //stateCopy.elements.push()
    delete stateCopy.elements[i].element;
  }
  console.log(stateCopy)
  ipcRenderer.send('save-scene', filePath, stateCopy)
})
ipcRenderer.on('clipboard', (event, msg) => {
  let payload = JSON.parse(msg);
  console.log(payload)
  if (/youtube.com\/.*v=([^\?]*)/.test(payload[payload.type])) {
    addMediaWithPath(payload[payload.type], "youtube")
  } else
    addMediaWithPath(payload[payload.type], payload.type)
})
function getCenterOfWindowScaled() {
  const width = window.innerWidth;
  const height = window.innerHeight;

  const widthScaled = (width / 2) / state.currentScale;
  const heightScaled = (height / 2) / state.currentScale;
  return {
    centerX: (-state.translate.translateX / state.currentScale) + widthScaled,
    centerY: (-state.translate.translateY / state.currentScale) + heightScaled
  };
}
function addMediaWithPath(path, type = 'img', loadedState) {
  isNewElement = loadedState == null
  let centerWin = getCenterOfWindowScaled();
  loadedState = loadedState || { x: centerWin.centerX, y: centerWin.centerY, width: null, height: null }
  if (state.mode == 'init') init();
  if (!document.querySelector('#welcome').classList.contains("hide"))
    document.querySelector('#welcome').classList.add("hide");
  let itemHolder = document.getElementById('itemHolder')

  let mediaElement = undefined
  if (type == 'img' || type == 'dataURL' || type == 'filePath') {
    mediaElement = document.createElement('img')
    if (isNewElement)
      mediaElement.style.opacity = 0;
    mediaElement.addEventListener('load', function loaded() {
      let { x, y, width, height } = this.getClientRects()[0]
      if (isNewElement) {

        //loadedState.x = centerWin.centerX - width / 2
        //loadedState.y = centerWin.centerY - height / 2
        mediaElement.style.opacity = 1;
        setTransformForElement(mediaElement.dataset.zIndex, -width / 2, -height / 2, width, height)
      }
      resizeWorkspaceToFitObj(loadedState.x, loadedState.y, width, height)

    })
    mediaElement.src = path;
  } else if (type == 'video') {
    mediaElement = document.createElement('video')
    mediaElement.autoplay = true;
    mediaElement.loop = true;
    mediaElement.muted = true;

    let srcElement = document.createElement('source')
    srcElement.src = path;
    mediaElement.appendChild(srcElement)
  } else if (type == 'youtube') {
    //mediaElement = document.createElement('iframe')
    if (/youtube.com\/.*v=([^\?]*)/.test(path)) {

      var code = extractYoutubeId(path)
      if (code == null) return;
      mediaElement = document.createElement('div')
      mediaElement.classList.add('youtubePlayer')
      mediaElement.classList.add('playerNeedsSetup')
      mediaElement.dataset.idcode = code

      mediaElement.style.width = (loadedState.width || 640) + "px";
      mediaElement.style.height = (loadedState.height || 360) + "px";

      //mediaElement.style.background = 'red'
      var iframeDiv = document.createElement('div')
      iframeDiv.classList.add('iframeDiv')
      mediaElement.appendChild(iframeDiv)
      document.getElementById('eventTrigger').dataset.youtubetrigger = Date.now()
      /*
      mediaElement.src = 
      `https://www.youtube.com/embed/${code}?` +//&autoplay=1` +
      `&controls=0&disablekb=1&enablejsapi=1&fs=0&loop=1` +
      `&origin=${window.location.href}`
      mediaElement.frameBorder = "0"
      mediaElement.allowFullscreen = false;
      */
    }
  } else if (type == "text") {
    mediaElement = document.createElement('div')
    mediaElement.classList.add('textElement')
    mediaElement.innerText = path

    console.log("isNewElement", isNewElement)
    if (isNewElement) {
      /*
      mediaElement.style.fontSize = '1ch' // 1ch is the width of the 0 character
      mediaElement.style.opacity = 0
      document.body.appendChild(mediaElement)
      let { x, y, width: widthOnDom, height: heightOnDom } = mediaElement.getClientRects()[0]

      document.body.removeChild(mediaElement)
      const windowWidth = window.innerWidth

      const fontScaleFactor = windowWidth / widthOnDom
      newWidth = windowWidth / state.currentScale
      newHeight = (heightOnDom * (windowWidth / widthOnDom)) / state.currentScale

      mediaElement.style.opacity = 1
      mediaElement.style.fontSize = fontScaleFactor + "ch"
      mediaElement.style.width = newWidth + "px";
      mediaElement.style.height = newHeight + "px";
      */
      
      const { width: newWidth, height: newHeight } = adjustFontSize2(mediaElement, path)
      loadedState.x = centerWin.centerX - (newWidth / state.currentScale / 2)
      loadedState.y = centerWin.centerY - (newHeight / state.currentScale / 2)

      loadedState.width = newWidth
      loadedState.height = newHeight
    } else {
      //debugger;
      const { width: newWidth, height: newHeight } = adjustFontSize2(mediaElement, path, loadedState.width)
      oldRatio = loadedState.width / loadedState.height
      console.log("oldRatio", oldRatio, "newRatio", newWidth / newHeight)
      mediaElement.style.width = loadedState.width + "px";
      mediaElement.style.height = newHeight + "px";
      loadedState.width = newWidth
      loadedState.height = newHeight
    }
    mediaElement.width = loadedState.width
    mediaElement.height = loadedState.height

  } else {
    alert('unsupported media type')
    return;
  }
  mediaElement.classList.add('draggable')

  zIndex = state.elements.length;
  mediaElement.style.zIndex = zIndex
  mediaElement.dataset.zIndex = zIndex
  mediaElement.dataset.x = loadedState.x
  mediaElement.dataset.y = loadedState.y
  if (loadedState.width != null && loadedState.height != null) {
    mediaElement.width = loadedState.width
    mediaElement.height = loadedState.height
  }
  let mediaObj = {
    path: path,
    type: type,
    element: mediaElement,
    width: loadedState.width,
    height: loadedState.height
  }
  if (type == 'youtube' || type == 'video') {
    mediaObj.loopPairs = loadedState.loopPairs || [[0, 100]] // 0% & 100% positions for loop
    mediaObj.activeLoopPair = loadedState.activeLoopPair || 0
  }

  state.elements.push(mediaObj)
  if (type == 'video') {
    mediaObj.element.dataset.loopLeft = mediaObj.loopPairs[mediaObj.activeLoopPair][0]
    mediaObj.element.dataset.loopRight = mediaObj.loopPairs[mediaObj.activeLoopPair][1]
    mediaObj.element.addEventListener('timeupdate', onPlayerProgress)
  }

  itemHolder.appendChild(mediaElement)

  //debugger;
  if (type == 'text') {
    //setTransformForElement(zIndex, 0, 0, loadedState.width, loadedState.height)
    console.log("loadedState", loadedState, mediaElement)
    setTransformForElement(zIndex)

    //adjustFontSize2(mediaElement, path, loadedState.width)
  } else
    setTransformForElement(zIndex)
  
  // 保存历史记录（仅在添加新元素时，不在恢复状态时）
  if (isNewElement) {
    saveStateToHistory()
  }
}
function adjustFontSize2(mediaElement, text, maxWidth = window.innerWidth) {
  temp = document.createElement('div')
  temp.style.fontSize = '1ch' // 1ch is the width of the 0 character
  temp.style.position = 'absolute'
  temp.style.opacity = 0
  temp.style.color = "white"
  temp.style.whiteSpace = "nowrap"
  temp.innerText = text
  document.getElementById('hiddenTextTester').appendChild(temp)
  let { x, y, width: widthOnDom, height: heightOnDom } = temp.getClientRects()[0]

  newRatio = widthOnDom / heightOnDom
  console.log("widthOnDom", widthOnDom, "HeightOnDom", heightOnDom, temp.clientWidth, temp.clientHeight, newRatio)
  document.getElementById('hiddenTextTester').removeChild(temp)
  const windowWidth = maxWidth

  const fontScaleFactor = (maxWidth / widthOnDom) //* state.currentScale
  //const fontScaleFactorScaled = fontScaleFactor / state.currentScale
  newWidth = maxWidth
  //newWidthScaled = newWidth / state.currentScale
  newHeight = (heightOnDom * fontScaleFactor)
  //newHeightScaled = newHeight / state.currentScale
  console.log("Adjustfont2", fontScaleFactor, state.currentScale)
  mediaElement.style.opacity = 1
  mediaElement.style.fontSize = fontScaleFactor * state.currentScale + "ch"
  mediaElement.style.width = newWidth + "px";
  mediaElement.style.height = newHeight + "px";

  return { width: newWidth, height: newHeight }
}

document.addEventListener('drop', (event) => {
  if (state.isLocked) return
  event.preventDefault();
  event.stopPropagation();
  // Todo check if file is valid

  for (const f of event.dataTransfer.files) {
    // Using the path attribute to get absolute file path
    console.log('File Path of dragged files: ', f.path, state)

    if (f.path.endsWith('.mp4')) {
      addMediaWithPath(f.path, 'video')
    } else {
      // 发送文件路径到主进程，让主进程转换为 base64
      ipcRenderer.send('convert-file-to-dataurl', f.path)
    }
  }
});

// 接收主进程转换后的 dataURL
ipcRenderer.on('file-converted-to-dataurl', (event, dataURL) => {
  console.log('Received dataURL from main process')
  addMediaWithPath(dataURL, 'dataURL')
});
function init() {
  document.documentElement.addEventListener('mousedown', (event) => {
    var target = event.target
    //console.log('click', target)

    if (target.id == 'root' || target.id == 'workspaceBox') {
      console.log('background click')
      clearAllSelected()
    }
  })
  state.mode = 'standard'
}

document.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.stopPropagation();
});
function extractYoutubeId(path) {
  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
  var capture = path.match(regExp)//path.match(/v=([^\?]*)/);

  return capture[7]
}

function clampWorkspaceTranslate(ratio, newTranslate) {
  let { translateX, translateY } = newTranslate

  let windowElement = document.getElementById('root')
  let windowWidth = windowElement.clientWidth
  let windowHeight = windowElement.clientHeight

  if (-(translateX) > state.workspaceRect.x2 * ratio) { //workspace off screen to left
    console.log('workspace off screen to left')
    translateX = -(state.workspaceRect.x2 * ratio)
  }
  else if ((translateX) + (state.workspaceRect.x1 * ratio) > windowWidth) { // workspace off screen to right
    console.log('workspace off screen to right')
    translateX = windowWidth - (state.workspaceRect.x1 * ratio)
  }

  if (-(translateY) > state.workspaceRect.y2 * ratio) { // workspace off screen to top
    console.log('workspace off screen to top')
    translateY = -(state.workspaceRect.y2 * ratio)
  }
  else if ((translateY) + (state.workspaceRect.y1 * ratio) > windowHeight) { // workspace off screen to bottom
    console.log('workspace off screen to bottom')
    translateY = windowHeight - (state.workspaceRect.y1 * ratio)
  }
  return { translateX: translateX, translateY: translateY }
}

function updateScaleAndTranslate(newScale, newTranslate) {
  if (newScale > 2) {
    state.currentScale = 2
    return;
  }

  newTranslate = clampWorkspaceTranslate(newScale, newTranslate)
  state.currentScale = newScale
  state.translate = newTranslate
  document.body.style.transform = `translate(${state.translate.translateX}px, ${state.translate.translateY}px) scale(${state.currentScale})`
  document.body.dataset.currentScale = state.currentScale
  document.body.dataset.translateX = state.translate.translateX
  document.body.dataset.translateY = state.translate.translateY
  const ROOTCSS = document.querySelector(':root');
  ROOTCSS.style.setProperty('--scale', newScale);
  //window.currentScale = state.currentScale;
}

let objPlayground = { hi: 'yo' };
contextBridge.exposeInMainWorld('myAPI', {
  updateScaleAndTranslate: updateScaleAndTranslate,
  updateYoutubeOriginalSize: (idcode, w, h) => {
    for (var i in state.elements) {
      if (state.elements[i].type == 'youtube' && extractYoutubeId(state.elements[i].path) == idcode) {

        state.elements[i].width = state.elements[i].width || w;
        state.elements[i].height = state.elements[i].height || h;

        state.elements[i].element.style.width = state.elements[i].width
        state.elements[i].element.style.height = state.elements[i].height

        let videoElement = state.elements[i].element.querySelector('iframe').contentDocument.querySelector('video');
        videoElement.dataset.loopLeft = state.elements[i].loopPairs[state.elements[i].activeLoopPair][0]
        videoElement.dataset.loopRight = state.elements[i].loopPairs[state.elements[i].activeLoopPair][1]
        videoElement.addEventListener('timeupdate', onPlayerProgress)
        console.log(state.elements[i])
      }
    }

  },
  objPlayground: objPlayground

})

interact('.draggable')
  .draggable({
    listeners: { 
      move: dragMoveListener,
      end: function(event) {
        // 拖动结束时保存历史记录
        saveStateToHistory()
      }
    },
    inertia: false,
  }).on('tap', function (event) {
    var target = event.target

    handleSelected(target)
    //
    event.preventDefault()
  })
function isMouseInBlockingState() {
  if (mouseObj.keys[' '] && mouseObj.keys['Control']) {
    return true
  } else if (mouseObj.keys[' ']) {
    return true
  }
  return false
}
interact('.selectedItem').resizable({
  // resize from all edges and corners
  //allowFrom: '.selectedItem',
  edges: { left: true, right: true, bottom: true, top: true },
  ratio: 1,
  enabled: true,
  margin: 4,
  listeners: [{
    move(event) {
      if (isMouseInBlockingState()) return;
      var target = event.target
      //handleSelected(target, true)
      console.log('resize')

      if (target.classList.contains('textElement')) {
        adjustFontSize2(target, target.innerText, event.rect.width)
      }
      setTransformForElement(target.dataset.zIndex, event.deltaRect.left, event.deltaRect.top, event.rect.width, event.rect.height)
      forceRedraw()
    },
    end(event) {
      // 调整大小结束时保存历史记录
      saveStateToHistory()
    }
  }],
  modifiers: [
    interact.modifiers.aspectRatio({
      // make sure the width is always double the height
      ratio: 'preserve',
      // also restrict the size by nesting another modifier
    }),
    // minimum size
    interact.modifiers.restrictSize({
      min: { width: 10 }
    })
  ],
  inertia: true
}).draggable({
  listeners: { 
    move: dragMoveListener,
    end: function(event) {
      // 拖动结束时保存历史记录
      saveStateToHistory()
    }
  },
  inertia: false
}).on('tap', function (event) {

  var target = event.target
  handleSelected(target)
  //
  event.preventDefault()
})

function copySelected() {
  if (state.elements.length == 0) return
  
  // 获取所有选中的元素
  const selectedElements = state.elements.filter(el => 
    el.element.classList.contains('selectedItem')
  )
  
  if (selectedElements.length === 0) return
  
  console.log('Copying', selectedElements.length, 'selected element(s)')
  
  // 如果只选中一个元素
  if (selectedElements.length === 1) {
    const selectedElement = selectedElements[0]
    
    if (selectedElement.type === 'text') {
      // 文本元素：复制文本内容
      ipcRenderer.send('copy-text', selectedElement.element.innerText)
      console.log('Copying text:', selectedElement.element.innerText)
    } else if (selectedElement.type === 'img' || selectedElement.type === 'dataURL' || selectedElement.type === 'filePath') {
      // 图片元素：使用 Canvas 转换为高质量 PNG dataURL
      copyImageToClipboard(selectedElement)
    } else if (selectedElement.type === 'video' || selectedElement.type === 'youtube') {
      // 视频元素：复制路径或链接
      ipcRenderer.send('copy-text', selectedElement.path)
      console.log('Copying video path:', selectedElement.path)
    }
  } else {
    // 多个元素：将所有图片合并到一个画布上
    copyMultipleImages(selectedElements)
  }
}

function copyImageToClipboard(selectedElement) {
  try {
    const img = selectedElement.element
    const imgSrc = img.src || selectedElement.path
    
    console.log('Copying image - type:', selectedElement.type)
    console.log('Image src:', imgSrc.substring(0, 100))
    
    // 检查是否是 GIF（通过 dataURL 或文件扩展名）
    const isGif = imgSrc.startsWith('data:image/gif') || 
                  imgSrc.toLowerCase().endsWith('.gif') ||
                  (selectedElement.path && selectedElement.path.toLowerCase().endsWith('.gif'))
    
    if (isGif && imgSrc.startsWith('data:')) {
      // 如果是 GIF 的 dataURL，直接使用原始数据
      console.log('Copying GIF with original data (preserving animation)')
      ipcRenderer.send('copy-image', imgSrc)
    } else if (selectedElement.type === 'dataURL' && imgSrc.startsWith('data:')) {
      // 如果是其他格式的 dataURL，也直接使用
      console.log('Copying image with original dataURL')
      ipcRenderer.send('copy-image', imgSrc)
    } else {
      // 对于非 dataURL 的图片，使用 Canvas 转换
      const canvas = document.createElement('canvas')
      canvas.width = img.naturalWidth || img.width
      canvas.height = img.naturalHeight || img.height
      
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      
      // 转换为 PNG 格式的 dataURL
      const pngDataURL = canvas.toDataURL('image/png')
      
      console.log('Copying image converted to PNG, size:', canvas.width, 'x', canvas.height)
      ipcRenderer.send('copy-image', pngDataURL)
    }
  } catch (err) {
    console.error('Error copying image:', err)
    // 降级方案：直接使用原始路径
    const imgSrc = selectedElement.element.src || selectedElement.path
    ipcRenderer.send('copy-image', imgSrc)
  }
}

async function copyMultipleImages(selectedElements) {
  try {
    // 过滤出图片元素
    const imageElements = selectedElements.filter(el => 
      el.type === 'img' || el.type === 'dataURL' || el.type === 'filePath'
    )
    
    if (imageElements.length === 0) {
      console.log('No images to copy')
      return
    }
    
    console.log('Copying', imageElements.length, 'images')
    
    // 收集所有图片的原始数据（保持 GIF 动画）
    const imageDataURLs = []
    
    for (const el of imageElements) {
      try {
        const img = el.element
        const imgSrc = img.src || el.path
        
        // 检查是否是 GIF
        const isGif = imgSrc.startsWith('data:image/gif') || 
                      imgSrc.toLowerCase().endsWith('.gif') ||
                      (el.path && el.path.toLowerCase().endsWith('.gif'))
        
        if (isGif && imgSrc.startsWith('data:')) {
          // GIF dataURL - 直接使用原始数据
          console.log('  Preserving GIF animation for element')
          imageDataURLs.push(imgSrc)
        } else if (el.type === 'dataURL' && imgSrc.startsWith('data:')) {
          // 其他 dataURL - 直接使用
          console.log('  Using original dataURL for element')
          imageDataURLs.push(imgSrc)
        } else {
          // 其他格式 - 转换为 PNG
          const canvas = document.createElement('canvas')
          canvas.width = img.naturalWidth || img.width
          canvas.height = img.naturalHeight || img.height
          
          const ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
          
          const pngDataURL = canvas.toDataURL('image/png')
          console.log('  Converted to PNG for element')
          imageDataURLs.push(pngDataURL)
        }
      } catch (err) {
        console.error('Error processing image:', err)
      }
    }
    
    if (imageDataURLs.length === 0) {
      console.log('No valid images to copy')
      return
    }
    
    // 发送到主进程处理
    console.log('Sending', imageDataURLs.length, 'images to main process')
    ipcRenderer.send('copy-multiple-images', imageDataURLs)
    
  } catch (err) {
    console.error('Error copying multiple images:', err)
    ipcRenderer.send('copy-text', '复制多张图片失败: ' + err.message)
  }
}

function deleteSelected() {
  if (state.elements.length == 0) return

  // 收集所有选中的元素
  const selectedElements = state.elements.filter(el => 
    el.element.classList.contains('selectedItem')
  )
  
  if (selectedElements.length === 0) return
  
  console.log('Deleting', selectedElements.length, 'selected element(s)')
  
  // 保存历史记录
  saveStateToHistory()
  
  // 删除所有选中的元素
  selectedElements.forEach(elementObj => {
    // 从 DOM 中移除
    elementObj.element.remove()
    
    // 从 state.elements 数组中移除
    const index = state.elements.indexOf(elementObj)
    if (index > -1) {
      state.elements.splice(index, 1)
    }
  })
  
  // 重新设置所有剩余元素的 zIndex
  state.elements.forEach((elementObj, index) => {
    elementObj.element.style.zIndex = index
    elementObj.element.dataset.zIndex = index
  })
  
  clearAllSelected()
}

function clearAllSelected() {
  document.querySelectorAll('.selectedItem').forEach((elm) => {
    elm.classList.remove('selectedItem')
    elm.classList.add('draggable')
  })
}

function handleSelected(target, dragging = false) {
  if (isMouseInBlockingState()) return;

  clearAllSelected()
  target.classList.remove('draggable')
  target.classList.add('selectedItem')

  if (state.elements.length > 1) {
    let targetIndex = parseInt(target.dataset.zIndex);

    state.elements.push(state.elements.splice(targetIndex, 1)[0]);
    for (var i = targetIndex; i < state.elements.length; i++) { // i can start at targetIndex
      state.elements[i].element.style.zIndex = i;
      state.elements[i].element.dataset.zIndex = i;
    }
  }
}

function dragMoveListener(event) {
  if (isMouseInBlockingState()) return;
  var target = event.target
  handleSelected(target, true)
  setTransformForElement(target.dataset.zIndex, event.dx, event.dy)
  forceRedraw()
}

function resizeWorkspaceToFitObj(x, y, width, height) {
  if (width == 0 || height == 0) return
  state.workspaceRect.x1 = Math.min(x, state.workspaceRect.x1)
  state.workspaceRect.y1 = Math.min(y, state.workspaceRect.y1)

  state.workspaceRect.x2 = Math.max(x + width, state.workspaceRect.x2)
  state.workspaceRect.y2 = Math.max(y + height, state.workspaceRect.y2)
  refreshWorkspace()
}

function initWorkspace() {
  state.workspaceRect = {
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0
  }
}

function refreshWorkspace() {
  const element = document.getElementById('workspaceBox');
  element.style.left = state.workspaceRect.x1 + "px";
  element.style.top = state.workspaceRect.y1 + "px";
  element.style.width = (state.workspaceRect.x2 - state.workspaceRect.x1) + "px"
  element.style.height = (state.workspaceRect.y2 - state.workspaceRect.y1) + "px"

}

function setTransformForElement(elementIndex, dx = 0, dy = 0, width = null, height = null) {
  let elementObj = state.elements[elementIndex]
  let x = (parseFloat(elementObj.element.dataset.x) || 0) + (dx / state.currentScale)
  let y = (parseFloat(elementObj.element.dataset.y) || 0) + (dy / state.currentScale)

  elementObj.element.setAttribute('data-x', x)
  elementObj.element.setAttribute('data-y', y)
  elementObj.x = x
  elementObj.y = y

  if (width != null && height != null) {
    elementObj.width = width / state.currentScale
    elementObj.height = height / state.currentScale
    elementObj.element.style.width = width / state.currentScale + 'px'
    elementObj.element.style.height = height / state.currentScale + 'px'
  }

  resizeWorkspaceToFitObj(x, y, elementObj.width || elementObj.element.width, elementObj.height || elementObj.element.height)

  elementObj.element.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
}

function forceRedraw() {
  if (document.body.parentElement.style.backgroundColor == '') {
    document.body.parentElement.style.backgroundColor = '#04040400'
  } else {
    document.body.parentElement.style.backgroundColor = ''
  }
}

// 选择框相关函数
function hideSelectionBox() {
  const selectionBox = document.getElementById('selectionBox')
  if (selectionBox) {
    selectionBox.style.display = 'none'
    selectionBox.style.width = '0px'
    selectionBox.style.height = '0px'
  }
  mouseObj.selecting = false
  mouseObj.selectionStart = null
  mouseObj.selectionWorldRect = null
}

function updateSelectionBox(currentX, currentY) {
  const selectionBox = document.getElementById('selectionBox')
  if (!selectionBox || !mouseObj.selectionStart) return
  
  // 将屏幕坐标转换为世界坐标（body 内的坐标系统）
  const startWorldX = (mouseObj.selectionStart.x - state.translate.translateX) / state.currentScale
  const startWorldY = (mouseObj.selectionStart.y - state.translate.translateY) / state.currentScale
  const currentWorldX = (currentX - state.translate.translateX) / state.currentScale
  const currentWorldY = (currentY - state.translate.translateY) / state.currentScale
  
  const worldLeft = Math.min(startWorldX, currentWorldX)
  const worldTop = Math.min(startWorldY, currentWorldY)
  const worldWidth = Math.abs(currentWorldX - startWorldX)
  const worldHeight = Math.abs(currentWorldY - startWorldY)
  
  // 直接使用世界坐标，因为选择框在 body 内，会自动应用 body 的 transform
  selectionBox.style.left = worldLeft + 'px'
  selectionBox.style.top = worldTop + 'px'
  selectionBox.style.width = worldWidth + 'px'
  selectionBox.style.height = worldHeight + 'px'
  selectionBox.style.display = 'block'
  
  // 保存世界坐标用于后续检测
  mouseObj.selectionWorldRect = {
    left: worldLeft,
    top: worldTop,
    right: worldLeft + worldWidth,
    bottom: worldTop + worldHeight
  }
}

function finishSelection() {
  const selectionBox = document.getElementById('selectionBox')
  if (!selectionBox || !mouseObj.selectionWorldRect) return
  
  // 清除之前的选择
  clearAllSelected()
  
  // 检查每个元素是否与选择框相交（使用世界坐标）
  let selectedElements = []
  state.elements.forEach((elementObj, index) => {
    // 获取元素的世界坐标
    const elemX = parseFloat(elementObj.element.dataset.x) || 0
    const elemY = parseFloat(elementObj.element.dataset.y) || 0
    const elemWidth = elementObj.width || elementObj.element.width || 0
    const elemHeight = elementObj.height || elementObj.element.height || 0
    
    const elementWorldRect = {
      left: elemX,
      top: elemY,
      right: elemX + elemWidth,
      bottom: elemY + elemHeight
    }
    
    // 检查矩形是否相交
    if (isRectIntersecting(mouseObj.selectionWorldRect, elementWorldRect)) {
      selectedElements.push(index)
    }
  })
  
  // 选中所有相交的元素
  if (selectedElements.length > 0) {
    // 将最后一个选中的元素移到最上层
    const lastIndex = selectedElements[selectedElements.length - 1]
    handleSelected(state.elements[lastIndex].element)
    
    // 标记其他选中的元素
    selectedElements.slice(0, -1).forEach(index => {
      state.elements[index].element.classList.add('selectedItem')
      state.elements[index].element.classList.remove('draggable')
    })
  }
  
}

function isRectIntersecting(rect1, rect2) {
  return !(rect1.right < rect2.left || 
           rect1.left > rect2.right || 
           rect1.bottom < rect2.top || 
           rect1.top > rect2.bottom)
}


window.addEventListener('load', (event) => {
  setTimeout(function () {
    console.log('page is fully loaded');
    ipcRenderer.send('ready')
  }, 2000);

});

// 窗口获得焦点时重置键盘状态
window.addEventListener('focus', () => {
  console.log('Window focused - resetting keyboard state')
  mouseObj.keys = new Object()
  mouseObj.ctrlSpace = false
  mouseObj.space = false
  // 如果有未完成的选择，清理它
  if (mouseObj.selecting) {
    hideSelectionBox()
  }
});

// 窗口失去焦点时重置键盘状态
window.addEventListener('blur', () => {
  console.log('Window blurred - resetting keyboard state')
  mouseObj.keys = new Object()
  mouseObj.ctrlSpace = false
  mouseObj.space = false
  // 如果有未完成的选择，清理它
  if (mouseObj.selecting) {
    hideSelectionBox()
  }
});