@extends('layouts.app')

@section('title', 'Censor Image')
@section('meta_description', 'Blur or pixelate any image in your browser. Private, secure, and free online tool.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight">Censor Image</h1>
            <p class="text-slate-400 text-lg">
                Blur or pixelate any image in your browser. <span class="text-indigo-400 font-medium">100% Private.</span>
                Photos never leave your device.
            </p>
        </div>

        <div class="bg-slate-900/50 border border-white/5 rounded-3xl p-6 md:p-8 shadow-xl">

            <!-- Toolbar -->
            <div class="flex flex-wrap items-center justify-between gap-4 mb-6" x-show="imageLoaded" style="display: none;">
                <div class="flex gap-2">
                    <button @click="mode = 'blur'"
                        class="hidden md:block px-4 py-2 rounded-lg text-sm font-medium transition-all"
                        :class="mode === 'blur' ? 'bg-indigo-500 text-white shadow-lg' :
                            'bg-white/5 text-slate-400 hover:text-white'">
                        Blur
                    </button>
                    <button @click="mode = 'pixelate'" class="px-4 py-2 rounded-lg text-sm font-medium transition-all"
                        :class="mode === 'pixelate' ? 'bg-indigo-500 text-white shadow-lg' :
                            'bg-white/5 text-slate-400 hover:text-white'">
                        Pixelate
                    </button>
                </div>

                <div class="flex gap-2">
                    <button @click="undo"
                        class="px-4 py-2 rounded-lg text-sm font-medium bg-white/5 text-slate-400 hover:text-white transition-all">
                        Undo
                    </button>
                    <button @click="reset"
                        class="px-4 py-2 rounded-lg text-sm font-medium bg-white/5 text-red-400 hover:text-red-300 transition-all">
                        Clear All
                    </button>
                </div>
            </div>

            <!-- Upload Zone -->
            <div x-show="!imageLoaded"
                class="relative group border-2 border-dashed border-white/10 rounded-xl p-12 text-center transition-all duration-300 hover:border-indigo-500/50 hover:bg-white/[0.02]"
                :class="{ 'border-indigo-500 bg-indigo-500/10': isDragging }" @dragover.prevent="isDragging = true"
                @dragleave.prevent="isDragging = false" @drop.prevent="handleDrop($event)">
                <input type="file" accept="image/*" 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-indigo-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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <div>
                        <p class="text-lg font-medium text-white">Drop photo here</p>
                        <p class="text-slate-500 text-sm">JPG, PNG supported</p>
                    </div>
                </div>
            </div>

            <!-- Canvas Area -->
            <div x-show="imageLoaded" style="display: none;"
                class="relative overflow-hidden rounded-xl bg-slate-950 shadow-2xl mx-auto w-fit">
                <canvas x-ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"
                    @mouseleave="stopDrawing" @touchstart="startDrawing" @touchmove="draw" @touchend="stopDrawing"
                    @touchcancel="stopDrawing" class="max-w-full cursor-crosshair touch-none"></canvas>

                <!-- Selection Guide Overlay -->
                <div x-show="selectionBox.visible"
                    class="absolute border-2 border-indigo-500 bg-indigo-500/20 pointer-events-none"
                    :style="`top: ${selectionBox.top}px; left: ${selectionBox.left}px; width: ${selectionBox.width}px; height: ${selectionBox.height}px;`">
                </div>
            </div>

            <div x-show="imageLoaded" style="display: none;" class="mt-6 flex justify-center">
                <button @click="download"
                    class="bg-emerald-500 hover:bg-emerald-400 text-white font-bold py-3 px-8 rounded-xl transition-all shadow-lg hover:shadow-emerald-500/25 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                    </svg>
                    Download Image
                </button>
            </div>
            <p x-show="imageLoaded" style="display: none;" class="text-center text-xs text-slate-500 mt-4">
                Click and drag on the image to censor.
            </p>

        </div>

        <!-- Privacy Info -->
        <div class="mt-12 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-emerald-500/10 rounded-full blur-3xl"></div>
            <div class="relative z-10 grid lg:grid-cols-3 md:grid-cols-2 gap-8 lg:gap-12">
                <div class="space-y-4">
                    <h3 class="text-xl font-bold text-white flex items-center gap-2">
                        <svg class="w-5 h-5 text-emerald-400 shrink-0" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
                            </path>
                        </svg>
                        Privacy First
                    </h3>
                    <p class="text-slate-400 text-sm leading-relaxed">
                        We use the HTML5 Canvas API to process your images directly in your browser. Unlike other online
                        tools, your sensitive un-blurred photos are never sent to a cloud server.
                    </p>
                </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">
                            <svg class="w-5 h-5 text-emerald-400 mt-0.5 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>Parents</strong> protecting children's faces before sharing photos online.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-emerald-400 mt-0.5 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>Car Sellers</strong> obscuring license plates in vehicle classified ads.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-emerald-400 mt-0.5 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>Journalists</strong> throwing a quick blur over sensitive documents or
                                sources.</span>
                        </li>
                    </ul>
                </div>

                <div class="space-y-4">
                    <h3 class="text-xl font-bold text-white">How it works</h3>
                    <ul class="text-sm text-slate-400 space-y-2">
                        <li>1. Upload your image (drag & drop).</li>
                        <li>2. Select "Blur" or "Pixelate" mode.</li>
                        <li>3. Drag a box over the sensitive area.</li>
                        <li>4. Download the safe version immediately.</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('imageCensor', () => ({
                isDragging: false,
                imageLoaded: false,
                mode: window.innerWidth < 768 ? 'pixelate' : 'blur', // default to pixelate on mobile
                canvas: null,
                ctx: null,
                originalImage: null,
                isDrawing: false,
                startX: 0,
                startY: 0,
                startMouseX: 0, // For visual guide (CSS pixels)
                startMouseY: 0, // For visual guide (CSS pixels)
                selectionBox: {
                    top: 0,
                    left: 0,
                    width: 0,
                    height: 0,
                    visible: false
                },
                history: [], // For undo

                init() {
                    //
                },

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

                handleFile(file) {
                    if (!file) return;
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        const img = new Image();
                        img.onload = () => {
                            this.setupCanvas(img);
                            this.imageLoaded = true;
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                },

                setupCanvas(img) {
                    this.canvas = this.$refs.canvas;
                    this.ctx = this.canvas.getContext('2d', {
                        willReadFrequently: true
                    });

                    // Simple logic to fit max width but keep resolution high-ish
                    // Or ideally render at full resolution but style it down with max-width: 100%
                    this.canvas.width = img.width;
                    this.canvas.height = img.height;

                    this.ctx.drawImage(img, 0, 0);
                    this.originalImage = img;
                    this.saveState(); // Initial state
                },

                saveState() {
                    if (this.history.length > 10) this.history.shift(); // Limit history
                    this.history.push(this.ctx.getImageData(0, 0, this.canvas.width, this.canvas
                        .height));
                },

                undo() {
                    if (this.history.length > 1) {
                        this.history.pop(); // Remove current state
                        const previousState = this.history[this.history.length - 1];
                        this.ctx.putImageData(previousState, 0, 0);
                    } else if (this.history.length === 1) {
                        // If only initial state is left
                        // do nothing or re-draw?
                    }
                },

                reset() {
                    if (!this.originalImage) return;
                    this.ctx.drawImage(this.originalImage, 0, 0);
                    this.history = [];
                    this.saveState();
                },

                getCoordinates(e) {
                    if (e.touches && e.touches.length > 0) {
                        return {
                            x: e.touches[0].clientX,
                            y: e.touches[0].clientY
                        };
                    } else if (e.changedTouches && e.changedTouches.length > 0) {
                        return {
                            x: e.changedTouches[0].clientX,
                            y: e.changedTouches[0].clientY
                        };
                    }
                    return {
                        x: e.clientX,
                        y: e.clientY
                    };
                },

                startDrawing(e) {
                    if (!this.imageLoaded) return;
                    this.isDrawing = true;
                    const rect = this.canvas.getBoundingClientRect();
                    const coords = this.getCoordinates(e);

                    // Canvas coordinates for the actual effect
                    const scaleX = this.canvas.width / rect.width;
                    const scaleY = this.canvas.height / rect.height;

                    this.startX = (coords.x - rect.left) * scaleX;
                    this.startY = (coords.y - rect.top) * scaleY;

                    // CSS coordinates for visual guide
                    this.startMouseX = coords.x - rect.left;
                    this.startMouseY = coords.y - rect.top;

                    this.selectionBox.visible = true;
                    this.selectionBox.left = this.startMouseX;
                    this.selectionBox.top = this.startMouseY;
                    this.selectionBox.width = 0;
                    this.selectionBox.height = 0;
                },

                draw(e) {
                    if (!this.isDrawing) return;

                    const rect = this.canvas.getBoundingClientRect();
                    const coords = this.getCoordinates(e);
                    const currentMouseX = coords.x - rect.left;
                    const currentMouseY = coords.y - rect.top;

                    // Calculate dimensions
                    const w = currentMouseX - this.startMouseX;
                    const h = currentMouseY - this.startMouseY;

                    // Update selection box styles (handle negative width/height)
                    this.selectionBox.left = w < 0 ? currentMouseX : this.startMouseX;
                    this.selectionBox.top = h < 0 ? currentMouseY : this.startMouseY;
                    this.selectionBox.width = Math.abs(w);
                    this.selectionBox.height = Math.abs(h);
                },

                stopDrawing(e) {
                    if (!this.isDrawing) return;
                    this.isDrawing = false;
                    this.selectionBox.visible = false;

                    const rect = this.canvas.getBoundingClientRect();
                    const scaleX = this.canvas.width / rect.width;
                    const scaleY = this.canvas.height / rect.height;
                    const coords = this.getCoordinates(e);

                    const endX = (coords.x - rect.left) * scaleX;
                    const endY = (coords.y - rect.top) * scaleY;

                    const width = endX - this.startX;
                    const height = endY - this.startY;

                    // Avoid accidental clicks
                    if (Math.abs(width) < 5 || Math.abs(height) < 5) return;

                    this.applyEffect(this.startX, this.startY, width, height);
                    this.saveState();
                },

                applyEffect(x, y, w, h) {
                    // Normalize rect
                    const rectX = w < 0 ? x + w : x;
                    const rectY = h < 0 ? y + h : y;
                    const rectW = Math.abs(w);
                    const rectH = Math.abs(h);

                    if (this.mode === 'blur') {
                        // Basic Canvas filter
                        this.ctx.save();
                        this.ctx.beginPath();
                        this.ctx.rect(rectX, rectY, rectW, rectH);
                        this.ctx.clip();
                        this.ctx.filter = 'blur(20px)'; // Heavy blur
                        this.ctx.drawImage(this.canvas, 0, 0);
                        this.ctx.restore();
                    } else {
                        // Pixelate
                        // Make pixel size dynamic based on the selection size to ensure it's always obscured.
                        const sampleSize = Math.max(25, Math.floor(Math.min(rectW, rectH) / 8));

                        const tempCanvas = document.createElement('canvas');
                        // Calculations
                        const scaledW = Math.max(1, Math.floor(rectW / sampleSize));
                        const scaledH = Math.max(1, Math.floor(rectH / sampleSize));

                        tempCanvas.width = scaledW;
                        tempCanvas.height = scaledH;

                        const tCtx = tempCanvas.getContext('2d');
                        tCtx.imageSmoothingEnabled = false;

                        // Draw source region into temp canvas (downscaled)
                        tCtx.drawImage(this.canvas, rectX, rectY, rectW, rectH, 0, 0, scaledW, scaledH);

                        // Draw temp canvas back into source (upscaled)
                        this.ctx.imageSmoothingEnabled = false;
                        this.ctx.drawImage(tempCanvas, 0, 0, scaledW, scaledH, rectX, rectY, rectW,
                            rectH);
                        this.ctx.imageSmoothingEnabled = true; // Reset
                    }
                },

                download() {
                    this.canvas.toBlob(async (blob) => {
                        if (!blob) return;
                        const filename = 'censored-image.png';
                        const file = new File([blob], filename, {
                            type: 'image/png'
                        });

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

                        // Fallback
                        const url = URL.createObjectURL(blob);
                        const link = document.createElement('a');
                        link.download = filename;
                        link.href = url;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        URL.revokeObjectURL(url);
                    }, 'image/png');
                }
            }));
        });
    </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.image-watermark') }}"
                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
                Watermark</a>
            <a href="{{ route('tools.metadata-remover') }}"
                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">Metadata
                Remover</a>
        </div>
    </div>
@endsection