@extends('layouts.app')

@section('title', 'Change SVG Color')
@section('meta_description',
    'Instantly recolor SVG icons and illustrations in your browser. Upload, pick new colors,
    and download. No expensive design software needed.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Change SVG Color</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Need to change an icon from black to your brand color?
                <span class="text-pink-400 font-medium">Just drag, drop, and pick.</span>
            </p>
        </div>

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

            <!-- Left Column: Input & Colors -->
            <div class="space-y-8">

                <!-- Upload Area -->
                <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-pink-500 bg-pink-500/10' :
                        'border-white/10 hover:border-pink-500/50 hover:bg-slate-800/50'">

                    <input type="file" accept=".svg"
                        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-16 h-16 mx-auto rounded-2xl bg-slate-800 flex items-center justify-center text-slate-400 group-hover:text-pink-400 group-hover:scale-110 transition-all duration-300">
                            <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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01">
                                </path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-xl font-bold text-white mb-2">Drop your SVG file here</p>
                            <p class="text-slate-400">or click to browse</p>
                        </div>
                    </div>
                </div>

                <!-- Color Palette -->
                <div x-show="colors.length > 0" x-cloak x-transition>
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-bold text-white">Found Colors</h3>
                        <span class="text-xs text-slate-500 bg-slate-800 px-2 py-1 rounded-full"><span
                                x-text="colors.length"></span> Unique</span>
                    </div>

                    <div class="grid grid-cols-1 gap-4">
                        <template x-for="(colorObj, index) in colors" :key="index">
                            <div class="bg-slate-950 border border-white/10 rounded-xl p-4 flex items-center gap-4">

                                <!-- Color Preview/Picker -->
                                <div
                                    class="relative w-12 h-12 rounded-lg shadow-sm overflow-hidden flex-shrink-0 border border-white/10">
                                    <input type="color" x-model="colorObj.current" @input="updateSvg"
                                        class="absolute -top-2 -left-2 w-16 h-16 cursor-pointer p-0 border-0">
                                </div>

                                <div class="flex-grow">
                                    <div class="flex justify-between mb-1">
                                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Change
                                            to</label>
                                        <span class="text-xs font-mono text-slate-400" x-text="colorObj.original"></span>
                                    </div>
                                    <input type="text" x-model="colorObj.current" @input="updateSvg"
                                        class="w-full bg-slate-900 border-white/10 rounded px-2 py-1 text-sm text-white font-mono focus:border-pink-500 focus:ring-1 focus:ring-pink-500">
                                </div>

                                <button @click="resetColor(index)" class="text-slate-600 hover:text-white transition-colors"
                                    title="Reset to original">
                                    <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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                                        </path>
                                    </svg>
                                </button>
                            </div>
                        </template>
                    </div>
                </div>

            </div>

            <!-- Right Column: Preview -->
            <div class="space-y-6">
                <div
                    class="bg-slate-900/50 border border-white/10 rounded-3xl p-2 h-[500px] flex flex-col relative overflow-hidden">

                    <!-- Toolbar -->
                    <div
                        class="absolute top-4 right-4 z-10 flex gap-1 bg-slate-950/80 p-1 rounded-lg border border-white/10 backdrop-blur-sm shadow-xl">
                        <button @click="backgroundMode = 'checkerboard'"
                            :class="backgroundMode === 'checkerboard' ? 'bg-pink-500 text-white shadow-lg shadow-pink-500/20' :
                                'text-slate-400 hover:text-white hover:bg-white/5'"
                            class="p-2 rounded-md transition-all duration-200" title="Checkerboard">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
                                </path>
                            </svg>
                        </button>
                        <button @click="backgroundMode = 'dark'"
                            :class="backgroundMode === 'dark' ? 'bg-slate-700 text-white shadow-lg' :
                                'text-slate-400 hover:text-white hover:bg-white/5'"
                            class="p-2 rounded-md transition-all duration-200" title="Dark Mode">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z">
                                </path>
                            </svg>
                        </button>
                        <button @click="backgroundMode = 'light'"
                            :class="backgroundMode === 'light' ? 'bg-slate-200 text-slate-900 shadow-lg' :
                                'text-slate-400 hover:text-white hover:bg-white/5'"
                            class="p-2 rounded-md transition-all duration-200" title="Light Mode">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
                                </path>
                            </svg>
                        </button>
                    </div>

                    <!-- Canvas -->
                    <div class="flex-grow rounded-2xl flex items-center justify-center p-8 overflow-auto transition-colors duration-300"
                        :class="{
                            'bg-slate-900 border border-white/5': backgroundMode === 'dark',
                            'bg-white border border-slate-200': backgroundMode === 'light',
                            'bg-[url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzMzMyIgLz4KPHJlY3QgeD0iMTAiIHk9IjEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiMzMzMiIC8+Cjwvc3ZnPg==\')] bg-[length:20px_20px] bg-slate-800': backgroundMode === 'checkerboard'
                        }">

                        <!-- Empty State -->
                        <div x-show="!currentSvgContent" class="text-slate-600 text-center">
                            <p>No preview available</p>
                        </div>

                        <!-- SVG Rendered Here -->
                        <div x-show="currentSvgContent" x-html="currentSvgContent"
                            class="w-full h-full flex items-center justify-center [&>svg]:max-w-full [&>svg]:max-h-full [&>svg]:w-auto [&>svg]:h-auto">
                        </div>
                    </div>

                </div>

                <div x-show="currentSvgContent" x-cloak x-transition>
                    <button @click="downloadSvg"
                        class="w-full bg-pink-500 hover:bg-pink-600 text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-pink-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 Modified SVG
                    </button>
                </div>
            </div>

        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('svgColorSwapper', () => ({
                dragover: false,
                fileName: '',
                originalSvgContent: '',
                currentSvgContent: '',
                colors: [],
                backgroundMode: 'light',

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

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

                processFile(file) {
                    if (file.type !== 'image/svg+xml') {
                        // Fallback check for extension if mime type fails
                        if (!file.name.toLowerCase().endsWith('.svg')) {
                            alert('Please upload a valid .svg file.');
                            return;
                        }
                    }

                    this.fileName = file.name;
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.originalSvgContent = e.target.result;
                        this.currentSvgContent = this.originalSvgContent;
                        this.extractColors();
                    };
                    reader.readAsText(file);
                },

                extractColors() {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(this.originalSvgContent, 'image/svg+xml');
                    const allElements = doc.querySelectorAll('*');
                    const foundColors = new Set();

                    // Helper to validate color
                    const isValidColor = (c) => {
                        if (!c || c === 'none' || c === 'transparent') return false;
                        if (c.startsWith('url(')) return false; // Skip gradients/patterns for now
                        return true;
                    };

                    allElements.forEach(el => {
                        // Check attributes
                        ['fill', 'stroke', 'stop-color', 'flood-color', 'lighting-color']
                        .forEach(attr => {
                            const val = el.getAttribute(attr);
                            if (isValidColor(val)) foundColors.add(val);
                        });

                        // Check inline styles
                        ['fill', 'stroke', 'stopColor', 'floodColor', 'lightingColor'].forEach(
                            prop => {
                                if (el.style[prop] && isValidColor(el.style[prop]))
                                    foundColors.add(el.style[prop]);
                            });
                    });

                    // Check style blocks for CSS colors
                    const styleElements = doc.querySelectorAll('style');
                    styleElements.forEach(style => {
                        const content = style.textContent;

                        // Match hex codes (3 or 6 digits)
                        const hexMatches = content.match(/#(?:[0-9a-fA-F]{3}){1,2}\b/g);
                        if (hexMatches) hexMatches.forEach(c => foundColors.add(c));

                        // Match rgb/rgba
                        const rgbMatches = content.match(/rgba?\([^)]+\)/g);
                        if (rgbMatches) rgbMatches.forEach(c => foundColors.add(c));

                        // Match hsl/hsla
                        const hslMatches = content.match(/hsla?\([^)]+\)/g);
                        if (hslMatches) hslMatches.forEach(c => foundColors.add(c));
                    });

                    // Build colors array
                    this.colors = Array.from(foundColors).map(c => ({
                        original: c,
                        current: this.normalizeColor(c) // Ensure hex for input type=color
                    }));
                },

                normalizeColor(color) {
                    // Simple div trick to get computed hex color
                    const div = document.createElement('div');
                    div.style.color = color;
                    document.body.appendChild(div);
                    const computed = window.getComputedStyle(div).color;
                    document.body.removeChild(div);

                    // Parse rgb(r, g, b)
                    const match = computed.match(/\d+/g);
                    if (!match) return '#000000'; // Fallback

                    const toHex = (n) => {
                        const hex = parseInt(n).toString(16);
                        return hex.length === 1 ? '0' + hex : hex;
                    };

                    return '#' + toHex(match[0]) + toHex(match[1]) + toHex(match[2]);
                },

                updateSvg() {
                    let newContent = this.originalSvgContent;

                    this.colors.forEach(colorObj => {
                        if (colorObj.current.toLowerCase() !== colorObj.original
                            .toLowerCase()) {
                            // Determine what we're replacing
                            // This is a naive Replace All - might catch text content, but usually safer in SVGs
                            // Better approach: DOM manipulation, but string replace is faster/easier for preserving formatting

                            // Regex to match exact color strings in attributes and styles
                            // We need to escape regex characters in the color string
                            const escapedOriginal = colorObj.original.replace(
                                /[.*+?^${}()|[\]\\]/g, '\\$&');
                            const regex = new RegExp(escapedOriginal, 'gi');

                            newContent = newContent.replace(regex, colorObj.current);
                        }
                    });

                    this.currentSvgContent = newContent;
                },

                resetColor(index) {
                    this.colors[index].current = this.normalizeColor(this.colors[index].original);
                    this.updateSvg();
                },

                async downloadSvg() {
                    const blob = new Blob([this.currentSvgContent], {
                        type: 'image/svg+xml'
                    });
                    const filename = 'modified_' + this.fileName;
                    const file = new File([blob], filename, {
                        type: 'image/svg+xml'
                    });

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

                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }
            }));
        });
    </script>
    <div class="mt-24 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-pink-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">
                    Opening Adobe Illustrator or Figma just to change a black icon to blue is overkill. This tool lets you
                    recolor SVGs instantly in your browser.
                </p>
                <p class="text-slate-400 leading-relaxed">
                    It parses your SVG file, finds all unique colors, and lets you <strong>swap them out</strong> with a
                    color picker. No design software needed.
                </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-pink-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>Developers</strong> matching icons to themes.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-pink-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>Marketers</strong> branding free assets.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-pink-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>Designers</strong> testing color variations quickly.</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-pink-300 bg-pink-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> We do not upload your SVG files. All parsing and recoloring happens
                    locally in your browser.
                </p>
            </div>
        </div>
    </div>

    {{-- 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.shadow.index') }}"
                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">CSS
                Smooth Shadow Generator</a>
        </div>
    </div>
@endsection