<template>
	<NcContent app-name="astrolabe">
		<NcAppNavigation>
			<template #list>
				<NcAppNavigationItem
					:name="t('astrolabe', 'Semantic Search')"
					:active="activeSection === 'search'"
					@click="activeSection = 'search'">
					<template #icon>
						<Magnify :size="20" />
					</template>
				</NcAppNavigationItem>

				<NcAppNavigationItem
					:name="t('astrolabe', 'Index Status')"
					:active="activeSection === 'status'"
					@click="activeSection = 'status'; loadVectorStatus()">
					<template #icon>
						<ChartBox :size="20" />
					</template>
				</NcAppNavigationItem>
			</template>

			<template #footer>
				<ul class="app-navigation-entry__settings">
					<NcAppNavigationItem
						:name="t('astrolabe', 'Settings')"
						@click="goToSettings">
						<template #icon>
							<Cog :size="20" />
						</template>
					</NcAppNavigationItem>
				</ul>
			</template>
		</NcAppNavigation>

		<NcAppContent>
			<!-- Search Section -->
			<div v-show="activeSection === 'search'" class="mcp-section">
				<div class="mcp-section-header">
					<h2>{{ t('astrolabe', 'Semantic Search') }}</h2>
					<p class="mcp-description">
						{{ t('astrolabe', 'Search your indexed content using semantic similarity. Find documents by meaning, not just keywords.') }}
					</p>
				</div>

				<!-- Search Controls -->
				<div class="mcp-search-card">
					<div class="mcp-search-row">
						<NcTextField
							:value="query"
							:label="t('astrolabe', 'Search query')"
							:placeholder="t('astrolabe', 'Enter your search query...')"
							class="mcp-search-input"
							@update:value="query = $event"
							@keyup.enter="performSearch" />

						<NcSelect
							v-model="selectedAlgorithmOption"
							:options="algorithmOptions"
							:placeholder="t('astrolabe', 'Algorithm')"
							class="mcp-algorithm-select"
							@input="algorithm = $event ? $event.id : 'hybrid'" />

						<NcButton
							type="primary"
							:disabled="!query.trim() || loading"
							@click="performSearch">
							<template #icon>
								<Magnify :size="20" />
							</template>
							{{ t('astrolabe', 'Search') }}
						</NcButton>
					</div>

					<!-- Advanced Options Toggle -->
					<NcButton
						type="tertiary"
						class="mcp-advanced-toggle"
						@click="showAdvanced = !showAdvanced">
						<template #icon>
							<ChevronDown v-if="!showAdvanced" :size="20" />
							<ChevronUp v-else :size="20" />
						</template>
						{{ showAdvanced ? t('astrolabe', 'Hide advanced') : t('astrolabe', 'Advanced options') }}
					</NcButton>

					<!-- Advanced Options -->
					<div v-show="showAdvanced" class="mcp-advanced-options">
						<div class="mcp-advanced-grid">
							<div class="mcp-option-group">
								<label>{{ t('astrolabe', 'Document Types') }}</label>
								<div class="mcp-checkbox-grid">
									<NcCheckboxRadioSwitch
										v-for="docType in docTypeOptions"
										:key="docType.id"
										:checked="selectedDocTypes.includes(docType.id)"
										type="checkbox"
										@update:checked="toggleDocType(docType.id, $event)">
										{{ docType.label }}
									</NcCheckboxRadioSwitch>
								</div>
							</div>

							<div class="mcp-option-group">
								<label>{{ t('astrolabe', 'Result Limit') }}</label>
								<NcTextField
									:value="limit"
									type="number"
									:min="1"
									:max="100"
									@update:value="limit = Number($event)" />
							</div>

							<div class="mcp-option-group">
								<label>{{ t('astrolabe', 'Minimum Score') }}: {{ scoreThreshold }}%</label>
								<input
									v-model="scoreThreshold"
									type="range"
									min="0"
									max="100"
									step="5"
									class="mcp-score-slider">
							</div>
						</div>
					</div>
				</div>

				<!-- Loading State -->
				<div v-if="loading" class="mcp-loading">
					<NcLoadingIcon :size="32" />
					<span>{{ t('astrolabe', 'Searching...') }}</span>
				</div>

				<!-- Error State -->
				<NcNoteCard v-if="error" type="error" class="mcp-error">
					{{ error }}
				</NcNoteCard>

				<!-- Results -->
				<div v-if="results.length > 0 && !loading" class="mcp-results">
					<div class="mcp-results-header">
						<span>
							{{ filteredResults.length }} {{ t('astrolabe', 'results') }}
							<span v-if="filteredResults.length !== results.length" class="mcp-filter-info">
								({{ results.length - filteredResults.length }} {{ t('astrolabe', 'filtered by score') }})
							</span>
						</span>
						<span class="mcp-algorithm-badge">{{ algorithmUsed }}</span>
					</div>

					<!-- 3D Visualization -->
					<div v-if="coordinates.length > 0" class="mcp-viz-container">
						<div class="mcp-viz-header">
							<h3>{{ t('astrolabe', 'Vector Space Visualization') }}</h3>
							<NcCheckboxRadioSwitch
								:checked="showQueryPoint"
								type="switch"
								@update:checked="showQueryPoint = $event; updatePlot()">
								{{ t('astrolabe', 'Show query point') }}
							</NcCheckboxRadioSwitch>
						</div>
						<div id="viz-plot-container" class="mcp-viz-plot-container">
							<div id="viz-plot" ref="vizPlot" />
						</div>
					</div>

					<div class="mcp-results-list">
						<div
							v-for="(result, index) in filteredResults"
							:key="result.id || index"
							class="mcp-result-item"
							:class="'mcp-doc-type-' + (result.doc_type || 'unknown')">
							<div class="mcp-result-header">
								<span class="mcp-result-type">{{ result.doc_type || 'unknown' }}</span>
								<div class="mcp-result-actions">
									<NcButton
										type="tertiary"
										:aria-label="t('astrolabe', 'Show Chunk')"
										@click="viewChunk(result)">
										<template #icon>
											<Eye :size="18" />
										</template>
										{{ t('astrolabe', 'Show Chunk') }}
									</NcButton>
									<span class="mcp-result-score">{{ formatScore(result.score) }}%</span>
								</div>
							</div>
							<a
								:href="getDocumentUrl(result)"
								class="mcp-result-title"
								@click.prevent="navigateToDocument(result)">
								{{ result.title || t('astrolabe', 'Untitled') }}
								<OpenInNew :size="14" class="mcp-external-icon" />
							</a>
							<div class="mcp-result-metadata">
								<span v-if="result.chunk_index !== undefined && result.total_chunks">
									{{ t('astrolabe', 'Chunk {chunk}/{total}', { chunk: result.chunk_index + 1, total: result.total_chunks }) }}
								</span>
								<span v-if="result.page_number && result.page_count" class="mcp-metadata-separator">
									· {{ t('astrolabe', 'Page {page}/{total}', { page: result.page_number, total: result.page_count }) }}
								</span>
							</div>
						</div>
					</div>
				</div>

				<!-- No Results -->
				<NcEmptyContent
					v-if="searched && results.length === 0 && !loading && !error"
					:name="t('astrolabe', 'No results found')"
					:description="t('astrolabe', 'Try a different query or search algorithm.')">
					<template #icon>
						<Magnify />
					</template>
				</NcEmptyContent>

				<!-- Initial State -->
				<NcEmptyContent
					v-if="!searched && !loading"
					:name="t('astrolabe', 'Semantic Search')"
					:description="t('astrolabe', 'Enter a query above to search your indexed content.')">
					<template #icon>
						<Magnify />
					</template>
				</NcEmptyContent>
			</div>

			<!-- Index Status Section -->
			<div v-show="activeSection === 'status'" class="mcp-section">
				<div class="mcp-section-header">
					<h2>{{ t('astrolabe', 'Index Status') }}</h2>
					<p class="mcp-description">
						{{ t('astrolabe', 'View the status of your vector index and sync progress.') }}
					</p>
				</div>

				<div v-if="statusLoading" class="mcp-loading">
					<NcLoadingIcon :size="32" />
					<span>{{ t('astrolabe', 'Loading status...') }}</span>
				</div>

				<NcNoteCard v-else-if="statusError" type="error">
					{{ statusError }}
				</NcNoteCard>

				<div v-else-if="vectorStatus" class="mcp-status-cards">
					<div class="mcp-status-card">
						<div class="mcp-status-label">
							{{ t('astrolabe', 'Sync Status') }}
						</div>
						<div class="mcp-status-value" :class="'status-' + vectorStatus.status">
							{{ vectorStatus.status }}
						</div>
					</div>

					<div class="mcp-status-card">
						<div class="mcp-status-label">
							{{ t('astrolabe', 'Indexed Documents') }}
						</div>
						<div class="mcp-status-value">
							{{ vectorStatus.indexed_documents || 0 }}
						</div>
					</div>

					<div class="mcp-status-card">
						<div class="mcp-status-label">
							{{ t('astrolabe', 'Pending Documents') }}
						</div>
						<div class="mcp-status-value">
							{{ vectorStatus.pending_documents || 0 }}
						</div>
					</div>

					<div v-if="vectorStatus.last_sync_time" class="mcp-status-card">
						<div class="mcp-status-label">
							{{ t('astrolabe', 'Last Sync') }}
						</div>
						<div class="mcp-status-value">
							{{ vectorStatus.last_sync_time }}
						</div>
					</div>
				</div>

				<NcButton type="secondary" :disabled="statusLoading" @click="loadVectorStatus">
					<template #icon>
						<Refresh :size="20" />
					</template>
					{{ t('astrolabe', 'Refresh') }}
				</NcButton>
			</div>
		</NcAppContent>

		<!-- PDF/Chunk Viewer Modal -->
		<div v-if="showViewer" class="mcp-modal-overlay" @click.self="closeViewer">
			<div class="mcp-modal">
				<!-- Fixed Header -->
				<div class="mcp-modal-header">
					<h3>
						<a
							v-if="currentResult"
							:href="getDocumentUrl(currentResult)"
							class="mcp-modal-title-link"
							@click.prevent="navigateToDocument(currentResult)">
							{{ viewerTitle }}
							<OpenInNew :size="16" class="mcp-modal-title-icon" />
						</a>
						<span v-else>{{ viewerTitle }}</span>
					</h3>
					<NcButton type="tertiary" @click="closeViewer">
						<template #icon>
							<Close :size="20" />
						</template>
					</NcButton>
				</div>

				<!-- Scrollable Content -->
				<div class="mcp-modal-body">
					<!-- Loading State -->
					<div v-if="viewerLoading" class="mcp-viewer-loading">
						<NcLoadingIcon :size="32" />
						<span>{{ t('astrolabe', 'Loading content...') }}</span>
					</div>

					<!-- PDF Viewer (canvas only, controls in footer) -->
					<PDFViewer
						v-else-if="viewerType === 'pdf'"
						:file-path="currentPdfPath"
						:page-number="viewerPage"
						@prev-page="viewerPage--"
						@next-page="viewerPage++"
						@loaded="handlePdfLoaded"
						@error="handlePdfError" />

					<!-- Markdown Viewer (for non-PDFs) -->
					<MarkdownViewer
						v-else
						:content="getMarkdownContent()" />
				</div>

				<!-- Fixed Footer (navigation controls) -->
				<div v-if="!viewerLoading && viewerType === 'pdf' && pdfTotalPages > 0" class="mcp-modal-footer">
					<NcButton
						:disabled="viewerPage <= 1"
						@click="viewerPage--">
						<template #icon>
							<ChevronLeft :size="20" />
						</template>
						{{ t('astrolabe', 'Previous') }}
					</NcButton>
					<span class="mcp-page-info">
						{{ t('astrolabe', 'Page {current} of {total}', { current: viewerPage, total: pdfTotalPages }) }}
					</span>
					<NcButton
						:disabled="viewerPage >= pdfTotalPages"
						@click="viewerPage++">
						<template #icon>
							<ChevronRight :size="20" />
						</template>
						{{ t('astrolabe', 'Next') }}
					</NcButton>
				</div>
			</div>
		</div>
	</NcContent>
</template>

<script>
import NcContent from '@nextcloud/vue/components/NcContent'
import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
import NcAppContent from '@nextcloud/vue/components/NcAppContent'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcTextField from '@nextcloud/vue/components/NcTextField'
import NcSelect from '@nextcloud/vue/components/NcSelect'
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'

import Magnify from 'vue-material-design-icons/Magnify.vue'
import ChartBox from 'vue-material-design-icons/ChartBox.vue'
import Cog from 'vue-material-design-icons/Cog.vue'
import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
import Refresh from 'vue-material-design-icons/Refresh.vue'
import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
import Eye from 'vue-material-design-icons/Eye.vue'
import Close from 'vue-material-design-icons/Close.vue'

import PDFViewer from './components/PDFViewer.vue'
import MarkdownViewer from './components/MarkdownViewer.vue'

import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import Plotly from 'plotly.js-dist-min'
import * as pdfjsLib from 'pdfjs-dist'

// Set worker source with error handling
try {
	pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
		'pdfjs-dist/build/pdf.worker.mjs',
		import.meta.url,
	).toString()
} catch (e) {
	console.warn('Failed to set PDF.js worker, will use fallback', e)
	// PDF.js will use fake worker automatically
}

export default {
	name: 'App',
	components: {
		NcContent,
		NcAppNavigation,
		NcAppNavigationItem,
		NcAppContent,
		NcButton,
		NcTextField,
		NcSelect,
		NcLoadingIcon,
		NcNoteCard,
		NcEmptyContent,
		NcCheckboxRadioSwitch,
		PDFViewer,
		MarkdownViewer,
		Magnify,
		ChartBox,
		Cog,
		ChevronDown,
		ChevronUp,
		ChevronLeft,
		ChevronRight,
		Refresh,
		OpenInNew,
		Eye,
		Close,
	},
	data() {
		return {
			activeSection: 'search',
			// Search state
			query: '',
			algorithm: 'hybrid',
			showAdvanced: false,
			selectedDocTypes: [],
			limit: '20',
			scoreThreshold: 0,
			loading: false,
			error: null,
			results: [],
			algorithmUsed: '',
			searched: false,
			expandedExcerpts: {},
			// Visualization state
			coordinates: [],
			queryCoords: [],
			showQueryPoint: true,
			// Vector status state
			vectorStatus: null,
			statusLoading: false,
			statusError: null,
			// Viewer state
			showViewer: false,
			viewerLoading: false,
			viewerTitle: '',
			viewerType: 'text',
			viewerPage: 1,
			pdfTotalPages: 0,
			currentPdfPath: '',
			currentResult: null, // Store the current result for document linking
			viewerContext: {
				chunk: '',
				before: '',
				after: '',
			},
		}
	},
	computed: {
		algorithmOptions() {
			return [
				{ id: 'hybrid', label: this.t('astrolabe', 'Hybrid') },
				{ id: 'semantic', label: this.t('astrolabe', 'Semantic') },
				{ id: 'bm25', label: this.t('astrolabe', 'Keyword (BM25)') },
			]
		},
		docTypeOptions() {
			return [
				{ id: 'note', label: this.t('astrolabe', 'Notes') },
				{ id: 'file', label: this.t('astrolabe', 'Files') },
				{ id: 'deck_card', label: this.t('astrolabe', 'Deck Cards') },
				{ id: 'calendar', label: this.t('astrolabe', 'Calendar') },
				{ id: 'contact', label: this.t('astrolabe', 'Contacts') },
				{ id: 'news_item', label: this.t('astrolabe', 'News') },
			]
		},
		selectedAlgorithmOption() {
			return this.algorithmOptions.find(opt => opt.id === this.algorithm) || this.algorithmOptions[0]
		},
		filteredResults() {
			const threshold = this.scoreThreshold / 100
			return this.results.filter(r => (r.score || 0) >= threshold)
		},
	},
	mounted() {
		// Check for URL parameters to open chunk viewer
		this.handleUrlParameters()
	},
	beforeUnmount() {
		// Clean up Plotly event handlers to prevent memory leaks
		const plotDiv = document.getElementById('viz-plot')
		if (plotDiv && plotDiv.on) {
			plotDiv.removeAllListeners('plotly_click')
		}
	},
	methods: {
		handleUrlParameters() {
			// Parse URL parameters
			const urlParams = new URLSearchParams(window.location.search)
			const docType = urlParams.get('doc_type')
			const docId = urlParams.get('doc_id')
			const chunkStart = urlParams.get('chunk_start')
			const chunkEnd = urlParams.get('chunk_end')

			// If we have chunk parameters, open the viewer
			if (docType && docId && chunkStart !== null && chunkEnd !== null) {
				// Construct a minimal result object
				const result = {
					doc_type: docType,
					id: parseInt(docId, 10),
					chunk_start_offset: parseInt(chunkStart, 10),
					chunk_end_offset: parseInt(chunkEnd, 10),
					title: urlParams.get('title') || this.t('astrolabe', 'Chunk Viewer'),
					metadata: {},
				}

				// Add optional metadata
				const path = urlParams.get('path')
				if (path) {
					result.metadata.path = path
				}
				const pageNumber = urlParams.get('page_number')
				if (pageNumber) {
					result.page_number = parseInt(pageNumber, 10)
				}
				const boardId = urlParams.get('board_id')
				if (boardId) {
					result.metadata.board_id = boardId
				}

				// Open the chunk viewer
				this.$nextTick(() => {
					this.viewChunk(result)
				})

				// Clear URL parameters to avoid reopening on navigation
				const newUrl = window.location.pathname
				window.history.replaceState({}, '', newUrl)
			}
		},

		toggleDocType(docTypeId, checked) {
			if (checked && !this.selectedDocTypes.includes(docTypeId)) {
				this.selectedDocTypes.push(docTypeId)
			} else if (!checked) {
				const index = this.selectedDocTypes.indexOf(docTypeId)
				if (index > -1) {
					this.selectedDocTypes.splice(index, 1)
				}
			}
		},

		async performSearch() {
			const queryText = this.query.trim()
			if (!queryText) {
				return
			}

			this.loading = true
			this.error = null
			this.searched = true
			this.coordinates = []
			this.queryCoords = []
			this.expandedExcerpts = {}

			try {
				const url = generateUrl('/apps/astrolabe/api/search')
				const params = {
					query: queryText,
					algorithm: this.algorithm,
					limit: parseInt(this.limit) || 20,
					include_pca: true,
				}

				if (this.selectedDocTypes.length > 0) {
					params.doc_types = this.selectedDocTypes.join(',')
				}

				const response = await axios.get(url, { params })

				if (response.data.success) {
					this.results = response.data.results || []
					this.algorithmUsed = response.data.algorithm_used || this.algorithm
					this.coordinates = response.data.coordinates_3d || []
					this.queryCoords = response.data.query_coords || []

					// Render visualization after DOM updates
					if (this.coordinates.length > 0) {
						this.$nextTick(() => {
							this.renderPlot()
						})
					}
				} else {
					this.error = response.data.error || this.t('astrolabe', 'Search failed')
					this.results = []
				}
			} catch (err) {
				console.error('Search error:', err)
				this.error = this.t('astrolabe', 'Network error. Please try again.')
				this.results = []
			} finally {
				this.loading = false
			}
		},

		async loadVectorStatus() {
			this.statusLoading = true
			this.statusError = null

			try {
				const url = generateUrl('/apps/astrolabe/api/vector-status')
				const response = await axios.get(url)

				if (response.data.success) {
					this.vectorStatus = response.data.status
				} else {
					this.statusError = response.data.error || this.t('astrolabe', 'Failed to load status')
				}
			} catch (err) {
				console.error('Status error:', err)
				this.statusError = this.t('astrolabe', 'Network error. Please try again.')
			} finally {
				this.statusLoading = false
			}
		},

		formatScore(score) {
			return Math.round((score || 0) * 100)
		},

		toggleExcerpt(index) {
			this.expandedExcerpts[index] = !this.expandedExcerpts[index]
		},

		truncateExcerpt(text, maxLength = 150) {
			if (!text || text.length <= maxLength) return text
			return text.substring(0, maxLength).trim() + '...'
		},

		getDocumentUrl(result) {
			const docType = result.doc_type || 'unknown'
			const id = result.id || result.note_id
			const metadata = result.metadata || {}

			switch (docType) {
			case 'note':
				return generateUrl(`/apps/notes/#/note/${id}`)
			case 'file':
				if (id) {
					return generateUrl(`/apps/files/files/${id}?dir=/&editing=false&openfile=true`)
				}
				return generateUrl('/apps/files/')
			case 'deck_card':
				if (metadata.board_id && id) {
					return generateUrl(`/apps/deck/board/${metadata.board_id}/card/${id}`)
				}
				return generateUrl('/apps/deck/')
			case 'calendar':
			case 'calendar_event':
				return generateUrl('/apps/calendar/')
			case 'news_item':
				// Use external article URL if available, otherwise fall back to News app
				if (metadata.url) {
					return metadata.url
				}
				return generateUrl('/apps/news/')
			case 'contact':
				return generateUrl('/apps/contacts/')
			default:
				return generateUrl('/apps/astrolabe/')
			}
		},

		navigateToDocument(result) {
			const url = this.getDocumentUrl(result)
			window.open(url, '_blank')
		},

		goToSettings() {
			window.location.href = generateUrl('/settings/user/astrolabe')
		},

		renderPlot() {
			const container = document.getElementById('viz-plot-container')
			if (!container) return

			const width = container.clientWidth
			const height = container.clientHeight || 400

			const coordinates = this.coordinates
			const queryCoords = this.queryCoords
			const results = this.results

			const scores = results.map(r => r.score)

			// Trace 1: Document results (always visible)
			const documentTrace = {
				x: coordinates.map(c => c[0]),
				y: coordinates.map(c => c[1]),
				z: coordinates.map(c => c[2]),
				mode: 'markers',
				type: 'scatter3d',
				name: 'Documents',
				visible: true,
				customdata: results.map((r, i) => ({
					title: r.title,
					raw_score: r.original_score || r.score,
					relative_score: r.score,
					x: coordinates[i][0],
					y: coordinates[i][1],
					z: coordinates[i][2],
				})),
				hovertemplate:
					'<b>%{customdata.title}</b><br>'
					+ 'Raw Score: %{customdata.raw_score:.3f} (%{customdata.relative_score:.0%} relative)<br>'
					+ '(x=%{customdata.x}, y=%{customdata.y}, z=%{customdata.z})'
					+ '<extra></extra>',
				hoverlabel: {
					bgcolor: '#0082c9',
					bordercolor: '#0082c9',
					font: {
						size: 15,
						color: 'white',
					},
				},
				marker: {
					size: results.map(r => 4 + (Math.pow(r.score, 2) * 10)),
					opacity: results.map(r => 0.3 + (r.score * 0.7)),
					color: scores,
					colorscale: 'Viridis',
					showscale: true,
					colorbar: {
						title: 'Relative Score',
						x: 1.02,
						xanchor: 'left',
						thickness: 20,
						len: 0.8,
					},
					cmin: 0,
					cmax: 1,
				},
			}

			// Trace 2: Query point (visibility controlled by toggle)
			const queryTrace = {
				x: [queryCoords[0]],
				y: [queryCoords[1]],
				z: [queryCoords[2]],
				mode: 'markers',
				type: 'scatter3d',
				name: 'Query',
				visible: this.showQueryPoint,
				hovertemplate:
					'<b>Search Query</b><br>'
					+ `(x=${queryCoords[0]}, y=${queryCoords[1]}, z=${queryCoords[2]})`
					+ '<extra></extra>',
				marker: {
					size: 10,
					color: '#ef5350', // Subdued red (Material Design Red 400)
					line: {
						color: '#c62828', // Darker red border (Material Design Red 800)
						width: 1,
					},
				},
			}

			const layout = {
				title: `Vector Space (PCA 3D) - ${results.length} results`,
				width,
				height,
				scene: {
					xaxis: { title: 'PC1' },
					yaxis: { title: 'PC2' },
					zaxis: { title: 'PC3' },
					camera: {
						eye: { x: 1.5, y: 1.5, z: 1.5 },
					},
					domain: {
						x: [0, 1],
						y: [0, 1],
					},
				},
				hovermode: 'closest',
				autosize: true,
				showlegend: false,
				margin: { l: 0, r: 100, t: 40, b: 0 },
			}

			const traces = [documentTrace, queryTrace]

			const config = {
				responsive: true,
				displayModeBar: true,
			}

			Plotly.newPlot('viz-plot', traces, layout, config)

			// Register click event handler for result points
			const plotDiv = document.getElementById('viz-plot')
			if (plotDiv) {
				plotDiv.on('plotly_click', this.handlePlotClick)
			}
		},

		updatePlot() {
			// Toggle query point visibility without recreating the plot
			if (this.coordinates.length > 0 && this.queryCoords.length > 0 && this.results.length > 0) {
				const plotDiv = document.getElementById('viz-plot')

				if (plotDiv && plotDiv.data && plotDiv.data.length >= 2) {
					// Trace index 1 is the query point
					Plotly.restyle('viz-plot', { visible: this.showQueryPoint }, [1])
				} else {
					// Plot doesn't exist yet, render it
					this.renderPlot()
				}
			}
		},

		async viewChunk(result) {
			// Guard against concurrent loading
			if (this.viewerLoading) {
				return
			}

			this.showViewer = true
			this.viewerLoading = true
			this.viewerTitle = result.title || 'Chunk Viewer'
			this.currentResult = result // Store result for document linking

			try {
				// Fetch chunk context
				const url = generateUrl('/apps/astrolabe/api/chunk-context')
				const params = {
					doc_type: result.doc_type,
					doc_id: result.id,
					start: result.chunk_start_offset,
					end: result.chunk_end_offset,
				}

				const response = await axios.get(url, { params })

				if (response.data.success) {
					// Determine viewer type and setup
					if (result.doc_type === 'file' && response.data.page_number) {
						this.viewerType = 'pdf'
						this.currentPdfPath = result.metadata?.path || ''
						this.viewerPage = response.data.page_number
					} else {
						this.viewerType = 'text'
						this.viewerContext = {
							chunk: response.data.chunk_text,
							before: response.data.before_context,
							after: response.data.after_context,
						}
					}
				} else {
					console.error('Failed to load chunk:', response.data.error)
					this.closeViewer()
				}
			} catch (err) {
				console.error('Error loading chunk:', err)
				this.closeViewer()
			} finally {
				this.viewerLoading = false
			}
		},

		handlePdfError(error) {
			console.error('PDF viewer error:', error)
			this.viewerType = 'text'
		},

		handlePdfLoaded(event) {
			this.pdfTotalPages = event.totalPages || 0
		},

		getMarkdownContent() {
			// Combine before/chunk/after context into single markdown string
			let content = ''

			if (this.viewerContext.before) {
				content += this.viewerContext.before + '\n\n'
			}

			if (this.viewerContext.chunk) {
				// Highlight the main chunk with a separator
				content += '---\n\n'
				content += this.viewerContext.chunk
				content += '\n\n---'
			}

			if (this.viewerContext.after) {
				content += '\n\n' + this.viewerContext.after
			}

			return content
		},

		closeViewer() {
			this.showViewer = false
			this.pdfTotalPages = 0
			this.currentResult = null
		},

		handlePlotClick(eventData) {
			// Only handle clicks on trace 0 (document results)
			// Trace 1 is the query point - ignore clicks on it
			if (!eventData.points || eventData.points.length === 0) {
				return
			}

			const point = eventData.points[0]
			const traceIndex = point.curveNumber // 0 = documents, 1 = query
			const pointIndex = point.pointNumber // Index in trace data

			// Ignore clicks on query point (trace 1)
			if (traceIndex !== 0) {
				return
			}

			// Access full result object using pointIndex
			// Results array is 1:1 with coordinates array (guaranteed by API)
			const result = this.results[pointIndex]

			if (!result) {
				console.warn('Click handler: result not found for index', pointIndex)
				return
			}

			// Call existing viewChunk method
			this.viewChunk(result)
		},
	},
}
</script>

<style scoped lang="scss">
.mcp-section {
	/* Standard Nextcloud app padding - matches Deck/core spacing */
	padding: 44px 24px 24px var(--default-clickable-area);
	/* Remove max-width to allow content to fill available space like Notes app */
	min-height: calc(100vh - 150px); /* Ensure content extends to bottom of viewport */
}

.mcp-section-header {
	margin-bottom: 24px;

	h2 {
		margin: 0 0 8px 0;
		font-size: 22px;
		font-weight: 600;
	}

	.mcp-description {
		color: var(--color-text-maxcontrast);
		margin: 0;
	}
}

// Search card
.mcp-search-card {
	background: var(--color-background-hover);
	border-radius: var(--border-radius-large);
	padding: 20px;
	margin-bottom: 24px;
}

.mcp-search-row {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}

.mcp-search-input {
	flex: 1;
	min-width: 250px;
}

.mcp-algorithm-select {
	min-width: 150px;
}

.mcp-advanced-toggle {
	margin-top: 12px;
}

.mcp-advanced-options {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.mcp-advanced-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.mcp-option-group {
	label {
		display: block;
		font-weight: 600;
		margin-bottom: 8px;
		color: var(--color-text-maxcontrast);
	}
}

.mcp-checkbox-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

// Loading and error states
.mcp-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 48px;
	color: var(--color-text-maxcontrast);
}

.mcp-error {
	margin: 16px 0;
}

// Visualization
.mcp-viz-container {
	background: var(--color-background-hover);
	border-radius: var(--border-radius-large);
	padding: 16px;
	margin-bottom: 24px;
}

.mcp-viz-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;

	h3 {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
	}
}

.mcp-viz-plot-container {
	width: 100%;
	height: 400px;
	background: var(--color-main-background);
	border-radius: var(--border-radius);
}

#viz-plot {
	width: 100%;
	height: 100%;

	// Pointer cursor for clickable result points (trace 0)
	:deep(.scatterlayer .trace:first-child .point) {
		cursor: pointer !important;
	}

	// Default cursor for query point (trace 1)
	:deep(.scatterlayer .trace:nth-child(2) .point) {
		cursor: default !important;
	}
}

// Results
.mcp-results {
	margin-top: 24px;
}

.mcp-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-maxcontrast);
}

.mcp-algorithm-badge {
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	background: var(--color-background-dark);
}

.mcp-filter-info {
	font-size: 12px;
	color: var(--color-text-lighter);
	font-weight: normal;
}

.mcp-results-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mcp-result-item {
	padding: 16px;
	background: var(--color-background-hover);
	border-radius: var(--border-radius-large);
	border-left: 4px solid var(--color-primary-element);
	transition: transform 0.15s, box-shadow 0.15s;

	&:hover {
		transform: translateX(4px);
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}
}

.mcp-result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.mcp-result-type {
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	background: var(--color-primary-element-light);
	color: var(--color-primary-element);
}

// Document type colors
.mcp-doc-type-note {
	border-left-color: #1565c0;
	.mcp-result-type { background: #e3f2fd; color: #1565c0; }
}
.mcp-doc-type-file {
	border-left-color: #2e7d32;
	.mcp-result-type { background: #e8f5e9; color: #2e7d32; }
}
.mcp-doc-type-deck_card {
	border-left-color: #ef6c00;
	.mcp-result-type { background: #fff3e0; color: #ef6c00; }
}
.mcp-doc-type-calendar {
	border-left-color: #c2185b;
	.mcp-result-type { background: #fce4ec; color: #c2185b; }
}
.mcp-doc-type-contact {
	border-left-color: #7b1fa2;
	.mcp-result-type { background: #f3e5f5; color: #7b1fa2; }
}
.mcp-doc-type-news_item {
	border-left-color: #00838f;
	.mcp-result-type { background: #e0f7fa; color: #00838f; }
}

.mcp-result-score {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-maxcontrast);
}

.mcp-result-title {
	font-weight: 600;
	font-size: 15px;
	color: var(--color-main-text);
	margin-bottom: 6px;
	line-height: 1.4;
	text-decoration: none;
	display: block;

	&:hover {
		color: var(--color-primary-element);
	}
}

a.mcp-result-title {
	cursor: pointer;
}

.mcp-result-metadata {
	font-size: 12px;
	color: var(--color-text-maxcontrast);
	margin-bottom: 6px;
	line-height: 1.4;
}

.mcp-result-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mcp-external-icon {
	opacity: 0.5;
	margin-left: 4px;
	vertical-align: middle;
}

.mcp-result-title:hover .mcp-external-icon {
	opacity: 1;
}

.mcp-score-slider {
	width: 100%;
	margin-top: 8px;
	accent-color: var(--color-primary-element);
}

// Status section
.mcp-status-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.mcp-status-card {
	background: var(--color-background-hover);
	border-radius: var(--border-radius-large);
	padding: 20px;
	text-align: center;
}

.mcp-status-label {
	font-size: 13px;
	color: var(--color-text-maxcontrast);
	margin-bottom: 8px;
}

.mcp-status-value {
	font-size: 24px;
	font-weight: 600;
	color: var(--color-main-text);

	&.status-idle { color: var(--color-success); }
	&.status-syncing { color: var(--color-warning); }
	&.status-error { color: var(--color-error); }
}

// Navigation footer
.app-navigation-entry__settings {
	height: auto !important;
	overflow: hidden !important;
	padding-top: 0 !important;
	flex: 0 0 auto;
	padding: 3px;
	margin: 0 3px;
}

// Modal
.mcp-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

.mcp-modal {
	background: var(--color-main-background);
	border-radius: var(--border-radius-large);
	width: 90%;
	max-width: 900px;
	height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.mcp-modal-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	justify-content: space-between;
	align-items: center;

	h3 {
		margin: 0;
		font-size: 18px;
		font-weight: 600;
		flex: 1;
		min-width: 0; // Allow text truncation if needed
	}
}

.mcp-modal-title-link {
	color: var(--color-main-text);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.15s;

	&:hover {
		color: var(--color-primary-element);

		.mcp-modal-title-icon {
			opacity: 1;
		}
	}
}

.mcp-modal-title-icon {
	opacity: 0.5;
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.mcp-modal-body {
	flex: 1;
	overflow: auto;
	padding: 20px;
	position: relative;
}

.mcp-modal-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 16px 20px;
	border-top: 1px solid var(--color-border);
	background: var(--color-main-background);
	flex-shrink: 0;

	.mcp-page-info {
		font-size: 14px;
		color: var(--color-text-maxcontrast);
		min-width: 150px;
		text-align: center;
	}
}

.mcp-viewer-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--color-text-lighter);
	gap: 16px;
}

.mcp-text-viewer {
	font-family: monospace;
	line-height: 1.6;
	white-space: pre-wrap;
}

.mcp-context-text {
	color: var(--color-text-lighter);
}

.mcp-highlighted-chunk {
	background: #fff9c4;
	color: #000;
	padding: 4px;
	border-radius: 2px;
	font-weight: bold;
}

@media (max-width: 768px) {
	.mcp-search-row {
		flex-direction: column;
		align-items: stretch;
	}

	.mcp-search-input,
	.mcp-algorithm-select {
		min-width: 100%;
	}

	.mcp-checkbox-grid {
		grid-template-columns: 1fr;
	}

	.mcp-modal {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}
</style>

<style lang="scss">
/* Fix for double margin/padding issue when nested in #content */
#content-vue {
	margin-top: 0 !important;
	margin-left: 0 !important;
}
</style>
