@extends('layouts.app')

@section('title', 'Metadata Remover')
@section('meta_description',
    'Remove hidden exif metadata from your photos instantly. Strip GPS coordinates, device info, and
    date/time data client-side. Protect your privacy before sharing.')

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

        <!-- Script for EXIF Manipulation -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/piexifjs/1.0.6/piexif.js"
            integrity="sha512-E6N6GBWeGsNjjAtlj6QoZjGdq7+re8MSUxsPr6tFu+cVCgz/Z81C6d60bap1zxfQRIb3VBXR9BtCj4euWUBoHA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Metadata Remover</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Drag & drop your photos to instantly strip hidden GPS, date, and camera EXIF metadata.
                <span class="text-emerald-400 font-medium">Runs 100% in your browser.</span>
            </p>
        </div>

        <!-- Main Tool Area -->
        <div class="space-y-8">

            <!-- Drop Zone -->
            <div @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false" @drop.prevent="handleDrop($event)"
                class="relative group cursor-pointer">
                <input type="file" accept="image/jpeg,image/jpg"
                    class="absolute inset-0 w-full h-full opacity-0 z-10 cursor-pointer" @change="handleFileSelect($event)">

                <div class="border-2 border-dashed rounded-3xl p-6 md:p-8 text-center transition-all duration-300 bg-slate-900/50"
                    :class="dragover ? 'border-emerald-500 bg-emerald-500/10' :
                        'border-white/10 hover:border-emerald-500/50 hover:bg-slate-800/50'">

                    <div class="space-y-4 pointer-events-none">
                        <div
                            class="w-12 h-12 md:w-16 md:h-16 mx-auto rounded-full bg-slate-800 flex items-center justify-center text-slate-400 group-hover:text-emerald-400 group-hover:scale-110 transition-all duration-300">
                            <svg class="w-6 h-6 md:w-8 md: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">
                                </path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-lg md:text-xl font-bold text-white mb-2">Drop your photo here</p>
                            <p class="text-sm md:text-base text-slate-400">or click to browse (JPEG/JPG only)</p>
                        </div>
                        <p class="text-xs text-slate-500 pt-2 md:pt-4">Photos are processed locally and never uploaded.</p>
                    </div>
                </div>
            </div>

            <!-- Result Area -->
            <div x-show="processedImage" class="bg-slate-900/50 border border-white/5 rounded-2xl p-8 space-y-8" x-cloak
                x-transition>

                <div
                    class="flex items-center gap-4 text-emerald-400 bg-emerald-500/10 p-4 rounded-xl border border-emerald-500/20">
                    <svg class="w-6 h-6 flex-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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div>
                        <h3 class="font-bold">EXIF Data Removed!</h3>
                        <p class="text-sm opacity-80">Your photo is now safe to share without revealing location or device
                            info.</p>
                    </div>
                </div>

                <div class="grid md:grid-cols-2 gap-8 items-start">
                    <!-- Preview -->
                    <div class="space-y-2">
                        <label class="text-xs text-slate-500 uppercase tracking-wider font-bold block">Clean Preview</label>
                        <div
                            class="rounded-xl overflow-hidden border border-white/10 bg-slate-950 aspect-video flex items-center justify-center relative">
                            <img :src="processedImage" class="max-w-full max-h-full object-contain">
                            <div
                                class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded backdrop-blur-sm">
                                <span x-text="originalName"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Stats & Actions -->
                    <div class="space-y-6">
                        <div class="space-y-4">
                            <div class="flex justify-between items-center py-2 border-b border-white/5">
                                <span class="text-slate-400">Original Size</span>
                                <span class="text-white font-mono" x-text="formatBytes(originalSize)"></span>
                            </div>
                            <div class="flex justify-between items-center py-2 border-b border-white/5">
                                <span class="text-slate-400">Clean Size</span>
                                <span class="text-white font-mono" x-text="formatBytes(processedSize)"></span>
                            </div>
                            <div class="flex justify-between items-center py-2 border-b border-white/5">
                                <span class="text-slate-400">Metadata Status</span>
                                <span class="text-emerald-400 font-bold">Stripped</span>
                            </div>
                        </div>

                        <a :href="processedImage" :download="'clean_' + originalName"
                            class="block w-full bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-4 rounded-xl text-center transition-all shadow-lg shadow-indigo-500/20 transform hover:-translate-y-0.5">
                            Download Clean Photo
                        </a>

                        <button @click="reset"
                            class="block w-full text-slate-400 hover:text-white py-2 text-sm transition-colors">
                            Process Another Photo
                        </button>
                    </div>
                </div>

                <!-- Removed Metadata List -->
                <div x-show="removedTags.length > 0" class="pt-8 border-t border-white/5 space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xl font-bold text-white">Removed Metadata</h3>
                        <span class="text-xs text-slate-500 uppercase tracking-wider font-mono">
                            <span x-text="removedTags.length"></span> Tags Found
                        </span>
                    </div>

                    <div
                        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-h-96 overflow-y-auto pr-2 custom-scrollbar">
                        <template x-for="(tag, index) in removedTags" :key="index">
                            <div
                                class="bg-slate-950/30 p-3 rounded-lg border border-white/5 hover:border-emerald-500/30 transition-colors">
                                <div class="flex justify-between items-start mb-1">
                                    <span class="text-[10px] text-slate-500 uppercase tracking-wider font-bold"
                                        x-text="tag.group"></span>
                                </div>
                                <div class="text-emerald-400 font-medium text-sm truncate" :title="tag.name"
                                    x-text="tag.name"></div>
                                <div class="text-slate-300 font-mono text-xs mt-1 truncate" :title="tag.value"
                                    x-text="tag.value"></div>
                            </div>
                        </template>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('photoExif', () => ({
                dragover: false,
                processedImage: null,
                originalName: '',
                originalSize: 0,
                processedSize: 0,
                removedTags: [],

                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.match('image/jpeg')) {
                        alert('Please upload a JPEG image. EXIF data is primarily found in JPEGs.');
                        return;
                    }

                    this.originalName = file.name;
                    this.originalSize = file.size;
                    this.removedTags = [];

                    const reader = new FileReader();
                    reader.onload = (e) => {
                        const originalDataUrl = e.target.result;

                        try {
                            // Extract EXIF data before removal
                            const exifObj = piexif.load(originalDataUrl);
                            this.extractExif(exifObj);

                            // Strip EXIF using piexifjs
                            const cleanDataUrl = piexif.remove(originalDataUrl);

                            this.processedImage = cleanDataUrl;

                            // Calculate new size (approximate from base64)
                            const base64Length = cleanDataUrl.length - 'data:image/jpeg;base64,'
                                .length;
                            this.processedSize = Math.floor(base64Length * 0.75);

                        } catch (err) {
                            console.error(err);
                            alert(
                                'Error processing image. It might be corrupted or in an unsupported format.'
                            );
                        }
                    };
                    reader.readAsDataURL(file);
                },

                extractExif(exifObj) {
                    const tags = [];

                    // Helper to format values
                    const formatValue = (val) => {
                        if (val === null || val === undefined) return '';
                        // Truncate long strings/arrays
                        if (typeof val === 'string' && val.length > 50) return val.substring(0,
                            50) + '...';
                        if (Array.isArray(val) && val.length > 10) return `Array(${val.length})`;
                        return val.toString();
                    };

                    // Iterate over IFDs
                    for (const ifd in exifObj) {
                        if (ifd === 'thumbnail') continue; // Skip thumbnail logic for now

                        const ifdName = ifd === '0th' || ifd === '1st' ? 'Image' : ifd;

                        for (const tagId in exifObj[ifd]) {
                            const value = exifObj[ifd][tagId];
                            let name = `Tag ${tagId}`;

                            // Try to resolve tag name
                            if (piexif.TAGS[ifdName] && piexif.TAGS[ifdName][tagId]) {
                                name = piexif.TAGS[ifdName][tagId].name;
                            } else if (piexif.TAGS[ifd] && piexif.TAGS[ifd][tagId]) {
                                // Fallback for GPS/Exif/Interop directly
                                name = piexif.TAGS[ifd][tagId].name;
                            }

                            tags.push({
                                group: ifd,
                                name: name,
                                value: formatValue(value)
                            });
                        }
                    }
                    this.removedTags = tags;
                },

                reset() {
                    this.processedImage = null;
                    this.originalName = '';
                    this.originalSize = 0;
                    this.processedSize = 0;
                    this.removedTags = [];
                },

                formatBytes(bytes, decimals = 2) {
                    if (bytes === 0) return '0 Bytes';
                    const k = 1024;
                    const dm = decimals < 0 ? 0 : decimals;
                    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
                }
            }));
        });
    </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">
                    Photos taken with smartphones and digital cameras contain hidden metadata called EXIF. This data can
                    include your <strong>exact GPS location</strong>, the date/time, and device details.
                </p>
                <p class="text-slate-400 leading-relaxed">
                    Before sharing photos online or on social media, use this tool to strip that sensitive data and protect
                    your privacy.
                </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>Privacy Advocates</strong> protecting their location.</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>Photographers</strong> removing equipment data.</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>Social Media Users</strong> sharing safely.</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> This tool runs 100% in your browser. Your photos are never uploaded
                    to our servers.
                </p>
            </div>
        </div>
    </div>

    {{-- 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.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-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.passport-photo') }}"
                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">Strict
                Biometric Passport Photo Cropper</a>
        </div>
    </div>
@endsection