@extends('layouts.app')

@section('title', 'Password Protect PDF')
@section('meta_description',
    'Securely password-protect your PDF documents in your browser. Bank-grade encryption. No
    files are ever uploaded. No watermark. 100% Free.')

@section('content')
    <div class="max-w-3xl mx-auto space-y-12" x-data="pdfProtect()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-indigo-500/20 text-indigo-400 mb-4">
                <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <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>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight">Password Protect PDF</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Encrypt sensitive PDFs with a password before emailing them. No uploads. No watermarks. <span
                    class="text-indigo-400 font-medium">Processing happens 100% on your device.</span>
            </p>
        </div>

        <!-- Main Card -->
        <div class="bg-slate-900/50 border border-white/10 rounded-3xl overflow-hidden shadow-2xl relative">

            <!-- Upload State -->
            <div x-show="!file" class="p-12 text-center" @dragover.prevent="dragHover = true"
                @dragleave.prevent="dragHover = false" @drop.prevent="handleDrop($event)"
                :class="dragHover ? 'bg-indigo-500/10' : ''">

                <input type="file" x-ref="fileInput" class="hidden" accept=".pdf" @change="handleFileSelect">

                <div class="w-20 h-20 bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-6 cursor-pointer hover:bg-slate-700 transition"
                    @click="$refs.fileInput.click()">
                    <svg class="w-10 h-10 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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>

                <h3 class="text-xl font-semibold text-white mb-2">Drop your PDF here</h3>
                <p class="text-slate-500 mb-6">or click to browse</p>
                <button @click="$refs.fileInput.click()"
                    class="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg font-medium transition">
                    Select PDF
                </button>
                <p class="text-xs text-slate-600 mt-4"><span class="text-emerald-500">✓</span> No server upload. 100%
                    Private.</p>
            </div>

            <!-- Encrypt State -->
            <div x-show="file && !isProcessing && !isComplete" class="p-8 md:p-12">
                <div class="flex items-center gap-4 mb-8 pb-8 border-b border-white/5">
                    <div class="w-12 h-12 bg-red-500/20 text-red-400 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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 class="flex-1 min-w-0">
                        <h3 class="text-white font-medium truncate" x-text="file ? file.name : ''"></h3>
                        <p class="text-sm text-slate-500" x-text="formatSize(file ? file.size : 0)"></p>
                    </div>
                    <button @click="reset" class="text-slate-500 hover:text-white transition">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <div class="space-y-6 max-w-sm mx-auto">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">Set Encryption Password</label>
                        <div class="relative">
                            <input :type="showPassword ? 'text' : 'password'" x-model="password"
                                class="w-full bg-slate-800 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 transition-colors pr-10"
                                placeholder="Strong password...">
                            <button @click="showPassword = !showPassword"
                                class="absolute right-3 top-3 text-slate-500 hover:text-white">
                                <svg x-show="!showPassword" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                                <svg x-show="showPassword" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor" style="display: none;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a10.059 10.059 0 013.999-5.464M5.636 5.636l12.728 12.728" />
                                </svg>
                            </button>
                        </div>
                        <p class="text-xs text-slate-500 mt-2">This password will be required to open the PDF.</p>
                    </div>

                    <button @click="encrypt" :disabled="!password"
                        class="w-full py-3 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl font-bold flex items-center justify-center gap-2 transition shadow-lg shadow-indigo-500/20">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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>
                        Encrypt PDF
                    </button>
                </div>
            </div>

            <!-- Complete State -->
            <div x-show="isComplete" class="p-12 text-center" style="display: none;">
                <div
                    class="w-20 h-20 bg-emerald-500/20 text-emerald-400 rounded-full flex items-center justify-center mx-auto mb-6 animate-bounce">
                    <svg class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-white mb-2">PDF Secured!</h3>
                <p class="text-slate-400 mb-8 max-w-sm mx-auto">Your document has been encrypted with your password.</p>

                <div class="flex gap-4 justify-center">
                    <button @click="reset" class="px-6 py-2 text-slate-400 hover:text-white transition">Protect
                        Another</button>
                </div>
            </div>

            <!-- Loading Overlay -->
            <div x-show="isProcessing"
                class="absolute inset-0 bg-slate-900/90 z-10 flex flex-col items-center justify-center"
                style="display: none;">
                <div class="w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mb-4">
                </div>
                <p class="text-white font-medium">Encrypting Document...</p>
                <p class="text-sm text-slate-500 mt-1">Please wait</p>
            </div>
        </div>

        <!-- Info Panel -->
        <div class="bg-slate-900/50 border border-white/5 rounded-3xl p-8 md:p-12 space-y-6">
            <div class="grid md:grid-cols-2 gap-12">
                <div class="space-y-4">
                    <h2 class="text-2xl font-bold text-white">How "Safe Send" Works</h2>
                    <div class="prose prose-invert text-slate-400">
                        <p>
                            When you use this tool, your PDF file <strong>never leaves your computer</strong>. The
                            encryption
                            process runs entirely within your web browser using JavaScript.
                        </p>
                        <div class="text-sm mt-4 text-emerald-400 flex items-start gap-2">
                            <svg class="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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>
                            <span>Encryption Standard: We use AES-256 (Advanced Encryption Standard), ensuring high
                                security.</span>
                        </div>
                    </div>
                </div>

                <div class="space-y-4">
                    <h3 class="text-xl font-bold text-white">Who is this for?</h3>
                    <ul class="text-sm text-slate-400 space-y-3">
                        <li class="flex items-start gap-3">
                            <span class="text-indigo-400 mt-1 shrink-0">•</span>
                            <span><strong>Accountants & Individuals:</strong> Safely email W-2s, 1099s, and tax returns
                                without fear of interception.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <span class="text-indigo-400 mt-1 shrink-0">•</span>
                            <span><strong>Real Estate & Mortgage:</strong> Protect driver's licenses, bank statements, and
                                loan applications.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <span class="text-indigo-400 mt-1 shrink-0">•</span>
                            <span><strong>Legal & HR Professionals:</strong> Ensure only the intended recipient can view
                                employment contracts, NDAs, and separation agreements.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <span class="text-indigo-400 mt-1 shrink-0">•</span>
                            <span><strong>Healthcare Providers:</strong> Share medical records securely while maintaining
                                patient privacy.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <span class="text-indigo-400 mt-1 shrink-0">•</span>
                            <span><strong>Freelancers & Agencies:</strong> Lock high-value project proposals or invoices
                                before sending to clients.</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <!-- Load qpdf-wasm -->
    <script src="https://cdn.jsdelivr.net/npm/@neslinesli93/qpdf-wasm@0.3.0/dist/qpdf.js"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('pdfProtect', () => ({
                dragHover: false,
                file: null,
                password: '',
                showPassword: false,
                isProcessing: false,
                isComplete: false,
                qpdfModule: null,

                async init() {
                    // Pre-load QPDF module
                    try {
                        if (typeof Module !== 'undefined') {
                            this.qpdfModule = await Module({
                                locateFile: (path) =>
                                    `https://cdn.jsdelivr.net/npm/@neslinesli93/qpdf-wasm@0.3.0/dist/${path}`,
                                print: (text) => console.log('QPDF stdout:', text),
                                printErr: (text) => console.error('QPDF stderr:', text)
                            });
                        } else {
                            console.error('QPDF Module not loaded correctly.');
                        }
                    } catch (e) {
                        console.error('Failed to initialize QPDF:', e);
                    }
                },

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

                handleFileSelect(e) {
                    const files = e.target.files;
                    if (files.length > 0) {
                        this.file = files[0];
                    }
                },

                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 encrypt() {
                    if (!this.file || !this.password) return;

                    // Security check: WASM usually requires secure context for some features, but let's keep the check for good measure
                    if (!window.isSecureContext) {
                        alert(
                            'Browser Security Error: Encryption requires a secure connection (HTTPS) or localhost.'
                        );
                        return;
                    }

                    if (!this.qpdfModule) {
                        // Try loading again if failed or not yet done
                        await this.init();
                        if (!this.qpdfModule) {
                            alert(
                                'Encryption Engine Failed to Load. Please refresh the page and try again.'
                            );
                            return;
                        }
                    }

                    this.isProcessing = true;

                    try {
                        const qpdf = this.qpdfModule;
                        const inputName = 'input.pdf';
                        const outputName = 'output.pdf';

                        // Read file
                        const arrayBuffer = await this.file.arrayBuffer();

                        // Write to virtual FS
                        qpdf.FS.writeFile(inputName, new Uint8Array(arrayBuffer));

                        // Run QPDF command
                        // qpdf --encrypt user-password owner-password 256 -- input.pdf output.pdf
                        // We use the same password for user and owner
                        // 256 = AES-256
                        const exitCode = qpdf.callMain([
                            '--encrypt',
                            this.password,
                            this.password,
                            '256',
                            '--',
                            inputName,
                            outputName
                        ]);

                        if (exitCode !== 0) {
                            throw new Error(
                                `QPDF exited with code ${exitCode}. Check console for details.`);
                        }

                        // Read output
                        // Check if file exists
                        // Note: FS.readFile returns Uint8Array
                        let pdfBytes;
                        try {
                            pdfBytes = qpdf.FS.readFile(outputName);
                        } catch (fsError) {
                            throw new Error(
                                'Failed to read output file. Encryption might have failed silently.'
                            );
                        }

                        // Download
                        const blob = new Blob([pdfBytes], {
                            type: 'application/pdf'
                        });
                        const filename = `protected-${this.file.name}`;
                        const fileFile = new File([blob], filename, {
                            type: 'application/pdf'
                        });

                        if (navigator.canShare && navigator.canShare({
                                files: [fileFile]
                            })) {
                            try {
                                await navigator.share({
                                    files: [fileFile],
                                    title: 'Protected PDF'
                                });
                            } catch (err) {
                                console.log('Share API failed or cancelled', err);
                            }
                        } else {
                            const link = document.createElement('a');
                            link.href = URL.createObjectURL(blob);
                            link.download = filename;
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                            URL.revokeObjectURL(link.href);
                        }

                        // Cleanup virtual FS
                        try {
                            qpdf.FS.unlink(inputName);
                            qpdf.FS.unlink(outputName);
                        } catch (e) {
                            /* ignore cleanup errors */
                        }

                        this.isComplete = true;

                    } catch (error) {
                        console.error('Encryption Failed:', error);
                        alert('Encryption Failed: ' + (error.message || 'Unknown error.'));
                    } finally {
                        this.isProcessing = false;
                    }
                },

                reset() {
                    this.file = null;
                    this.password = '';
                    this.isComplete = false;
                    this.showPassword = false;
                    if (this.$refs.fileInput) this.$refs.fileInput.value = '';
                }
            }));
        });
    </script>

    {{-- Related Tools --}}
    <div class="max-w-3xl 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-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