@extends('layouts.app')

@section('title', 'PDF Redactor')
@section('meta_description',
    'Securely redact sensitive info from PDFs. We convert pages to images so hidden text is
    physically destroyed. 100% Client-side privacy and free to use.')

@section('content')
    <div class="max-w-5xl mx-auto space-y-8" x-data="pdfRedactor()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">PDF Redactor</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Black boxes on PDFs aren't enough. We convert your document into flat images to <span
                    class="text-red-400 font-medium">physically destroy</span> the underlying text.
            </p>
        </div>

        <!-- Main Tool Area -->
        <div class="bg-slate-900/50 border border-white/5 rounded-2xl p-6 md:p-8 space-y-8">

            <!-- Upload Zone -->
            <div x-show="!pdfLoaded"
                class="relative group border-2 border-dashed border-white/10 rounded-xl p-12 text-center transition-all duration-300 hover:border-red-500/50 hover:bg-white/[0.02]"
                :class="{ 'border-red-500 bg-red-500/10': isDragging }" @dragover.prevent="isDragging = true"
                @dragleave.prevent="isDragging = false" @drop.prevent="handleDrop($event)">
                <input type="file" accept=".pdf" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                    @change="handleFile($event.target.files[0])">

                <div class="space-y-4 pointer-events-none">
                    <div
                        class="w-16 h-16 mx-auto bg-slate-800 rounded-full flex items-center justify-center text-red-400 group-hover:scale-110 transition-transform">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <div>
                        <p class="text-lg font-medium text-white">Drop your secure PDF here</p>
                        <p class="text-slate-500 text-sm">or click to browse</p>
                    </div>
                </div>
            </div>

            <!-- Editor Interface -->
            <div x-show="pdfLoaded" class="space-y-6" style="display: none;">

                <!-- Toolbar -->
                <div
                    class="flex flex-col md:flex-row items-center justify-between gap-4 bg-white/5 p-4 rounded-xl border border-white/5 sticky top-20 z-40 backdrop-blur-md">
                    <div class="flex items-center gap-4">
                        <button @click="reset" class="text-sm text-slate-400 hover:text-white flex items-center gap-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                            </svg>
                            Start Over
                        </button>
                        <div class="h-6 w-px bg-white/10"></div>
                        <p class="text-sm text-slate-300">
                            <span class="text-white font-medium">Draw boxes</span> to redact.
                        </p>
                        <div class="h-6 w-px bg-white/10"></div>
                        <button @click="undo" :disabled="undoStack.length === 0"
                            class="text-sm text-amber-400 hover:text-amber-300 flex items-center gap-1 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                            </svg>
                            Undo
                        </button>
                        <button @click="clearAllPages"
                            class="text-sm text-red-400 hover:text-red-300 flex items-center gap-1 transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                            Clear All
                        </button>
                    </div>

                    <button @click="download" :disabled="isProcessing"
                        class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-6 rounded-lg transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                        <span x-show="!isProcessing">Flatten & Download</span>
                        <span x-show="isProcessing">Processing...</span>
                        <svg x-show="!isProcessing" class="w-5 h-5" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </button>
                </div>

                <!-- Pages Container -->
                <div class="grid gap-8 justify-center min-h-[500px]" id="pages-container">
                    <!-- Canvases will be injected here -->
                    <template x-for="(page, index) in pages" :key="index">
                        <div class="relative group">
                            <div class="absolute -left-12 top-0 text-slate-500 text-sm font-mono"
                                x-text="`Page ${index + 1}`"></div>
                            <!-- Checkbox to delete page entirely? Maybe v2 -->

                            <div :id="`page-wrapper-${index}`"
                                class="relative shadow-2xl shadow-black/50 overflow-hidden cursor-crosshair">
                                <!-- The canvas is inserted by JS -->
                            </div>
                        </div>
                    </template>
                </div>

                <!-- Processing Status overlay -->
                <div x-show="isProcessing"
                    class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm"
                    style="display: none;">
                    <div class="text-center space-y-4">
                        <div
                            class="w-16 h-16 border-4 border-red-500/30 border-t-red-500 rounded-full animate-spin mx-auto">
                        </div>
                        <p class="text-xl font-bold text-white">Flattening PDF...</p>
                        <p class="text-slate-400">Converting pages to images to destroy text data.</p>
                    </div>
                </div>

            </div>
        </div>

        <!-- Info Panel -->
        <div class="mt-24 bg-slate-900/50 rounded-3xl p-8 md:p-12 border border-white/5 relative overflow-hidden">
            <div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-red-500/10 rounded-full blur-3xl"></div>

            <div class="relative z-10 grid md:grid-cols-2 gap-12">
                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-white">Why use this tool?</h2>
                    <p class="text-slate-400 leading-relaxed">
                        Standard PDF redacting tools often just place a black rectangle object <em>over</em> the text.
                        The text underneath usually still exists in the file code and can be recovered.
                    </p>
                    <p class="text-slate-400 leading-relaxed">
                        This tool uses a <strong>"True Flatten"</strong> technique. It converts your entire PDF page into a
                        single, flat image (rasterization). The text is physically gone, turned into pixels.
                    </p>
                </div>

                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-white">Who is this for?</h2>
                    <ul class="space-y-3 text-slate-400">
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-red-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                            <span><strong>Tenants</strong> sending bank statements for rent apps.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-red-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                            <span><strong>Lawyers</strong> redacting basic case files.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-red-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                            <span><strong>Anyone</strong> sharing sensitive ID docs.</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="mt-12 pt-8 border-t border-white/5">
                <div class="flex items-center gap-4 text-sm text-red-300 bg-red-500/10 p-4 rounded-xl">
                    <svg class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                        </path>
                    </svg>
                    <p>
                        <strong>Privacy Guarantee:</strong> 100% Client-Side. Your bank statements and IDs never leave your
                        computer.
                    </p>
                </div>
            </div>
        </div>

    </div>

    <!-- Libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

    <script>
        // Set worker src
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

        document.addEventListener('alpine:init', () => {
            Alpine.data('pdfRedactor', () => {
                let pdfDoc = null;

                return {
                    isDragging: false,
                    pdfLoaded: false,
                    isProcessing: false,
                    pages: [], // Array to store page metadata
                    scale: 1.5, // Render quality scale
                    undoStack: [], // Each entry: { canvas, imageData }

                    handleDrop(e) {
                        this.isDragging = false;
                        const file = e.dataTransfer.files[0];
                        if (file && file.type === 'application/pdf') {
                            this.handleFile(file);
                        }
                    },

                    async handleFile(file) {
                        if (!file) return;

                        this.isProcessing = true;
                        // Reset state
                        this.pages = [];
                        document.getElementById('pages-container').innerHTML = ''; // manual clear

                        try {
                            const arrayBuffer = await file.arrayBuffer();
                            pdfDoc = await pdfjsLib.getDocument(arrayBuffer).promise;

                            this.pdfLoaded = true;

                            // Render pages sequentially
                            for (let i = 1; i <= pdfDoc.numPages; i++) {
                                await this.renderPage(i);
                            }

                        } catch (err) {
                            console.error(err);
                            alert('Error loading PDF. Please try a different file.');
                            this.reset();
                        } finally {
                            this.isProcessing = false;
                        }
                    },

                    async renderPage(pageNum) {
                        const page = await pdfDoc.getPage(pageNum);
                        const viewport = page.getViewport({
                            scale: this.scale
                        });

                        // Create Wrapper
                        const wrapper = document.createElement('div');
                        wrapper.className =
                            'relative shadow-2xl shadow-black/50 overflow-hidden cursor-crosshair inline-block bg-white';
                        wrapper.id = `page-wrapper-${pageNum}`;

                        // ID Label for Alpine loop (if needed for metadata, but we are doing strict DOM manipulator here for Canvas performance)

                        // Create Canvas for PDF content
                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

                        // Make it responsive-ish visually, but keep internal resolution high
                        canvas.style.maxWidth = '100%';
                        canvas.style.height = 'auto';

                        wrapper.appendChild(canvas);

                        // Setup Drawing Canvas overlay (or draw on same? Draw on same is permanent, maybe overlay is better for undo?)
                        // For "True Flatten", drawing directly on a single canvas is easiest to flatten later.
                        // But for UX, we want to see what we are drawing. 
                        // Let's use a single canvas for simplicity first. 
                        // Actually, let's use the same canvas to keep it simple. We render PDF, then draw rects on top.

                        await page.render({
                            canvasContext: context,
                            viewport: viewport
                        }).promise;

                        // Append to DOM
                        const container = document.getElementById('pages-container');

                        // Label
                        const label = document.createElement('div');
                        label.className = 'text-slate-500 text-sm font-mono mb-2';
                        label.innerText = `Page ${pageNum}`;

                        const pageContainer = document.createElement('div');
                        pageContainer.className = "flex flex-col items-center";
                        pageContainer.appendChild(label);
                        pageContainer.appendChild(wrapper);
                        container.appendChild(pageContainer);

                        // Add Drawing Listeners
                        this.initDrawing(canvas, context);
                    },

                    initDrawing(canvas, ctx) {
                        let isDrawing = false;
                        let startX, startY;
                        let preview; // snapshot taken at draw-start (for live preview)

                        // Unified position extractor — works for both mouse and touch events
                        const getPos = (e) => {
                            const rect = canvas.getBoundingClientRect();
                            const scaleX = canvas.width / rect.width;
                            const scaleY = canvas.height / rect.height;
                            const src = e.touches ? e.touches[0] : e;
                            return {
                                x: (src.clientX - rect.left) * scaleX,
                                y: (src.clientY - rect.top) * scaleY
                            };
                        };

                        const startDraw = (e) => {
                            isDrawing = true;
                            const pos = getPos(e);
                            startX = pos.x;
                            startY = pos.y;
                            // Save state BEFORE this stroke for undo
                            const before = ctx.getImageData(0, 0, canvas.width, canvas.height);
                            this.undoStack.push({
                                canvas,
                                ctx,
                                imageData: before
                            });
                            // Also keep a live preview snapshot
                            preview = before;
                        };

                        const moveDraw = (e) => {
                            if (!isDrawing) return;
                            const pos = getPos(e);
                            ctx.putImageData(preview, 0, 0);
                            ctx.fillStyle = "#000000";
                            ctx.fillRect(startX, startY, pos.x - startX, pos.y - startY);
                        };

                        const endDraw = () => {
                            isDrawing = false;
                        };

                        // --- Mouse events ---
                        canvas.addEventListener('mousedown', startDraw);
                        canvas.addEventListener('mousemove', moveDraw);
                        window.addEventListener('mouseup', endDraw);

                        // --- Touch events (mobile support) ---
                        canvas.addEventListener('touchstart', (e) => {
                            e.preventDefault();
                            startDraw(e);
                        }, {
                            passive: false
                        });
                        canvas.addEventListener('touchmove', (e) => {
                            e.preventDefault();
                            moveDraw(e);
                        }, {
                            passive: false
                        });
                        canvas.addEventListener('touchend', endDraw);
                    },

                    undo() {
                        if (this.undoStack.length === 0) return;
                        const {
                            ctx,
                            imageData
                        } = this.undoStack.pop();
                        ctx.putImageData(imageData, 0, 0);
                    },

                    clearAllPages() {
                        // Restore every canvas to its state before ANY drawing
                        // by popping all undo entries; or simply re-render the PDF.
                        // Re-render is safest: clears everything definitively.
                        this.undoStack = [];
                        const container = document.getElementById('pages-container');
                        const canvases = container.querySelectorAll('canvas');
                        canvases.forEach(c => {
                            const ctx2 = c.getContext('2d');
                            ctx2.clearRect(0, 0, c.width, c.height);
                        });
                        // Re-render all pages from the loaded PDF
                        this.isProcessing = true;
                        container.innerHTML = '';
                        const renderAll = async () => {
                            for (let i = 1; i <= pdfDoc.numPages; i++) {
                                await this.renderPage(i);
                            }
                            this.isProcessing = false;
                        };
                        renderAll();
                    },

                    async download() {
                        this.isProcessing = true;
                        try {
                            const {
                                PDFDocument
                            } = PDFLib;
                            const newPdf = await PDFDocument.create();

                            const container = document.getElementById('pages-container');
                            const canvases = container.querySelectorAll('canvas');

                            for (let canvas of canvases) {
                                // Convert canvas to JPG (smaller than PNG usually for full pages). 
                                // Using standard quality 0.8
                                const imgData = canvas.toDataURL('image/jpeg', 0.8);

                                const jpgImage = await newPdf.embedJpg(imgData);
                                const page = newPdf.addPage([jpgImage.width, jpgImage.height]);
                                page.drawImage(jpgImage, {
                                    x: 0,
                                    y: 0,
                                    width: jpgImage.width,
                                    height: jpgImage.height,
                                });
                            }

                            const pdfBytes = await newPdf.save();
                            this.saveFile(pdfBytes, 'redacted-document.pdf');

                        } catch (err) {
                            console.error(err);
                            alert('Error generating PDF.');
                        } finally {
                            this.isProcessing = false;
                        }
                    },

                    async saveFile(data, filename) {
                        const blob = new Blob([data], {
                            type: 'application/pdf'
                        });
                        const file = new File([blob], filename, {
                            type: 'application/pdf'
                        });

                        if (navigator.canShare && navigator.canShare({
                                files: [file]
                            })) {
                            try {
                                await navigator.share({
                                    files: [file],
                                    title: 'Redacted PDF'
                                });
                                return;
                            } catch (err) {
                                console.log('Share API failed or cancelled', err);
                            }
                        }

                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = filename;
                        document.body.appendChild(a);
                        a.click();
                        window.URL.revokeObjectURL(url);
                        document.body.removeChild(a);
                    },

                    reset() {
                        this.pdfLoaded = false;
                        this.pages = [];
                        pdfDoc = null;
                        document.getElementById('pages-container').innerHTML = '';
                        // Reset input
                        const input = document.querySelector('input[type=file]');
                        if (input) input.value = '';
                    }
                };
            });
        });
    </script>

    {{-- Related Tools --}}
    <div class="max-w-5xl mx-auto mt-12 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.pdf.merge') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Merge
                PDFs</a>
            <a href="{{ route('tools.pdf-protect') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Password
                Protect PDF</a>
            <a href="{{ route('tools.redactor.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Text
                Redactor</a>
        </div>
    </div>
@endsection