@extends('layouts.app')

@section('title', 'Image Caption')
@section('meta_description',
    'Add meme captions, text, and boxes to your images securely. 100% free, secure and online.
    No watermark and no uploads. Your files stay on your device.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight">Image Caption</h1>
            <p class="text-slate-400 text-lg">
                Add text, meme styles, and backgrounds to photos. No uploads. No watermark.<span
                    class="text-indigo-400 font-medium">100% Secure. Your files stay on your device</span>
            </p>
        </div>

        <!-- Upload Zone (Shows when no image) -->
        <div x-show="!imageLoaded"
            class="relative group border-2 border-dashed border-white/10 rounded-3xl p-16 text-center transition-all duration-300 hover:border-indigo-500/50 hover:bg-white/[0.02] bg-slate-900/50"
            :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-20 h-20 mx-auto bg-slate-800 rounded-full flex items-center justify-center text-indigo-400 group-hover:scale-110 transition-transform">
                    <svg class="w-10 h-10" 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>
                    <h3 class="text-xl font-bold text-white mb-2">Drop your image here</h3>
                    <p class="text-slate-500">Or click to browse (JPG, PNG)</p>
                </div>
            </div>
        </div>

        <!-- Editor Interface -->
        <div x-show="imageLoaded" style="display: none;" class="grid lg:grid-cols-5 gap-8">

            <!-- Left: Canvas Area -->
            <div class="lg:col-span-3 space-y-4">
                <div class="bg-slate-900/50 p-2 rounded-2xl border border-white/5 shadow-xl overflow-hidden relative"
                    style="touch-action: none;">
                    <canvas x-ref="canvas" class="max-w-full h-auto rounded-xl shadow-inner cursor-move block mx-auto"
                        @mousedown="startDrag" @mousemove="drag" @mouseup="endDrag" @mouseleave="endDrag"
                        @touchstart.prevent="startDrag" @touchmove.prevent="drag" @touchend.prevent="endDrag"
                        @touchcancel.prevent="endDrag">
                    </canvas>

                    <!-- Toolbar overlay -->
                    <div class="absolute top-4 right-4 flex gap-2">
                        <button @click="reset"
                            class="bg-slate-900/80 backdrop-blur text-white px-3 py-1.5 rounded-lg text-xs font-medium border border-white/10 hover:bg-slate-800 transition-colors">
                            Change Image
                        </button>
                    </div>
                </div>
                <p class="text-center text-sm text-slate-500">
                    <span class="inline-block w-2 h-2 rounded-full bg-indigo-500 mr-2 animate-pulse"></span>
                    Click and drag text directly on the image to position it.
                </p>
            </div>

            <!-- Right: Controls -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Captions List -->
                <div class="space-y-4 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
                    <template x-for="(caption, index) in captions" :key="caption.id">
                        <div class="bg-slate-900/60 border border-white/5 rounded-2xl p-5 space-y-4 relative transition-all"
                            :class="{ 'ring-2 ring-indigo-500': activeCaptionIndex === index }"
                            @click="activeCaptionIndex = index">

                            <!-- Delete Button -->
                            <button @click.stop="removeCaption(index)"
                                class="absolute top-4 right-4 text-slate-500 hover:text-red-400 p-1">
                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>

                            <h3 class="text-white font-medium flex items-center gap-2">
                                <span
                                    class="bg-indigo-500/20 text-indigo-400 w-6 h-6 rounded-full flex items-center justify-center text-xs"
                                    x-text="index + 1"></span>
                                Caption Text
                            </h3>

                            <!-- Text Input -->
                            <div class="space-y-1">
                                <textarea x-model="caption.text" @input="drawCanvas" rows="2"
                                    class="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all placeholder-slate-600 resize-none"
                                    placeholder="Enter text here..."></textarea>
                                <p class="text-[11px] text-slate-500 px-2 flex items-center gap-1.5">
                                    <svg class="w-3 h-3 text-indigo-400" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
                                        </path>
                                    </svg>
                                    Tip: drag the text to position it.
                                </p>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <!-- Font Family -->
                                <div>
                                    <label class="block text-xs font-medium text-slate-400 mb-1">Font</label>
                                    <select x-model="caption.font" @change="drawCanvas"
                                        class="w-full bg-slate-950 border border-white/10 rounded-lg p-2 text-white text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                                        <option value="Impact">Impact (Meme)</option>
                                        <option value="Arial">Arial</option>
                                        <option value="'Courier New'">Courier</option>
                                        <option value="'Times New Roman'">Times New Roman</option>
                                        <option value="'Comic Sans MS'">Comic Sans</option>
                                        <option value="'Outfit', sans-serif">Outfit</option>
                                    </select>
                                </div>
                                <!-- Font Size -->
                                <div>
                                    <label class="block text-xs font-medium text-slate-400 mb-1">Size (<span
                                            x-text="caption.size"></span>px)</label>
                                    <input type="range" x-model.number="caption.size" @input="drawCanvas" min="10"
                                        :max="originalImageObj ? Math.floor(Math.max(originalImageObj.width, originalImageObj
                                            .height) / 2) : 200"
                                        class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500 mt-2">
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <!-- Font Color -->
                                <div>
                                    <label class="block text-xs font-medium text-slate-400 mb-1">Text Color</label>
                                    <div class="flex items-center gap-2">
                                        <input type="color" x-model="caption.color" @input="drawCanvas"
                                            class="w-8 h-8 rounded cursor-pointer bg-transparent border-0 p-0">
                                        <input type="text" x-model="caption.color" @input="drawCanvas"
                                            class="bg-slate-950 border border-white/10 rounded-lg p-1 text-xs text-white uppercase w-full font-mono text-center">
                                    </div>
                                </div>
                                <!-- Background Color -->
                                <div class="opacity-50 transition-opacity" :class="{ 'opacity-100': caption.hasBg }">
                                    <label class="block text-xs font-medium text-slate-400 mb-1">BG Color</label>
                                    <div class="flex items-center gap-2">
                                        <input type="color" x-model="caption.bgColor" @input="drawCanvas"
                                            :disabled="!caption.hasBg"
                                            class="w-8 h-8 rounded cursor-pointer bg-transparent border-0 p-0 disabled:cursor-not-allowed">
                                        <input type="text" x-model="caption.bgColor" @input="drawCanvas"
                                            :disabled="!caption.hasBg"
                                            class="bg-slate-950 border border-white/10 rounded-lg p-1 text-xs text-white uppercase w-full font-mono text-center disabled:opacity-50">
                                    </div>
                                </div>
                            </div>

                            <!-- Toggles -->
                            <div class="flex flex-wrap gap-4 pt-2 border-t border-white/5">
                                <label class="flex items-center gap-2 cursor-pointer group">
                                    <input type="checkbox" x-model="caption.isMeme" @change="drawCanvas"
                                        class="w-4 h-4 rounded border-white/20 bg-slate-900 text-indigo-500 focus:ring-indigo-500 focus:ring-offset-slate-900">
                                    <span class="text-sm text-slate-300 group-hover:text-white transition-colors">Meme
                                        Style (Outline)</span>
                                </label>

                                <label class="flex items-center gap-2 cursor-pointer group">
                                    <input type="checkbox" x-model="caption.hasBg" @change="drawCanvas"
                                        class="w-4 h-4 rounded border-white/20 bg-slate-900 text-indigo-500 focus:ring-indigo-500 focus:ring-offset-slate-900">
                                    <span
                                        class="text-sm text-slate-300 group-hover:text-white transition-colors">Background
                                        Box</span>
                                </label>
                            </div>
                        </div>
                    </template>
                </div>

                <!-- Action Buttons -->
                <div class="space-y-4 pt-4">
                    <button @click="addCaption"
                        class="w-full py-3 rounded-xl border border-dashed border-white/20 text-slate-300 hover:text-white hover:border-indigo-500/50 hover:bg-indigo-500/10 transition-all font-medium 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="M12 4v16m8-8H4" />
                        </svg>
                        Add Another Caption
                    </button>

                    <button @click="download"
                        class="w-full bg-emerald-500 hover:bg-emerald-400 text-slate-900 font-bold py-4 px-8 rounded-xl transition-all shadow-lg hover:shadow-emerald-500/25 flex items-center justify-center gap-2 text-lg">
                        <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="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>
            </div>

        </div>

        <!-- Info Section -->
        <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-indigo-500/10 rounded-full blur-3xl"></div>
            <div class="relative z-10 grid md:grid-cols-2 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-indigo-400" 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>
                        Zero Uploads. 100% Private.
                    </h3>
                    <p class="text-slate-400 text-sm leading-relaxed">
                        Caption your private family photos, sensitive screenshots, or work documents safely. Image
                        processing happens entirely locally on your device within your browser. <strong>Your files never hit
                            our servers.</strong>
                    </p>
                </div>
                <div class="space-y-4">
                    <h3 class="text-xl font-bold text-white">Pro Tips</h3>
                    <ul class="text-sm text-slate-400 space-y-2">
                        <li class="flex gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0 mt-1.5"></div> Make standard text
                            readable on busy photos by switching on <strong>Meme Style (Outline)</strong>.
                        </li>
                        <li class="flex gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0 mt-1.5"></div> Drag the text
                            directly on the image to position it perfectly.
                        </li>
                        <li class="flex gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0 mt-1.5"></div> Use the
                            <strong>Background Box</strong> toggle to create modern social media text banners.
                        </li>
                        <li class="flex gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0 mt-1.5"></div> Add as many
                            different text captions as you need to build complex memes.
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Alpine UI Logic -->
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('imageCaptioner', () => ({
                isDragging: false,
                imageLoaded: false,
                canvas: null,
                ctx: null,
                originalImageObj: null,

                // State
                captions: [],
                activeCaptionIndex: -1,

                // Dragging variables
                isDraggingText: false,
                dragStartX: 0,
                dragStartY: 0,

                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.originalImageObj = img;
                            this.canvas = this.$refs.canvas;
                            this.ctx = this.canvas.getContext('2d');

                            // Set actual native canvas resolution
                            this.canvas.width = img.width;
                            this.canvas.height = img.height;

                            this.imageLoaded = true;

                            // Clear previous captions
                            this.captions = [];
                            this.addCaption(); // Add initial caption centered via default

                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                },

                reset() {
                    this.imageLoaded = false;
                    this.originalImageObj = null;
                    this.captions = [];
                },

                generateId() {
                    return Math.random().toString(36).substr(2, 9);
                },

                addCaption() {
                    // Default center coordinates
                    let startX = this.originalImageObj ? this.originalImageObj.width / 2 : 500;
                    // stagger Y slightly if multiple
                    let startY = this.originalImageObj ? (this.originalImageObj.height / 2) + (this
                        .captions.length * 50) : 500;

                    this.captions.push({
                        id: this.generateId(),
                        text: 'TOP TEXT',
                        font: 'Impact',
                        size: Math.floor((this.originalImageObj ? this.originalImageObj.width :
                            1000) / 10), // responsive initial size
                        color: '#ffffff',
                        isMeme: true,
                        hasBg: false,
                        bgColor: '#000000',
                        x: startX,
                        y: startY,
                        // Bounding box for click detection
                        box: {
                            x: 0,
                            y: 0,
                            w: 0,
                            h: 0
                        }
                    });
                    this.activeCaptionIndex = this.captions.length - 1;

                    // Allow Alpine to render DOM inputs before drawing
                    setTimeout(() => this.drawCanvas(), 50);
                },

                removeCaption(index) {
                    this.captions.splice(index, 1);
                    if (this.activeCaptionIndex >= this.captions.length) {
                        this.activeCaptionIndex = this.captions.length - 1;
                    }
                    this.drawCanvas();
                },

                // ---------------- MAIN RENDER LOOP ---------------- //
                drawCanvas() {
                    if (!this.ctx || !this.originalImageObj) return;

                    // 1. Wipe and redraw base image
                    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                    this.ctx.drawImage(this.originalImageObj, 0, 0);

                    // 2. Loop and draw each caption
                    this.captions.forEach((cap, index) => {
                        if (!cap.text.trim()) return;

                        this.ctx.font = `bold ${cap.size}px ${cap.font}`;
                        this.ctx.textAlign = 'center';
                        this.ctx.textBaseline = 'middle'; // Easier for backgrounds

                        // Handle multi-line
                        const lines = cap.text.split('\n');
                        const lineHeight = cap.size * 1.2;
                        const totalHeight = lines.length * lineHeight;

                        // Calculate bounding box width to find widest line
                        let maxWidth = 0;
                        lines.forEach(line => {
                            const width = this.ctx.measureText(line).width;
                            if (width > maxWidth) maxWidth = width;
                        });

                        // Padding for hit box and backgrounds
                        const paddingX = cap.size * 0.3;
                        const paddingY = cap.size * 0.3;

                        // Store the bounding box for click-and-drag hit detection
                        cap.box = {
                            x: cap.x - (maxWidth / 2) - paddingX,
                            y: cap.y - (totalHeight / 2) - paddingY,
                            w: maxWidth + (paddingX * 2),
                            h: totalHeight + (paddingY * 2)
                        };

                        // Draw Background Box if active
                        if (cap.hasBg) {
                            this.ctx.fillStyle = cap.bgColor;
                            this.ctx.fillRect(cap.box.x, cap.box.y, cap.box.w, cap.box.h);
                        }

                        // Draw Lines of text
                        let startY = cap.y - (totalHeight / 2) + (lineHeight / 2);

                        lines.forEach(line => {
                            // Meme outline
                            if (cap.isMeme) {
                                this.ctx.miterLimit =
                                    2; // Prevents spikes on sharp letters like M or W
                                this.ctx.lineJoin = 'round';
                                this.ctx.lineWidth = cap.size / 8; // responsive stroke
                                this.ctx.strokeStyle = '#000000';
                                this.ctx.strokeText(line, cap.x, startY);
                            }

                            // Fill text
                            this.ctx.fillStyle = cap.color;
                            this.ctx.fillText(line, cap.x, startY);

                            startY += lineHeight;
                        });

                        // Draw interaction outline if this is the active caption
                        if (this.activeCaptionIndex === index) {
                            this.ctx.lineWidth = 2;
                            this.ctx.setLineDash([10, 10]);
                            this.ctx.strokeStyle = '#6366f1'; // Indigo 500
                            this.ctx.strokeRect(cap.box.x, cap.box.y, cap.box.w, cap.box.h);
                            this.ctx.setLineDash([]); // reset
                        }
                    });
                },

                // ---------------- EVENT COORDINATES ---------------- //
                getPointerPos(e) {
                    const rect = this.canvas.getBoundingClientRect();
                    // Mouse or Touch event wrapper
                    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
                    const clientY = e.touches ? e.touches[0].clientY : e.clientY;

                    // Convert screen CSS pixels to actual Canvas internal resolution pixels
                    const scaleX = this.canvas.width / rect.width;
                    const scaleY = this.canvas.height / rect.height;

                    return {
                        x: (clientX - rect.left) * scaleX,
                        y: (clientY - rect.top) * scaleY
                    };
                },

                // ---------------- DRAGGING LOGIC ---------------- //
                startDrag(e) {
                    if (!this.imageLoaded) return;
                    const pos = this.getPointerPos(e);

                    // Loop backwards to select the topmost layer
                    for (let i = this.captions.length - 1; i >= 0; i--) {
                        const cap = this.captions[i];
                        // Check if pointer is inside bounding box
                        if (pos.x >= cap.box.x && pos.x <= cap.box.x + cap.box.w &&
                            pos.y >= cap.box.y && pos.y <= cap.box.y + cap.box.h) {

                            this.isDraggingText = true;
                            this.activeCaptionIndex = i;
                            // Store the offset so it doesn't snap to center of text
                            this.dragStartX = pos.x - cap.x;
                            this.dragStartY = pos.y - cap.y;
                            this.drawCanvas(); // Highlight active
                            return; // Stop looking loop
                        }
                    }

                    // If we clicked outside any box, deselect
                    this.activeCaptionIndex = -1;
                    this.drawCanvas();
                },

                drag(e) {
                    if (!this.isDraggingText || this.activeCaptionIndex === -1) return;

                    const pos = this.getPointerPos(e);
                    const cap = this.captions[this.activeCaptionIndex];

                    // Update text coordinates based on drag
                    cap.x = pos.x - this.dragStartX;
                    cap.y = pos.y - this.dragStartY;

                    // Render 60fps
                    requestAnimationFrame(() => this.drawCanvas());
                },

                endDrag() {
                    this.isDraggingText = false;
                },

                download() {
                    // Temporarily deselect to remove dashed active border before download
                    const prevActive = this.activeCaptionIndex;
                    this.activeCaptionIndex = -1;
                    this.drawCanvas();

                    this.canvas.toBlob(async (blob) => {
                        if (!blob) return;

                        const filename = 'captioned-image.jpg';
                        const file = new File([blob], filename, {
                            type: 'image/jpeg'
                        });

                        // Try native iOS / Mobile sharing first (allows "Save to Photos")
                        if (navigator.canShare && navigator.canShare({
                                files: [file]
                            })) {
                            try {
                                await navigator.share({
                                    files: [file],
                                    title: 'Captioned Image',
                                });
                                // Restore active after share sheet closes
                                this.activeCaptionIndex = prevActive;
                                this.drawCanvas();
                                return;
                            } catch (err) {
                                // User cancelled share or it failed. Fall back to standard download just in case.
                                console.log('Share API failed or cancelled', err);
                            }
                        }

                        // Fallback: Standard browser download string
                        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);

                        // Restore active
                        this.activeCaptionIndex = prevActive;
                        this.drawCanvas();
                    }, 'image/jpeg', 0.95);
                }
            }));
        });
    </script>

    <style>
        /* Custom scrollbar for the captions list */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }
    </style>

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