@extends('layouts.app')

@section('title', 'Image Watermark')
@section('meta_description',
    'Protect your images from being used without your permission. Securely watermark your ID, passport, or documents
    client-side. Prevent identity theft by
    adding custom text overlays before sharing.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Image Watermark</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Protect your images from being used without your permission. Prevent identity theft. Stamped securely in
                your browser.
                <span class="text-indigo-400 font-medium">Files never leave your device.</span>
            </p>
        </div>

        <div class="grid lg:grid-cols-3 gap-8 items-start">

            <!-- Controls Column -->
            <div class="space-y-6 lg:col-span-1">

                <!-- File Input -->
                <div @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
                    @drop.prevent="handleDrop($event)"
                    class="relative group cursor-pointer border-2 border-dashed rounded-3xl p-8 text-center transition-all duration-300 bg-slate-900/50"
                    :class="dragover ? 'border-indigo-500 bg-indigo-500/10' :
                        'border-white/10 hover:border-indigo-500/50 hover:bg-slate-800/50'">

                    <input type="file" accept="image/*,application/pdf"
                        class="absolute inset-0 w-full h-full opacity-0 z-10 cursor-pointer"
                        @change="handleFileSelect($event)">

                    <div class="space-y-4 pointer-events-none">
                        <div
                            class="w-12 h-12 mx-auto rounded-xl bg-slate-800 flex items-center justify-center text-slate-400 group-hover:text-indigo-400 transition-colors">
                            <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="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">
                                </path>
                            </svg>
                        </div>
                        <div>
                            <p class="font-medium text-white">Drop photo or PDF</p>
                            <p class="text-xs text-slate-500 mt-1">Images & PDFs supported</p>
                        </div>
                    </div>
                </div>

                <!-- Watermark Settings -->
                <div class="bg-slate-900/50 border border-white/10 rounded-3xl p-6 space-y-6">

                    <!-- Text Input -->
                    <div class="space-y-2">
                        <label class="text-sm font-medium text-slate-300">Watermark Text</label>
                        <input type="text" x-model="text" @input="debouncedProcess"
                            placeholder="e.g. ONLY FOR RENTAL APPLICATION"
                            class="w-full bg-slate-950/50 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors">
                    </div>

                    <!-- Opacity -->
                    <div class="space-y-2">
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-slate-300">Opacity</span>
                            <span class="text-slate-500" x-text="Math.round(opacity * 100) + '%'"></span>
                        </div>
                        <input type="range" min="0.05" max="0.5" step="0.05" x-model="opacity"
                            @input="debouncedProcess"
                            class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
                    </div>

                    <!-- Size -->
                    <div class="space-y-2">
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-slate-300">Text Size</span>
                            <span class="text-slate-500" x-text="matchFontSize ? 'Auto' : fontSize + 'px'"></span>
                        </div>
                        <input type="range" min="12" max="120" step="4" x-model="fontSize"
                            @input="debouncedProcess"
                            class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
                    </div>

                    <!-- Color -->
                    <div class="space-y-2">
                        <label class="text-sm font-medium text-slate-300">Color</label>
                        <div class="flex gap-2">
                            <button @click="color = '#000000'; process()"
                                class="w-8 h-8 rounded-full border border-white/10 bg-black"
                                :class="color === '#000000' ? 'ring-2 ring-indigo-500 ring-offset-2 ring-offset-slate-900' : ''"></button>
                            <button @click="color = '#ffffff'; process()"
                                class="w-8 h-8 rounded-full border border-white/10 bg-white"
                                :class="color === '#ffffff' ? 'ring-2 ring-indigo-500 ring-offset-2 ring-offset-slate-900' : ''"></button>
                            <button @click="color = '#ef4444'; process()"
                                class="w-8 h-8 rounded-full border border-white/10 bg-red-500"
                                :class="color === '#ef4444' ? 'ring-2 ring-indigo-500 ring-offset-2 ring-offset-slate-900' : ''"></button>
                            <button @click="color = '#3b82f6'; process()"
                                class="w-8 h-8 rounded-full border border-white/10 bg-blue-500"
                                :class="color === '#3b82f6' ? 'ring-2 ring-indigo-500 ring-offset-2 ring-offset-slate-900' : ''"></button>
                        </div>
                    </div>

                </div>

                <!-- Action Button -->
                <button @click="download" :disabled="!previewUrl"
                    class="w-full bg-indigo-500 hover:bg-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-indigo-500/20 transform hover:-translate-y-0.5 flex items-center justify-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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                    </svg>
                    Download Protected File
                </button>

            </div>

            <!-- Preview Column -->
            <div
                class="lg:col-span-2 bg-slate-900/50 border border-white/10 rounded-3xl p-4 min-h-[600px] flex flex-col justify-center items-center relative overflow-hidden">

                <!-- Loading State -->
                <div x-show="processing"
                    class="absolute inset-0 z-20 flex items-center justify-center bg-slate-900/80 backdrop-blur-sm"
                    x-transition>
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500"></div>
                </div>

                <!-- Empty State -->
                <div x-show="!previewUrl && !processing" class="text-center text-slate-500">
                    <svg class="w-16 h-16 mx-auto mb-4 opacity-50" 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">
                        </path>
                    </svg>
                    <p class="text-lg">Preview will appear here</p>
                </div>

                <!-- Image Preview -->
                <template x-if="fileType === 'image' && previewUrl">
                    <img :src="previewUrl" class="max-w-full max-h-[700px] rounded-lg shadow-2xl">
                </template>

                <!-- PDF Preview -->
                <template x-if="fileType === 'pdf' && previewUrl">
                    <iframe :src="previewUrl" class="w-full h-[700px] rounded-lg shadow-2xl border-0"></iframe>
                </template>

            </div>

        </div>

    </div>

    <!-- Info Panel -->
    <div class="max-w-4xl mx-auto mt-24 space-y-16">

        <div class="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-indigo-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">
                        Identity theft is on the rise. Often, it starts when you are asked to email a photo of your ID,
                        Passport, or Bank Statement to a landlord, recruiter, or gig app.
                    </p>
                    <p class="text-slate-400 leading-relaxed">
                        Once you hit send, that image sits in their inbox forever. If their email gets hacked, your identity
                        is compromised.
                    </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-indigo-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>Renters</strong> applying for apartments.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-indigo-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>Freelancers</strong> verifying identity on platforms.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-indigo-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 documents online.</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-indigo-300 bg-indigo-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> This tool runs 100% in your browser. Your files are never
                        uploaded to our servers. The watermarking process happens locally on your device using HTML5 Canvas
                        and PDF-Lib.
                    </p>
                </div>
            </div>
        </div>

    </div>

    <!-- Scripts -->
    <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('idWatermarker', () => ({
                dragover: false,
                file: null,
                fileType: null, // 'image' or 'pdf'
                fileName: '',
                text: 'ONLY FOR VERIFICATION',
                opacity: 0.15,
                fontSize: 32,
                color: '#000000',
                previewUrl: null,
                processing: false,
                originalImage: null,
                pdfBytes: null,
                debounceTimer: null,

                handleDrop(e) {
                    this.dragover = false;
                    const file = e.dataTransfer.files[0];
                    if (file) this.loadFile(file);
                },

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

                loadFile(file) {
                    this.file = file;
                    this.fileName = file.name;
                    this.previewUrl = null;

                    if (file.type.startsWith('image/')) {
                        this.fileType = 'image';
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            const img = new Image();
                            img.onload = () => {
                                this.originalImage = img;
                                this.process();
                            };
                            img.src = e.target.result;
                        };
                        reader.readAsDataURL(file);
                    } else if (file.type === 'application/pdf') {
                        this.fileType = 'pdf';
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            this.pdfBytes = new Uint8Array(e.target.result);
                            this.process();
                        };
                        reader.readAsArrayBuffer(file);
                    } else {
                        alert('Unsupported file type. Please upload an image or PDF.');
                    }
                },

                debouncedProcess() {
                    clearTimeout(this.debounceTimer);
                    this.debounceTimer = setTimeout(() => this.process(), 300);
                },

                async process() {
                    if (!this.file || !this.text) return;
                    this.processing = true;

                    // Release old URL to avoid memory leaks
                    if (this.previewUrl && !this.previewUrl.startsWith('data:')) {
                        URL.revokeObjectURL(this.previewUrl);
                    }

                    try {
                        if (this.fileType === 'image') {
                            await this.processImage();
                        } else if (this.fileType === 'pdf') {
                            await this.processPdf();
                        }
                    } catch (error) {
                        console.error('Processing error:', error);
                        alert('Something went wrong processing the file.');
                    } finally {
                        this.processing = false;
                    }
                },

                async processImage() {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');

                    // Set canvas dimensions to match image
                    canvas.width = this.originalImage.width;
                    canvas.height = this.originalImage.height;

                    // Draw original image
                    ctx.drawImage(this.originalImage, 0, 0);

                    // Configure Text
                    const size = Math.max(12, Math.round(canvas.width / 20 * (this.fontSize /
                        32))); // Scale font relative to image size
                    ctx.font = `bold ${size}px Arial, sans-serif`;
                    ctx.fillStyle = this.color;
                    ctx.globalAlpha = this.opacity;
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    // Prepare Tile Grid
                    // Calculate diagonals for 45 degree rotation spacing
                    const textWidth = ctx.measureText(this.text).width;
                    const tileWidth = textWidth + (size * 4); // spacing
                    const tileHeight = size * 6; // spacing

                    // Draw Loop
                    ctx.save();
                    // Rotate entire context isn't efficient for tiling. 
                    // Better: Translate to center of each tile, rotate, draw, restore.

                    for (let y = -tileHeight; y < canvas.height + tileHeight; y += tileHeight) {
                        for (let x = -tileWidth; x < canvas.width + tileWidth; x += tileWidth) {
                            ctx.save();
                            // Offset every other row
                            const offsetX = (y / tileHeight) % 2 === 0 ? 0 : tileWidth / 2;

                            ctx.translate(x + offsetX, y);
                            ctx.rotate(-45 * Math.PI / 180);
                            ctx.fillText(this.text, 0, 0);
                            ctx.restore();
                        }
                    }
                    ctx.restore();

                    // Export
                    this.previewUrl = canvas.toDataURL(this.file.type);
                },

                async processPdf() {
                    const {
                        PDFDocument,
                        rgb,
                        degrees
                    } = PDFLib;

                    // Load PDF
                    const pdfDoc = await PDFDocument.load(this.pdfBytes);
                    const pages = pdfDoc.getPages();

                    // Hex to RGB Helper
                    const hexToRgb = (hex) => {
                        const r = parseInt(hex.slice(1, 3), 16) / 255;
                        const g = parseInt(hex.slice(3, 5), 16) / 255;
                        const b = parseInt(hex.slice(5, 7), 16) / 255;
                        return rgb(r, g, b);
                    };

                    const colorRgb = hexToRgb(this.color);

                    pages.forEach(page => {
                        const {
                            width,
                            height
                        } = page.getSize();

                        // Scale font relative to page width (assuming A4ish)
                        const size = Math.max(12, Math.round(width / 20 * (this.fontSize /
                            32)));

                        const textWidth = size * this.text.length *
                            0.6; // Approximation without fontkit
                        const tileWidth = textWidth + (size * 5);
                        const tileHeight = size * 8;

                        for (let y = -tileHeight; y < height + tileHeight; y +=
                            tileHeight) {
                            for (let x = -tileWidth; x < width + tileWidth; x +=
                                tileWidth) {
                                const offsetX = (Math.floor(y / tileHeight)) % 2 === 0 ? 0 :
                                    tileWidth / 2;

                                page.drawText(this.text, {
                                    x: x + offsetX,
                                    y: y,
                                    size: size,
                                    opacity: parseFloat(this.opacity),
                                    color: colorRgb,
                                    rotate: degrees(45),
                                });
                            }
                        }
                    });

                    const pdfDataUri = await pdfDoc.saveAsBase64({
                        dataUri: true
                    });
                    this.previewUrl = pdfDataUri;
                },

                async download() {
                    if (!this.previewUrl) return;

                    const ext = this.fileType === 'image' ? (this.file.type.split('/')[1] ||
                            'png') :
                        'pdf';
                    const name = this.fileName.replace(/\.[^/.]+$/, ""); // strip extension
                    const filename = `${name}_SAFE_ID.${ext}`;

                    // Convert data URL to Blob for sharing if necessary
                    let blob;
                    if (this.previewUrl.startsWith('data:')) {
                        const response = await fetch(this.previewUrl);
                        blob = await response.blob();
                    } else {
                        // Sometimes previewUrl might be an object URL
                        const response = await fetch(this.previewUrl);
                        blob = await response.blob();
                    }

                    const mimeType = this.fileType === 'image' ? this.file.type : 'application/pdf';
                    const file = new File([blob], filename, {
                        type: mimeType
                    });

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

                    const a = document.createElement('a');
                    a.href = this.previewUrl;
                    a.download = filename;

                    document.body.appendChild(a);
                    a.click();
                    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.image-caption') }}"
                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">Image
                Caption</a>
            <a href="{{ route('tools.censor-image') }}"
                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">Censor
                Image</a>
            <a href="{{ route('tools.image-splitter') }}"
                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">Image
                Splitter</a>
        </div>
    </div>
@endsection