app/src/lib/PrintMenu.svelte

<script>
	import { onDestroy, tick } from 'svelte';
	import SelectionPage from './preview/SelectionPage.svelte';
	import PreviewPage from './preview/PreviewPage.svelte';

	let { onBack = () => {} } = $props();

	// ── Модель данных ──
	/** @typedef {{ id: number, file: File, previewUrl: string | null, fileType: 'image' | 'pdf' | 'other', expanded: boolean, format: 'A4' | 'A5', colorMode: 'bw' | 'color', qualityIndex: number, copies: number, pageRange: string, totalPages: number, selectedPages: Set<number>, pdfDoc: any }} FileEntry */
	/** @type {FileEntry[]} */
	let files = $state([]);

	// ── Общие состояния оверлея ──
	/** @type {FileEntry | null} */
	let activeFile = $state(null);
	/** Режим просмотра: 'gallery' (выбор страниц) или 'preview' (чтение) */
	let viewMode = $state(/** @type {'gallery' | 'preview'} */ ('gallery'));

	// ── Данные для галереи (выбор страниц) ──
	let galleryThumbnails = $state([]);
	let galleryLoading = $state(false);

	// ── Данные для превью (чтение) ──
	/** Кэшированные URL больших страниц для превью */
	let previewPagesCache = $state({});
	let isPreviewRendering = $state(false);

	// ── Состояние кнопки печати ──
	let isPrinting = $state(false);

	let uid = 0;
	const PRICE_PER_PAGE = 9;

	const qualities = [
		{ id: 'low', label: 'Эконом' },
		{ id: 'medium', label: 'Стандарт' },
		{ id: 'high', label: 'Максимум' }
	];
	const formats = ['A4', 'A5'];
	const colorModes = [
		{ id: 'bw', label: 'Чб' },
		{ id: 'color', label: 'Цвет' }
	];

	// ── Вспомогательная функция для реактивного обновления ──
	function updateFile(id, changes) {
		files = files.map(f => f.id === id ? { ...f, ...changes } : f);
		if (activeFile && activeFile.id === id) {
			activeFile = files.find(f => f.id === id);
		}
	}

	// ── PDF.js Core ──
	async function loadPdfDocument(entry) {
		if (entry.pdfDoc) return entry.pdfDoc;
		try {
			const pdfjsLib = await import('https://mozilla.github.io/pdf.js/build/pdf.mjs');
			pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.mjs';
			const arrayBuffer = await entry.file.arrayBuffer();
			const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
			const pdf = await loadingTask.promise;
			
			entry.pdfDoc = pdf;
			
			const numPages = pdf.numPages;
			const allPages = new Set(Array.from({ length: numPages }, (_, i) => i + 1));

			updateFile(entry.id, {
				pdfDoc: pdf,
				totalPages: numPages,
				selectedPages: allPages
			});

			return pdf;
		} catch (err) {
			console.error('PDF load error:', err);
			updateFile(entry.id, { totalPages: 0 });
			return null;
		}
	}

	async function renderPageToImage(pdfDoc, pageNum, scale = 1.0) {
		const page = await pdfDoc.getPage(pageNum);
		const viewport = page.getViewport({ scale });
		const canvas = document.createElement('canvas');
		const context = canvas.getContext('2d');
		const outputScale = window.devicePixelRatio || 1;
		canvas.width = Math.floor(viewport.width * outputScale);
		canvas.height = Math.floor(viewport.height * outputScale);
		canvas.style.width = `${Math.floor(viewport.width)}px`;
		canvas.style.height = `${Math.floor(viewport.height)}px`;
		const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined;
		await page.render({
			canvasContext: context,
			viewport,
			transform
		}).promise;
		return canvas.toDataURL('image/jpeg', 0.85);
	}

	// ── Логика Галереи ──
	async function openPageGallery(entry) {
		activeFile = entry;
		viewMode = 'gallery';
		galleryThumbnails = [];
		galleryLoading = true;
		previewPagesCache = {};
		await tick();

		let pdfDoc = entry.pdfDoc;
		if (!pdfDoc) {
			pdfDoc = await loadPdfDocument(entry);
		}

		if (!pdfDoc || entry.totalPages === 0) {
			galleryLoading = false;
			return;
		}

		const thumbs = [];
		for (let i = 1; i <= entry.totalPages; i++) {
			try {
				const url = await renderPageToImage(pdfDoc, i, 0.4);
				thumbs.push(url);
				galleryThumbnails = [...thumbs];
			} catch (err) {
				thumbs.push('');
				galleryThumbnails = [...thumbs];
			}
		}
		galleryLoading = false;
	}

	// ── Логика Превью ──
	async function openPreview(entry) {
		activeFile = entry;
		viewMode = 'preview';
		previewPagesCache = {};
		galleryThumbnails = [];
		await tick();
		if (entry.fileType === 'pdf') {
			let pdfDoc = entry.pdfDoc;
			if (!pdfDoc) pdfDoc = await loadPdfDocument(entry);
			
			if (entry.totalPages > 0) {
				preloadPreviewPages(entry, 1, 5);
			}
		}
	}

	async function preloadPreviewPages(entry, startPage, count, direction = 'forward') {
		const currentFile = files.find(f => f.id === entry.id);
		const pdfDoc = currentFile ? currentFile.pdfDoc : entry.pdfDoc;

		if (!pdfDoc || isPreviewRendering) return;
		isPreviewRendering = true;
		
		let pagesToLoad = [];
		if (direction === 'around') {
			const half = Math.floor(count / 2);
			const from = Math.max(1, startPage - half);
			const to = Math.min(entry.totalPages, startPage + half);
			for(let i = from; i <= to; i++) pagesToLoad.push(i);
		} else {
			const endPage = Math.min(startPage + count - 1, entry.totalPages);
			for (let i = startPage; i <= endPage; i++) pagesToLoad.push(i);
		}
		
		pagesToLoad = pagesToLoad.filter(p => !previewPagesCache[p]);
		
		if (pagesToLoad.length > 0) {
			const newCacheEntries = {};
			for (const pageNum of pagesToLoad) {
				try {
					const url = await renderPageToImage(pdfDoc, pageNum, 1.5);
					newCacheEntries[pageNum] = url;
				} catch (e) {
					console.error(`Failed to render preview page ${pageNum}`, e);
				}
			}
			if (Object.keys(newCacheEntries).length > 0) {
				previewPagesCache = { ...previewPagesCache, ...newCacheEntries };
			}
		}
		isPreviewRendering = false;
	}

	function handlePreviewRequestPages(start, count, direction) {
		if (activeFile) preloadPreviewPages(activeFile, start, count, direction);
	}

	// ── Общие функции закрытия ──
	function closeOverlay() {
		activeFile = null;
		galleryThumbnails = [];
		previewPagesCache = {};
	}

	// ── Управление выбором страниц ──
	function togglePageSelection(pageNum) {
		if (!activeFile?.selectedPages) return;
		const newSet = new Set(activeFile.selectedPages);
		if (newSet.has(pageNum)) {
			if (newSet.size > 1) newSet.delete(pageNum);
		} else {
			newSet.add(pageNum);
		}
		updateFile(activeFile.id, { selectedPages: newSet });
	}

	function selectAllPages() {
		if (!activeFile?.totalPages) return;
		const allPages = new Set(Array.from({ length: activeFile.totalPages }, (_, i) => i + 1));
		updateFile(activeFile.id, { selectedPages: allPages });
	}

	function deselectAllPages() {
		if (!activeFile) return;
		updateFile(activeFile.id, { selectedPages: new Set([1]) });
	}

	function pagesLabel(entry) {
		if (!entry.totalPages || entry.totalPages === 0) return '...';
		if (!entry.selectedPages || entry.selectedPages.size === 0) return 'Нет';
		if (entry.selectedPages.size === entry.totalPages) return 'Все';
		if (entry.selectedPages.size === 1) return `стр. ${[...entry.selectedPages][0]}`;
		return `${entry.selectedPages.size} из ${entry.totalPages}`;
	}

	// ── Файловые операции ──
	let fileInput;

	function detectFileType(file) {
		if (!file) return 'other';
		if (file.type.startsWith('image/')) return 'image';
		if (file.type === 'application/pdf') return 'pdf';
		return 'other';
	}

	async function handleFileSelect(event) {
		const input = /** @type {HTMLInputElement} */(event.target);
		const chosen = input.files;
		if (!chosen || chosen.length === 0) return;
		
		const newFiles = [];
		for (let i = 0; i < chosen.length; i++) {
			const fType = detectFileType(chosen[i]);
			const entry = {
				id: ++uid,
				file: chosen[i],
				previewUrl: URL.createObjectURL(chosen[i]),
				fileType: fType,
				expanded: false,
				format: 'A4',
				colorMode: 'bw',
				qualityIndex: 1,
				copies: 1,
				pageRange: 'all',
				totalPages: fType === 'image' ? 1 : 0,
				selectedPages: fType === 'image' ? new Set([1]) : new Set(),
				pdfDoc: null,
			};
			newFiles.push(entry);
		}
		
		files = [...files, ...newFiles];

		for (const entry of newFiles) {
			if (entry.fileType === 'pdf') {
				loadPdfDocument(entry);
			}
		}
		
		input.value = '';
	}

	function triggerFileInput(event) {
		event.preventDefault();
		fileInput.click();
	}

	function toggleExpanded(file) { 
		updateFile(file.id, { expanded: !file.expanded });
	}

	function removeFile(file) {
		if (file.previewUrl) URL.revokeObjectURL(file.previewUrl);
		files = files.filter((f) => f.id !== file.id);
	}

	// ── Опции печати ──
	function toggleFormat(file, f) { updateFile(file.id, { format: f }); }
	function toggleColor(file, c) { updateFile(file.id, { colorMode: c.id }); }
	function incrementCopies(file) { updateFile(file.id, { copies: file.copies + 1 }); }
	function decrementCopies(file) { if (file.copies > 1) updateFile(file.id, { copies: file.copies - 1 }); }
	function qualityFillFor(file) { return Math.round((file.qualityIndex / (qualities.length - 1)) * 100); }
	function updateQuality(file, val) { updateFile(file.id, { qualityIndex: val }); }

	// ── Расчет цены ──
	const totalPrice = $derived(() => {
	    let sum = 0;
	    for (const f of files) {
	        const pagesCount = f.selectedPages ? f.selectedPages.size : 0;
	        sum += pagesCount * f.copies;
	    }
	    return sum * PRICE_PER_PAGE;
	});

	const extraCopies = $derived(files.reduce((sum, f) => sum + (f.copies - 1), 0));

	onDestroy(() => {
		files.forEach((f) => { if (f.previewUrl) URL.revokeObjectURL(f.previewUrl); });
	});

	// ── Плюрализация ──
	function pluralize(n, forms) {
		const mod10 = n % 10, mod100 = n % 100;
		if (mod10 === 1 && mod100 !== 11) return forms[0];
		if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 > 14)) return forms[1];
		return forms[2];
	}
	const plFiles = (n) => pluralize(n, ['файл', 'файла', 'файлов']);
	const plCopies = (n) => pluralize(n, ['копия', 'копии', 'копий']);

	function handlePagesClick(file) {
		if (file.fileType === 'pdf') openPageGallery(file);
		else openPreview(file);
	}

	// ── НОВАЯ ФУНКЦИЯ: Отправка на сервер ──
	async function submitPrint() {
		if (files.length === 0 || isPrinting) return;

		isPrinting = true;
		const formData = new FormData();

		for (const f of files) {
			formData.append('files', f.file, f.file.name);
			
			const settings = {
				filename: f.file.name,
				pages: f.selectedPages ? Array.from(f.selectedPages).sort((a, b) => a - b).join(',') : 'all',
				copies: f.copies,
				colorMode: f.colorMode,
				format: f.format
			};
			formData.append('settings', JSON.stringify(settings));
		}

		try {
			const response = await fetch('/api/print', {
				method: 'POST',
				body: formData
			});

			const text = await response.text();

			if (response.ok) {
				alert(`✅ Успешно отправлено в печать!\n${text}`);
			} else {
				alert(`❌ Ошибка печати (${response.status}):\n${text}`);
			}
		} catch (error) {
			console.error('Print submission error:', error);
			alert(`⚠️ Не удалось связаться с сервером печати.`);
		} finally {
			isPrinting = false;
		}
	}
</script>

{#if !activeFile}
<div class="page-container">
	<header class="header">
		<button class="back-btn" onclick={onBack}>← Назад</button>
		<h1>Печать</h1>
	</header>

	<main class="options">
		{#if files.length === 0}
			<div class="empty-upload">
				<p class="empty-hint">Загрузите файлы для печати</p>
				<button class="action-btn primary" onclick={triggerFileInput}>Загрузить файл(ы)</button>
			</div>
		{:else}
			{#each files as file (file.id)}
				<section class="option-group file-card" class:expanded={file.expanded}>
					<div class="file-row" onclick={() => toggleExpanded(file)}>
						<span class="chevron">{#if file.expanded}▼{:else}►{/if}</span>
						<span class="file-name" title={file.file.name}>{file.file.name}</span>
						<span class="file-row-actions" onclick={(e) => e.stopPropagation()}>
							{#if file.previewUrl}
								<button type="button" class="icon-btn" onclick={() => openPreview(file)} title="Предпросмотр">🔍</button>
							{/if}
							<button type="button" class="icon-btn danger" onclick={() => removeFile(file)} title="Удалить">✕</button>
						</span>
					</div>

					{#if file.expanded}
						<div class="file-options">
							<div class="option-sub print-params-row">
								<div class="pages-control">
									<label class="option-title compact">Страницы:</label>
									<button type="button" class="pages-btn" onclick={() => handlePagesClick(file)}>
										{pagesLabel(file)}
									</button>
								</div>
								<div class="copies-control-inline">
									<label class="option-title compact">Кол-во:</label>
									<div class="mini-counter">
										<button type="button" class="circle-btn small" onclick={() => decrementCopies(file)} disabled={file.copies <= 1}>−</button>
										<span class="copies-value">{file.copies} шт.</span>
										<button type="button" class="circle-btn small" onclick={() => incrementCopies(file)}>＋</button>
									</div>
								</div>
							</div>

							<div class="option-sub">
								<label class="option-title">Формат</label>
								<div class="toggle-group horizontal">
									{#each formats as f}
										<button type="button" class="toggle-btn {file.format === f ? 'active' : ''}" onclick={() => toggleFormat(file, f)}>{f}</button>
									{/each}
								</div>
							</div>

							<div class="option-sub">
								<label class="option-title">Цветность</label>
								<div class="toggle-group horizontal">
									{#each colorModes as c}
										<button type="button" class="toggle-btn {file.colorMode === c.id ? 'active' : ''}" onclick={() => toggleColor(file, c)}>{c.label}</button>
									{/each}
								</div>
							</div>

							<div class="option-sub quality-sub">
								<label class="option-title">Качество – {qualities[file.qualityIndex].label}</label>
								<input
									type="range"
									min={0}
									max={qualities.length - 1}
									step={1}
									value={file.qualityIndex}
									oninput={(e) => updateQuality(file, parseInt(e.target.value))}
									class="quality-slider"
									style="--fill: {qualityFillFor(file)}%"
								/>
								<div class="quality-marks-inline">
									{#each qualities as q}<span class="quality-mark">{q.label}</span>{/each}
								</div>
							</div>
						</div>
					{/if}
				</section>
			{/each}
			<button type="button" class="add-file-btn" onclick={triggerFileInput}>＋ Добавить файлы</button>
		{/if}
	</main>

	<footer class="actions">
		{#if files.length > 0}
			<p class="file-count">
				{files.length} {plFiles(files.length)}
				{#if extraCopies > 0}, {extraCopies} {plCopies(extraCopies)}{/if}
			</p>
		{/if}
		<div class="price-summary">
			<span class="summary-itogo">Итого</span>
			<span class="summary-price">{totalPrice()}₽</span>
		</div>
		<!-- ИЗМЕНЕННАЯ КНОПКА -->
		<button 
			type="button" 
			class="action-btn secondary" 
			onclick={submitPrint}
			disabled={isPrinting || files.length === 0}
		>
			{isPrinting ? 'Отправка...' : 'Печать'}
		</button>
		<input type="file" bind:this={fileInput} accept="image/*,.pdf" multiple onchange={handleFileSelect} style="display:none" />
	</footer>
</div>
{/if}

<!-- ═══════════════════════════════════════════════════════════ -->
<!-- ДЕЛЕГИРОВАНИЕ В ДОЧЕРНИЕ КОМПОНЕНТЫ                      -->
<!-- ═══════════════════════════════════════════════════════════ -->
{#if activeFile}
	<div class="overlay-backdrop" onclick={closeOverlay} role="dialog" aria-modal="true">
		<div class="overlay-window-wrapper" onclick={(e) => e.stopPropagation()}>
			{#if viewMode === 'gallery'}
				<SelectionPage
					file={activeFile}
					thumbnails={galleryThumbnails}
					loading={galleryLoading}
					onTogglePage={togglePageSelection}
					onSelectAll={selectAllPages}
					onDeselectAll={deselectAllPages}
					onClose={closeOverlay}
				/>
			{:else}
				<PreviewPage
					file={activeFile}
					pagesCache={previewPagesCache}
					isRendering={isPreviewRendering}
					onRequestPages={handlePreviewRequestPages}
					onClose={closeOverlay}
				/>
			{/if}
		</div>
	</div>
{/if}

<style>
	.page-container { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%); font-family: system-ui, -apple-system, sans-serif; color: #f5f7fa; }
	.header { padding: 24px 20px 8px; }
	.back-btn { background: none; border: none; color: #6366f1; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-bottom: 12px; }
	.header h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
	.options { flex: 1; padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
	.option-title { font-size: 13px; font-weight: 600; color: #8b93a1; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: block; }
	.option-title.compact { margin-bottom: 0; font-size: 12px; white-space: nowrap; margin-right: 8px; }
	.empty-upload { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
	.empty-hint { color: #8b93a1; font-size: 15px; margin: 0; }
	.file-card { border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; padding-bottom: 6px; }
	.file-row { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px; background: none; border: none; color: #f5f7fa; cursor: pointer; user-select: none; text-align: left; }
	.file-row:hover { background: rgba(255, 255, 255, 0.03); }
	.chevron { color: #6366f1; font-size: 12px; transition: transform 0.15s; }
	.file-name { flex: 1; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.file-row-actions { display: flex; gap: 6px; }
	.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: none; background: rgba(255, 255, 255, 0.08); color: #f5f7fa; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
	.icon-btn.danger { color: #ff6b6b; }
	.file-options { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 18px; }
	.option-sub { display: flex; flex-direction: column; gap: 8px; }
	.print-params-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 4px; }
	.pages-control { display: flex; align-items: center; flex: 1; min-width: 0; }
	.pages-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; border-radius: 8px; padding: 6px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; }
	.pages-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
	.copies-control-inline { display: flex; align-items: center; flex-shrink: 0; }
	.mini-counter { display: flex; align-items: center; gap: 8px; }
	.circle-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: #f5f7fa; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; padding: 0; line-height: 1; }
	.circle-btn.small { width: 28px; height: 28px; font-size: 14px; }
	.circle-btn:hover:not(:disabled) { background: rgba(99, 102, 241, 0.2); border-color: #6366f1; }
	.circle-btn:disabled { opacity: 0.3; cursor: not-allowed; }
	.copies-value { font-size: 14px; font-weight: 600; color: #fff; min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
	.toggle-group { display: flex; gap: 10px; }
	.toggle-btn { flex: 1; padding: 12px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); color: #f5f7fa; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; }
	.toggle-btn.active { background: rgba(99, 102, 241, 0.25); border-color: #6366f1; color: #fff; }
	.quality-slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); outline: none; }
	.quality-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #6366f1; cursor: pointer; border: 2px solid #fff; }
	.quality-marks-inline { display: flex; justify-content: space-between; font-size: 11px; color: #8b93a1; margin-top: 4px; }
	.add-file-btn { align-self: center; background: none; border: 1px dashed rgba(255, 255, 255, 0.18); color: #a9b0c0; font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 14px; cursor: pointer; margin-top: 8px; }
	.actions { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 12px; }
	.file-count { color: #8b93a1; font-size: 13px; margin: 0; text-align: center; line-height: 1.4; }
	.action-btn { width: 100%; padding: 16px 24px; border-radius: 16px; font-size: 16px; font-weight: 700; cursor: pointer; border: none; color: #fff; transition: opacity 0.2s; }
	.action-btn:disabled { opacity: 0.6; cursor: wait; }
	.action-btn.primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5); }
	.action-btn.secondary { background: linear-gradient(135deg, #5b8cff 0%, #38c6ff 100%); box-shadow: 0 8px 24px -6px rgba(72, 150, 255, 0.4); }
	.price-summary { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
	.summary-itogo { font-size: 30px; font-weight: 700; color: #8b93a1; }
	.summary-price { font-size: 38px; font-weight: 800; color: #fff; }
	.overlay-backdrop {
		position: fixed; inset: 0; z-index: 1000;
		background: rgba(10, 12, 18, 0.92); backdrop-filter: blur(12px);
		display: flex; align-items: center; justify-content: center; padding: 0;
	}
	.overlay-window-wrapper {
		width: 100%; height: 100%;
		display: flex; flex-direction: column;
		overflow: hidden;
	}
	@media (min-width: 768px) {
		.overlay-window-wrapper {
			max-width: 800px; max-height: 90vh;
			border-radius: 20px; height: auto;
			border: 1px solid rgba(255,255,255,0.1);
			background: #13151b;
		}
	}
</style>