@extends('layouts.app')

@section('title', 'Strict Biometric Passport Photo Cropper - 100Toolbox')
@section('meta_description',
    'Crop photos to strict US and UK passport standards with biometric biometric overlays.
    Private, client-side processing.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight">Passport Photo Cropper</h1>
            <p class="text-slate-400 text-lg">
                Strict biometric cropping for <span class="text-indigo-400 font-medium">US & UK/EU</span> documents.
            </p>
        </div>

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

            <!-- Standard Selector -->
            <div class="flex justify-center mb-8">
                <div class="bg-white/5 p-1 rounded-xl inline-flex flex-wrap justify-center gap-1">
                    <button @click="setStandard('us')" class="px-6 py-2 rounded-lg text-sm font-medium transition-all"
                        :class="standard === 'us' ? 'bg-indigo-500 text-white shadow-lg' :
                            'text-slate-400 hover:text-white'">
                        US Passport (2x2")
                    </button>
                    <button @click="setStandard('uk')" class="px-6 py-2 rounded-lg text-sm font-medium transition-all"
                        :class="standard === 'uk' ? 'bg-indigo-500 text-white shadow-lg' :
                            'text-slate-400 hover:text-white'">
                        UK / EU (35x45mm)
                    </button>
                </div>
            </div>

            <!-- Upload Zone -->
            <div x-show="!imageLoaded"
                class="relative group border-2 border-dashed border-white/10 rounded-xl p-12 text-center transition-all duration-300 hover:border-indigo-500/50 hover:bg-white/[0.02]"
                :class="{ 'border-indigo-500 bg-indigo-500/10': isDragging }" @dragover.prevent="isDragging = true"
                @dragleave.prevent="isDragging = false" @drop.prevent="handleDrop($event)">
                <input type="file" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                    @change="handleFile($event.target.files[0])">

                <div class="space-y-4 pointer-events-none">
                    <div
                        class="w-16 h-16 mx-auto bg-slate-800 rounded-full flex items-center justify-center text-indigo-400 group-hover:scale-110 transition-transform">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <div>
                        <p class="text-lg font-medium text-white">Upload your photo</p>
                        <p class="text-slate-500 text-sm">Use a plain background if possible</p>
                    </div>
                </div>
            </div>

            <!-- Cropper Area -->
            <div x-show="imageLoaded" style="display: none;" class="space-y-6">

                <div
                    class="relative bg-slate-950 rounded-xl overflow-hidden shadow-2xl mx-auto w-full max-w-lg aspect-square">
                    <!-- Image Wrapper -->
                    <div class="w-full h-full bg-slate-900/50">
                        <img x-ref="image" src="" alt="To Crop" class="max-w-full">
                    </div>

                    <!-- Overlays are injected via JS -->
                </div>

                <div class="flex items-center justify-between gap-4">
                    <button @click="reset" class="text-sm text-slate-400 hover:text-white">Start Over</button>

                    <button @click="download"
                        class="bg-indigo-500 hover:bg-indigo-400 text-white font-bold py-3 px-8 rounded-xl transition-all shadow-lg hover:shadow-indigo-500/25">
                        Crop & Download
                    </button>
                </div>

                <p class="text-center text-xs text-slate-500">
                    Use mouse wheel to zoom. Drag to move. Fit your face inside the guide.
                </p>
            </div>
        </div>

        <!-- Privacy & Info -->
        <div class="mt-12 bg-slate-900/50 rounded-3xl p-8 md:p-12 border border-white/5 relative overflow-hidden">
            <div class="absolute top-0 left-0 -ml-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="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>
                        Private & Secure
                    </h3>
                    <p class="text-slate-400 text-sm leading-relaxed">
                        Your biometric data stays on your device. We use a client-side JavaScript engine to crop your photo.
                        No images are ever uploaded to our servers.
                    </p>
                </div>
                <div class="space-y-4">
                    <h3 class="text-xl font-bold text-white">Guidelines</h3>
                    <ul class="text-sm text-slate-400 space-y-2">
                        <li>• Use a plain white or off-white background.</li>
                        <li>• Neutral facial expression, eyes open.</li>
                        <li>• No glasses (for US passports).</li>
                        <li>• Face camera directly.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Styles for Cropper.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('passportPhoto', () => ({
                isDragging: false,
                imageLoaded: false,
                standard: 'us', // us, uk
                cropper: null,

                init() {
                    //
                },

                setStandard(std) {
                    this.standard = std;
                    if (this.cropper) {
                        this.cropper.setAspectRatio(this.getAspectRatio());
                        // Re-attach overlay with new SVG
                        this.attachOverlay();
                    }
                },

                getAspectRatio() {
                    return this.standard === 'us' ? 1 : (35 / 45);
                },

                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) => {
                        this.$refs.image.src = e.target.result;
                        this.imageLoaded = true;

                        this.$nextTick(() => {
                            this.initCropper();
                        });
                    };
                    reader.readAsDataURL(file);
                },

                initCropper() {
                    if (this.cropper) {
                        this.cropper.destroy();
                    }

                    const image = this.$refs.image;

                    this.cropper = new Cropper(image, {
                        aspectRatio: this.getAspectRatio(),
                        viewMode: 1, // Restrict crop box to not exceed canvas
                        dragMode: 'move', // Move image behind
                        autoCropArea: 0.8, // Initial size relative to container
                        guides: false,
                        center: false,
                        background: false,
                        zoomable: true,
                        movable: true,
                        cropBoxMovable: false, // Force user to move image, not box (cleaner for overlay)
                        cropBoxResizable: false, // Fixed aspect ratio and size relative to viewport is easier for passports
                        toggleDragModeOnDblclick: false,

                        ready: () => {
                            this.attachOverlay();
                        }
                    });
                },

                attachOverlay() {
                    // Inject our SVG overlays into the .cropper-crop-box
                    const cropBox = this.$el.querySelector('.cropper-crop-box');
                    if (!cropBox) return;

                    // Clear existing (if re-initializing)
                    const existingOverlay = cropBox.querySelector('.custom-overlay');
                    if (existingOverlay) existingOverlay.remove();

                    // Create overlay container
                    const overlay = document.createElement('div');
                    overlay.className =
                        'custom-overlay absolute inset-0 pointer-events-none opacity-60 z-10';
                    overlay.style.width = '100%';
                    overlay.style.height = '100%';

                    // Define SVGs
                    const usSVG = `
                        <svg viewBox="0 0 100 100" class="w-full h-full" preserveAspectRatio="none">
                            <ellipse cx="50" cy="45" rx="20" ry="28" fill="none" stroke="#ef4444" stroke-width="0.5" stroke-dasharray="2 2" />
                            <line x1="0" y1="35" x2="100" y2="35" stroke="#ef4444" stroke-width="0.2" opacity="0.5" />
                            <line x1="0" y1="45" x2="100" y2="45" stroke="#ef4444" stroke-width="0.2" opacity="0.5" />
                            <text x="2" y="34" font-size="3" fill="#ef4444" opacity="0.8">Max Eye Height</text>
                            <text x="2" y="44" font-size="3" fill="#ef4444" opacity="0.8">Min Eye Height</text>
                            <line x1="50" y1="0" x2="50" y2="100" stroke="#ef4444" stroke-width="0.2" />
                        </svg>
                    `;

                    const ukSVG = `
                        <svg viewBox="0 0 350 450" class="w-full h-full" preserveAspectRatio="none">
                            <ellipse cx="175" cy="200" rx="90" ry="130" fill="none" stroke="#22c55e" stroke-width="4" stroke-dasharray="8" />
                            <line x1="0" y1="20" x2="350" y2="20" stroke="#22c55e" stroke-width="2" opacity="0.5" />
                            <text x="10" y="35" font-size="20" fill="#22c55e">Top of Head</text>
                            <line x1="0" y1="380" x2="350" y2="380" stroke="#22c55e" stroke-width="2" opacity="0.5" />
                            <text x="10" y="375" font-size="20" fill="#22c55e">Chin</text>
                        </svg>
                    `;

                    overlay.innerHTML = this.standard === 'us' ? usSVG : ukSVG;
                    cropBox.appendChild(overlay);
                },

                reset() {
                    if (this.cropper) this.cropper.destroy();
                    if (input) input.value = '';
                },

                download() {
                    if (!this.cropper) return;

                    const canvas = this.cropper.getCroppedCanvas({
                        width: this.standard === 'us' ? 600 :
                        413, // 413px approx 35mm at 300dpi
                        height: this.standard === 'us' ? 600 :
                        531, // 531px approx 45mm at 300dpi
                        imageSmoothingEnabled: true,
                        imageSmoothingQuality: 'high',
                    });

                    canvas.toBlob(async (blob) => {
                        if (!blob) return;
                        const filename = `passport_photo_${this.standard}.jpg`;
                        const file = new File([blob], filename, {
                            type: 'image/jpeg'
                        });

                        if (navigator.canShare && navigator.canShare({
                                files: [file]
                            })) {
                            try {
                                await navigator.share({
                                    files: [file],
                                    title: 'Passport Photo'
                                });
                                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);
                    }, 'image/jpeg', 0.9);
                }
            }));
        });
    </script>

    <style>
        /* Customizing CropperJS to fit our 'overlay' concept better */
        .cropper-view-box {
            outline: 2px solid #6366f1;
            /* Indigo border for the crop selection */
            outline-color: rgba(99, 102, 241, 0.75);
        }

        .cropper-line,
        .cropper-point {
            background-color: #6366f1;
        }

        /* The crucial part: Mapping our overlay into the face */
        /* Since we can't easily inject into the canvas generated by CropperJS, we will use a different UX approach in v2 if this fails. */
        /* Current plan: The overlay is CSS absolute positioned over the wrapper. */
        /* BUT, the crop box moves. */

        /* CSS Trick: .cropper-crop-box can have a background image? */
    </style>

    {{-- Related Tools --}}
    <div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.image-watermark') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Image
                Watermark</a>
            <a href="{{ route('tools.metadata-remover') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Metadata
                Remover</a>
        </div>
    </div>
@endsection