@extends('layouts.app')

@section('title', 'Merge PDFs')
@section('meta_description',
    'Merge PDF files securely in your browser. No file uploads, no server processing. Fast,
    private, and free.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Merge PDFs</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Combine PDF files securely in your browser. <br><span class="text-cyan-400 font-medium">No uploads. No
                    server. Your files never leave your device.</span>
            </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">

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

                <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-cyan-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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                        </svg>
                    </div>
                    <div>
                        <p class="text-lg font-medium text-white">Drop PDF files here</p>
                        <p class="text-slate-500 text-sm">or click to browse</p>
                    </div>
                </div>
            </div>

            <!-- File List -->
            <div x-show="files.length > 0" class="space-y-4">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-white">Files to Merge (<span x-text="files.length"></span>)</h3>
                    <button @click="files = []" class="text-xs text-red-400 hover:text-red-300">Clear All</button>
                </div>

                <ul class="space-y-2">
                    <template x-for="(file, index) in files" :key="index">
                        <li
                            class="flex items-center gap-3 bg-white/5 p-3 rounded-lg border border-white/5 group hover:border-white/10 transition-colors">
                            <!-- Handle -->
                            <div class="text-slate-600 cursor-grab active:cursor-grabbing">
                                <svg 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="M4 8h16M4 16h16" />
                                </svg>
                            </div>

                            <!-- Icon -->
                            <div class="text-red-400">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                </svg>
                            </div>

                            <!-- Name & Size -->
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-white truncate" x-text="file.name"></p>
                                <p class="text-xs text-slate-500" x-text="formatSize(file.size)"></p>
                            </div>

                            <!-- Actions -->
                            <div class="flex items-center gap-1 opacity-50 group-hover:opacity-100 transition-opacity">
                                <button @click="moveUp(index)" :disabled="index === 0"
                                    class="p-1 hover:text-white disabled:opacity-30">
                                    <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="M5 15l7-7 7 7" />
                                    </svg>
                                </button>
                                <button @click="moveDown(index)" :disabled="index === files.length - 1"
                                    class="p-1 hover:text-white disabled:opacity-30">
                                    <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="M19 9l-7 7-7-7" />
                                    </svg>
                                </button>
                                <button @click="removeFile(index)"
                                    class="p-1 text-red-400 hover:bg-red-500/10 rounded ml-2">
                                    <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>
                                </button>
                            </div>
                        </li>
                    </template>
                </ul>

                <!-- Action Button -->
                <div class="pt-4 flex justify-end">
                    <button @click="mergePDFs" :disabled="isProcessing"
                        class="bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-bold py-3 px-8 rounded-xl transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                        <span x-show="!isProcessing">Merge PDF</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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                        <svg x-show="isProcessing" class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg"
                            fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- Privacy & Info Panel -->
        <div class="grid md:grid-cols-2 gap-6">
            <div class="bg-indigo-900/20 border border-indigo-500/20 p-6 rounded-xl">
                <h3 class="text-lg font-bold text-indigo-400 mb-2 flex items-center gap-2">
                    <svg 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 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" />
                    </svg>
                    100% Client-Side Privacy
                </h3>
                <p class="text-slate-400 text-sm">
                    Unlike other tools, your files are <strong>never uploaded to any server</strong>. The merging happens
                    entirely within your web browser using JavaScript.
                </p>
            </div>

            <div class="bg-slate-900/50 border border-white/5 p-6 rounded-xl">
                <h3 class="text-lg font-bold text-white mb-2">How it works</h3>
                <ul class="text-slate-400 text-sm space-y-1 list-disc list-inside">
                    <li>Drag and drop your PDF files.</li>
                    <li>Reorder them to set the page sequence.</li>
                    <li>Click Merge to download a single file.</li>
                    <li>Works offline once loaded.</li>
                </ul>
            </div>
        </div>

    </div>

    <!-- PDF-Lib Library -->
    <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('pdfMerger', () => ({
                files: [],
                isDragging: false,
                isProcessing: false,

                handleDrop(e) {
                    this.isDragging = false;
                    this.handleFiles(e.dataTransfer.files);
                },

                handleFiles(fileList) {
                    // Convert FileList to Array and filter for PDF
                    const newFiles = Array.from(fileList).filter(file => file.type ===
                        'application/pdf');

                    if (newFiles.length === 0) {
                        alert('Please select valid PDF files.');
                        return;
                    }

                    // Add to our list
                    this.files = [...this.files, ...newFiles];
                },

                removeFile(index) {
                    this.files.splice(index, 1);
                },

                moveUp(index) {
                    if (index > 0) {
                        const temp = this.files[index];
                        this.files[index] = this.files[index - 1];
                        this.files[index - 1] = temp;
                    }
                },

                moveDown(index) {
                    if (index < this.files.length - 1) {
                        const temp = this.files[index];
                        this.files[index] = this.files[index + 1];
                        this.files[index + 1] = temp;
                    }
                },

                formatSize(bytes) {
                    if (bytes === 0) return '0 Bytes';
                    const k = 1024;
                    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                },

                async mergePDFs() {
                    if (this.files.length === 0) return;

                    this.isProcessing = true;

                    try {
                        const {
                            PDFDocument
                        } = PDFLib;

                        // Create a new PDFDocument
                        const mergedPdf = await PDFDocument.create();

                        // Iterate through each file
                        for (const file of this.files) {
                            // Read file as ArrayBuffer
                            const arrayBuffer = await file.arrayBuffer();

                            // Load the PDF
                            const pdf = await PDFDocument.load(arrayBuffer);

                            // Copy all pages
                            const copiedPages = await mergedPdf.copyPages(pdf, pdf
                                .getPageIndices());

                            // Add pages to the new document
                            copiedPages.forEach((page) => mergedPdf.addPage(page));
                        }

                        // Serialize the PDFDocument to bytes (a Uint8Array)
                        const pdfBytes = await mergedPdf.save();

                        // Trigger download
                        this.download(pdfBytes, 'merged-document.pdf');

                    } catch (error) {
                        console.error(error);
                        alert(
                            'An error occurred while merging perocess. Please try again with different files.'
                        );
                    } finally {
                        this.isProcessing = false;
                    }
                },

                async download(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: 'Merged 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);
                }
            }));
        });
    </script>

    {{-- Related Tools --}}
    <div class="max-w-4xl 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-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.pdf-redactor') }}" 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">PDF Redactor</a>
        </div>
    </div>
@endsection