<template>
  <div class="preview-container">
    <div class="preview-toolbar">
      <div class="toolbar-left">
        <Button icon="pi pi-arrow-left" text @click="$router.back()" />
        <h3>{{ fileName }}</h3>
      </div>
      <div class="toolbar-right">
        <Button v-if="canEdit && !editing && !onlyOfficeMode" icon="pi pi-pencil" label="Bearbeiten" size="small" outlined @click="startEdit" />
        <Button v-if="editing && !onlyOfficeMode" icon="pi pi-save" label="Speichern" size="small" @click="saveEdit" :loading="saving" />
        <Button v-if="editing && !onlyOfficeMode" label="Abbrechen" size="small" text @click="cancelEdit" />
        <Button icon="pi pi-download" label="Herunterladen" size="small" outlined @click="downloadFile" />
      </div>
    </div>

    <div v-if="loading" class="loading">
      <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
      <p>Vorschau wird geladen...</p>
    </div>

    <div v-else-if="error" class="error-state">
      <i class="pi pi-exclamation-triangle" style="font-size: 2rem; color: var(--p-orange-500)"></i>
      <p>{{ error }}</p>
    </div>

    <!-- OnlyOffice Editor -->
    <div v-else-if="onlyOfficeMode" class="preview-content">
      <div id="onlyoffice-editor" class="oo-frame"></div>
    </div>

    <!-- PDF -->
    <div v-else-if="previewType === 'pdf'" class="preview-content">
      <iframe :src="previewUrl" class="pdf-frame"></iframe>
    </div>

    <!-- Image -->
    <div v-else-if="previewType === 'image'" class="preview-content image-preview">
      <img :src="previewUrl" :alt="fileName" />
    </div>

    <!-- HTML (DOCX fallback) -->
    <div v-else-if="previewType === 'html'" class="preview-content">
      <div v-if="!editing" class="document-frame" v-html="htmlContent"></div>
      <div v-else class="editor-frame">
        <div ref="editorRef" contenteditable="true" class="document-editor" v-html="htmlContent"
             @input="editorDirty = true"></div>
      </div>
    </div>

    <!-- Spreadsheet (XLSX fallback) -->
    <div v-else-if="previewType === 'spreadsheet'" class="preview-content">
      <div class="sheet-tabs" v-if="sheets.length > 1">
        <button v-for="(sheet, i) in sheets" :key="i"
                :class="{ active: activeSheet === i }" @click="activeSheet = i">
          {{ sheet.name }}
        </button>
      </div>
      <div class="spreadsheet-wrapper">
        <table class="spreadsheet" v-if="sheets[activeSheet]">
          <tr v-for="(row, ri) in sheets[activeSheet].rows" :key="ri">
            <td v-for="(cell, ci) in row" :key="ci"
                :contenteditable="editing"
                @input="onCellEdit(ri, ci, $event)">{{ cell }}</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- Slides (PPTX fallback) -->
    <div v-else-if="previewType === 'slides'" class="preview-content">
      <div class="slides-nav">
        <Button icon="pi pi-chevron-left" text :disabled="activeSlide <= 0" @click="activeSlide--" />
        <span>Folie {{ activeSlide + 1 }} / {{ slides.length }}</span>
        <Button icon="pi pi-chevron-right" text :disabled="activeSlide >= slides.length - 1" @click="activeSlide++" />
      </div>
      <div v-if="slides[activeSlide]" class="slide-frame" v-html="slides[activeSlide].html"></div>
    </div>

    <!-- Text -->
    <div v-else-if="previewType === 'text'" class="preview-content">
      <textarea v-if="editing" v-model="textContent" class="text-editor"></textarea>
      <pre v-else class="text-frame">{{ textContent }}</pre>
    </div>

    <!-- Unsupported -->
    <div v-else-if="previewType === 'unsupported'" class="error-state">
      <i class="pi pi-file" style="font-size: 2rem; color: var(--p-surface-400)"></i>
      <p>Vorschau fuer diesen Dateityp nicht verfuegbar</p>
      <Button label="Herunterladen" icon="pi pi-download" @click="downloadFile" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { useToast } from 'primevue/usetoast'
import apiClient from '../api/client'
import Button from 'primevue/button'

const route = useRoute()
const auth = useAuthStore()
const toast = useToast()

const fileId = route.params.fileId
const cacheBust = Date.now()
const fileName = ref('')
const previewType = ref('')
const previewUrl = ref('')
const htmlContent = ref('')
const textContent = ref('')
const sheets = ref([])
const activeSheet = ref(0)
const slides = ref([])
const activeSlide = ref(0)
const loading = ref(true)
const error = ref('')
const editing = ref(false)
const editorDirty = ref(false)
const saving = ref(false)
const editorRef = ref(null)
const canEdit = ref(false)
const onlyOfficeMode = ref(false)

function getTokenUrl(path) {
  return `${path}${path.includes('?') ? '&' : '?'}token=${encodeURIComponent(auth.accessToken || '')}`
}

// Check if file is an Office format that OnlyOffice can handle
function isOfficeFile(name) {
  return /\.(docx?|xlsx?|pptx?|odt|ods|odp|rtf|csv)$/i.test(name)
}

async function loadPreview() {
  loading.value = true
  try {
    // For Office files, try OnlyOffice first
    const previewRes = await apiClient.get(`/files/${fileId}/preview?_=${cacheBust}`)
    fileName.value = previewRes.data.name || ''

    if (isOfficeFile(fileName.value)) {
      try {
        const ooRes = await apiClient.get(`/files/${fileId}/onlyoffice-config?_=${cacheBust}`)
        if (ooRes.data.available) {
          onlyOfficeMode.value = true
          loading.value = false
          await nextTick()
          initOnlyOffice(ooRes.data)
          return
        }
      } catch { /* OnlyOffice not available, fall through to simple preview */ }
    }

    // Simple preview fallback
    const data = previewRes.data
    previewType.value = data.type

    if (data.type === 'pdf' || data.type === 'image') {
      previewUrl.value = getTokenUrl(`/api/files/${fileId}/download?inline=1`)
      canEdit.value = false
    } else if (data.type === 'html') {
      htmlContent.value = data.content
      canEdit.value = true
    } else if (data.type === 'spreadsheet') {
      sheets.value = data.sheets
      canEdit.value = true
    } else if (data.type === 'slides') {
      slides.value = data.slides
      canEdit.value = false
    } else if (data.type === 'text') {
      textContent.value = data.content
      canEdit.value = true
    } else {
      previewType.value = 'unsupported'
    }
  } catch (err) {
    error.value = err.response?.data?.error || 'Vorschau konnte nicht geladen werden'
  } finally {
    loading.value = false
  }
}

function initOnlyOffice(ooData) {
  const ooUrl = ooData.onlyoffice_url

  // Load OnlyOffice API script
  const script = document.createElement('script')
  script.src = `${ooUrl}/web-apps/apps/api/documents/api.js`
  script.onload = () => {
    if (window.DocsAPI) {
      new window.DocsAPI.DocEditor('onlyoffice-editor', ooData.config)
    }
  }
  script.onerror = () => {
    onlyOfficeMode.value = false
    error.value = 'OnlyOffice konnte nicht geladen werden. Fallback auf einfache Vorschau.'
    loadPreview()
  }
  document.head.appendChild(script)
}

function downloadFile() {
  window.location.href = getTokenUrl(`/api/files/${fileId}/download`)
}

function startEdit() {
  editing.value = true
  editorDirty.value = false
}

function cancelEdit() {
  editing.value = false
  loadPreview()
}

function onCellEdit(ri, ci, event) {
  sheets.value[activeSheet.value].rows[ri][ci] = event.target.textContent
  editorDirty.value = true
}

async function saveEdit() {
  saving.value = true
  try {
    let payload = {}
    if (previewType.value === 'html') {
      payload = { type: 'html', content: editorRef.value ? editorRef.value.innerHTML : htmlContent.value }
    } else if (previewType.value === 'spreadsheet') {
      payload = { type: 'spreadsheet', sheets: sheets.value }
    } else if (previewType.value === 'text') {
      payload = { type: 'text', content: textContent.value }
    }
    await apiClient.post(`/files/${fileId}/save`, payload)
    editing.value = false
    toast.add({ severity: 'success', summary: 'Gespeichert', life: 3000 })
  } catch (err) {
    toast.add({ severity: 'error', summary: 'Speichern fehlgeschlagen', detail: err.response?.data?.error || String(err), life: 5000 })
  } finally {
    saving.value = false
  }
}

onMounted(loadPreview)
</script>

<style scoped>
.preview-container { display: flex; flex-direction: column; height: calc(100vh - 0px); }
.preview-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--p-surface-200);
  background: var(--p-surface-0); flex-shrink: 0;
}
.toolbar-left { display: flex; align-items: center; gap: 0.5rem; }
.toolbar-left h3 { margin: 0; font-size: 1rem; }
.toolbar-right { display: flex; gap: 0.5rem; }
.loading, .error-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; gap: 0.75rem; color: var(--p-text-muted-color);
}
.preview-content { flex: 1; overflow: auto; }
.oo-frame { width: 100%; height: 100%; }
.pdf-frame { width: 100%; height: 100%; border: none; }
.image-preview { display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--p-surface-100); }
.image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.document-frame {
  max-width: 800px; margin: 0 auto; padding: 2rem; background: white;
  min-height: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.05);
  font-family: serif; font-size: 14px; line-height: 1.6;
}
.editor-frame { max-width: 800px; margin: 0 auto; background: white; min-height: 100%; }
.document-editor {
  padding: 2rem; min-height: 600px; outline: none;
  font-family: serif; font-size: 14px; line-height: 1.6;
  border: 2px solid var(--p-primary-color);
}
.sheet-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--p-surface-200); padding: 0 1rem; background: var(--p-surface-50); }
.sheet-tabs button { padding: 0.5rem 1rem; border: none; background: none; cursor: pointer; font-size: 0.85rem; border-bottom: 2px solid transparent; }
.sheet-tabs button.active { border-bottom-color: var(--p-primary-color); color: var(--p-primary-color); font-weight: 600; }
.spreadsheet-wrapper { overflow: auto; padding: 0.5rem; }
.spreadsheet { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.spreadsheet td { border: 1px solid var(--p-surface-200); padding: 4px 8px; min-width: 80px; white-space: nowrap; }
.spreadsheet tr:first-child td { font-weight: 600; background: var(--p-surface-100); }
.spreadsheet td[contenteditable="true"]:focus { outline: 2px solid var(--p-primary-color); background: var(--p-primary-50); }
.slides-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.75rem; border-bottom: 1px solid var(--p-surface-200); }
.slide-frame { max-width: 900px; margin: 2rem auto; padding: 3rem; background: white; min-height: 500px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); border-radius: 4px; font-size: 16px; }
.text-frame { padding: 1.5rem; margin: 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.text-editor { width: 100%; height: 100%; min-height: 500px; padding: 1.5rem; font-family: monospace; font-size: 0.9rem; border: none; outline: none; resize: none; }
</style>
