<script setup>
import PagedJsWrapper from './components/PagedJsWrapper.vue';
import EditorPanel from './components/editor/EditorPanel.vue';
import ElementPopup from './components/ElementPopup.vue';
// import PagePopup from './components/PagePopup.vue'; // DISABLED: page template styling feature
import PreviewLoader from './components/PreviewLoader.vue';
import SaveButton from './components/SaveButton.vue';
import { onMounted, ref, computed, provide } from 'vue';
import { useStylesheetStore } from './stores/stylesheet';
import { useNarrativeStore } from './stores/narrative';
import { useKeyboardShortcuts } from './composables/useKeyboardShortcuts';
import { useIframeInteractions } from './composables/useIframeInteractions';
import { usePreviewRenderer } from './composables/usePreviewRenderer';
import { usePrintPreview } from './composables/usePrintPreview';

const stylesheetStore = useStylesheetStore();
const narrativeStore = useNarrativeStore();

const previewFrame1 = ref(null);
const previewFrame2 = ref(null);
const elementPopup = ref(null);
// const pagePopup = ref(null); // DISABLED: page template styling feature
const activeTab = ref('');

provide('activeTab', activeTab);

// Setup iframe interactions (hover, click, labels)
const {
  // hoveredPage, // DISABLED: page template styling feature
  // selectedPages, // DISABLED: page template styling feature
  hoveredElement,
  selectedElement,
  handleIframeMouseMove,
  handleIframeClick,
  // handlePagePopupClose, // DISABLED: page template styling feature
  handleElementPopupClose,
} = useIframeInteractions({ elementPopup });

// Setup preview renderer with double buffering
const {
  renderPreview,
  currentFrameIndex,
  isTransitioning,
  setKeyboardShortcutHandler,
} = usePreviewRenderer({
  previewFrame1,
  previewFrame2,
  stylesheetStore,
  narrativeStore,
  handleIframeMouseMove,
  handleIframeClick,
});

const activeFrame = computed(() => {
  return currentFrameIndex.value === 1
    ? previewFrame1.value
    : previewFrame2.value;
});

// Setup print preview
const { printPreview } = usePrintPreview(activeFrame);

// Setup keyboard shortcuts (depends on printPreview)
const {
  handleKeyboardShortcut,
  isMac
} = useKeyboardShortcuts({
  stylesheetStore,
  elementPopup,
  // pagePopup, // DISABLED: page template styling feature
  activeTab,
  printPreview,
});

// Attach keyboard shortcut handler to renderer
setKeyboardShortcutHandler(handleKeyboardShortcut);

// Lifecycle: Initialize app on mount
onMounted(async () => {
  // Load narrative data (narrativeUrl constructed from location, always present)
  await narrativeStore.loadNarrative(location.href + '.json');

  // Initialize stylesheet with custom CSS
  if (narrativeStore.data) {
    await stylesheetStore.initializeFromNarrative(narrativeStore.data);
  }

  // Render preview after data is loaded
  renderPreview(true);
});
</script>

<template>
  <div id="content-source" style="display: none">
    <PagedJsWrapper />
  </div>

  <EditorPanel />

  <iframe
    ref="previewFrame1"
    class="preview-frame"
    :class="{ shifted: activeTab.length > 0 }"
  ></iframe>
  <iframe
    ref="previewFrame2"
    class="preview-frame"
    :class="{ shifted: activeTab.length > 0 }"
  ></iframe>

  <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />

  <SaveButton />

  <ElementPopup
    ref="elementPopup"
    :iframeRef="activeFrame"
    @close="handleElementPopupClose"
  />
  <!-- DISABLED: page template styling feature
  <PagePopup
    ref="pagePopup"
    :iframeRef="activeFrame"
    @close="handlePagePopupClose"
  />
  -->

  <button class="print-btn" @click="printPreview" :title="`Imprimer (${isMac ? '⌘' : 'Ctrl'}+P)`">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M17 2H7V6H17V2ZM19 8H5C3.34 8 2 9.34 2 11V17H6V21H18V17H22V11C22 9.34 20.66 8 19 8ZM16 19H8V14H16V19ZM19 12C18.45 12 18 11.55 18 11C18 10.45 18.45 10 19 10C19.55 10 20 10.45 20 11C20 11.55 19.55 12 19 12Z"
      />
    </svg>
  </button>
</template>

<style>
.preview-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border: none;
  margin-left: 0;
  transform: scale(1) translateY(0);
  height: 100vh;
  transition: all 0.2s ease-in-out var(--curve);
}

.preview-frame.shifted {
  margin-left: 17.55rem;
  transform: scale(0.65) translateY(-40vh);
  height: 155vh;
}

.preview-frame:nth-of-type(1) {
  z-index: 1;
  opacity: 1;
}

.preview-frame:nth-of-type(2) {
  z-index: 0;
  opacity: 0;
}

.print-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: none;
  background: var(--color-page-highlight);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  z-index: 1000;
}

.print-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.print-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Coloris button - ensure it's clickable and visible */
:deep(.clr-field button) {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 1;
}

/* Hide UI elements when printing */
@media print {
  #editor-panel,
  #element-popup,
  #page-popup,
  .preview-loader,
  .print-btn {
    display: none !important;
  }

  .preview-frame {
    position: static !important;
    margin-left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
  }

  .preview-frame:not(:first-of-type) {
    display: none !important;
  }
}
</style>
