<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Облік Лісу з Збереженням Даних</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f4f8;
            color: #334155;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        h1, h2, h3 {
            color: #1a202c;
        }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 1.5rem;
            z-index: 1000;
            border-radius: 12px;
        }
        .loading-overlay.hidden {
            display: none;
        }
        .spinner {
            border: 8px solid rgba(255, 255, 255, 0.3);
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .message-box {
            background-color: #e2e8f0;
            color: #2d3748;
            padding: 1rem;
            border-radius: 8px;
            margin-top: 1rem;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
            position: sticky;
            top: 20px;
            z-index: 500;
        }
        .message-box.show {
            opacity: 1;
        }
        .message-box.success {
            background-color: #d1fae5;
            color: #065f46;
        }
        .message-box.error {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .message-box.info {
            background-color: #e0f2fe;
            color: #1e40af;
        }
        /* Auth section is removed, but keeping some styles for app-content */
        .app-content {
            display: block; /* Ensure it's always visible */
        }
        .sawing-yield-control {
            @apply flex flex-wrap items-center justify-between p-4 bg-gray-100 rounded-lg shadow-md mb-8;
        }
        .sawing-yield-control label {
            @apply mr-2 font-medium text-gray-700;
        }
        .sawing-yield-control input[type="number"] {
            @apply p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 mr-4;
        }
        .upload-section {
            @apply text-center bg-white p-6 rounded-lg shadow-md mb-8;
        }
        .drop-zone {
            @apply border-2 border-dashed border-gray-300 rounded-lg p-10 text-center cursor-pointer hover:border-blue-500 transition-colors duration-200;
        }
        .drop-zone.drag-over {
            @apply border-blue-500 bg-blue-50;
        }
        .custom-file-upload {
            @apply bg-blue-500 text-white py-2 px-4 rounded-md cursor-pointer hover:bg-blue-600 transition-colors duration-200;
        }
        #imageUpload {
            @apply hidden; /* Hide the default file input */
        }
        .image-preview-container {
            @apply bg-white p-6 rounded-lg shadow-md mb-8;
        }
        .image-preview-item {
            @apply max-w-xs h-auto rounded-lg shadow-md border border-gray-200;
        }
        .ocr-text-container {
            @apply bg-white p-6 rounded-lg shadow-md mb-8;
        }
        #ocrTextEditor {
            min-height: 200px;
        }
        .table-container {
            @apply bg-white p-6 rounded-lg shadow-md mb-8;
        }
        table {
            @apply w-full border-collapse text-left;
        }
        th, td {
            @apply py-2 px-4 border-b border-gray-200;
        }
        thead th {
            @apply bg-gray-50 uppercase text-xs font-semibold text-gray-700;
        }
        tbody tr:nth-child(even) {
            @apply bg-gray-50;
        }
        .action-button {
            @apply bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors duration-200;
        }
        .delete-button {
            @apply bg-red-500 hover:bg-red-600;
        }
        .checkbox-container {
            @apply flex items-center justify-center;
        }
        .checkbox-container input[type="checkbox"] {
            @apply h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500;
        }
        .summary-section, .export-summary-section, .origin-report-section {
            @apply bg-white p-6 rounded-lg shadow-md mb-8;
        }
        .summary-value {
            @apply font-bold text-blue-700;
        }
        .ttn-summary-block, .overall-summary-block {
            @apply p-4 mb-4 rounded-lg border border-gray-200;
        }
        .ttn-summary-block {
            @apply bg-blue-50;
        }
        .overall-summary-block {
            @apply bg-indigo-50 border-indigo-200;
        }
        .export-item-report {
            @apply border-b border-gray-200 pb-4 mb-4;
        }
        .log-contribution {
            @apply pl-4 border-l-2 border-gray-300 mt-2 text-sm;
        }
        .pmd-card {
            background-color: #f0f8ff; /* Lightest blue for PMD cards */
            border: 1px solid #cceeff;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .certificate-section {
            @apply bg-white p-6 rounded-lg shadow-md mb-8;
        }
        .certificate-item {
            @apply bg-yellow-50 p-4 rounded-lg shadow-sm border border-yellow-200 mb-2;
        }
        .certificate-input-group {
            @apply flex flex-wrap items-center gap-4 mb-4;
        }
        .certificate-input-group label {
            @apply font-medium text-gray-700;
        }
        .certificate-input-group input[type="text"],
        .certificate-input-group input[type="date"] {
            @apply p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-400;
        }
        /* Styles for the Origin Report Section */
        #originReportSection p {
            margin-bottom: 8px;
        }
        #originReportSection p strong {
            color: #2d3748;
        }
        #originReportSection .report-highlight {
            font-weight: bold;
            color: #059669; /* Green for highlights */
        }
        #originReportSection .report-value {
            font-weight: bold;
            color: #3b82f6; /* Blue for values */
        }
        /* Print-specific styles */
        @media print {
            body > *:not(#originReportSection) {
                display: none !important; /* Hide all other elements when printing */
            }
            #originReportSection {
                display: block !important; /* Ensure the report section is visible */
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
                background-color: #fff !important; /* White background for print */
                color: #000 !important; /* Black text for print */
            }
            #originReportSection h2,
            #originReportSection h3,
            #originReportSection p,
            #originReportSection .remaining-volume-summary {
                color: #000 !important; /* Ensure all text is black for printing */
            }
            .action-button.print-button {
                display: none !important; /* Hide the print button itself when printing */
            }
        }
    </style>
    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
        import { getAuth, signInAnonymously, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
        import { getFirestore, doc, addDoc, setDoc, updateDoc, deleteDoc, onSnapshot, collection, query, where, getDocs } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";

        // --- GLOBAL FIREBASE VARIABLES (provided by Canvas environment) ---
        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
        const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : { /* Your default Firebase config for testing */ };

        let app;
        let db;
        let auth;
        let userId = null;
        let isAuthReady = false; // Flag to ensure Firestore operations only run after auth

        // --- DOM Element References ---
        let messageBox;
        let loadingOverlay;
        let loadingMessage;
        let sawingYieldFactorInput;
        let totalExportVolumeDisplay;
        let imageUploadInput;
        let dropZone;
        let imagePreviewsContainer;
        let ocrTextEditor;
        let processOcrTextBtn;
        let addManualLogBtn;
        let addManualTtnBlockBtn;
        let logsTableBody;
        let summarySection;
        let exportTableBody;
        let originReportSection;
        let addExportItemBtn;
        let generateOriginReportBtn;
        let pmdDisplaySection;
        let certificateNumberInput;
        let certificateDateInput;
        let addCertificateBtn;
        let certificatesDisplaySection;
        let userIdDisplay; // This will now be dynamically managed or used for display only

        // Initialize these after DOM is ready
        let SAWING_YIELD_FACTOR; 
        let SAW_KERF_MM; // Although not used in report calc, kept for input visibility

        // Firestore collection references (initialized after auth)
        let ttnBlocksCollection;
        let logsCollection;
        let exportedMaterialsCollection;
        let certificatesCollection;


        // --- Module: utils.js ---
        function showMessage(message, type = 'info', rawTextForDebug = '') {
            if (!messageBox) { 
                console.error("MessageBox element not found. Message:", message);
                return;
            }
            let displayMessage = message;
            if (type === 'error' && rawTextForDebug) {
                const truncatedText = rawTextForDebug.substring(0, 200) + (rawTextForDebug.length > 200 ? '...' : ''); 
                displayMessage += `\n\n(Частина розпізнаного тексту: "${truncatedText}". Повний текст дивіться в консолі розробника.)`;
                console.error("Повний розпізнаний текст для налагодження:", rawTextForDebug);
            }
            messageBox.textContent = displayMessage;
            messageBox.className = `message-box show ${type}`;
            setTimeout(() => {
                messageBox.classList.remove('show');
            }, 10000); 
        }

        function setLoading(isLoading, message = "Завантаження...") {
            if (!loadingOverlay || !loadingMessage) { 
                console.warn("Loading overlay elements not found. Loading state:", isLoading);
                return;
            }
            if (isLoading) {
                loadingMessage.textContent = message;
                loadingOverlay.classList.remove('hidden');
            } else {
                loadingOverlay.classList.add('hidden');
            }
        }

        async function fetchWithRetry(url, options, maxRetries = 3) {
            let retries = 0;
            let delay = 1000; 

            while (retries < maxRetries) {
                try {
                    const response = await fetch(url, options);
                    if (response.ok) {
                        return await response.json(); 
                    } else if (response.status === 429) { 
                        console.warn(`API rate limit exceeded. Retrying in ${delay / 1000}s...`);
                        await new Promise(res => setTimeout(res, delay)); 
                        delay *= 2; 
                        retries++;
                    } else {
                        throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
                    }
                } catch (error) {
                    console.error("Fetch error:", error);
                    if (retries < maxRetries) {
                        retries++;
                        await new Promise(res => setTimeout(res, delay));
                        delay *= 2;
                    } else {
                        throw error; 
                    }
                }
            }
            throw new Error(`Failed to fetch after ${maxRetries} retries.`);
        }

        // --- Module: auth.js (Simplified for anonymous-only) ---
        /**
         * Initializes Firebase app and anonymous authentication.
         */
        async function initFirebase() {
            app = initializeApp(firebaseConfig);
            db = getFirestore(app);
            auth = getAuth(app);

            return new Promise((resolve) => {
                onAuthStateChanged(auth, async (user) => {
                    if (user) {
                        userId = user.uid;
                        console.log("Authenticated with Firebase UID:", userId);
                    } else {
                        // Always sign in anonymously if no user is present
                        try {
                            await signInAnonymously(auth);
                            userId = auth.currentUser.uid; // Update userId after anonymous sign-in
                            console.log("Signed in anonymously with UID:", userId);
                        } catch (anonError) {
                            console.error("Firebase Anonymous Auth failed:", anonError);
                            // Fallback to a random UUID if anonymous sign-in fails, data will not persist across sessions then
                            userId = crypto.randomUUID(); 
                            console.warn("Using a random UUID for user ID. Data will not be persistent across sessions if anonymous auth fails.");
                        }
                    }
                    isAuthReady = true; // Mark as ready after initial auth state is processed
                    // Now safe to load data, regardless of auth success, using current userId
                    loadDataFromFirestore();
                    updateUI(); // Initial UI update after auth is ready
                    resolve();
                });
            });
        }


        // --- Module: data-management.js ---
        let allTTNs = []; 
        let ttnIdCounter = 1; 
        let manualTtnBlockCounter = 1; 
        let currentActiveTtnId = null; 
        let exportedMaterialData = []; 
        let exportItemIdCounter = 1; 
        let certificatesData = []; 

        function recalculateLogVolume(log) {
            const diameterInMeters = log.d / 100;
            const radiusInMeters = diameterInMeters / 2;
            log.V = Math.PI * Math.pow(radiusInMeters, 2) * log.L;
            log.V = parseFloat(log.V.toFixed(4));
            updateLogInFirestore(log);
        }

        async function loadDataFromFirestore() {
            if (!isAuthReady || !db || !userId) {
                console.warn("Firestore not ready or user ID not available. Cannot load data.");
                return;
            }
            console.log("Attempting to load data from Firestore for user:", userId);

            ttnBlocksCollection = collection(db, `artifacts/${appId}/users/${userId}/ttnBlocks`);
            logsCollection = collection(db, `artifacts/${appId}/users/${userId}/logs`);
            exportedMaterialsCollection = collection(db, `artifacts/${appId}/users/${userId}/exportedMaterials`);
            certificatesCollection = collection(db, `artifacts/${appId}/users/${userId}/certificates`);

            onSnapshot(ttnBlocksCollection, (snapshot) => {
                allTTNs = [];
                snapshot.forEach(doc => {
                    const data = doc.data();
                    allTTNs.push({ ...data, ttnId: doc.id, individualLogs: [] });
                });
                allTTNs.sort((a, b) => {
                    const dateA = a.createdAt?.toDate ? a.createdAt.toDate().getTime() : 0;
                    const dateB = b.createdAt?.toDate ? b.createdAt.toDate().getTime() : 0;
                    if (dateA && dateB) return dateA - dateB;
                    return a.ttnId.localeCompare(b.ttnId);
                });
                console.log("TTN Blocks updated:", allTTNs.length);
                updateUI();
            }, (error) => {
                console.error("Error listening to TTN blocks:", error);
                showMessage("Помилка завантаження ТТН.", "error");
            });

            onSnapshot(logsCollection, (snapshot) => {
                const tempLogsMap = new Map();
                snapshot.forEach(doc => {
                    const logData = doc.data();
                    if (logData.ttnId) {
                        if (!tempLogsMap.has(logData.ttnId)) {
                            tempLogsMap.set(logData.ttnId, []);
                        }
                        tempLogsMap.get(logData.ttnId).push({ ...logData, id: doc.id });
                    }
                });

                allTTNs.forEach(ttn => {
                    ttn.individualLogs = tempLogsMap.get(ttn.ttnId) || [];
                    ttn.individualLogs.sort((a, b) => (a.tagNumber || '').localeCompare(b.tagNumber || ''));
                });
                console.log("Logs updated for all TTNs.");
                updateUI();
            }, (error) => {
                console.error("Error listening to logs:", error);
                showMessage("Помилка завантаження колод.", "error");
            });

            onSnapshot(exportedMaterialsCollection, (snapshot) => {
                exportedMaterialData = [];
                snapshot.forEach(doc => {
                    exportedMaterialData.push({ ...doc.data(), id: doc.id });
                });
                exportedMaterialData.sort((a, b) => {
                    const dateA = a.createdAt?.toDate ? a.createdAt.toDate().getTime() : 0;
                    const dateB = b.createdAt?.toDate ? b.createdAt.toDate().getTime() : 0;
                    if (dateA && dateB) return dateA - dateB;
                    return a.id.localeCompare(b.id);
                });
                console.log("Exported materials updated:", exportedMaterialData.length);
                updateUI();
            }, (error) => {
                console.error("Error listening to exported materials:", error);
                showMessage("Помилка завантаження експортних матеріалів.", "error");
            });

            onSnapshot(certificatesCollection, (snapshot) => {
                certificatesData = [];
                snapshot.forEach(doc => {
                    certificatesData.push({ ...doc.data(), id: doc.id });
                });
                certificatesData.sort((a, b) => {
                    const dateA = a.issueDate ? new Date(a.issueDate).getTime() : 0;
                    const dateB = b.issueDate ? new Date(b.issueDate).getTime() : 0;
                    if (dateA && dateB) return dateA - dateB;
                    return a.id.localeCompare(b.id);
                });
                console.log("Certificates updated:", certificatesData.length);
                updateUI();
            }, (error) => {
                console.error("Error listening to certificates:", error);
                showMessage("Помилка завантаження сертифікатів.", "error");
            });
        }

        async function getNextGlobalLogIdForFirestore() {
            // This function is for generating unique temporary IDs before Firestore assigns its own
            // or when Firestore ID isn't directly used as a counter.
            // For now, it's safer to let Firestore assign IDs and rely on onSnapshot to update the client-side state.
            // When adding a new log, we use `doc(logsCollection)` which auto-generates an ID.
            return new Date().getTime().toString(); // Simple timestamp-based unique ID
        }

        async function addManualTtnBlock() {
            if (!isAuthReady || !ttnBlocksCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }

            const newManualTtnDocRef = doc(ttnBlocksCollection);
            const newManualTtnId = newManualTtnDocRef.id;

            const newManualTTN = {
                ttnId: newManualTtnId,
                series: '', 
                number: '', 
                rawOcrText: 'Дані введені вручну', 
                isManualTtn: true,
                createdAt: new Date()
            };

            try {
                await setDoc(newManualTtnDocRef, newManualTTN);
                currentActiveTtnId = newManualTtnId;
                showMessage(`Новий ручний блок ТТН ${newManualTtnId} додано.`, "success");
            } catch (error) {
                console.error("Error adding manual TTN block:", error);
                showMessage("Помилка додавання ручного ТТН блоку.", "error");
            }
        }

        async function addManualLogEntry() {
            if (!isAuthReady || !logsCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }

            let targetTtn = null;

            if (currentActiveTtnId) {
                let potentialTarget = allTTNs.find(ttn => ttn.ttnId === currentActiveTtnId);
                if (potentialTarget && potentialTarget.isManualTtn) {
                    targetTtn = potentialTarget;
                }
            }

            if (!targetTtn) {
                await addManualTtnBlock();
                await new Promise(resolve => setTimeout(resolve, 500)); 
                targetTtn = allTTNs.find(ttn => ttn.ttnId === currentActiveTtnId);
                
                if (!targetTtn) { 
                    showMessage("Помилка: Не вдалося створити блок ручного вводу ТТН для додавання колоди.", "error");
                    return;
                }
            }

            const newLogDocRef = doc(logsCollection);
            const newLogFirestoreId = newLogDocRef.id;

            const newManualLogData = {
                id: newLogFirestoreId,
                ttnId: targetTtn.ttnId, 
                tagNumber: '', 
                L: 0,
                d: 0,
                V: 0, 
                isUsed: false,
                isManual: true,
                createdAt: new Date()
            };

            try {
                await setDoc(newLogDocRef, newManualLogData);
                showMessage("Нову колоду додано.", "success");
            } catch (error) {
                console.error("Error adding manual log entry:", error);
                showMessage("Помилка додавання нової колоди.", "error");
            }
        }

        async function updateLogInFirestore(log) {
            if (!isAuthReady || !logsCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }
            try {
                const logRef = doc(logsCollection, log.id);
                await updateDoc(logRef, {
                    tagNumber: log.tagNumber,
                    L: log.L,
                    d: log.d,
                    V: log.V,
                    isUsed: log.isUsed
                });
            } catch (error) {
                console.error("Error updating log in Firestore:", error);
                showMessage("Помилка оновлення колоди.", "error");
            }
        }

        async function updateTtnInFirestore(ttn) {
            if (!isAuthReady || !ttnBlocksCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }
            try {
                const ttnRef = doc(ttnBlocksCollection, ttn.ttnId);
                await updateDoc(ttnRef, {
                    series: ttn.series,
                    number: ttn.number
                });
            } catch (error) {
                console.error("Error updating TTN in Firestore:", error);
                showMessage("Помилка оновлення ТТН.", "error");
            }
        }

        async function deleteLogEntry(logIdToDelete, ttnIdOfLog) {
            if (!isAuthReady || !logsCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }
            try {
                await deleteDoc(doc(logsCollection, logIdToDelete));
                showMessage("Колоду видалено.", "info");

                const ttn = allTTNs.find(t => t.ttnId === ttnIdOfLog);
                if (ttn && ttn.isManualTtn) {
                    const q = query(logsCollection, where("ttnId", "==", ttn.ttnId));
                    const querySnapshot = await getDocs(q);
                    if (querySnapshot.empty) {
                        await deleteTtnBlock(ttn.ttnId);
                    }
                }
            } catch (error) {
                console.error("Error deleting log entry:", error);
                showMessage("Помилка видалення колоди.", "error");
            }
        }

        async function deleteTtnBlock(ttnIdToDelete) {
            if (!isAuthReady || !ttnBlocksCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }
            try {
                const q = query(logsCollection, where("ttnId", "==", ttnIdToDelete));
                const querySnapshot = await getDocs(q);
                const deleteLogPromises = [];
                querySnapshot.forEach((docToDelete) => {
                    deleteLogPromises.push(deleteDoc(doc(logsCollection, docToDelete.id)));
                });
                await Promise.all(deleteLogPromises);

                await deleteDoc(doc(ttnBlocksCollection, ttnIdToDelete));
                
                if (currentActiveTtnId === ttnIdToDelete) {
                    currentActiveTtnId = null; 
                }
                showMessage(`Блок ТТН ${ttnIdToDelete} та пов'язані колоди видалено.`, "info");
            } catch (error) {
                console.error("Error deleting TTN block:", error);
                showMessage("Помилка видалення ТТН блоку.", "error");
            }
        }

        async function addExportItem() {
            if (!isAuthReady || !exportedMaterialsCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }
            const newExportDocRef = doc(exportedMaterialsCollection);
            const newExportItemId = newExportDocRef.id;

            const newItemData = {
                id: newExportItemId,
                thickness: 0,
                width: 0,
                length: 0,
                quantity: 0,
                document_type: "ManualExport",
                createdAt: new Date()
            };
            try {
                await setDoc(newExportDocRef, newItemData);
                showMessage("Нову позицію експорту додано.", "success");
            } catch (error) {
                console.error("Error adding export item:", error);
                showMessage("Помилка додавання нової позиції експорту.", "error");
            }
        }

        async function updateExportItemInFirestore(item) {
            if (!isAuthReady || !exportedMaterialsCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }
            try {
                const itemRef = doc(exportedMaterialsCollection, item.id);
                const updateData = {
                    thickness: item.thickness,
                    width: item.width,
                    length: item.length,
                    quantity: item.quantity
                };
                await updateDoc(itemRef, updateData);
            } catch (error) {
                console.error("Error updating export item in Firestore:", error);
                showMessage("Помилка оновлення позиції експорту.", "error");
            }
        }

        async function deleteExportItem(idToDelete) {
            if (!isAuthReady || !exportedMaterialsCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }
            try {
                await deleteDoc(doc(exportedMaterialsCollection, idToDelete));
                showMessage("Позицію експорту видалено.", "info");
            } catch (error) {
                console.error("Error deleting export item:", error);
                showMessage("Помилка видалення позиції експорту.", "error");
            }
        }

        async function addCertificate() {
            if (!isAuthReady || !certificatesCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }

            const certNumber = certificateNumberInput.value.trim();
            const certDate = certificateDateInput.value.trim();

            if (!certNumber || !certDate) {
                showMessage("Будь ласка, введіть номер та дату сертифіката.", "error");
                return;
            }

            const newCertDocRef = doc(certificatesCollection);
            const newCertId = newCertDocRef.id;

            const newCertificateData = {
                id: newCertId,
                number: certNumber,
                issueDate: certDate,
                createdAt: new Date()
            };

            try {
                await setDoc(newCertDocRef, newCertificateData);
                showMessage(`Сертифікат ${certNumber} додано.`, "success");
                certificateNumberInput.value = '';
                certificateDateInput.value = '';
            } catch (error) {
                console.error("Error adding certificate:", error);
                showMessage("Помилка додавання сертифіката.", "error");
            }
        }

        async function deleteCertificate(idToDelete) {
            if (!isAuthReady || !certificatesCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }
            try {
                await deleteDoc(doc(certificatesCollection, idToDelete));
                showMessage("Сертифікат видалено.", "info");
            } catch (error) {
                console.error("Error deleting certificate:", error);
                showMessage("Помилка видалення сертифіката.", "error");
            }
        }


        // --- Module: ui-handlers.js ---
        async function handleImageUpload(files) {
            if (files.length === 0) {
                showMessage("Файли не вибрано.", "info");
                return;
            }
            if (!isAuthReady) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }

            setLoading(true, `Обробка ${files.length} зображень, будь ласка, зачекайте...`);
            showMessage("Завантаження та аналіз зображень...", "info");

            imagePreviewsContainer.innerHTML = ''; 
            ocrTextEditor.textContent = ''; 

            let combinedOcrText = ""; 
            const apiKey = ""; 
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;

            try {
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    setLoading(true, `Розпізнавання тексту з зображення ${i + 1} з ${files.length}...`);
                    
                    const img = document.createElement('img');
                    img.src = URL.createObjectURL(file);
                    img.alt = `ТТН Фото ${i + 1}`;
                    img.className = 'image-preview-item';
                    imagePreviewsContainer.appendChild(img);

                    const base64ImageData = await new Promise((resolve, reject) => {
                        const reader = new FileReader();
                        reader.onload = (e) => resolve(e.target.result.split(',')[1]); 
                        reader.onerror = reject;
                        reader.readAsDataURL(file);
                    });

                    const rawTextPrompt = `Витягни весь текст з цього зображення.`;
                    const rawTextPayload = {
                        contents: [{
                            role: "user",
                            parts: [
                                { text: rawTextPrompt },
                                { inlineData: { mimeType: file.type, data: base64ImageData } }
                            ]
                        }],
                    };

                    const rawTextResult = await fetchWithRetry(apiUrl, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(rawTextPayload)
                    });

                    if (!rawTextResult || !rawTextResult.candidates || rawTextResult.candidates.length === 0 || !rawTextResult.candidates[0].content || !rawTextResult.candidates[0].content.parts || rawTextResult.candidates[0].content.parts.length === 0) {
                        console.warn(`Не вдалося отримати текст із зображення ${i + 1}.`);
                        continue;
                    }

                    combinedOcrText += rawTextResult.candidates[0].content.parts[0].text + "\n\n";
                }

                if (combinedOcrText) {
                    ocrTextEditor.textContent = combinedOcrText.trim();
                    showMessage("Увесь текст з фото завантажено. Перегляньте та відредагуйте його, потім натисніть 'Аналізувати Розпізнані Дані'.", "success");
                } else {
                    showMessage("Не вдалося розпізнати текст з жодного із зображень.", "error");
                }

            } catch (error) {
                console.error("Помилка при обробці зображень:", error);
                showMessage(`Помилка: ${error.message}. Будь ласка, спробуйте ще раз.`, "error");
            } finally {
                setLoading(false); 
            }
        }

        async function processTtnData(parsedData, rawOcrText) {
            if (!isAuthReady || !ttnBlocksCollection || !logsCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }

            const newLogGroups = parsedData.log_groups.map(item => ({
                L: parseFloat(item.L) || 0,
                d: parseFloat(item.d) || 0,
                n: parseInt(item.n) || 0,
                total_V_for_group: parseFloat(item.total_V_for_group) || 0,
                V_per_log_from_ttn: (parseFloat(item.n) || 0) > 0 ? ((parseFloat(item.total_V_for_group) || 0) / (parseFloat(item.n) || 0)) : 0,
                tag_numbers: Array.isArray(item.tag_numbers) ? item.tag_numbers.filter(tag => typeof tag === 'string' && tag.match(/^\d{7,10}$/)) : [] 
            }));

            const newTtnDocRef = doc(ttnBlocksCollection);
            const newTTNId = newTtnDocRef.id;

            const newTTNData = {
                ttnId: newTTNId,
                series: parsedData.ttn_series || '', 
                number: parsedData.ttn_number || '', 
                rawOcrText: rawOcrText, 
                logGroups: newLogGroups,
                isManualTtn: false,
                createdAt: new Date()
            };
            await setDoc(newTtnDocRef, newTTNData);

            const addLogPromises = [];
            for (const group of newLogGroups) {
                for (let i = 0; i < group.n; i++) {
                    let tagNum = (Array.isArray(group.tag_numbers) && i < group.tag_numbers.length) ? group.tag_numbers[i] : `Авто-${newTTNId.substring(0,4)}-${Math.floor(Math.random() * 1000000)}`;
                    const newLogDocRef = doc(logsCollection);
                    addLogPromises.push(setDoc(newLogDocRef, {
                        id: newLogDocRef.id,
                        ttnId: newTTNId, 
                        tagNumber: tagNum,
                        L: group.L,
                        d: group.d,
                        V: group.V_per_log_from_ttn,
                        isUsed: false, 
                        isManual: false,
                        createdAt: new Date()
                    }));
                }
            }
            await Promise.all(addLogPromises);
            showMessage(`Дані для ТТН ${newTTNId} успішно аналізовано та збережено!`, "success");
            ocrTextEditor.textContent = ''; 
        }

        async function processPmdData(parsedData, rawOcrText) {
            if (!isAuthReady || !exportedMaterialsCollection) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }

            const newPmdDocRef = doc(exportedMaterialsCollection);
            const newPmdId = newPmdDocRef.id;

            const newPmdData = {
                id: newPmdId,
                document_type: "ПМД",
                declaration_number: parsedData.declaration_number || '',
                declaration_date: parsedData.declaration_date || '', 
                cargo_type: parsedData.cargo_type || '',
                total_volume_pmd: parsedData.total_volume_pmd || 0,
                hs_code: parsedData.hs_code || '',
                origin_country: parsedData.origin_country || '',
                destination_country: parsedData.destination_country || '',
                rawOcrText: rawOcrText,
                createdAt: new Date()
            };
            try {
                await setDoc(newPmdDocRef, newPmdData);
                showMessage(`Дані для ПМД ${newPmdId} успішно аналізовано та збережено!`, "success");
            } catch (error) {
                console.error("Error setting PMD data:", error);
                showMessage("Помилка збереження даних ПМД.", "error");
            }
            ocrTextEditor.textContent = ''; 
        }

        async function processOcrTextForDataExtraction() {
            if (!isAuthReady) {
                showMessage("Система не готова. Будь ласка, зачекайте.", "error");
                return;
            }

            const currentOcrText = ocrTextEditor.textContent.trim();
            if (!currentOcrText) {
                showMessage("Відсутній текст для аналізу. Будь ласка, завантажте зображення або введіть текст.", "error");
                return;
            }

            setLoading(true, "Аналіз розпізнаних даних...");
            showMessage("Аналіз розпізнаних даних, будь ласка, зачекайте...", "info");

            const apiKey = ""; 
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;

            try {
                const jsonPrompt = `Проаналізуй наступний текст. Цей текст може бути результатом об'єднання розпізнаного тексту з кількох фотографій одного документа (або Транспортної Накладної - ТТН, або Податкової/Митна Декларації - ПМД).
                Твоє завдання:
                1.  Спробуй відновити цілісний та логічний порядок документа з наданого тексту, ігноруючи можливі фрагменти або повтори.
                2.  Визнач, який це тип документа: "ТТН" або "ПМД".
                3.  Якщо це ТТН, витягни серію та номер ТТН, а також інформацію про групи колод. Для кожної групи мені потрібна довжина (L у метрах), серединний діаметр (d у сантиметрах), кількість штук (n) та загальний об'єм групи (total_V_for_group у м³). Також, якщо в тексті для групи є "Бирки: " за яким слідують номери, витягни ці номери бірок. Номери бірок - це послідовності від 7 до 10 цифр без розділових знаків. Запиши їх як масив рядків 'tag_numbers'. Якщо бірки не знайдено, поле 'tag_numbers' може бути пустим масивом або відсутнім.
                4.  Якщо це ПМД, витягни:
                    - номер декларації (declaration_number), який починається з '24UA' та має 14 знаків.
                    - дату оформлення (declaration_date), яка знаходиться після слова "Результат:" у форматі "ДД.ММ.РРРР".
                    - тип вантажу/назву товару (cargo_type)
                    - загальний об'єм (total_volume_pmd, у м³)
                    - код ТН ЗЕД (hs_code)
                    - країну походження (origin_country)
                    - країну призначення (destination_country)

                Надай відповідь у форматі JSON.
                Приклад очікуваного формату для ТТН:
                {
                    "document_type": "ТТН",
                    "ttn_series": "АБ",
                    "ttn_number": "1234567",
                    "log_groups": [
                        {"L": 5, "d": 38, "n": 2, "total_V_for_group": 0.8440, "tag_numbers": ["123456789", "987654321"]},
                        {"L": 5, "d": 34, "n": 1, "total_V_for_group": 0.3760, "tag_numbers": []}
                        ]
                    }
                    Приклад очікуваного формату для ПМД:
                    {
                        "document_type": "ПМД",
                        "declaration_number": "24UA1234567890",
                        "declaration_date": "05.05.2025",
                        "cargo_type": "Лісоматеріали сосни",
                        "total_volume_pmd": 25.5,
                        "hs_code": "4407100000",
                        "origin_country": "Україна",
                        "destination_country": "Польща"
                    }

                    Якщо не вдалося визначити тип документа або витягти дані, поверни порожній об'єкт або об'єкт з document_type: "Не визначено".
                    Ось текст для аналізу:
                    ${currentOcrText}`;

                const jsonPayload = {
                    contents: [{ role: "user", parts: [{ text: jsonPrompt }] }],
                    generationConfig: {
                        responseMimeType: "application/json"
                    }
                };
                
                const jsonResult = await fetchWithRetry(apiUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(jsonPayload)
                });
                
                if (!jsonResult || !jsonResult.candidates || jsonResult.candidates.length === 0 || !jsonResult.candidates[0].content || !jsonResult.candidates[0].content.parts || jsonResult.candidates[0].content.parts.length === 0) {
                    throw new Error("Не вдалося отримати структуровані дані від LLM.");
                }

                const jsonResponseText = jsonResult.candidates[0].content.parts[0].text;
                const parsedData = JSON.parse(jsonResponseText); 

                if (parsedData.document_type === "ТТН") {
                    await processTtnData(parsedData, currentOcrText);
                } else if (parsedData.document_type === "ПМД") {
                    await processPmdData(parsedData, currentOcrText);
                } else {
                    showMessage("Не вдалося визначити тип документа або витягти дані. Будь ласка, перевірте відредагований текст та спробуйте ще раз.", "error", currentOcrText);
                }
                ocrTextEditor.textContent = ''; 

            } catch (error) {
                console.error("Помилка при аналізі розпізнаного тексту або збереженні у Firestore:", error);
                showMessage(`Помилка: ${error.message}. Будь ласка, перевірте відредагований текст та спробуйте ще раз.`, "error", currentOcrText);
                ocrTextEditor.textContent = '';
            } finally {
                setLoading(false); 
            }
        }

        function populateLogsTable() {
            if (!logsTableBody) {
                console.error("logsTableBody element not found.");
                return;
            }
            logsTableBody.innerHTML = ''; 

            const sortedTTNs = [...allTTNs].sort((a, b) => {
                const dateA = a.createdAt?.toDate ? a.createdAt.toDate().getTime() : 0;
                const dateB = b.createdAt?.toDate ? b.createdAt.toDate().getTime() : 0;
                if (dateA && dateB) return dateA - dateB;
                return a.ttnId.localeCompare(b.ttnId);
            });

            sortedTTNs.forEach(ttn => {
                const ttnHeaderRow = logsTableBody.insertRow();
                if (ttn.isManualTtn) {
                    ttnHeaderRow.className = 'bg-purple-200 text-purple-900 font-bold';
                    ttnHeaderRow.innerHTML = `
                        <td colspan="3" class="py-3 px-4 rounded-tl-lg">
                            Серія ТТН: <input type="text" value="${ttn.series}" class="ttn-series-input w-24 p-1 border rounded" data-ttn-id="${ttn.ttnId}">
                            Номер ТТН: <input type="text" value="${ttn.number}" class="ttn-number-input w-24 p-1 border rounded" data-ttn-id="${ttn.ttnId}">
                        </td>
                        <td colspan="2" class="text-right py-3 px-4">
                            Блок ТТН: ${ttn.ttnId}
                        </td>
                        <td class="text-center py-3 px-4 rounded-tr-lg">
                            <button class="action-button delete-button delete-ttn-block-btn" data-ttn-id="${ttn.ttnId}">Видалити ТТН</button>
                        </td>
                    `;
                    ttnHeaderRow.querySelector('.ttn-series-input').addEventListener('change', (event) => {
                        const currentTtn = allTTNs.find(t => t.ttnId === event.target.dataset.ttnId);
                        if (currentTtn) {
                            currentTtn.series = event.target.value;
                            updateTtnInFirestore(currentTtn);
                        }
                    });
                    ttnHeaderRow.querySelector('.ttn-number-input').addEventListener('change', (event) => {
                        const currentTtn = allTTNs.find(t => t.ttnId === event.target.dataset.ttnId);
                        if (currentTtn) {
                            currentTtn.number = event.target.value;
                            updateTtnInFirestore(currentTtn);
                        }
                    });
                    ttnHeaderRow.querySelector('.delete-ttn-block-btn').addEventListener('click', (event) => {
                        deleteTtnBlock(event.target.dataset.ttnId);
                    });
                } else {
                    ttnHeaderRow.className = 'bg-blue-200 text-blue-900 font-bold';
                    ttnHeaderRow.innerHTML = `
                        <td colspan="4" class="py-3 px-4 rounded-tl-lg">
                            Серія ТТН: <input type="text" value="${ttn.series}" class="ttn-series-input w-24 p-1 border rounded" data-ttn-id="${ttn.ttnId}">
                            Номер ТТН: <input type="text" value="${ttn.number}" class="ttn-number-input w-24 p-1 border rounded" data-ttn-id="${ttn.ttnId}">
                        </td>
                        <td colspan="2" class="text-right py-3 px-4 rounded-tr-lg">
                            Блок ТТН: ${ttn.ttnId}
                        </td>
                    `;
                    ttnHeaderRow.querySelector('.ttn-series-input').addEventListener('change', (event) => {
                        const currentTtn = allTTNs.find(t => t.ttnId === event.target.dataset.ttnId);
                        if (currentTtn) {
                            currentTtn.series = event.target.value;
                            updateTtnInFirestore(currentTtn);
                        }
                    });
                    ttnHeaderRow.querySelector('.ttn-number-input').addEventListener('change', (event) => {
                        const currentTtn = allTTNs.find(t => t.ttnId === event.target.dataset.ttnId);
                        if (currentTtn) {
                            currentTtn.number = event.target.value;
                            updateTtnInFirestore(currentTtn);
                        }
                    });
                }

                const sortedLogs = [...ttn.individualLogs].sort((a, b) => (a.tagNumber || '').localeCompare(b.tagNumber || ''));

                sortedLogs.forEach(log => {
                    const row = logsTableBody.insertRow(); 
                    row.dataset.logId = log.id; 

                    const tagNumberCell = row.insertCell(); 
                    if (log.isManual) {
                        const tagNumberInput = document.createElement('input');
                        tagNumberInput.type = 'text';
                        tagNumberInput.value = log.tagNumber;
                        tagNumberInput.className = 'w-full px-2 py-1 border rounded-md text-sm text-center';
                        tagNumberInput.placeholder = 'Введіть номер бірки';
                        tagNumberInput.addEventListener('change', (event) => {
                            log.tagNumber = String(event.target.value); 
                            updateLogInFirestore(log); 
                        });
                        tagNumberCell.appendChild(tagNumberInput);
                    } else {
                        tagNumberCell.textContent = log.tagNumber;
                    }

                    const lengthCell = row.insertCell();
                    if (log.isManual) {
                        const lengthInput = document.createElement('input');
                        lengthInput.type = 'number';
                        lengthInput.value = log.L;
                        lengthInput.step = "0.01";
                        lengthInput.className = 'w-full px-2 py-1 border rounded-md text-sm text-center';
                        lengthInput.placeholder = 'Довжина (м)';
                        lengthInput.addEventListener('change', (event) => {
                            log.L = parseFloat(event.target.value) || 0;
                            recalculateLogVolume(log); 
                        });
                        lengthCell.appendChild(lengthInput);
                    } else {
                        lengthCell.textContent = log.L.toFixed(2);
                    }

                    const diameterCell = row.insertCell();
                    if (log.isManual) {
                        const diameterInput = document.createElement('input');
                        diameterInput.type = 'number';
                        diameterInput.value = log.d;
                        diameterInput.step = "0.1";
                        diameterInput.className = 'w-full px-2 py-1 border rounded-md text-sm text-center';
                        diameterInput.placeholder = 'Діаметр (см)';
                        diameterInput.addEventListener('change', (event) => {
                            log.d = parseFloat(event.target.value) || 0;
                            recalculateLogVolume(log); 
                        });
                        diameterCell.appendChild(diameterInput);
                    } else {
                        diameterCell.textContent = log.d;
                    }

                    const volumeCell = row.insertCell();
                    if (log.isManual) {
                        const volumeInput = document.createElement('input');
                        volumeInput.type = 'number';
                        volumeInput.value = log.V.toFixed(4); 
                        volumeInput.step = "0.0001";
                        volumeInput.className = 'w-full px-2 py-1 border rounded-md text-sm text-center';
                        volumeInput.placeholder = 'Об\'єм (м³)';
                        volumeInput.addEventListener('change', (event) => {
                            log.V = parseFloat(event.target.value) || 0; 
                            updateLogInFirestore(log); 
                        });
                        volumeCell.appendChild(volumeInput);
                    } else {
                        volumeCell.textContent = log.V.toFixed(4);
                    }

                    const checkboxCell = row.insertCell(); 
                    const checkboxContainer = document.createElement('div');
                    checkboxContainer.className = 'checkbox-container';
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.id = `checkbox-${log.id}`; 
                    checkbox.name = `log-${log.id}`;
                    checkbox.checked = log.isUsed; 

                    checkbox.addEventListener('change', (event) => {
                        log.isUsed = event.target.checked; 
                        console.log(`Log ${log.id} is now ${log.isUsed ? 'used' : 'not used'}`);
                        updateLogInFirestore(log); 
                    });
                    checkboxContainer.appendChild(checkbox);
                    checkboxCell.appendChild(checkboxContainer);

                    const actionsCell = row.insertCell();
                    const deleteButton = document.createElement('button');
                    deleteButton.textContent = 'Видалити';
                    deleteButton.className = 'action-button delete-button';
                    deleteButton.addEventListener('click', () => {
                        deleteLogEntry(log.id, ttn.ttnId);
                    });
                    actionsCell.appendChild(deleteButton);
                });
            });
        }
        
        function updateSummary() {
            if (!summarySection) {
                console.error("summarySection element not found.");
                return;
            }
            summarySection.innerHTML = '<h3 class="text-xl font-semibold mb-3 text-gray-700">Підсумок Об\'ємів та Кількість</h3>';
            // User ID display - updated to always show anonymous ID
            if (!userIdDisplay) { // Check if userIdDisplay element exists, create if not
                userIdDisplay = document.createElement('p');
                userIdDisplay.className = 'text-sm text-gray-500 mb-4';
                summarySection.appendChild(userIdDisplay);
            }
            userIdDisplay.textContent = `Ваш ID користувача: ${userId}`;


            let overallTotalTTNVolume = 0;
            let overallUsedVolume = 0;
            let overallTotalQuantity = 0;
            let overallUsedQuantity = 0;
            let overallTtnTotalQuantitySum = 0;

            allTTNs.forEach(ttn => {
                let ttnTotalVolume = 0;
                let ttnUsedVolume = 0;
                let ttnTotalQuantity = 0;
                let ttnUsedQuantity = 0;
                let ttnQuantityFromRawOcr = 'Не знайдено';

                ttn.individualLogs.forEach(log => {
                    if (typeof log.V === 'number') {
                        ttnTotalVolume += log.V;
                    }
                });
                
                ttn.individualLogs.forEach(log => {
                    if (log.isUsed && typeof log.V === 'number') {
                        ttnUsedVolume += log.V;
                    }
                });

                ttnTotalQuantity = ttn.individualLogs.length;
                ttnUsedQuantity = ttn.individualLogs.filter(log => log.isUsed).length;

                if (!ttn.isManualTtn) {
                    const potentialTotalQuantityMarkers = ["разом:", "разом"];
                    const rawTextForQuantitySearch = ttn.rawOcrText ? ttn.rawOcrText.toLowerCase() : '';

                    for (const marker of potentialTotalQuantityMarkers) {
                        const markerIndex = rawTextForQuantitySearch.indexOf(marker);
                        if (markerIndex !== -1) {
                            const textAfterMarker = rawTextForQuantitySearch.substring(markerIndex + marker.length);
                            const match = textAfterMarker.match(/\s*(\d+)/);
                            if (match && match[1]) {
                                ttnQuantityFromRawOcr = parseInt(match[1]);
                                break;
                            }
                        }
                    }
                } else {
                    ttnQuantityFromRawOcr = ttnTotalQuantity; 
                }


                const ttnSummaryBlock = document.createElement('div');
                ttnSummaryBlock.className = 'ttn-summary-block';
                ttnSummaryBlock.innerHTML = `
                    <h4 class="font-bold text-lg mb-2 ${ttn.isManualTtn ? 'text-purple-800' : 'text-blue-800'}">Підсумок для ${ttn.ttnId} (Серія: ${ttn.series || 'не вказано'}, Номер: ${ttn.number || 'не вказано'})</h4>
                    <p>Загальний об'єм цієї ТТН: <span class="summary-value">${ttnTotalVolume.toFixed(4)} м³</span></p>
                    <p>Використаний об'єм цієї ТТН: <span class="summary-value">${ttnUsedVolume.toFixed(4)} м³</span></p>
                    <p>Загальна кількість штук цієї ТТН: <span class="summary-value">${ttnTotalQuantity} шт.</span></p>
                    <p>Використана кількість штук цієї ТТН: <span class="summary-value">${ttnUsedQuantity} шт.</span></p>
                    <p>Кількість за ТТН (Разом): <span class="summary-value">${typeof ttnQuantityFromRawOcr === 'number' ? ttnQuantityFromRawOcr + ' шт.' : ttnQuantityFromRawOcr}</span></p>
                `;
                summarySection.appendChild(ttnSummaryBlock);

                overallTotalTTNVolume += ttnTotalVolume;
                overallUsedVolume += ttnUsedVolume;
                overallTotalQuantity += ttnTotalQuantity;
                overallUsedQuantity += ttnUsedQuantity;
                if (typeof ttnQuantityFromRawOcr === 'number') {
                    overallTtnTotalQuantitySum += ttnQuantityFromRawOcr;
                }
            });

            const overallSummaryBlock = document.createElement('div');
            overallSummaryBlock.className = 'overall-summary-block';
            overallSummaryBlock.innerHTML = `
                <h3 class="font-bold text-xl mb-3 text-indigo-800">Загальний Підсумок по всіх ТТН</h3>
                <p>Загальний об'єм (всі ТТН): <span class="summary-value">${overallTotalTTNVolume.toFixed(4)} м³</span></p>
                <p>Використаний об'єм (всі ТТН): <span class="summary-value">${overallUsedVolume.toFixed(4)} м³</span></p>
                <p>Загальна кількість штук (всі ТТН): <span class="summary-value">${overallTotalQuantity} шт.</span></p>
                <p>Використана кількість штук (всі ТТН): <span class="summary-value">${overallUsedQuantity} шт.</span></p>
                <p>Кількість за ТТН (Разом, сума): <span class="summary-value">${overallTtnTotalQuantitySum} шт.</span></p>
            `;
            summarySection.appendChild(overallSummaryBlock);
        }

        function populateExportTable() {
            if (!exportTableBody) {
                console.error("exportTableBody element not found.");
                return;
            }
            exportTableBody.innerHTML = ''; 

            const filteredExportedMaterialData = exportedMaterialData.filter(item => item.document_type !== "ПМД");

            const sortedExportedMaterialData = [...filteredExportedMaterialData].sort((a, b) => {
                const dateA = a.createdAt?.toDate ? a.createdAt.toDate().getTime() : 0;
                const dateB = b.createdAt?.toDate ? b.createdAt.toDate().getTime() : 0;
                if (dateA && dateB) return dateA - dateB;
                return a.id.localeCompare(b.id);
            });

            sortedExportedMaterialData.forEach(item => {
                const row = exportTableBody.insertRow(); 
                row.insertCell().textContent = item.id; 

                const thicknessCell = row.insertCell();
                thicknessCell.className = 'input-cell';
                const thicknessInput = document.createElement('input');
                thicknessInput.type = 'number'; 
                thicknessInput.value = item.thickness;
                thicknessInput.step = "1";
                thicknessInput.className = 'w-full px-2 py-1 border rounded-md text-sm text-center'; 
                thicknessInput.placeholder = 'Товщина (мм)'; 
                thicknessInput.addEventListener('change', (e) => { 
                    item.thickness = parseFloat(e.target.value) || 0;
                    updateExportItemInFirestore(item); 
                });
                thicknessCell.appendChild(thicknessInput);

                const widthCell = row.insertCell();
                widthCell.className = 'input-cell';
                const widthInput = document.createElement('input');
                widthInput.type = 'number'; 
                widthInput.value = item.width;
                widthInput.step = "1";
                widthInput.className = 'w-full px-2 py-1 border rounded-md text-sm text-center'; 
                widthInput.placeholder = 'Ширина (мм)'; 
                widthInput.addEventListener('change', (e) => { 
                    item.width = parseFloat(e.target.value) || 0;
                    updateExportItemInFirestore(item); 
                });
                widthCell.appendChild(widthInput);

                const lengthCell = row.insertCell();
                lengthCell.className = 'input-cell';
                const lengthInput = document.createElement('input');
                lengthInput.type = 'number'; 
                lengthInput.value = item.length;
                lengthInput.step = "1";
                lengthInput.className = 'w-full px-2 py-1 border rounded-md text-sm text-center'; 
                lengthInput.placeholder = 'Довжина (мм)'; 
                lengthInput.addEventListener('change', (e) => { 
                    item.length = parseFloat(e.target.value) || 0;
                    updateExportItemInFirestore(item); 
                });
                lengthCell.appendChild(lengthInput);

                const quantityCell = row.insertCell();
                quantityCell.className = 'input-cell';
                const quantityInput = document.createElement('input');
                quantityInput.type = 'number'; 
                quantityInput.value = item.quantity;
                quantityInput.step = "1";
                quantityInput.className = 'w-full px-2 py-1 border rounded-md text-sm text-center'; 
                quantityInput.placeholder = 'Кількість (шт)'; 
                quantityInput.addEventListener('change', (e) => { 
                    item.quantity = parseInt(e.target.value) || 0;
                    updateExportItemInFirestore(item); 
                });
                quantityCell.appendChild(quantityInput);

                const actionsCell = row.insertCell();
                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Видалити';
                deleteButton.className = 'action-button delete-button';
                deleteButton.addEventListener('click', () => {
                    deleteExportItem(item.id);
                });
                actionsCell.appendChild(deleteButton);
            });

            updateExportSummary();
            populatePmdDisplay(); 
            populateCertificatesDisplay();
        }

        function populatePmdDisplay() {
            if (!pmdDisplaySection) {
                console.error("pmdDisplaySection element not found.");
                return;
            }
            pmdDisplaySection.innerHTML = '<h3 class="text-xl font-semibold mb-3 text-gray-700">Розпізнані ПМД (Податкові/Митні Декларації)</h3>';

            const pmdItems = exportedMaterialData.filter(item => item.document_type === "ПМД");

            if (pmdItems.length === 0) {
                pmdDisplaySection.innerHTML += '<p class="text-center text-gray-600">Немає розпізнаних ПМД.</p>';
            } else {
                pmdItems.forEach(pmd => {
                    const pmdCard = document.createElement('div');
                    pmdCard.className = 'pmd-card bg-white p-4 rounded-lg shadow-md mb-4 border border-blue-200';
                    pmdCard.innerHTML = `
                        <h4 class="font-bold text-lg mb-2 text-blue-800">ПМД №: ${pmd.declaration_number || 'Не вказано'}</h4>
                        <p><strong>Дата:</strong> ${pmd.declaration_date || 'Не вказано'}</p>
                        <p><strong>Тип вантажу:</strong> ${pmd.cargo_type || 'Не вказано'}</p>
                        <p><strong>Загальний об'єм:</strong> ${pmd.total_volume_pmd !== undefined ? pmd.total_volume_pmd.toFixed(3) + ' м³' : 'Не вказано'}</p>
                        <p><strong>Код ТН ЗЕД:</strong> ${pmd.hs_code || 'Не вказано'}</p>
                        <p><strong>Країна походження:</strong> ${pmd.origin_country || 'Не вказано'}</p>
                        <p><strong>Країна призначення:</strong> ${pmd.destination_country || 'Не вказано'}</p>
                        <button class="action-button delete-button mt-2" data-pmd-id="${pmd.id}">Видалити ПМД</button>
                    `;
                    pmdCard.querySelector('.delete-button').addEventListener('click', (event) => {
                        deleteExportItem(event.target.dataset.pmdId);
                    });
                    pmdDisplaySection.appendChild(pmdCard);
                });
            }
        }

        function populateCertificatesDisplay() {
            if (!certificatesDisplaySection) {
                console.error("certificatesDisplaySection element not found.");
                return;
            }
            certificatesDisplaySection.innerHTML = '<h3 class="text-xl font-semibold mb-3 text-gray-700">Сертифікати Походження</h3>';

            if (certificatesData.length === 0) {
                certificatesDisplaySection.innerHTML += '<p class="text-center text-gray-600">Немає доданих сертифікатів.</p>';
            } else {
                certificatesData.forEach(cert => {
                    const certCard = document.createElement('div');
                    certCard.className = 'certificate-item';
                    certCard.innerHTML = `
                        <p><strong>Номер:</strong> ${cert.number || 'Не вказано'}</p>
                        <p><strong>Дата видачі:</strong> ${cert.issueDate || 'Не вказано'}</p>
                        <button class="action-button delete-button mt-2" data-cert-id="${cert.id}">Видалити сертифікат</button>
                    `;
                    certCard.querySelector('.delete-button').addEventListener('click', (event) => {
                        deleteCertificate(event.target.dataset.certId);
                    });
                    certificatesDisplaySection.appendChild(certCard);
                });
            }
        }

        function updateExportSummary() {
            if (!totalExportVolumeDisplay) {
                console.error("totalExportVolumeDisplay element not found.");
                return;
            }
            let totalExportedVolume = 0;
            exportedMaterialData.forEach(item => {
                if (item.document_type !== "ПМД") {
                    const itemVolume = (item.thickness / 1000) * (item.width / 1000) * (item.length / 1000) * item.quantity;
                    totalExportedVolume += itemVolume;
                }
            });
            totalExportVolumeDisplay.textContent = `${totalExportedVolume.toFixed(3)} м³`; 
        }

        function updateUI() {
            populateLogsTable();
            updateSummary();
            populateExportTable(); 
            populatePmdDisplay();
            populateCertificatesDisplay();
        }

        // --- Module: report-generator.js ---
        function generateOriginReport() {
            if (!originReportSection) { 
                console.error("Origin report section element not found.");
                return;
            }

            // No longer check auth.currentUser as login is removed
            
            originReportSection.innerHTML = '<h2>Звіт про Походження Матеріалу</h2>'; 
            const printButtonHtml = '<button id="printReportBtn" class="action-button bg-green-500 hover:bg-green-600 mb-4 print-button">Друк звіту</button>';
            originReportSection.innerHTML += printButtonHtml;
            const newPrintButton = document.getElementById('printReportBtn');
            if (newPrintButton) {
                newPrintButton.addEventListener('click', () => {
                    window.print();
                });
            }

            originReportSection.style.display = 'block'; 

            if (SAWING_YIELD_FACTOR <= 0 || SAWING_YIELD_FACTOR > 1) {
                showMessage("Коефіцієнт ефективності розпилювання має бути від 0.01 до 1.00", "error");
                originReportSection.style.display = 'none'; 
                return;
            }
            // SAW_KERF_MM is no longer relevant for report calculations based on theoretical yield.

            let reportText = '';

            const latestPmd = exportedMaterialData.filter(item => item.document_type === "ПМД").sort((a,b) => (b.createdAt?.toDate ? b.createdAt.toDate().getTime() : 0) - (a.createdAt?.toDate ? b.createdAt.toDate().getTime() : 0))[0];
            if (latestPmd) {
                reportText += `
                    <p>Згідно <strong>ВМД № ${latestPmd.declaration_number || 'Не вказано'}</strong> від <strong>${latestPmd.declaration_date || 'Не вказано'}</strong> було здійснено експортну операцію на об'єм <span class="report-value">${latestPmd.total_volume_pmd !== undefined ? latestPmd.total_volume_pmd.toFixed(3) : 'Не вказано'} м³</span>.</p>
                `;
            } else {
                reportText += '<p>Інформація про ВМД відсутня.</p>';
            }

            const latestCertificate = certificatesData.sort((a,b) => (b.createdAt?.toDate ? b.createdAt.toDate().getTime() : 0) - (a.createdAt?.toDate ? a.createdAt.toDate().getTime() : 0))[0];
            if (latestCertificate) {
                reportText += `
                    <p>Для здійснення експортної операції було отримано сертифікат походження <strong>№ ${latestCertificate.number || 'Не вказано'}</strong> від <strong>${latestCertificate.issueDate || 'Не вказано'}</strong>.</p>
                `;
            } else {
                reportText += '<p>Інформація про сертифікат походження відсутня.</p>';
            }

            reportText += `<h3>Перелік використаних ТТН:</h3>`;
            const usedTtnVolumes = {};
            let totalVolumeOfUsedLogs = 0; 

            allTTNs.forEach(ttn => {
                let ttnUsedVolume = 0;
                ttn.individualLogs.forEach(log => {
                    if (log.isUsed && typeof log.V === 'number') {
                        ttnUsedVolume += log.V;
                    }
                });
                if (ttnUsedVolume > 0) {
                    usedTtnVolumes[ttn.ttnId] = {
                        series: ttn.series,
                        number: ttn.number,
                        usedVolume: ttnUsedVolume
                    };
                    totalVolumeOfUsedLogs += ttnUsedVolume;
                }
            });

            if (Object.keys(usedTtnVolumes).length > 0) {
                for (const ttnId in usedTtnVolumes) {
                    const ttnInfo = usedTtnVolumes[ttnId];
                    reportText += `<p class="log-contribution"><strong>ТТН:</strong> Серія ${ttnInfo.series || 'не вказано'}, Номер ${ttnInfo.number || 'не вказано'} (ID: ${ttnId}) - Використаний об'єм колод: <span class="report-value">${ttnInfo.usedVolume.toFixed(4)} м³</span></p>`;
                }
            } else {
                reportText += '<p class="log-contribution">Немає використаних колод з ТТН.</p>';
            }

            let totalVolumeOfManufacturedExportMaterial = 0; 
            exportedMaterialData.forEach(item => {
                if (item.document_type !== "ПМД") {
                    totalVolumeOfManufacturedExportMaterial += (item.thickness / 1000) * (item.width / 1000) * (item.length / 1000) * item.quantity;
                }
            });

            const totalPossibleUsableWoodVolume = totalVolumeOfUsedLogs * SAWING_YIELD_FACTOR;
            const wasteVolume = totalVolumeOfUsedLogs * (1 - SAWING_YIELD_FACTOR);
            const wastePercentage = (1 - SAWING_YIELD_FACTOR) * 100;
            const theoreticalRemainingUsableWood = totalPossibleUsableWoodVolume - totalVolumeOfManufacturedExportMaterial;

            reportText += `<h3>Загальні розрахунки по всьому матеріалу:</h3>`;
            reportText += `<p><strong>1. Загальний об'єм використаних колод (кругляка): <span class="report-value">${totalVolumeOfUsedLogs.toFixed(4)} м³</span></strong></p>`;
            reportText += `<p><strong>2. Загальний об'єм можливої корисної деревини (з коефіцієнтом виходу ${SAWING_YIELD_FACTOR.toFixed(2)}): <span class="report-value">${totalPossibleUsableWoodVolume.toFixed(4)} м³</span></strong></p>`;
            reportText += `<p><strong>3. Загальний об'єм виготовленого експортного матеріалу (згідно таблиці): <span class="report-value">${totalVolumeOfManufacturedExportMaterial.toFixed(4)} м³</span></strong></p>`;
            
            if (latestPmd && latestPmd.total_volume_pmd !== undefined) {
                reportText += `<p class="ml-4"><em>(Об'єм з останньої ВМД: <span class="report-value">${latestPmd.total_volume_pmd.toFixed(3)} м³</span>)</em></p>`;
                if (Math.abs(totalVolumeOfManufacturedExportMaterial - latestPmd.total_volume_pmd) > 0.001) {
                    reportText += `<p class="text-red-600 font-bold ml-4">Увага: Об'єм експортного матеріалу в таблиці (${totalVolumeOfManufacturedExportMaterial.toFixed(3)} м³) та в останній ВМД (${latestPmd.total_volume_pmd.toFixed(3)} м³) відрізняються.</p>`;
                }
            }

            reportText += `<p><strong>4. Теоретичний залишок загального об'єму невикористаної корисної деревини: <span class="report-value">${theoreticalRemainingUsableWood.toFixed(4)} м³</span></strong></p>`;
            reportText += `<p><strong>5. Залишок дров, тирси, обаполу (відходи, ${wastePercentage.toFixed(2)}% від загального об'єму використаних колод): <span class="report-value">${wasteVolume.toFixed(4)} м³</span></strong></p>`;

            let exportMaterialYieldCoefficient = 0;
            if (totalVolumeOfUsedLogs > 0) {
                exportMaterialYieldCoefficient = totalVolumeOfManufacturedExportMaterial / totalVolumeOfUsedLogs;
            }
            reportText += `<p>Фактичний коефіцієнт виходу експортного матеріалу (Експортний об'єм / Загальний об'єм використаних колод): <span class="report-value">${exportMaterialYieldCoefficient.toFixed(4)}</span></p>`;
            
            originReportSection.innerHTML += reportText;
            originReportSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }


        // --- Module: main.js ---
        // Main initialization function called when the DOM is fully loaded
        document.addEventListener('DOMContentLoaded', async function() {
            // Assign DOM element references here
            messageBox = document.getElementById('messageBox');
            loadingOverlay = document.getElementById('loadingOverlay');
            loadingMessage = document.getElementById('loadingMessage');
            sawingYieldFactorInput = document.getElementById('sawingYieldFactorInput');
            totalExportVolumeDisplay = document.getElementById('totalExportVolume');
            imageUploadInput = document.getElementById('imageUpload');
            dropZone = document.getElementById('dropZone');
            imagePreviewsContainer = document.getElementById('imagePreviews');
            ocrTextEditor = document.getElementById('ocrTextEditor');
            processOcrTextBtn = document.getElementById('processOcrTextBtn');
            addManualLogBtn = document.getElementById('addManualLogBtn');
            addManualTtnBlockBtn = document.getElementById('addManualTtnBlockBtn');
            logsTableBody = document.querySelector('#logsTable tbody');
            summarySection = document.getElementById('summarySection');
            exportTableBody = document.querySelector('#exportTable tbody');
            originReportSection = document.getElementById('originReportSection');
            addExportItemBtn = document.getElementById('addExportItemBtn');
            generateOriginReportBtn = document.getElementById('generateOriginReportBtn');

            pmdDisplaySection = document.getElementById('pmdDisplaySection');
            certificatesDisplaySection = document.getElementById('certificatesDisplaySection');

            certificateNumberInput = document.getElementById('certificateNumberInput');
            certificateDateInput = document.getElementById('certificateDateInput');
            addCertificateBtn = document.getElementById('addCertificateBtn');

            // userIdDisplay is now dynamically managed or just for display in summary
            userIdDisplay = document.createElement('p'); // Create it if it's not already in HTML
            userIdDisplay.className = 'text-sm text-gray-500 mb-4';
            
            // Initialize global configuration variables using values from now-available inputs
            SAWING_YIELD_FACTOR = (sawingYieldFactorInput && parseFloat(sawingYieldFactorInput.value)) || 0.70;
            SAW_KERF_MM = (document.getElementById('sawKerfInput') && parseFloat(document.getElementById('sawKerfInput').value)) || 3.0; // Kerf is no longer used in report calc.

            // Setup event listeners for App functionality (always available)
            if (sawingYieldFactorInput) {
                sawingYieldFactorInput.addEventListener('change', (event) => {
                    SAWING_YIELD_FACTOR = parseFloat(event.target.value) || 0.70;
                });
            }
            if (imageUploadInput) {
                imageUploadInput.addEventListener('change', (event) => handleImageUpload(event.target.files));
            }
            if (addExportItemBtn) {
                addExportItemBtn.addEventListener('click', addExportItem);
            }
            if (addManualLogBtn) {
                addManualLogBtn.addEventListener('click', addManualLogEntry);
            }
            if (addManualTtnBlockBtn) {
                addManualTtnBlockBtn.addEventListener('click', addManualTtnBlock);
            }
            if (processOcrTextBtn) {
                processOcrTextBtn.addEventListener('click', processOcrTextForDataExtraction);
            }
            if (generateOriginReportBtn) {
                generateOriginReportBtn.addEventListener('click', generateOriginReport);
            }
            if (addCertificateBtn) {
                addCertificateBtn.addEventListener('click', addCertificate);
            }

            if (dropZone) {
                dropZone.addEventListener('dragover', (event) => {
                    event.preventDefault(); 
                    dropZone.classList.add('drag-over'); 
                });

                dropZone.addEventListener('dragleave', (event) => {
                    dropZone.classList.remove('drag-over'); 
                });

                dropZone.addEventListener('drop', (event) => {
                    event.preventDefault(); 
                    dropZone.classList.remove('drag-over'); 
                    const files = event.dataTransfer.files; 
                    handleImageUpload(files); 
                });
            }

            setLoading(false); // Hide loading overlay once UI is ready
            await initFirebase(); // Initialize Firebase and handle initial auth state
        });
    </script>
</head>
<body>
    <!-- Loading overlay displayed during image processing and initial load -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="spinner"></div>
        <p id="loadingMessage">Завантаження...</p>
    </div>

    <div class="container">
        <h1 class="text-3xl font-bold text-center mb-6">Система Обліку Лісу</h1>

        <!-- Main App Content (always visible now) -->
        <div id="appContent" class="app-content">
            <!-- Removed login/logout UI elements -->

            <!-- Sawing Yield Factor Control -->
            <div class="sawing-yield-control">
                <label for="sawingYieldFactorInput">Коефіцієнт ефективності розпилювання (0.00-1.00):</label>
                <input type="number" id="sawingYieldFactorInput" value="0.70" min="0.00" max="1.00" step="0.01">
                
                <!-- Saw Kerf input (visible but not used in report calc) -->
                <label for="sawKerfInput">Товщина пропилу (мм):</label>
                <input type="number" id="sawKerfInput" value="3.0" min="0.1" max="10.0" step="0.1">

                <button id="generateOriginReportBtn" class="action-button bg-indigo-500 hover:bg-indigo-600 ml-auto">
                    Сформувати Звіт про Походження
                </button>
            </div>

            <!-- Section for uploading images and analyzing data -->
            <div class="upload-section">
                <h2 class="text-2xl font-bold text-gray-800">Завантажити дані з фото</h2>
                
                <!-- Drop Zone Element -->
                <div id="dropZone" class="drop-zone">
                    Перетягніть файли сюди або
                    <label for="imageUpload" class="custom-file-upload inline-block mt-2">
                        Вибрати фото (можна декілька) / Зробити фото з камери
                    </label>
                </div>
                
                <input type="file" id="imageUpload" accept="image/*" capture="environment" multiple>
                <div id="messageBox" class="message-box"></div>
            </div>

            <!-- Container to display uploaded image previews -->
            <div class="image-preview-container">
                <h3 class="w-full text-xl font-semibold mb-3 text-gray-700 text-center">Перегляд завантажених фото</h3>
                <div id="imagePreviews" class="flex flex-wrap justify-center gap-4">
                    <!-- Image previews will be loaded here by JavaScript -->
                </div>
            </div>

            <!-- Container for OCR text editor -->
            <div class="ocr-text-container">
                <h3 class="text-xl font-semibold mb-3 text-gray-700">Розпізнаний текст (можна редагувати)</h3>
                <div id="ocrTextEditor" contenteditable="true" class="w-full p-3 border rounded-md text-gray-800 overflow-auto focus:outline-none focus:ring-2 focus:ring-lime-400">
                    <!-- Recognized text will appear here -->
                </div>
                <button id="processOcrTextBtn" class="action-button mt-4 bg-green-500 hover:bg-green-600">
                    Аналізувати Розпізнані Дані
                </button>
            </div>

            <!-- Detailed table for log data extracted from images -->
            <div class="table-container">
                <h2 class="text-2xl font-bold mb-4 text-gray-800 rounded-md p-2 bg-blue-100 shadow-sm text-center">Деталізована Таблиця Колод</h2>
                <button id="addManualTtnBlockBtn" class="action-button mb-4 bg-orange-500 hover:bg-orange-600 mr-2">+ Додати ТТН ВРУЧНУ</button>
                <button id="addManualLogBtn" class="action-button mb-4 bg-purple-500 hover:bg-purple-600">+ Додати нову колоду вручну</button>
                <table id="logsTable" class="min-w-full bg-white shadow-md rounded-lg">
                    <thead>
                        <tr>
                            <th>Номер Бірки</th>
                            <th>Довжина (м)</th>
                            <th>Діаметр (см)</th>
                            <th>Об'єм 1 шт. (m³)</th>
                            <th>Використано</th>
                            <th>Дії</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Table rows will be inserted here by JavaScript -->
                    </tbody>
                </table>
            </div>

            <!-- Summary Section -->
            <div class="summary-section" id="summarySection">
                <h3 class="text-xl font-semibold mb-3 text-gray-700">Підсумок Об'ємів та Кількість</h3>
                <!-- Individual TTN summaries and overall summary will be injected here by JavaScript -->
            </div>

            <!-- Table for manually entered exported material -->
            <div class="table-container mt-8">
                <h2 class="text-2xl font-bold mb-4 text-gray-800 rounded-md p-2 bg-green-100 shadow-sm text-center">Матеріал для Експорту (Ручний Ввід)</h2>
                <button id="addExportItemBtn" class="action-button mb-4">+ Додати нову позицію</button>
                <table id="exportTable" class="min-w-full bg-white shadow-md rounded-lg">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Товщина (мм)</th>
                            <th>Ширина (мм)</th>
                            <th>Довжина (мм)</th>
                            <th>Кількість (шт)</th>
                            <th>Дії</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Exported material rows will be inserted here by JavaScript -->
                    </tbody>
                </table>
                <div id="exportSummarySection" class="export-summary-section">
                    <h3 class="text-xl font-semibold mb-3">Підсумок Матеріалу для Експорту</h3>
                    <p>Загальний об'єм експортованого матеріалу: <span class="summary-value" id="totalExportVolume">0.0000 м³</span></p>
                </div>
            </div>

            <!-- PMD Display Section -->
            <div id="pmdDisplaySection" class="table-container mt-8">
                <h3 class="text-xl font-semibold mb-3 text-gray-700">Розпізнані ПМД (Податкові/Митні Декларації)</h3>
                <!-- PMD cards will be inserted here by JavaScript -->
            </div>

            <!-- Certificate Input and Display Section -->
            <div id="certificatesDisplaySection" class="certificate-section mt-8">
                <h3 class="text-xl font-semibold mb-3 text-gray-700">Додати Сертифікат Походження</h3>
                <div class="certificate-input-group">
                    <label for="certificateNumberInput">Номер сертифіката:</label>
                    <input type="text" id="certificateNumberInput" placeholder="Введіть номер">
                    <label for="certificateDateInput">Дата видачі:</label>
                    <input type="date" id="certificateDateInput">
                    <button id="addCertificateBtn" class="action-button bg-yellow-500 hover:bg-yellow-600">Додати сертифікат</button>
                </div>
                <!-- Certificates will be displayed here by JavaScript -->
            </div>

            <!-- Origin Report Section -->
            <div id="originReportSection" style="display: none;">
                <h2>Звіт про Походження Матеріалу</h2>
                <button id="printReportBtn" class="action-button bg-green-500 hover:bg-green-600 mb-4 print-button">Друк звіту</button>
                <!-- Report content will be injected here by JavaScript -->
            </div>
        </div>
    </div>
</body>
</html>