<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Analyzer Pro</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

        :root {
            --primary: #2D3250;
            --secondary: #424769;
            --accent: #7077A1;
            --text: #F6B17A;
            --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--gradient);
            color: #fff;
            min-height: 100vh;
            overflow: hidden;
        }

        .app-container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 2rem;
        }

        .swiper-container {
            width: 100%;
            height: 90vh;
            padding: 2rem;
        }

        .swiper-slide {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .swiper-slide:hover {
            transform: translateY(-5px);
        }

        .drop-area {
            width: 100%;
            height: 70vh;
            border: 2px dashed var(--text);
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .drop-area:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: #fff;
        }

        .drop-area i {
            font-size: 4rem;
            margin-bottom: 1rem;
            color: var(--text);
        }

        .canvas-container {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            position: static;
            overflow: visible;
        }

        canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            max-height: 100%;
        }

        #overlay-control {
            position: relative;
            width: 90%;
            margin: 10px 0;
            -webkit-appearance: none;
            height: 6px;
            background: var(--accent);
            border-radius: 3px;
            outline: none;
            z-index: 1000;
        }

        .canvas-container.fullscreen #overlay-control {
            z-index: 999999 !important;
        }

        .canvas-container.fullscreen {
            padding-bottom: 60px;
        }

        #overlay-control::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: var(--text);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #overlay-control::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        h3 {
            color: var(--text);
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
            text-align: center;
        }

        .loading-animation {
            width: 50px;
            height: 50px;
            border: 3px solid var(--accent);
            border-radius: 50%;
            border-top-color: var(--text);
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .comparison-results {
            background: rgba(255, 255, 255, 0.05);
            padding: 1.5rem;
            border-radius: 10px;
            margin-top: 1rem;
            max-height: 60vh;
            overflow-y: auto;
        }

        .swiper-pagination-bullet {
            background: var(--text);
            opacity: 0.5;
        }

        .swiper-pagination-bullet-active {
            opacity: 1;
        }

        .keypoint-canvas-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: 60vh;
        }

        .canvas-wrapper {
            width: 48%;
            height: 100%;
            position: relative;
        }

        .canvas-wrapper canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            padding: 0.5rem;
            text-align: center;
            z-index: 10;
        }

        .footer p {
            color: var(--text);
            font-size: 1.2rem;
        }

        @media (max-width: 768px) {
            .app-container {
                padding: 1rem;
            }

            .swiper-slide {
                padding: 1rem;
            }

            h3 {
                font-size: 1.2rem;
            }

            .canvas-container.fullscreen {
                padding-bottom: 60px;
            }

            .keypoint-canvas-container {
                flex-direction: column;
                height: auto;
            }

            .canvas-wrapper {
                width: 100%;
                height: 40vh;
                margin-bottom: 1rem;
            }

            .footer p {
                font-size: 1rem;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://docs.opencv.org/4.9.0/opencv.js" type="text/javascript"></script>
</head>
<body>
    <div class="app-container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <h3>Upload do Primeiro PDF</h3>
                    <div class="drop-area" id="drop-area-1">
                        <i class="fas fa-file-pdf"></i>
                        <p>Arraste e solte ou clique para selecionar</p>
                    </div>
                </div>

                <div class="swiper-slide">
                    <h3>Upload do Segundo PDF</h3>
                    <div class="drop-area" id="drop-area-2">
                        <i class="fas fa-file-pdf"></i>
                        <p>Arraste e solte ou clique para selecionar</p>
                    </div>
                </div>

                <div class="swiper-slide">
                    <h3>Análise em Andamento</h3>
                    <div class="comparison-results" id="resultados">
                        <div class="loading-animation"></div>
                        <p>Processando arquivos...</p>
                    </div>
                </div>

                <div class="swiper-slide">
                    <h3>Comparação Visual</h3>
                    <input type="range" id="overlay-control" min="0" max="1" step="0.01" value="0.5">
                    <div class="canvas-container">
                        <canvas id="overlay-canvas1"></canvas>
                        <canvas id="overlay-canvas2"></canvas>
                    </div>
                </div>

                <div class="swiper-slide">
                    <h3>Relatório de Diferenças</h3>
                    <div class="comparison-results" id="text-comparison-results">
                        <div class="loading-animation"></div>
                        <p>Gerando relatório...</p>
                    </div>
                </div>

                <div class="swiper-slide">
                    <h3>Comparação de Pontos-Chave</h3>
                    <div class="comparison-results" id="keypoint-comparison-results">
                        <div class="loading-animation"></div>
                        <p>Comparando pontos-chave...</p>
                    </div>
                    <div class="keypoint-canvas-container">
                        <div class="canvas-wrapper">
                            <canvas id="canvas1"></canvas>
                        </div>
                        <div class="canvas-wrapper">
                            <canvas id="canvas2"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="footer">
        <p id="similarity-index"></p>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>

    <script>
        const pdfFiles = [null, null];
        let pdfReady = [false, false];
        let scale = 1;
        let isFullscreen = false;
        let panning = false;
        let pointX = 0;
        let pointY = 0;
        let offsetX = 0;
        let offsetY = 0;
        let start = { x: 0, y: 0 };

        function handleWheel(event) {
            event.preventDefault();
            const delta = Math.sign(event.deltaY);
            const factor = 0.1;
            if (delta > 0) {
                scale = Math.max(0.1, scale - factor);
            } else {
                scale = Math.min(5, scale + factor);
            }
            applyTransform(event.currentTarget);
        }

        function applyTransform() {
            const overlayCanvas1 = document.getElementById("overlay-canvas1");
            const overlayCanvas2 = document.getElementById("overlay-canvas2");

            [overlayCanvas1, overlayCanvas2].forEach(canvas => {
                if (canvas) {
                    canvas.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
                }
            });

            const diffCanvases = document.querySelectorAll(".pagina canvas");
            diffCanvases.forEach(diffCanvas => {
                if (diffCanvas) {
                    diffCanvas.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
                }
            });
            const canvas1 = document.getElementById("canvas1");
            const canvas2 = document.getElementById("canvas2");
            if(canvas1){
                canvas1.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
            }
            if(canvas2){
                canvas2.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
            }
        }

        function startPan(evt) {
            if (isFullscreen) {
                panning = true;
                start = { x: evt.clientX - offsetX, y: evt.clientY - offsetY };
            }
        }

        function move(evt) {
            if (isFullscreen && panning) {
                offsetX = evt.clientX - start.x;
                offsetY = evt.clientY - start.y;
                applyTransform();
            }
        }

        function endPan() {
            if (isFullscreen) {
                panning = false;
            }
        }

        const swiper = new Swiper('.swiper-container', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {
                el: '.swiper-pagination',
            },
            on: {
                slideChange: () => {
                    if (swiper.activeIndex === 2 && pdfReady[0] && pdfReady[1]) {
                        compararPDFsDiferencas(pdfFiles[0], pdfFiles[1]);
                    } else if (swiper.activeIndex === 3 && pdfReady[0] && pdfReady[1]) {
                        compararPDFsOverlay(pdfFiles[0], pdfFiles[1]);
                    } else if (swiper.activeIndex === 4 && pdfReady[0] && pdfReady[1]) {
                        compararTextosPDFs(pdfFiles[0], pdfFiles[1]);
                    } else if (swiper.activeIndex === 5 && pdfReady[0] && pdfReady[1]) {
                        compararPDFsKeypoints(pdfFiles[0], pdfFiles[1]);
                    }
                }
            }
        });

        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

        const dropAreas = [document.getElementById("drop-area-1"), document.getElementById("drop-area-2")];

        dropAreas.forEach((dropArea, index) => {
            dropArea.addEventListener("dragover", (e) => e.preventDefault());
            dropArea.addEventListener("drop", (e) => handleFileDrop(e, index));
        });

        function handleFileDrop(event, index) {
            event.preventDefault();
            const file = event.dataTransfer.files[0];
            if (file && file.type === "application/pdf") {
                pdfFiles[index] = file;
                pdfReady[index] = true;
                event.target.innerText = `${file.name} carregado`;
                document.getElementById("resultados").innerHTML = '';
                document.getElementById("text-comparison-results").innerHTML = 'Aguarde os PDFs serem carregados...';
            } else {
                alert("Por favor, arraste um arquivo PDF.");
            }
        }

        function compararPDFsDiferencas(pdf1File, pdf2File) {
            const resultadosDiv = document.getElementById("resultados");
            resultadosDiv.innerHTML = '';

            const leitor1 = new FileReader();
            const leitor2 = new FileReader();

            leitor1.onload = function(e) {
                const dadosPDF1 = e.target.result;
                leitor2.onload = function(e) {
                    const dadosPDF2 = e.target.result;
                    processarPDFsDiferencas(dadosPDF1, dadosPDF2);
                };
                leitor2.readAsArrayBuffer(pdf2File);
            };
            leitor1.readAsArrayBuffer(pdf1File);
        }

        function compararPDFsOverlay(pdf1File, pdf2File) {
            const leitor1 = new FileReader();
            const leitor2 = new FileReader();

            leitor1.onload = function(e) {
                const dadosPDF1 = e.target.result;
                leitor2.onload = function(e) {
                    const dadosPDF2 = e.target.result;
                    processarPDFsOverlay(dadosPDF1, dadosPDF2);
                };
                leitor2.readAsArrayBuffer(pdf2File);
            };
            leitor1.readAsArrayBuffer(pdf1File);
        }

        function compararTextosPDFs(pdf1File, pdf2File) {
            const textComparisonDiv = document.getElementById("text-comparison-results");
            textComparisonDiv.innerHTML = 'Comparando textos...';

            const leitor1 = new FileReader();
            const leitor2 = new FileReader();

            leitor1.onload = function(e) {
                const dadosPDF1 = e.target.result;
                leitor2.onload = function(e) {
                    const dadosPDF2 = e.target.result;
                    processarTextosPDFs(dadosPDF1, dadosPDF2);
                };
                leitor2.readAsArrayBuffer(pdf2File);
            };
            leitor1.readAsArrayBuffer(pdf1File);
        }

        async function processarTextosPDFs(dadosPDF1, dadosPDF2) {
            const textComparisonDiv = document.getElementById("text-comparison-results");
            const pdf1 = await pdfjsLib.getDocument({ data: dadosPDF1 }).promise;
            const pdf2 = await pdfjsLib.getDocument({ data: dadosPDF2 }).promise;

            const text1 = await extractTextFromPDFDocument(pdf1);
            const text2 = await extractTextFromPDFDocument(pdf2);

            const missingInText1 = findMissingWords(text2, text1);
            const missingInText2 = findMissingWords(text1, text2);

            textComparisonDiv.innerHTML = `
                <strong>Palavras no PDF 2 mas faltando no PDF 1:</strong><br>${missingInText1.join(', ')}<br><br>
                <strong>Palavras no PDF 1 mas faltando no PDF 2:</strong><br>${missingInText2.join(', ')}
            `;
        }

        async function extractTextFromPDFDocument(pdf) {
            let fullText = '';
            for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
                const page = await pdf.getPage(pageNum);
                const textContent = await page.getTextContent();
                const pageText = textContent.items.map(item => item.str).join(' ');
                fullText += pageText + ' ';
            }
            return fullText.trim();
        }

        function findMissingWords(baseText, compareText) {
            const baseWords = new Set(baseText.split(/\s+/));
            const compareWords = new Set(compareText.split(/\s+/));
            const missingWords = [...baseWords].filter(word => !compareWords.has(word));
            return missingWords;
        }

        async function processarPDFsDiferencas(dadosPDF1, dadosPDF2) {
            const carregamento1 = pdfjsLib.getDocument({ data: dadosPDF1 });
            const carregamento2 = pdfjsLib.getDocument({ data: dadosPDF2 });

            const pdf1 = await carregamento1.promise;
            const pdf2 = await carregamento2.promise;

            const numPaginas = Math.min(pdf1.numPages, pdf2.numPages);
            const resultadosDiv = document.getElementById("resultados");

            for (let numPagina = 1; numPagina <= numPaginas; numPagina++) {
                const pagina1 = await pdf1.getPage(numPagina);
                const pagina2 = await pdf2.getPage(numPagina);

                const escala = 2;
                const viewport1 = pagina1.getViewport({ scale: escala });
                const viewport2 = pagina2.getViewport({ scale: escala });

                const largura = Math.min(viewport1.width, viewport2.width);
                const altura = Math.min(viewport1.height, viewport2.height);

                const canvas1 = document.createElement("canvas");
                const canvas2 = document.createElement("canvas");
                const diffCanvas = document.createElement("canvas");

                canvas1.width = largura;
                canvas1.height = altura;
                canvas2.width = largura;
                canvas2.height = altura;
                diffCanvas.width = largura;
                diffCanvas.height = altura;

                const contexto1 = canvas1.getContext("2d");
                const contexto2 = canvas2.getContext("2d");
                const diffContexto = diffCanvas.getContext("2d");

                await pagina1.render({ canvasContext: contexto1, viewport: viewport1 }).promise;
                await pagina2.render({ canvasContext: contexto2, viewport: viewport2 }).promise;

                const imgDados1 = contexto1.getImageData(0, 0, largura, altura);
                const imgDados2 = contexto2.getImageData(0, 0, largura, altura);
                const diffImgDados = diffContexto.createImageData(largura, altura);

                for (let i = 0; i < largura * altura * 4; i += 4) {
                    const gray1 = 0.299 * imgDados1.data[i] + 0.587 * imgDados1.data[i + 1] + 0.114 * imgDados1.data[i + 2];
                    const gray2 = 0.299 * imgDados2.data[i] + 0.587 * imgDados2.data[i + 1] + 0.114 * imgDados2.data[i + 2];

                    const diff = Math.abs(gray1 - gray2);

                    if (diff > 50) {
                        diffImgDados.data[i] = 255;
                        diffImgDados.data[i + 1] = 0;
                        diffImgDados.data[i + 2] = 0;
                        diffImgDados.data[i + 3] = 255;
                    } else {
                        diffImgDados.data[i + 3] = 0;
                    }
                }

                diffContexto.putImageData(diffImgDados, 0, 0);

                const divPagina = document.createElement("div");
                divPagina.className = "pagina";
                const tituloPagina = document.createElement("h3");
                tituloPagina.textContent = `Diferenças na Página ${numPagina}`;
                divPagina.appendChild(tituloPagina);
                divPagina.appendChild(diffCanvas);
                resultadosDiv.appendChild(divPagina);
            }
        }

        async function processarPDFsOverlay(dadosPDF1, dadosPDF2) {
            const carregamento1 = pdfjsLib.getDocument({ data: dadosPDF1 });
            const carregamento2 = pdfjsLib.getDocument({ data: dadosPDF2 });

            const pdf1 = await carregamento1.promise;
            const pdf2 = await carregamento2.promise;

            const pagina1 = await pdf1.getPage(1);
            const pagina2 = await pdf2.getPage(1);

            const escala = 2;
            const viewport1 = pagina1.getViewport({ scale: escala });
            const viewport2 = pagina2.getViewport({ scale: escala });

            const largura = Math.min(viewport1.width, viewport2.width);
            const altura = Math.min(viewport1.height, viewport2.height);

            const overlayCanvas1 = document.getElementById("overlay-canvas1");
            const overlayCanvas2 = document.getElementById("overlay-canvas2");

            overlayCanvas1.width = largura;
            overlayCanvas1.height = altura;
            overlayCanvas2.width = largura;
            overlayCanvas2.height = altura;

            const contexto1 = overlayCanvas1.getContext("2d");
            const contexto2 = overlayCanvas2.getContext("2d");

            await pagina1.render({ canvasContext: contexto1, viewport: viewport1 }).promise;
            await pagina2.render({ canvasContext: contexto2, viewport: viewport2 }).promise;

            const canvasContainer = document.querySelector(".canvas-container");
            canvasContainer.addEventListener("wheel", handleWheel);
            canvasContainer.addEventListener("mousedown", startPan);
            canvasContainer.addEventListener("mousemove", move);
            canvasContainer.addEventListener("mouseup", endPan);
            canvasContainer.addEventListener("mouseleave", endPan);

            const overlayControl = document.getElementById("overlay-control");
            overlayControl.addEventListener("input", (e) => {
                overlayCanvas2.style.opacity = e.target.value;
            });

            overlayCanvas2.style.opacity = overlayControl.value;
        }

        function waitForOpenCV(callback) {
            if (typeof cv !== 'undefined') {
                callback();
            } else {
                setTimeout(() => waitForOpenCV(callback), 100);
            }
        }

        function renderPDFAsImage(pdfFile, canvasId) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const pdfData = new Uint8Array(event.target.result);
                    pdfjsLib.getDocument(pdfData).promise.then(pdf => {
                        pdf.getPage(1).then(page => {
                            const scale = 1.5;
                            const viewport = page.getViewport({ scale: scale });
                            const canvas = document.getElementById(canvasId);
                            const context = canvas.getContext('2d');
                            canvas.height = viewport.height;
                            canvas.width = viewport.width;
                            const renderContext = {
                                canvasContext: context,
                                viewport: viewport
                            };
                            page.render(renderContext).promise.then(() => {
                                resolve();
                            });
                        });
                    }).catch(reject);
                };
                reader.onerror = reject;
                reader.readAsArrayBuffer(pdfFile);
            });
        }

        function compararPDFsKeypoints(pdf1File, pdf2File) {
            const resultDiv = document.getElementById('keypoint-comparison-results');
            const similarityIndex = document.getElementById('similarity-index');
            similarityIndex.innerHTML = '';
            resultDiv.innerHTML = 'Comparando pontos-chave...';

            Promise.all([renderPDFAsImage(pdf1File, 'canvas1'), renderPDFAsImage(pdf2File, 'canvas2')])
                .then(() => {
                    waitForOpenCV(() => {
                        const canvas1 = document.getElementById('canvas1');
                        const canvas2 = document.getElementById('canvas2');
                        let mat1 = cv.imread(canvas1);
                        let mat2 = cv.imread(canvas2);

                        try {
                            const gray1 = new cv.Mat();
                            const gray2 = new cv.Mat();
                            cv.cvtColor(mat1, gray1, cv.COLOR_RGBA2GRAY);
                            cv.cvtColor(mat2, gray2, cv.COLOR_RGBA2GRAY);

                            const orb = new cv.ORB(1000);
                            const keypoints1 = new cv.KeyPointVector();
                            const keypoints2 = new cv.KeyPointVector();
                            const descriptors1 = new cv.Mat();
                            const descriptors2 = new cv.Mat();

                            orb.detectAndCompute(gray1, new cv.Mat(), keypoints1, descriptors1);
                            orb.detectAndCompute(gray2, new cv.Mat(), keypoints2, descriptors2);

                            const bf = new cv.BFMatcher(cv.NORM_HAMMING, true);
                            const matches = new cv.DMatchVector();

                            if (descriptors1.rows > 0 && descriptors2.rows > 0) {
                                bf.match(descriptors1, descriptors2, matches);
                            }

                            const matchesSize = matches.size();
                            const minKeypoints = Math.min(keypoints1.size(), keypoints2.size());

                            if (typeof matchesSize === 'number' && typeof minKeypoints === 'number' && minKeypoints > 0) {
                                const similarityScore = (matchesSize / minKeypoints) * 100;
                                resultDiv.innerHTML = '';
                                similarityIndex.innerHTML = `Índice de Similaridade: ${similarityScore.toFixed(2)}%`;
                            } else {
                                resultDiv.innerHTML = '';
                                similarityIndex.innerHTML = "Índice de Similaridade: Não foi possível calcular.";
                            }

                            const colorRed = new cv.Scalar(255, 0, 0, 255);
                            const colorGreen = new cv.Scalar(0, 255, 0, 255);

                            for (let i = 0; i < keypoints1.size(); i++) {
                                const pt = keypoints1.get(i).pt;
                                cv.circle(mat1, new cv.Point(pt.x, pt.y), 3, colorRed, -1);
                            }
                            for (let i = 0; i < keypoints2.size(); i++) {
                                const pt = keypoints2.get(i).pt;
                                cv.circle(mat2, new cv.Point(pt.x, pt.y), 3, colorRed, -1);
                            }

                            for (let i = 0; i < matches.size(); i++) {
                                const match = matches.get(i);
                                const kp1 = keypoints1.get(match.queryIdx).pt;
                                const kp2 = keypoints2.get(match.trainIdx).pt;
                                cv.circle(mat1, new cv.Point(kp1.x, kp1.y), 5, colorGreen, 2);
                                cv.circle(mat2, new cv.Point(kp2.x, kp2.y), 5, colorGreen, 2);
                            }

                            cv.imshow(canvas1, mat1);
                            cv.imshow(canvas2, mat2);

                            [mat1, mat2, gray1, gray2, descriptors1, descriptors2, keypoints1, keypoints2, matches, orb, bf].forEach(item => {
                                if (item && typeof item.delete === 'function') item.delete();
                            });

                        } catch (error) {
                            console.error('Erro ao processar imagens:', error);
                            resultDiv.innerHTML = 'Erro ao processar as imagens';
                            similarityIndex.innerHTML = 'Índice de Similaridade: Erro ao calcular.';
                        }
                    });
                })
                .catch(error => {
                    console.error('Erro ao renderizar PDF:', error);
                    resultDiv.innerHTML = 'Erro ao renderizar PDF';
                    similarityIndex.innerHTML = 'Índice de Similaridade: Erro ao calcular.';
                });
        }

        document.addEventListener("DOMContentLoaded", () => {
            const resultadosContainer = document.getElementById("resultados");
            const canvasContainer = document.querySelector(".canvas-container");
            const overlayControl = document.getElementById("overlay-control");
            const keypointCanvasContainer = document.querySelector(".keypoint-canvas-container");

            function toggleFullscreen(element) {
                if (!document.fullscreenElement) {
                    element.requestFullscreen().then(() => {
                        isFullscreen = true;
                    }).catch(err => {
                        alert(`Erro ao tentar ativar o modo de tela cheia: ${err.message}`);
                    });
                } else {
                    document.exitFullscreen().then(() => {
                        isFullscreen = false;
                    }).catch(err => {
                        alert(`Erro ao tentar sair do modo de tela cheia: ${err.message}`);
                    });
                }
            }

            resultadosContainer.addEventListener("dblclick", () => {
                toggleFullscreen(resultadosContainer);
            });

            canvasContainer.addEventListener("dblclick", () => {
                toggleFullscreen(canvasContainer);
            });

            keypointCanvasContainer.addEventListener("dblclick", () => {
                toggleFullscreen(keypointCanvasContainer);
            });

            overlayControl.addEventListener("input", (e) => {
                const overlayCanvas2 = document.getElementById("overlay-canvas2");
                overlayCanvas2.style.opacity = e.target.value;
            });
        });

        document.addEventListener("keydown", (event) => {
            const overlayCanvas2 = document.getElementById("overlay-canvas2");
            const overlayControl = document.getElementById("overlay-control");
            const moveStep = 10;
            const keypointCanvasContainer = document.querySelector(".keypoint-canvas-container");

            if ([3, 4, 5].includes(swiper.activeIndex)) {
                switch (event.key) {
                    case "4":
                        offsetX -= moveStep;
                        break;
                    case "6":
                        offsetX += moveStep;
                        break;
                    case "8":
                        offsetY -= moveStep;
                        break;
                    case "2":
                        offsetY += moveStep;
                        break;
                    case "1":
                        overlayControl.value = 0;
                        if (overlayCanvas2) {
                            overlayCanvas2.style.opacity = 0;
                        }
                        break;
                    case "3":
                        overlayControl.value = 1;
                        if (overlayCanvas2) {
                            overlayCanvas2.style.opacity = 1;
                        }
                        break;
                }
                applyTransform();
            }
        });

        document.getElementById("overlay-control").addEventListener("input", (e) => {
            const overlayCanvas2 = document.getElementById("overlay-canvas2");
            if (overlayCanvas2) {
                overlayCanvas2.style.opacity = e.target.value;
            }
        });

        document.addEventListener('fullscreenchange', () => {
            const overlayControl = document.getElementById('overlay-control');
            const canvasContainer = document.querySelector(".canvas-container");
            const keypointCanvasContainer = document.querySelector(".keypoint-canvas-container");

            if (document.fullscreenElement) {
                overlayControl.style.position = 'fixed';
                overlayControl.style.bottom = '20px';
                overlayControl.style.left = '50%';
                overlayControl.style.transform = 'translateX(-50%)';
                overlayControl.style.width = '80%';
                overlayControl.style.zIndex = '999999';

                canvasContainer.classList.add('fullscreen');
            } else {
                overlayControl.style.position = 'absolute';
                overlayControl.style.bottom = '10px';
                overlayControl.style.left = '50%';
                overlayControl.style.transform = 'translateX(-50%)';
                overlayControl.style.width = '90%';
                overlayControl.style.zIndex = '1000';

                canvasContainer.classList.remove('fullscreen');
            }
        });
    </script>
</body>
</html>