/**
 * <import-export-dialog> — Modal dialog for importing, exporting, and syncing notes.
 *
 * Import sources: Files (direct), Obsidian, Logseq, Notion, Google Docs, Evernote, Roam Research.
 * Export targets: Obsidian, Logseq, Notion, Google Docs.
 * Sync: Re-fetch from API sources (Notion/Google) or re-upload vault ZIPs for file-based.
 *
 * File-based sources (Obsidian/Logseq/Evernote/Roam) use file upload.
 * API-based sources (Notion/Google) use OAuth connections.
 */

interface NotebookOption {
	id: string;
	title: string;
}

interface ConnectionStatus {
	notion: { connected: boolean; workspaceName?: string };
	google: { connected: boolean; email?: string };
	logseq: { connected: boolean };
	obsidian: { connected: boolean };
}

interface RemotePage {
	id: string;
	title: string;
	lastEdited?: string;
	lastModified?: string;
	icon?: string;
}

class ImportExportDialog extends HTMLElement {
	private shadow!: ShadowRoot;
	private space = '';
	private activeTab: 'import' | 'export' | 'sync' = 'import';
	private activeSource: 'files' | 'obsidian' | 'logseq' | 'notion' | 'google-docs' | 'evernote' | 'roam' = 'files';
	private notebooks: NotebookOption[] = [];
	private connections: ConnectionStatus & { evernote?: { connected: boolean }; roam?: { connected: boolean } } = {
		notion: { connected: false },
		google: { connected: false },
		logseq: { connected: true },
		obsidian: { connected: true },
	};
	private selectedFiles: File[] = [];
	private remotePages: RemotePage[] = [];
	private selectedPages = new Set<string>();
	private importing = false;
	private exporting = false;
	private syncing = false;
	private syncStatuses: Record<string, { source: string; syncStatus?: string; lastSyncedAt?: number; hasConflict: boolean }> = {};
	private statusMessage = '';
	private statusType: 'info' | 'success' | 'error' = 'info';
	private selectedFile: File | null = null;
	private targetNotebookId = '';

	constructor() {
		super();
		this.shadow = this.attachShadow({ mode: 'open' });
	}

	connectedCallback() {
		this.space = this.getAttribute('space') || 'demo';
		this.render();
		this.loadConnections();
	}

	/** Open the dialog. */
	open(notebooks: NotebookOption[], tab: 'import' | 'export' | 'sync' = 'import') {
		this.notebooks = notebooks;
		this.activeTab = tab;
		this.statusMessage = '';
		this.selectedPages.clear();
		this.selectedFile = null;
		this.selectedFiles = [];
		this.syncStatuses = {};
		this.render();
		(this.shadow.querySelector('.dialog-overlay') as HTMLElement)?.classList.add('open');
	}

	/** Close the dialog. */
	close() {
		(this.shadow.querySelector('.dialog-overlay') as HTMLElement)?.classList.remove('open');
	}

	private async loadConnections() {
		try {
			const res = await fetch(`/${this.space}/rnotes/api/connections`);
			if (res.ok) {
				this.connections = await res.json();
			}
		} catch { /* ignore */ }
	}

	private async loadRemotePages() {
		this.remotePages = [];
		this.selectedPages.clear();

		if (this.activeSource === 'notion') {
			try {
				const res = await fetch(`/${this.space}/rnotes/api/import/notion/pages`);
				if (res.ok) {
					const data = await res.json();
					this.remotePages = data.pages || [];
				}
			} catch { /* ignore */ }
		} else if (this.activeSource === 'google-docs') {
			try {
				const res = await fetch(`/${this.space}/rnotes/api/import/google-docs/list`);
				if (res.ok) {
					const data = await res.json();
					this.remotePages = data.docs || [];
				}
			} catch { /* ignore */ }
		}

		this.render();
		(this.shadow.querySelector('.dialog-overlay') as HTMLElement)?.classList.add('open');
	}

	private setStatus(msg: string, type: 'info' | 'success' | 'error' = 'info') {
		this.statusMessage = msg;
		this.statusType = type;
		const statusEl = this.shadow.querySelector('.status-message') as HTMLElement;
		if (statusEl) {
			statusEl.textContent = msg;
			statusEl.className = `status-message status-${type}`;
			statusEl.style.display = msg ? 'block' : 'none';
		}
	}

	private async handleImport() {
		this.importing = true;
		this.setStatus('Importing...', 'info');

		try {
			if (this.activeSource === 'files') {
				if (this.selectedFiles.length === 0) {
					this.setStatus('Please select at least one file', 'error');
					this.importing = false;
					return;
				}

				const formData = new FormData();
				for (const f of this.selectedFiles) formData.append('files', f);
				if (this.targetNotebookId) formData.append('notebookId', this.targetNotebookId);

				const token = localStorage.getItem('encryptid_token') || '';
				const res = await fetch(`/${this.space}/rnotes/api/import/files`, {
					method: 'POST',
					headers: { 'Authorization': `Bearer ${token}` },
					body: formData,
				});

				const data = await res.json();
				if (data.ok) {
					this.setStatus(`Imported ${data.imported} note${data.imported !== 1 ? 's' : ''}${data.warnings?.length ? ` (${data.warnings.length} warnings)` : ''}`, 'success');
					this.dispatchEvent(new CustomEvent('import-complete', { detail: data }));
				} else {
					this.setStatus(data.error || 'Import failed', 'error');
				}
			} else if (this.activeSource === 'obsidian' || this.activeSource === 'logseq' || this.activeSource === 'evernote' || this.activeSource === 'roam') {
				if (!this.selectedFile) {
					const fileTypeHint: Record<string, string> = {
						obsidian: 'ZIP file', logseq: 'ZIP file',
						evernote: '.enex file', roam: 'JSON file',
					};
					this.setStatus(`Please select a ${fileTypeHint[this.activeSource] || 'file'}`, 'error');
					this.importing = false;
					return;
				}

				const formData = new FormData();
				formData.append('file', this.selectedFile);
				formData.append('source', this.activeSource);
				if (this.targetNotebookId) {
					formData.append('notebookId', this.targetNotebookId);
				}

				const token = localStorage.getItem('encryptid_token') || '';
				const res = await fetch(`/${this.space}/rnotes/api/import/upload`, {
					method: 'POST',
					headers: { 'Authorization': `Bearer ${token}` },
					body: formData,
				});

				const data = await res.json();
				if (data.ok) {
					this.setStatus(
						`Imported ${data.imported} notes${data.updated ? `, updated ${data.updated}` : ''}${data.warnings?.length ? ` (${data.warnings.length} warnings)` : ''}`,
						'success'
					);
					this.dispatchEvent(new CustomEvent('import-complete', { detail: data }));
				} else {
					this.setStatus(data.error || 'Import failed', 'error');
				}
			} else if (this.activeSource === 'notion') {
				if (this.selectedPages.size === 0) {
					this.setStatus('Please select at least one page', 'error');
					this.importing = false;
					return;
				}

				const token = localStorage.getItem('encryptid_token') || '';
				const res = await fetch(`/${this.space}/rnotes/api/import/notion`, {
					method: 'POST',
					headers: {
						'Authorization': `Bearer ${token}`,
						'Content-Type': 'application/json',
					},
					body: JSON.stringify({
						pageIds: Array.from(this.selectedPages),
						notebookId: this.targetNotebookId || undefined,
					}),
				});

				const data = await res.json();
				if (data.ok) {
					this.setStatus(`Imported ${data.imported} notes from Notion`, 'success');
					this.dispatchEvent(new CustomEvent('import-complete', { detail: data }));
				} else {
					this.setStatus(data.error || 'Notion import failed', 'error');
				}
			} else if (this.activeSource === 'google-docs') {
				if (this.selectedPages.size === 0) {
					this.setStatus('Please select at least one document', 'error');
					this.importing = false;
					return;
				}

				const token = localStorage.getItem('encryptid_token') || '';
				const res = await fetch(`/${this.space}/rnotes/api/import/google-docs`, {
					method: 'POST',
					headers: {
						'Authorization': `Bearer ${token}`,
						'Content-Type': 'application/json',
					},
					body: JSON.stringify({
						docIds: Array.from(this.selectedPages),
						notebookId: this.targetNotebookId || undefined,
					}),
				});

				const data = await res.json();
				if (data.ok) {
					this.setStatus(`Imported ${data.imported} notes from Google Docs`, 'success');
					this.dispatchEvent(new CustomEvent('import-complete', { detail: data }));
				} else {
					this.setStatus(data.error || 'Google Docs import failed', 'error');
				}
			}
		} catch (err) {
			this.setStatus(`Import error: ${(err as Error).message}`, 'error');
		}

		this.importing = false;
	}

	private async handleExport() {
		if (!this.targetNotebookId) {
			this.setStatus('Please select a notebook to export', 'error');
			return;
		}

		this.exporting = true;
		this.setStatus('Exporting...', 'info');

		try {
			if (this.activeSource === 'obsidian' || this.activeSource === 'logseq' || this.activeSource === 'markdown' as any) {
				const format = this.activeSource === 'markdown' as any ? 'markdown' : this.activeSource;
				const url = `/${this.space}/rnotes/api/export/${format}?notebookId=${encodeURIComponent(this.targetNotebookId)}`;
				const res = await fetch(url);

				if (res.ok) {
					const blob = await res.blob();
					const disposition = res.headers.get('Content-Disposition') || '';
					const filename = disposition.match(/filename="(.+)"/)?.[1] || `export-${format}.zip`;

					const a = document.createElement('a');
					a.href = URL.createObjectURL(blob);
					a.download = filename;
					a.click();
					URL.revokeObjectURL(a.href);

					this.setStatus('Download started!', 'success');
				} else {
					const data = await res.json();
					this.setStatus(data.error || 'Export failed', 'error');
				}
			} else if (this.activeSource === 'notion') {
				const token = localStorage.getItem('encryptid_token') || '';
				const res = await fetch(`/${this.space}/rnotes/api/export/notion`, {
					method: 'POST',
					headers: {
						'Authorization': `Bearer ${token}`,
						'Content-Type': 'application/json',
					},
					body: JSON.stringify({ notebookId: this.targetNotebookId }),
				});

				const data = await res.json();
				if (data.exported) {
					this.setStatus(`Exported ${data.exported.length} notes to Notion`, 'success');
				} else {
					this.setStatus(data.error || 'Notion export failed', 'error');
				}
			} else if (this.activeSource === 'google-docs') {
				const token = localStorage.getItem('encryptid_token') || '';
				const res = await fetch(`/${this.space}/rnotes/api/export/google-docs`, {
					method: 'POST',
					headers: {
						'Authorization': `Bearer ${token}`,
						'Content-Type': 'application/json',
					},
					body: JSON.stringify({ notebookId: this.targetNotebookId }),
				});

				const data = await res.json();
				if (data.exported) {
					this.setStatus(`Exported ${data.exported.length} notes to Google Docs`, 'success');
				} else {
					this.setStatus(data.error || 'Google Docs export failed', 'error');
				}
			}
		} catch (err) {
			this.setStatus(`Export error: ${(err as Error).message}`, 'error');
		}

		this.exporting = false;
	}

	private esc(s: string): string {
		const d = document.createElement('div');
		d.textContent = s || '';
		return d.innerHTML;
	}

	private render() {
		const isApiSource = this.activeSource === 'notion' || this.activeSource === 'google-docs';
		const isFileSource = this.activeSource === 'files';
		// File-based sources (files, obsidian, logseq, evernote, roam) are always "connected" — no auth needed
		const fileBased = ['files', 'obsidian', 'logseq', 'evernote', 'roam'];
		const sourceConnKey = this.activeSource === 'google-docs' ? 'google' : this.activeSource;
		const isConnected = fileBased.includes(this.activeSource) || (this.connections as any)[sourceConnKey]?.connected || false;

		this.shadow.innerHTML = `
		<style>${this.getStyles()}</style>
		<div class="dialog-overlay">
			<div class="dialog">
				<div class="dialog-header">
					<h2>${this.activeTab === 'sync' ? 'Sync' : this.activeTab === 'export' ? 'Export' : 'Import'} Notes</h2>
					<button class="dialog-close" id="btn-close">&times;</button>
				</div>

				<div class="tab-bar">
					<button class="tab ${this.activeTab === 'import' ? 'active' : ''}" data-tab="import">Import</button>
					<button class="tab ${this.activeTab === 'export' ? 'active' : ''}" data-tab="export">Export</button>
					<button class="tab ${this.activeTab === 'sync' ? 'active' : ''}" data-tab="sync">Sync</button>
				</div>

				${this.activeTab !== 'sync' ? (() => {
					const sources = this.activeTab === 'export'
						? (['obsidian', 'logseq', 'notion', 'google-docs'] as const)
						: (['files', 'obsidian', 'logseq', 'notion', 'google-docs', 'evernote', 'roam'] as const);
					return `<div class="source-bar">
					${sources.map(s => `
						<button class="source-btn ${this.activeSource === s ? 'active' : ''}" data-source="${s}">
							${this.sourceIcon(s)} ${this.sourceName(s)}
						</button>
					`).join('')}
				</div>`;
				})() : ''}

				<div class="dialog-body">
					${this.activeTab === 'sync' ? this.renderSyncTab() : this.activeTab === 'import' ? this.renderImportTab(isApiSource, isConnected) : this.renderExportTab(isApiSource, isConnected)}

					<div class="status-message ${this.statusMessage ? `status-${this.statusType}` : ''}" style="display:${this.statusMessage ? 'block' : 'none'}">
						${this.esc(this.statusMessage)}
					</div>
				</div>
			</div>
		</div>`;

		this.attachListeners();
	}

	private renderImportTab(isApiSource: boolean, isConnected: boolean): string {
		if (isApiSource && !isConnected) {
			return `
				<div class="connect-prompt">
					<p>Connect your ${this.sourceName(this.activeSource)} account to import notes.</p>
					<button class="btn-primary" id="btn-connect">Connect ${this.sourceName(this.activeSource)}</button>
				</div>`;
		}

		if (isApiSource) {
			// Show page list for selection
			return `
				<div class="page-list-header">
					<span>Select pages to import:</span>
					<button class="btn-secondary btn-sm" id="btn-refresh-pages">Refresh</button>
				</div>
				<div class="page-list">
					${this.remotePages.length === 0
						? '<div class="empty-list">No pages found. Click Refresh to load.</div>'
						: this.remotePages.map(p => `
							<label class="page-item">
								<input type="checkbox" value="${p.id}" ${this.selectedPages.has(p.id) ? 'checked' : ''}>
								<span class="page-icon">${p.icon || (this.activeSource === 'notion' ? 'N' : 'G')}</span>
								<span class="page-title">${this.esc(p.title)}</span>
							</label>
						`).join('')}
				</div>
				<div class="form-row">
					<label>Target notebook:</label>
					<select id="target-notebook">
						<option value="">Create new notebook</option>
						${this.notebooks.map(nb => `<option value="${nb.id}">${this.esc(nb.title)}</option>`).join('')}
					</select>
				</div>
				<button class="btn-primary" id="btn-import" ${this.importing ? 'disabled' : ''}>
					${this.importing ? 'Importing...' : `Import Selected (${this.selectedPages.size})`}
				</button>`;
		}

		// Generic file import
		if (this.activeSource === 'files') {
			return `
				<div class="upload-area" id="upload-area">
					<p>Drop files to import as notes</p>
					<input type="file" id="file-input" accept=".md,.txt,.html,.htm,.jpg,.jpeg,.png,.gif,.webp,.svg" multiple style="display:none">
					<button class="btn-secondary" id="btn-choose-file">
						${this.selectedFiles.length > 0 ? `${this.selectedFiles.length} file${this.selectedFiles.length > 1 ? 's' : ''} selected` : 'Choose Files'}
					</button>
					<p class="upload-hint">.md .txt .html .jpg .png .webp — drag & drop supported</p>
				</div>
				<div class="form-row">
					<label>Target notebook:</label>
					<select id="target-notebook">
						<option value="">Create new notebook</option>
						${this.notebooks.map(nb => `<option value="${nb.id}">${this.esc(nb.title)}</option>`).join('')}
					</select>
				</div>
				<button class="btn-primary" id="btn-import" ${this.importing || this.selectedFiles.length === 0 ? 'disabled' : ''}>
					${this.importing ? 'Importing...' : `Import ${this.selectedFiles.length} File${this.selectedFiles.length !== 1 ? 's' : ''}`}
				</button>`;
		}

		// File-based source import (Obsidian/Logseq/Evernote/Roam)
		const acceptMap: Record<string, string> = {
			obsidian: '.zip', logseq: '.zip', evernote: '.enex,.zip', roam: '.json,.zip',
		};
		const hintMap: Record<string, string> = {
			obsidian: 'Upload a ZIP of your Obsidian vault',
			logseq: 'Upload a ZIP of your Logseq graph',
			evernote: 'Upload an .enex export file',
			roam: 'Upload a Roam Research JSON export',
		};
		return `
			<div class="upload-area" id="upload-area">
				<p>${hintMap[this.activeSource] || 'Upload a file'}</p>
				<input type="file" id="file-input" accept="${acceptMap[this.activeSource] || '.zip'}" style="display:none">
				<button class="btn-secondary" id="btn-choose-file">
					${this.selectedFile ? this.esc(this.selectedFile.name) : 'Choose File'}
				</button>
				<p class="upload-hint">or drag & drop here</p>
			</div>
			<div class="form-row">
				<label>Target notebook:</label>
				<select id="target-notebook">
					<option value="">Create new notebook</option>
					${this.notebooks.map(nb => `<option value="${nb.id}">${this.esc(nb.title)}</option>`).join('')}
				</select>
			</div>
			<button class="btn-primary" id="btn-import" ${this.importing || !this.selectedFile ? 'disabled' : ''}>
				${this.importing ? 'Importing...' : 'Import'}
			</button>`;
	}

	private renderExportTab(isApiSource: boolean, isConnected: boolean): string {
		if (isApiSource && !isConnected) {
			return `
				<div class="connect-prompt">
					<p>Connect your ${this.sourceName(this.activeSource)} account to export notes.</p>
					<button class="btn-primary" id="btn-connect">Connect ${this.sourceName(this.activeSource)}</button>
				</div>`;
		}

		return `
			<div class="form-row">
				<label>Source notebook:</label>
				<select id="target-notebook">
					<option value="">Select a notebook</option>
					${this.notebooks.map(nb => `<option value="${nb.id}">${this.esc(nb.title)}</option>`).join('')}
				</select>
			</div>
			<button class="btn-primary" id="btn-export" ${this.exporting ? 'disabled' : ''}>
				${this.exporting ? 'Exporting...'
					: isApiSource ? `Export to ${this.sourceName(this.activeSource)}`
					: 'Download ZIP'}
			</button>`;
	}

	private renderSyncTab(): string {
		const statusEntries = Object.entries(this.syncStatuses);
		const hasApiNotes = statusEntries.some(([_, s]) => s.source === 'notion' || s.source === 'google-docs');
		const hasFileNotes = statusEntries.some(([_, s]) => s.source === 'obsidian' || s.source === 'logseq');

		return `
			<div class="form-row">
				<label>Notebook:</label>
				<select id="sync-notebook">
					<option value="">Select a notebook</option>
					${this.notebooks.map(nb => `<option value="${nb.id}" ${this.targetNotebookId === nb.id ? 'selected' : ''}>${this.esc(nb.title)}</option>`).join('')}
				</select>
			</div>

			${this.targetNotebookId ? `
				<div class="sync-summary">
					${statusEntries.length === 0
						? '<p class="sync-empty">No imported notes found in this notebook. Import notes first to enable sync.</p>'
						: `<p class="sync-count">${statusEntries.length} synced note${statusEntries.length !== 1 ? 's' : ''} found</p>
							<div class="sync-list">
								${statusEntries.map(([id, s]) => `
									<div class="sync-item">
										<span class="sync-source-badge ${s.source}">${s.source}</span>
										<span class="sync-status ${s.syncStatus || 'synced'}">${s.hasConflict ? 'conflict' : s.syncStatus || 'synced'}</span>
										${s.lastSyncedAt ? `<span class="sync-time">${this.relativeTime(s.lastSyncedAt)}</span>` : ''}
									</div>
								`).join('')}
							</div>`
					}
				</div>

				${hasApiNotes ? `
					<button class="btn-primary" id="btn-sync-api" ${this.syncing ? 'disabled' : ''}>
						${this.syncing ? 'Syncing...' : 'Sync API Notes (Notion / Google Docs)'}
					</button>
				` : ''}

				${hasFileNotes ? `
					<div class="sync-upload" style="margin-top: 12px;">
						<p style="font-size: 12px; color: var(--rs-text-muted, #888); margin: 0 0 8px;">
							File-based sources require re-uploading your vault ZIP:
						</p>
						<div class="upload-area" id="sync-upload-area" style="padding: 16px;">
							<input type="file" id="sync-file-input" accept=".zip" style="display:none">
							<button class="btn-secondary btn-sm" id="btn-sync-choose-file">Choose ZIP</button>
						</div>
					</div>
				` : ''}
			` : ''}
		`;
	}

	private relativeTime(ts: number): string {
		const diff = Date.now() - ts;
		if (diff < 60000) return 'just now';
		if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
		if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
		return `${Math.floor(diff / 86400000)}d ago`;
	}

	private async loadSyncStatus(notebookId: string) {
		try {
			const res = await fetch(`/${this.space}/rnotes/api/sync/status/${notebookId}`);
			if (res.ok) {
				const data = await res.json();
				this.syncStatuses = data.statuses || {};
			}
		} catch { /* ignore */ }
		this.render();
		(this.shadow.querySelector('.dialog-overlay') as HTMLElement)?.classList.add('open');
	}

	private async handleSyncApi() {
		if (!this.targetNotebookId) return;
		this.syncing = true;
		this.setStatus('Syncing...', 'info');

		try {
			const token = localStorage.getItem('encryptid_token') || '';
			const res = await fetch(`/${this.space}/rnotes/api/sync/notebook/${this.targetNotebookId}`, {
				method: 'POST',
				headers: { 'Authorization': `Bearer ${token}` },
			});

			const data = await res.json();
			if (data.ok) {
				const parts: string[] = [];
				if (data.synced > 0) parts.push(`${data.synced} updated`);
				if (data.conflicts > 0) parts.push(`${data.conflicts} conflicts`);
				if (data.errors > 0) parts.push(`${data.errors} errors`);
				this.setStatus(parts.length > 0 ? `Sync complete: ${parts.join(', ')}` : 'All notes up to date', 'success');
				this.dispatchEvent(new CustomEvent('sync-complete', { detail: data }));
				this.loadSyncStatus(this.targetNotebookId);
			} else {
				this.setStatus(data.error || 'Sync failed', 'error');
			}
		} catch (err) {
			this.setStatus(`Sync error: ${(err as Error).message}`, 'error');
		}

		this.syncing = false;
	}

	private async handleSyncUpload(file: File) {
		if (!this.targetNotebookId) return;
		this.syncing = true;
		this.setStatus('Syncing from ZIP...', 'info');

		// Detect source from sync statuses
		const sources = new Set(Object.values(this.syncStatuses).map(s => s.source));
		const source = sources.has('obsidian') ? 'obsidian' : sources.has('logseq') ? 'logseq' : '';
		if (!source) {
			this.setStatus('Could not determine source type', 'error');
			this.syncing = false;
			return;
		}

		try {
			const formData = new FormData();
			formData.append('file', file);
			formData.append('notebookId', this.targetNotebookId);
			formData.append('source', source);

			const token = localStorage.getItem('encryptid_token') || '';
			const res = await fetch(`/${this.space}/rnotes/api/sync/upload`, {
				method: 'POST',
				headers: { 'Authorization': `Bearer ${token}` },
				body: formData,
			});

			const data = await res.json();
			if (data.ok) {
				this.setStatus(`Sync: ${data.synced} updated, ${data.conflicts} conflicts`, 'success');
				this.dispatchEvent(new CustomEvent('sync-complete', { detail: data }));
				this.loadSyncStatus(this.targetNotebookId);
			} else {
				this.setStatus(data.error || 'Sync failed', 'error');
			}
		} catch (err) {
			this.setStatus(`Sync error: ${(err as Error).message}`, 'error');
		}

		this.syncing = false;
	}

	private sourceName(s: string): string {
		const names: Record<string, string> = {
			files: 'Files',
			obsidian: 'Obsidian',
			logseq: 'Logseq',
			notion: 'Notion',
			'google-docs': 'Google Docs',
			evernote: 'Evernote',
			roam: 'Roam',
		};
		return names[s] || s;
	}

	private sourceIcon(s: string): string {
		const icons: Record<string, string> = {
			files: '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M2 2h5l2 2h5v10H2V2z"/></svg>',
			obsidian: '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1l6 3.5v7L8 15l-6-3.5v-7L8 1z"/></svg>',
			logseq: '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="8" r="6"/></svg>',
			notion: '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="2" width="12" height="12" rx="2"/></svg>',
			'google-docs': '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4 1h6l4 4v10H4V1z"/></svg>',
			evernote: '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1C4.7 1 2 3.7 2 7c0 2.2 1.2 4.1 3 5.2V15l3-2 3 2v-2.8c1.8-1.1 3-3 3-5.2 0-3.3-2.7-6-6-6z"/></svg>',
			roam: '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="2" r="1.5"/><circle cx="13" cy="11" r="1.5"/><circle cx="3" cy="11" r="1.5"/></svg>',
		};
		return icons[s] || '';
	}

	private attachListeners() {
		// Close button
		this.shadow.getElementById('btn-close')?.addEventListener('click', () => this.close());

		// Overlay click to close
		this.shadow.querySelector('.dialog-overlay')?.addEventListener('click', (e) => {
			if ((e.target as HTMLElement).classList.contains('dialog-overlay')) this.close();
		});

		// Tab switching
		this.shadow.querySelectorAll('.tab').forEach(btn => {
			btn.addEventListener('click', () => {
				this.activeTab = (btn as HTMLElement).dataset.tab as any;
				// Auto-select valid source when switching to export (non-exportable: files, evernote, roam)
				if (this.activeTab === 'export' && ['files', 'evernote', 'roam'].includes(this.activeSource)) {
					this.activeSource = 'obsidian';
				}
				this.statusMessage = '';
				this.render();
				(this.shadow.querySelector('.dialog-overlay') as HTMLElement)?.classList.add('open');
			});
		});

		// Source switching
		this.shadow.querySelectorAll('.source-btn').forEach(btn => {
			btn.addEventListener('click', () => {
				this.activeSource = (btn as HTMLElement).dataset.source as any;
				this.remotePages = [];
				this.selectedPages.clear();
				this.selectedFile = null;
				this.selectedFiles = [];
				this.statusMessage = '';
				this.render();
				(this.shadow.querySelector('.dialog-overlay') as HTMLElement)?.classList.add('open');
			});
		});

		// File input
		const fileInput = this.shadow.getElementById('file-input') as HTMLInputElement;
		const chooseBtn = this.shadow.getElementById('btn-choose-file');
		chooseBtn?.addEventListener('click', () => fileInput?.click());
		fileInput?.addEventListener('change', () => {
			if (this.activeSource === 'files') {
				this.selectedFiles = Array.from(fileInput.files || []);
				if (chooseBtn) chooseBtn.textContent = this.selectedFiles.length > 0 ? `${this.selectedFiles.length} file${this.selectedFiles.length > 1 ? 's' : ''} selected` : 'Choose Files';
				const importBtn = this.shadow.getElementById('btn-import') as HTMLButtonElement;
				if (importBtn) importBtn.disabled = this.selectedFiles.length === 0;
			} else {
				this.selectedFile = fileInput.files?.[0] || null;
				if (chooseBtn) chooseBtn.textContent = this.selectedFile?.name || 'Choose File';
				const importBtn = this.shadow.getElementById('btn-import') as HTMLButtonElement;
				if (importBtn) importBtn.disabled = !this.selectedFile;
			}
		});

		// Drag & drop
		const uploadArea = this.shadow.getElementById('upload-area');
		if (uploadArea) {
			uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); });
			uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
			uploadArea.addEventListener('drop', (e) => {
				e.preventDefault();
				uploadArea.classList.remove('dragover');
				const files = (e as DragEvent).dataTransfer?.files;
				if (!files || files.length === 0) return;
				if (this.activeSource === 'files') {
					this.selectedFiles = Array.from(files);
					if (chooseBtn) chooseBtn.textContent = `${this.selectedFiles.length} file${this.selectedFiles.length > 1 ? 's' : ''} selected`;
					const importBtn = this.shadow.getElementById('btn-import') as HTMLButtonElement;
					if (importBtn) importBtn.disabled = false;
				} else {
					const file = files[0];
					this.selectedFile = file;
					if (chooseBtn) chooseBtn.textContent = file.name;
					const importBtn = this.shadow.getElementById('btn-import') as HTMLButtonElement;
					if (importBtn) importBtn.disabled = false;
				}
			});
		}

		// Target notebook select
		const notebookSelect = this.shadow.getElementById('target-notebook') as HTMLSelectElement;
		notebookSelect?.addEventListener('change', () => {
			this.targetNotebookId = notebookSelect.value;
		});

		// Page checkboxes
		this.shadow.querySelectorAll('.page-item input[type="checkbox"]').forEach(cb => {
			cb.addEventListener('change', () => {
				const input = cb as HTMLInputElement;
				if (input.checked) {
					this.selectedPages.add(input.value);
				} else {
					this.selectedPages.delete(input.value);
				}
				const importBtn = this.shadow.getElementById('btn-import');
				if (importBtn) importBtn.textContent = `Import Selected (${this.selectedPages.size})`;
			});
		});

		// Refresh pages
		this.shadow.getElementById('btn-refresh-pages')?.addEventListener('click', () => {
			this.loadRemotePages();
		});

		// Connect button
		this.shadow.getElementById('btn-connect')?.addEventListener('click', () => {
			const provider = this.activeSource === 'google-docs' ? 'google' : this.activeSource;
			window.location.href = `/api/oauth/${provider}/authorize?space=${this.space}`;
		});

		// Import button
		this.shadow.getElementById('btn-import')?.addEventListener('click', () => this.handleImport());

		// Export button
		this.shadow.getElementById('btn-export')?.addEventListener('click', () => this.handleExport());

		// Sync tab listeners
		const syncNotebookSelect = this.shadow.getElementById('sync-notebook') as HTMLSelectElement;
		syncNotebookSelect?.addEventListener('change', () => {
			this.targetNotebookId = syncNotebookSelect.value;
			if (this.targetNotebookId) {
				this.loadSyncStatus(this.targetNotebookId);
			} else {
				this.syncStatuses = {};
				this.render();
				(this.shadow.querySelector('.dialog-overlay') as HTMLElement)?.classList.add('open');
			}
		});

		this.shadow.getElementById('btn-sync-api')?.addEventListener('click', () => this.handleSyncApi());

		const syncFileInput = this.shadow.getElementById('sync-file-input') as HTMLInputElement;
		this.shadow.getElementById('btn-sync-choose-file')?.addEventListener('click', () => syncFileInput?.click());
		syncFileInput?.addEventListener('change', () => {
			const file = syncFileInput.files?.[0];
			if (file) this.handleSyncUpload(file);
		});
	}

	private getStyles(): string {
		return `
			:host { display: block; }

			.dialog-overlay {
				display: none;
				position: fixed; top: 0; left: 0; right: 0; bottom: 0;
				background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
				z-index: 10000; justify-content: center; align-items: center;
			}
			.dialog-overlay.open { display: flex; }

			.dialog {
				background: var(--rs-bg-surface, #1a1a2e);
				border: 1px solid var(--rs-border, #2a2a4a);
				border-radius: 16px; width: 560px; max-width: 95vw;
				max-height: 80vh; display: flex; flex-direction: column;
				box-shadow: 0 24px 80px rgba(0,0,0,0.5);
			}

			.dialog-header {
				display: flex; justify-content: space-between; align-items: center;
				padding: 16px 20px; border-bottom: 1px solid var(--rs-border-subtle, #2a2a4a);
			}
			.dialog-header h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--rs-text-primary, #e0e0e0); }
			.dialog-close {
				background: none; border: none; color: var(--rs-text-muted, #888);
				font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1;
			}
			.dialog-close:hover { color: var(--rs-text-primary, #e0e0e0); }

			.tab-bar {
				display: flex; gap: 0; border-bottom: 1px solid var(--rs-border-subtle, #2a2a4a);
			}
			.tab {
				flex: 1; padding: 10px; border: none; background: none;
				color: var(--rs-text-secondary, #aaa); font-size: 13px; font-weight: 500;
				cursor: pointer; transition: all 0.15s;
				border-bottom: 2px solid transparent;
			}
			.tab.active {
				color: var(--rs-primary, #6366f1);
				border-bottom-color: var(--rs-primary, #6366f1);
			}
			.tab:hover { color: var(--rs-text-primary, #e0e0e0); }

			.source-bar {
				display: flex; gap: 4px; padding: 12px 16px; flex-wrap: wrap;
				border-bottom: 1px solid var(--rs-border-subtle, #2a2a4a);
			}
			.source-btn {
				padding: 6px 12px; border-radius: 6px; border: 1px solid var(--rs-border, #2a2a4a);
				background: transparent; color: var(--rs-text-secondary, #aaa);
				font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px;
				transition: all 0.15s;
			}
			.source-btn:hover { border-color: var(--rs-border-strong, #444); color: var(--rs-text-primary, #e0e0e0); }
			.source-btn.active {
				background: var(--rs-primary, #6366f1); color: #fff;
				border-color: var(--rs-primary, #6366f1);
			}

			.dialog-body {
				padding: 16px 20px; overflow-y: auto; flex: 1;
			}

			.upload-area {
				border: 2px dashed var(--rs-border, #2a2a4a);
				border-radius: 10px; padding: 24px; text-align: center;
				margin-bottom: 16px; transition: border-color 0.15s, background 0.15s;
			}
			.upload-area.dragover {
				border-color: var(--rs-primary, #6366f1);
				background: rgba(99,102,241,0.05);
			}
			.upload-area p { margin: 0 0 8px; color: var(--rs-text-secondary, #aaa); font-size: 13px; }
			.upload-hint { font-size: 11px !important; color: var(--rs-text-muted, #666) !important; margin-top: 8px !important; }

			.form-row {
				display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
			}
			.form-row label { font-size: 13px; color: var(--rs-text-secondary, #aaa); white-space: nowrap; }
			.form-row select {
				flex: 1; padding: 7px 10px; border-radius: 6px;
				border: 1px solid var(--rs-border, #2a2a4a);
				background: var(--rs-input-bg, #111); color: var(--rs-text-primary, #e0e0e0);
				font-size: 13px;
			}

			.btn-primary {
				width: 100%; padding: 10px; border-radius: 8px; border: none;
				background: var(--rs-primary, #6366f1); color: #fff; font-weight: 600;
				font-size: 13px; cursor: pointer; transition: background 0.15s;
			}
			.btn-primary:hover { background: var(--rs-primary-hover, #5558e6); }
			.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

			.btn-secondary {
				padding: 8px 16px; border-radius: 6px;
				border: 1px solid var(--rs-border, #2a2a4a);
				background: transparent; color: var(--rs-text-primary, #e0e0e0);
				font-size: 13px; cursor: pointer;
			}
			.btn-secondary:hover { border-color: var(--rs-border-strong, #444); }
			.btn-sm { padding: 4px 10px; font-size: 11px; }

			.connect-prompt {
				text-align: center; padding: 24px;
			}
			.connect-prompt p { color: var(--rs-text-secondary, #aaa); margin-bottom: 16px; font-size: 13px; }

			.page-list-header {
				display: flex; justify-content: space-between; align-items: center;
				margin-bottom: 8px;
			}
			.page-list-header span { font-size: 13px; color: var(--rs-text-secondary, #aaa); }

			.page-list {
				max-height: 200px; overflow-y: auto;
				border: 1px solid var(--rs-border-subtle, #2a2a4a);
				border-radius: 8px; margin-bottom: 14px;
			}
			.page-item {
				display: flex; align-items: center; gap: 8px; padding: 8px 12px;
				cursor: pointer; transition: background 0.1s;
				border-bottom: 1px solid var(--rs-border-subtle, #1a1a2e);
			}
			.page-item:last-child { border-bottom: none; }
			.page-item:hover { background: rgba(255,255,255,0.03); }
			.page-item input[type="checkbox"] { accent-color: var(--rs-primary, #6366f1); }
			.page-icon {
				width: 20px; height: 20px; font-size: 12px;
				display: flex; align-items: center; justify-content: center;
				background: var(--rs-bg-surface-raised, #222); border-radius: 4px;
				color: var(--rs-text-muted, #888);
			}
			.page-title { font-size: 13px; color: var(--rs-text-primary, #e0e0e0); flex: 1; }

			.empty-list {
				padding: 20px; text-align: center; color: var(--rs-text-muted, #666); font-size: 12px;
			}

			.status-message {
				margin-top: 12px; padding: 8px 12px; border-radius: 6px;
				font-size: 12px; text-align: center;
			}
			.status-info { background: rgba(99,102,241,0.1); color: var(--rs-primary, #6366f1); }
			.status-success { background: rgba(34,197,94,0.1); color: var(--rs-success, #22c55e); }
			.status-error { background: rgba(239,68,68,0.1); color: var(--rs-error, #ef4444); }

			.sync-summary { margin: 12px 0; }
			.sync-empty { font-size: 12px; color: var(--rs-text-muted, #666); text-align: center; padding: 20px; }
			.sync-count { font-size: 12px; color: var(--rs-text-secondary, #aaa); margin: 0 0 8px; }
			.sync-list {
				max-height: 200px; overflow-y: auto;
				border: 1px solid var(--rs-border-subtle, #2a2a4a); border-radius: 8px;
				margin-bottom: 14px;
			}
			.sync-item {
				display: flex; align-items: center; gap: 8px; padding: 6px 12px;
				border-bottom: 1px solid var(--rs-border-subtle, #1a1a2e); font-size: 12px;
			}
			.sync-item:last-child { border-bottom: none; }
			.sync-source-badge {
				padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600;
				text-transform: uppercase; letter-spacing: 0.5px;
				background: rgba(99,102,241,0.15); color: var(--rs-primary, #6366f1);
			}
			.sync-source-badge.notion { background: rgba(255,255,255,0.08); }
			.sync-source-badge.google-docs { background: rgba(66,133,244,0.15); color: #4285f4; }
			.sync-source-badge.obsidian { background: rgba(126,100,255,0.15); color: #7e64ff; }
			.sync-source-badge.logseq { background: rgba(133,211,127,0.15); color: #85d37f; }
			.sync-status {
				font-size: 10px; padding: 2px 6px; border-radius: 4px;
			}
			.sync-status.synced { background: rgba(34,197,94,0.1); color: var(--rs-success, #22c55e); }
			.sync-status.conflict { background: rgba(239,68,68,0.1); color: var(--rs-error, #ef4444); }
			.sync-status.local-modified { background: rgba(250,204,21,0.1); color: #facc15; }
			.sync-status.remote-modified { background: rgba(99,102,241,0.1); color: var(--rs-primary, #6366f1); }
			.sync-time { color: var(--rs-text-muted, #666); margin-left: auto; font-size: 10px; }
			.sync-upload { margin-top: 12px; }
		`;
	}
}

customElements.define('import-export-dialog', ImportExportDialog);

export { ImportExportDialog };