@extends('layouts.app')

@section('title', 'Image Splitter')
@section('meta_description',
    'Perfectly slice photos into seamless squares in your browser, perfect for Instagram or other social media
    carousels. Free to use and 100% private.')

    @push('scripts')
        <!-- JSZip for bundling images -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    @endpush

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight">Image Splitter</h1>
            <p class="text-slate-400 text-lg">
                Slice wide panoramas into perfect, seamless squares perfect for Instagram or other social media. <span
                    class="text-amber-400 font-medium">100% Private.</span> Client-side only.
            </p>
        </div>

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

            <!-- Upload Zone -->
            <div x-show="!imageLoaded"
                class="relative group border-2 border-dashed border-white/10 rounded-xl p-16 text-center transition-all duration-300 hover:border-amber-500/50 hover:bg-white/[0.02]"
                :class="{ 'border-amber-500 bg-amber-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-amber-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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                        </svg>
                    </div>
                    <div>
                        <p class="text-lg font-medium text-white">Drop your wide photo here</p>
                        <p class="text-slate-500 text-sm">Or click to browse (JPG, PNG)</p>
                    </div>
                </div>
            </div>

            <!-- Editor Interface -->
            <div x-show="imageLoaded" style="display: none;" class="space-y-8">

                <!-- Controls Interface -->
                <div class="space-y-6 bg-slate-800/30 p-6 rounded-2xl border border-white/5">
                    <div class="grid md:grid-cols-2 gap-8">
                        <div class="space-y-4">
                            <div class="flex justify-between items-center text-sm">
                                <label class="text-slate-300 font-medium">Number of Slides (Squares)</label>
                                <span class="text-amber-400 font-bold bg-amber-400/10 px-3 py-1 rounded-full"
                                    x-text="slides"></span>
                            </div>
                            <input type="range" x-model.number="slides" min="2" max="10" step="1"
                                class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500">
                            <p class="text-xs text-slate-500">Instagram supports up to 10 slides per carousel.</p>
                        </div>

                        <div class="space-y-4">
                            <div class="flex justify-between items-center text-sm">
                                <label class="text-slate-300 font-medium"
                                    x-text="cropType === 'horizontal' ? 'Horizontal Alignment' : (cropType === 'vertical' ? 'Vertical Alignment' : 'Alignment')"></label>
                                <span class="text-amber-400 font-bold bg-amber-400/10 px-3 py-1 rounded-full"
                                    x-show="cropType !== 'perfect'" x-text="cropOffset + '%'"></span>
                            </div>
                            <input type="range" x-model.number="cropOffset" min="0" max="100" step="1"
                                :disabled="cropType === 'perfect'"
                                class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500 disabled:opacity-50 disabled:cursor-not-allowed">
                            <p class="text-xs text-slate-500"
                                x-text="cropType === 'perfect' ? 'Perfect fit! No alignment necessary.' : 'Adjust which part of the image is kept.'">
                            </p>
                        </div>
                    </div>

                    <div class="flex justify-end gap-3 pt-4 border-t border-white/5">
                        <button @click="reset"
                            class="px-5 py-2.5 rounded-xl text-sm font-medium bg-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all">
                            Start Over
                        </button>
                        <button @click="processAndDownload" :disabled="isProcessing"
                            class="px-6 py-2.5 rounded-xl text-sm font-bold bg-amber-500 hover:bg-amber-400 text-slate-900 transition-all shadow-lg hover:shadow-amber-500/25 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                            <svg x-show="!isProcessing" class="w-5 h-5" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                            <svg x-show="isProcessing" class="animate-spin -ml-1 mr-2 h-5 w-5 text-slate-900"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                </path>
                            </svg>
                            <span x-text="isProcessing ? 'Generating ZIP...' : 'Download Slices (ZIP)'"></span>
                        </button>
                    </div>
                </div>

                <!-- Preview Area -->
                <div class="space-y-4">
                    <div class="flex justify-between items-end">
                        <h3 class="text-sm font-medium text-slate-300">Live Preview</h3>
                        <p class="text-xs text-amber-400/80"
                            x-text="`Slicing into ${slides} squares of ${Math.floor(originalWidth / slides)}x${Math.floor(originalWidth / slides)} px`">
                        </p>
                    </div>

                    <div class="relative w-full overflow-hidden rounded-xl bg-slate-950 border border-white/5 flex justify-center touch-none select-none transition-colors"
                        :class="cropType !== 'perfect' ? (isDraggingGrid ? 'cursor-grabbing' :
                            'cursor-grab hover:border-amber-500/50') : ''"
                        @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag"
                        @touchstart="startDrag" @touchmove="drag" @touchend="stopDrag" @touchcancel="stopDrag">
                        <!-- Image Container with Grid Overlay -->
                        <div class="relative max-w-full pointer-events-none">
                            <img x-ref="previewImg"
                                class="max-w-full h-auto object-contain block opacity-50 pointer-events-none"
                                draggable="false" />

                            <!-- The Grid Lines -->
                            <div class="absolute inset-0 border-y-4 border-amber-500/80 pointer-events-none"
                                :style="getGridStyle()">
                                <!-- Vertical grid lines will be generated here -->
                                <template x-for="i in (slides - 1)">
                                    <div class="absolute top-0 bottom-0 border-r-4 border-amber-500/80"
                                        :style="`left: ${(i / slides) * 100}%; width: 1px; transform: translateX(-2px);`">
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <p class="text-center text-xs text-slate-500">
                        Adjust the alignment slider above or drag the image to change what portion is cropped.
                    </p>
                </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-amber-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-amber-400 shrink-0" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        Instant & Local
                    </h3>
                    <p class="text-slate-400 text-sm leading-relaxed">
                        Slicing is mathematically performed directly in your browser using the HTML5 Canvas API. Your
                        high-resolution photo never hits an external server, keeping it perfectly secure and preventing
                        quality compression.
                    </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-amber-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>Photographers</strong> sharing wide landscape shots without losing detail.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-amber-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>Brands & Marketers</strong> creating engaging, swipeable Instagram carousel
                                ads.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-amber-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>Artists</strong> showcasing wide digital artwork across multiple seamless
                                slides.</span>
                        </li>
                    </ul>
                </div>

                <div class="space-y-4">
                    <h3 class="text-xl font-bold text-white">How to use</h3>
                    <ul class="text-sm text-slate-400 space-y-2">
                        <li class="flex items-center gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-amber-500"></div> Upload a wide panoramic photo.
                        </li>
                        <li class="flex items-center gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-amber-500"></div> Select how many squares you want to
                            slice it into.
                        </li>
                        <li class="flex items-center gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-amber-500"></div> Download the .zip file containing
                            your numbered slides.
                        </li>
                        <li class="flex items-center gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-amber-500"></div> Post them together as a single
                            Instagram carousel!
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('carouselSplitter', () => ({
                isDragging: false,
                isDraggingGrid: false,
                startX: 0,
                startY: 0,
                startCropOffset: 0,
                imageLoaded: false,
                isProcessing: false,
                originalImageObj: null,
                originalWidth: 0,
                originalHeight: 0,
                slides: 3,
                cropOffset: 50,
                cropType: 'horizontal',

                init() {},

                startDrag(e) {
                    if (this.cropType === 'perfect') return;
                    this.isDraggingGrid = true;
                    const coords = this.getCoordinates(e);
                    this.startX = coords.x;
                    this.startY = coords.y;
                    this.startCropOffset = this.cropOffset;
                },

                drag(e) {
                    if (!this.isDraggingGrid) return;
                    e.preventDefault();

                    const coords = this.getCoordinates(e);
                    const deltaX = coords.x - this.startX;
                    const deltaY = coords.y - this.startY;

                    const previewWidth = this.$refs.previewImg.clientWidth;
                    const previewHeight = this.$refs.previewImg.clientHeight;

                    let newOffset = this.startCropOffset;

                    if (this.cropType === 'horizontal' && previewWidth) {
                        const targetRatio = this.slides;
                        const currentRatio = this.originalWidth / this.originalHeight;
                        const cropWidthPercent = (targetRatio / currentRatio) * 100;
                        const availableSpace = 100 - cropWidthPercent;
                        if (availableSpace > 0) {
                            const percentChange = (deltaX / previewWidth) * 100;
                            const deltaOffset = (percentChange / availableSpace) * 100;
                            newOffset = this.startCropOffset + deltaOffset;
                        }
                    } else if (this.cropType === 'vertical' && previewHeight) {
                        const targetRatio = this.slides;
                        const currentRatio = this.originalWidth / this.originalHeight;
                        const cropHeightPercent = (currentRatio / targetRatio) * 100;
                        const availableSpace = 100 - cropHeightPercent;
                        if (availableSpace > 0) {
                            const percentChange = (deltaY / previewHeight) * 100;
                            const deltaOffset = (percentChange / availableSpace) * 100;
                            newOffset = this.startCropOffset + deltaOffset;
                        }
                    }

                    this.cropOffset = Math.round(Math.max(0, Math.min(100, newOffset)));
                },

                stopDrag(e) {
                    this.isDraggingGrid = false;
                },

                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
                    };
                },

                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.originalWidth = img.width;
                            this.originalHeight = img.height;

                            this.$refs.previewImg.src = e.target.result;
                            this.imageLoaded = true;

                            // Auto-guess best number of slides based on aspect ratio
                            const ratio = img.width / img.height;
                            let guess = Math.round(ratio);
                            this.slides = Math.max(2, Math.min(guess, 10));
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                },

                reset() {
                    this.imageLoaded = false;
                    this.originalImageObj = null;
                    this.$refs.previewImg.src = '';
                },

                getGridStyle() {
                    if (!this.originalWidth || !this.originalHeight) return '';

                    // The aspect ratio of the ENTIRE container we want to preview
                    // Since each slide is 1:1, the overall cropped width is (1 * slides) : 1
                    const targetRatio = this.slides; // width / height
                    const currentRatio = this.originalWidth / this.originalHeight;

                    let cropCss = {};

                    if (currentRatio > targetRatio) {
                        // Image is wider than our target squares. 
                        // The crop will be full height, but less width.
                        this.cropType = 'horizontal';
                        const cropWidthPercent = (targetRatio / currentRatio) * 100;
                        const availableSpace = 100 - cropWidthPercent;
                        const leftPos = (this.cropOffset / 100) * availableSpace;
                        cropCss =
                            `width: ${cropWidthPercent}%; left: ${leftPos}%; top: 0; bottom: 0;`;
                    } else if (currentRatio < targetRatio) {
                        // Image is taller than our target squares.
                        // The crop will be full width, but less height.
                        this.cropType = 'vertical';
                        const cropHeightPercent = (currentRatio / targetRatio) * 100;
                        const availableSpace = 100 - cropHeightPercent;
                        const topPos = (this.cropOffset / 100) * availableSpace;
                        cropCss =
                            `height: ${cropHeightPercent}%; top: ${topPos}%; left: 0; right: 0;`;
                    } else {
                        // Perfect match
                        this.cropType = 'perfect';
                        cropCss = `width: 100%; height: 100%; top: 0; left: 0;`;
                    }

                    return cropCss;
                },

                async processAndDownload() {
                    if (!this.originalImageObj || typeof JSZip === 'undefined' || typeof saveAs ===
                        'undefined') {
                        alert("Dependencies haven't loaded yet. Please try again in a moment.");
                        return;
                    }

                    this.isProcessing = true;

                    try {
                        const zip = new JSZip();

                        // Determine the crop bounds
                        // Each square will have size = Math.min((width/slides), height)
                        const maxPossibleSquareSizeByWidth = Math.floor(this.originalWidth / this
                            .slides);
                        const sqSize = Math.min(maxPossibleSquareSizeByWidth, this.originalHeight);

                        // Where does the crop box start based on user offset?
                        const totalTargetWidth = sqSize * this.slides;
                        const scrollableWidth = this.originalWidth - totalTargetWidth;
                        const scrollableHeight = this.originalHeight - sqSize;

                        const startX = Math.floor(scrollableWidth * (this.cropOffset / 100));
                        const startY = Math.floor(scrollableHeight * (this.cropOffset / 100));

                        // Loop through slides and slice
                        for (let i = 0; i < this.slides; i++) {
                            const canvas = document.createElement('canvas');
                            canvas.width = sqSize;
                            canvas.height = sqSize;
                            const ctx = canvas.getContext('2d');

                            // current X offset for this slide
                            const slideXOffset = startX + (i * sqSize);

                            // Draw original image constrained to just this square
                            ctx.drawImage(
                                this.originalImageObj,
                                slideXOffset, startY, sqSize, sqSize, // Source rect
                                0, 0, sqSize, sqSize // Dest rect
                            );

                            // Convert to blob
                            const blob = await new Promise(resolve => canvas.toBlob(resolve,
                                'image/jpeg', 0.95));

                            // Add to zip
                            zip.file(`slide_${i + 1}.jpg`, blob);
                        }

                        // Generate and download zip
                        const content = await zip.generateAsync({
                            type: "blob"
                        });

                        const filename = `carousel_splits_${this.slides}.zip`;
                        const file = new File([content], filename, {
                            type: content.type || 'application/zip'
                        });

                        // Try native share API for mobile devices
                        if (navigator.canShare && navigator.canShare({
                                files: [file]
                            })) {
                            try {
                                await navigator.share({
                                    files: [file],
                                    title: 'Carousel Splits',
                                    text: 'Here are your sliced images for your carousel!'
                                });
                                return; // Successfully shared
                            } catch (err) {
                                console.log('Share API failed or cancelled', err);
                                // Fall through to standard download
                            }
                        }

                        // Fallback to standard saveAs
                        saveAs(content, filename);

                    } catch (e) {
                        console.error(e);
                        alert(
                            "An error occurred while slicing. Please pick a smaller image or try a different browser."
                        );
                    } finally {
                        this.isProcessing = false;
                    }
                }
            }));
        });
    </script>

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