<!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;
    }
    #pdfViewer {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    .scroll-container {
      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>
    // Změněná hodnota pro vyšší detail při vykreslování:
    const RENDER_SCALE = 1.5;

    let pdfJsDoc = null;
    const pagesData = [];

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

    // Po výběru PDF souboru
    uploadInput.addEventListener('change', async (event) => {
      const file = event.target.files[0];
      if (file) {
        pagesData.length = 0;
        canvasContainer.innerHTML = '';
        const arrayBuffer = await file.arrayBuffer();
        pdfJsDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
        renderPDF();
      }
    });

    // Vykreslíme PDF pomocí PDF.js
    async function renderPDF() {
      const numPages = pdfJsDoc.numPages;
      for (let pageIndex = 1; pageIndex <= numPages; pageIndex++) {
        const page = await pdfJsDoc.getPage(pageIndex);

        // Nastavíme vyšší scale pro detailnější vykreslení:
        const viewport = page.getViewport({ scale: RENDER_SCALE });
        const width = viewport.width;
        const height = viewport.height;

        pagesData[pageIndex - 1] = {
          baseCanvas: null,
          width: width,
          height: height,
          rects: []
        };

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

        const baseCanvas = document.createElement('canvas');
        baseCanvas.width = width;
        baseCanvas.height = height;
        wrapper.appendChild(baseCanvas);

        const overlayCanvas = document.createElement('canvas');
        overlayCanvas.width = width;
        overlayCanvas.height = height;
        overlayCanvas.className = 'overlay-canvas';
        wrapper.appendChild(overlayCanvas);

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

        pagesData[pageIndex - 1].baseCanvas = baseCanvas;

        setupCanvasInteractions(overlayCanvas, wrapper, pageIndex);
      }
    }

    // Nastavení událostí pro kreslení černých obdélníků
    function setupCanvasInteractions(overlayCanvas, wrapper, pageIndex) {
      const pageData = pagesData[pageIndex - 1];
      let isDrawing = false;
      let startX = 0;
      let startY = 0;
      let currentX = 0;
      let currentY = 0;

      overlayCanvas.addEventListener('mousedown', (ev) => {
        isDrawing = true;
        startX = ev.offsetX;
        startY = ev.offsetY;
      });

      overlayCanvas.addEventListener('mousemove', (ev) => {
        if (!isDrawing) return;
        currentX = ev.offsetX;
        currentY = ev.offsetY;
        redrawOverlay(overlayCanvas, pageIndex, { startX, startY, currentX, currentY });
      });

      overlayCanvas.addEventListener('mouseup', (ev) => {
        if (!isDrawing) return;
        isDrawing = false;
        currentX = ev.offsetX;
        currentY = ev.offsetY;

        const rect = makeRect(startX, startY, currentX, currentY);
        if (rect.width > 0 && rect.height > 0) {
          pageData.rects.push(rect);
          const delIcon = createDeleteIcon(rect, wrapper, overlayCanvas, pageIndex);
          rect.deleteIcon = delIcon;
        }
        redrawOverlay(overlayCanvas, pageIndex);
      });
    }

    // Pomocná funkce pro vytvoření obdélníku
    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 };
    }

    // Ikona "×" pro mazání obdélníku
    function createDeleteIcon(rect, wrapper, overlayCanvas, pageIndex) {
      const iconSize = 16;
      const offset = 5;

      const delIcon = document.createElement('div');
      delIcon.className = 'delete-icon';
      delIcon.style.left = `${rect.x + rect.width - iconSize / 2}px`;
      delIcon.style.top = `${rect.y - iconSize / 2 - offset}px`;
      delIcon.textContent = '×';

      delIcon.addEventListener('click', () => {
        const rects = pagesData[pageIndex - 1].rects;
        const index = rects.indexOf(rect);
        if (index > -1) rects.splice(index, 1);
        wrapper.removeChild(delIcon);
        redrawOverlay(overlayCanvas, pageIndex);
      });

      wrapper.appendChild(delIcon);
      return delIcon;
    }

    // Překreslení overlay (černých obdélníků)
    function redrawOverlay(overlayCanvas, pageIndex, dragRect = null) {
      const ctx = overlayCanvas.getContext('2d');
      const pageData = pagesData[pageIndex - 1];
      ctx.clearRect(0, 0, pageData.width, pageData.height);

      // Vykreslíme uložené černé bloky
      ctx.fillStyle = 'black';
      for (const r of pageData.rects) {
        ctx.fillRect(r.x, r.y, r.width, r.height);
      }

      // Pokud uživatel táhne, zobrazíme dočasný obrys v červené
      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, y, w, h);
      }
    }

    // Tlačítko "Vyčistit všechny stránky"
    clearAllButton.addEventListener('click', () => {
      pagesData.forEach(page => {
        page.rects = [];
      });
      canvasContainer.innerHTML = '';
      renderPDF();
    });

    // Tlačítko "Uložit začerněné PDF"
    saveButton.addEventListener('click', async () => {
      if (!pdfJsDoc) return;

      // Vytvoříme nový prázdný dokument v PDF-Lib
      const pdfLibDoc = await PDFLib.PDFDocument.create();

      // Projdeme všechny stránky
      for (let i = 0; i < pdfJsDoc.numPages; i++) {
        const { baseCanvas, width, height, rects } = pagesData[i];

        // Získáme PNG data z canvasu
        const dataUrl = baseCanvas.toDataURL('image/png');
        const pngImage = await pdfLibDoc.embedPng(dataUrl);

        // Vytvoříme novou stránku v PDF se stejnými rozměry
        const pdfPage = pdfLibDoc.addPage([width, height]);

        // Umístíme obrázek (0,0 je vlevo dole)
        pdfPage.drawImage(pngImage, {
          x: 0,
          y: 0,
          width: width,
          height: height
        });

        // Přidáme černé bloky (invertujeme osu Y)
        for (const r of rects) {
          pdfPage.drawRectangle({
            x: r.x,
            y: height - r.y - r.height,
            width: r.width,
            height: r.height,
            color: PDFLib.rgb(0, 0, 0)
          });
        }
      }

      // Uložíme
      const finalPdfBytes = await pdfLibDoc.save();
      const blob = new Blob([finalPdfBytes], { 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>
