<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>PDF Anonymizér</title>
    <!-- PDF.js a PDF-Lib -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.15.349/pdf.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
        }
        h1 {
            text-align: center;
            color: #007BFF;
            margin: 20px 0;
        }
        /* Zrušeno nastavení fixní výšky, aby vše scrollovalo přirozeně */
        #pdfViewer {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .scroll-container {
            /* Odebrána výška i overflow, aby se mohla stránka volně roztahovat */
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .canvas-wrapper {
            position: relative;
            margin: 20px 0;
            display: flex;
            justify-content: center;
            width: 100%;
        }
        canvas {
            display: block;
            border: 1px solid #ccc;
        }
        .overlay-canvas {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: auto;
        }
        .delete-icon {
            position: absolute;
            width: 16px;
            height: 16px;
            background-color: red;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }
        #controls {
            margin: 20px;
            display: flex;
            gap: 10px;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #007BFF;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            padding: 10px;
            font-size: 14px;
            color: #666;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
  <h1>PDF Anonymizér</h1>
  <div id="pdfViewer">
    <input type="file" id="uploadInput" accept="application/pdf" />
    <div id="controls">
      <button id="save">Uložit začerněné PDF</button>
      <button id="clearAll">Vyčistit všechny stránky</button>
    </div>
    <div class="scroll-container" id="canvasContainer"></div>
  </div>
  <footer>
    Autor: Ing. Jan Tichý
  </footer>

  <script>
    // Globální proměnné
    let pdfDoc = null;
    // Struktura pro uložení obdélníků na každé stránce:
    // selectedRects = {
    //   pageIndex: [
    //     {
    //       x, y, width, height, deleteIcon: HTMLElement
    //     }, ...
    //   ]
    // }
    const selectedRects = new Map();

    const uploadInput = document.getElementById('uploadInput');
    const canvasContainer = document.getElementById('canvasContainer');
    const saveButton = document.getElementById('save');
    const clearAllButton = document.getElementById('clearAll');

    // Při změně souboru
    uploadInput.addEventListener('change', async (event) => {
      const file = event.target.files[0];
      if (file) {
        selectedRects.clear();
        canvasContainer.innerHTML = '';
        const arrayBuffer = await file.arrayBuffer();
        // Načíst PDF pomocí pdf.js
        const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
        pdfDoc = pdf;
        renderPDF();
      }
    });

    // Vykreslit PDF
    async function renderPDF() {
      const numPages = pdfDoc.numPages;

      for (let pageIndex = 1; pageIndex <= numPages; pageIndex++) {
        const page = await pdfDoc.getPage(pageIndex);
        const viewport = page.getViewport({ scale: 1.5 });

        const wrapper = document.createElement('div');
        wrapper.className = 'canvas-wrapper';
        wrapper.style.width = `${viewport.width}px`;
        wrapper.style.height = `${viewport.height}px`;
        canvasContainer.appendChild(wrapper);

        // Canvas s obsahem PDF
        const baseCanvas = document.createElement('canvas');
        baseCanvas.width = viewport.width;
        baseCanvas.height = viewport.height;
        wrapper.appendChild(baseCanvas);

        // Overlay pro kreslení obdélníků
        const overlayCanvas = document.createElement('canvas');
        overlayCanvas.width = viewport.width;
        overlayCanvas.height = viewport.height;
        overlayCanvas.className = 'overlay-canvas';
        wrapper.appendChild(overlayCanvas);

        const ctx = baseCanvas.getContext('2d');
        const renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        await page.render(renderContext).promise;

        setupCanvasInteractions(overlayCanvas, wrapper, pageIndex, viewport);
      }
    }

    // Nastavení událostí pro kreslení obdélníků (click & drag)
    function setupCanvasInteractions(canvas, wrapper, pageIndex, viewport) {
      let isDrawing = false;
      let startX = 0;
      let startY = 0;
      let currentX = 0;
      let currentY = 0;

      canvas.addEventListener('mousedown', (event) => {
        isDrawing = true;
        startX = event.offsetX / viewport.scale;
        startY = event.offsetY / viewport.scale;
      });

      canvas.addEventListener('mousemove', (event) => {
        if (!isDrawing) return;
        currentX = event.offsetX / viewport.scale;
        currentY = event.offsetY / viewport.scale;
        // Průběžné překreslování
        redrawOverlay(canvas, pageIndex, viewport, {
          startX, startY, currentX, currentY
        });
      });

      canvas.addEventListener('mouseup', (event) => {
        if (!isDrawing) return;
        isDrawing = false;
        currentX = event.offsetX / viewport.scale;
        currentY = event.offsetY / viewport.scale;

        // Vytvořit obdélník
        const rect = makeRect(startX, startY, currentX, currentY);
        if (!selectedRects.has(pageIndex)) {
          selectedRects.set(pageIndex, []);
        }
        const rectsOnPage = selectedRects.get(pageIndex);
        rectsOnPage.push(rect);
        selectedRects.set(pageIndex, rectsOnPage);

        // Vytvořit ikonu mazání
        const delIcon = createDeleteIcon(rect, wrapper, canvas, pageIndex, viewport);
        rect.deleteIcon = delIcon;

        redrawOverlay(canvas, pageIndex, viewport);
      });
    }

    // Vytvoří standardizovaný obdélník z bodů
    function makeRect(x1, y1, x2, y2) {
      const x = Math.min(x1, x2);
      const y = Math.min(y1, y2);
      const width = Math.abs(x2 - x1);
      const height = Math.abs(y2 - y1);
      return { x, y, width, height };
    }

    // Vytvoří ikonu mazání
    function createDeleteIcon(rect, wrapper, canvas, pageIndex, viewport) {
      const iconSize = 16;
      const offset = 5;

      const delIcon = document.createElement('div');
      delIcon.className = 'delete-icon';
      // Pozice vpravo nahoře obdélníku
      delIcon.style.left = `${(rect.x + rect.width) * viewport.scale - iconSize / 2}px`;
      delIcon.style.top = `${rect.y * viewport.scale - iconSize / 2 - offset}px`;
      delIcon.textContent = '×';

      delIcon.addEventListener('click', () => {
        const rectsOnPage = selectedRects.get(pageIndex) || [];
        const index = rectsOnPage.indexOf(rect);
        if (index > -1) {
          rectsOnPage.splice(index, 1);
          selectedRects.set(pageIndex, rectsOnPage);
        }
        wrapper.removeChild(delIcon);
        redrawOverlay(canvas, pageIndex, viewport);
      });

      wrapper.appendChild(delIcon);
      return delIcon;
    }

    // Překreslit overlay canvas
    // passing optional dragRect if user is still dragging
    function redrawOverlay(canvas, pageIndex, viewport, dragRect = null) {
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Vykreslit hotové obdélníky
      const rects = selectedRects.get(pageIndex) || [];
      ctx.fillStyle = 'black';
      for (const r of rects) {
        ctx.fillRect(
          r.x * viewport.scale,
          r.y * viewport.scale,
          r.width * viewport.scale,
          r.height * viewport.scale
        );
      }

      // Pokud uživatel táhne, dočasně vykreslíme obrys obdélníku
      if (dragRect) {
        const { startX, startY, currentX, currentY } = dragRect;
        const x = Math.min(startX, currentX);
        const y = Math.min(startY, currentY);
        const w = Math.abs(currentX - startX);
        const h = Math.abs(currentY - startY);

        ctx.strokeStyle = 'red';
        ctx.lineWidth = 2;
        ctx.strokeRect(
          x * viewport.scale,
          y * viewport.scale,
          w * viewport.scale,
          h * viewport.scale
        );
      }
    }

    // Tlačítko vyčistit všechny stránky
    clearAllButton.addEventListener('click', () => {
      selectedRects.clear();
      canvasContainer.innerHTML = '';
      renderPDF();
    });

    // Uložit PDF se začerněnými obdélníky
    saveButton.addEventListener('click', async () => {
      if (!pdfDoc) return;
      const pdfBytes = await pdfDoc.getData();
      const pdfLibDoc = await PDFLib.PDFDocument.load(pdfBytes);

      for (let pageIndex = 1; pageIndex <= pdfDoc.numPages; pageIndex++) {
        const page = pdfLibDoc.getPage(pageIndex - 1);
        const { width, height } = page.getSize();
        const rects = selectedRects.get(pageIndex) || [];
        for (const r of rects) {
          // PDF Lib y=0 je dole, takže y -> (height - y - rectHeight)
          page.drawRectangle({
            x: r.x,
            y: height - r.y - r.height,
            width: r.width,
            height: r.height,
            color: PDFLib.rgb(0, 0, 0)
          });
        }
      }

      const updatedPdfBytes = await pdfLibDoc.save();
      const blob = new Blob([updatedPdfBytes], { type: 'application/pdf' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'zacernene.pdf';
      link.click();
      URL.revokeObjectURL(link.href);
    });
  </script>
</body>
</html>
