{{--
    Reusable image cropper component.
    Props:
      $name        — hidden input name that receives the base64 data URI (default: 'photo_data')
      $preview     — current image URL to show as preview (default: '')
      $initials    — fallback initials letter if no preview (default: '?')
      $label       — button label (default: 'Change photo')
      $hint        — hint text below button
--}}
@props([
    'name'     => 'photo_data',
    'preview'  => '',
    'initials' => '?',
    'label'    => 'Change photo',
    'hint'     => 'JPG, PNG or WebP · max 4 MB',
])

<div x-data="{
    preview: '{{ $preview }}',
    cropperOpen: false,
    cropSrc: '',
    cropper: null,
    openCropper(e) {
        const file = e.target.files[0];
        if (!file) return;
        e.target.value = '';
        const reader = new FileReader();
        reader.onload = (ev) => {
            this.cropSrc = ev.target.result;
            this.cropperOpen = true;
            this.$nextTick(() => {
                const img = this.$refs.cropImg;
                if (this.cropper) this.cropper.destroy();
                this.cropper = new Cropper(img, {
                    aspectRatio: 1,
                    viewMode: 1,
                    dragMode: 'move',
                    autoCropArea: 0.85,
                    responsive: true,
                    background: false,
                });
            });
        };
        reader.readAsDataURL(file);
    },
    applyCrop() {
        if (!this.cropper) return;
        const canvas = this.cropper.getCroppedCanvas({ width: 400, height: 400 });
        const dataUrl = canvas.toDataURL('image/jpeg', 0.92);
        this.preview = dataUrl;
        this.$refs.hiddenInput.value = dataUrl;
        this.cropperOpen = false;
        this.cropper.destroy();
        this.cropper = null;
    },
    cancelCrop() {
        if (this.cropper) { this.cropper.destroy(); this.cropper = null; }
        this.cropperOpen = false;
    }
}">
    <input type="hidden" name="{{ $name }}" x-ref="hiddenInput" />
    <input x-ref="fileInput" type="file" accept="image/jpeg,image/png,image/webp" class="hidden" @change="openCropper($event)" />

    <div class="flex items-center gap-4">
        {{-- Avatar preview --}}
        <div class="relative group shrink-0 cursor-pointer" @click="$refs.fileInput.click()">
            <div class="h-16 w-16 rounded-full overflow-hidden ring-2 ring-offset-2 ring-gray-200 bg-orange-100 flex items-center justify-center">
                <img x-show="preview" :src="preview" class="h-full w-full object-cover" alt="photo" />
                <span x-show="!preview" class="text-xl font-black text-orange-600">{{ strtoupper(substr($initials, 0, 1)) }}</span>
            </div>
            <div class="absolute inset-0 rounded-full bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
            </div>
        </div>

        <div>
            <button type="button" @click="$refs.fileInput.click()" class="text-sm font-medium text-orange-600 hover:text-orange-500 transition-colors">
                {{ $label }}
            </button>
            <p class="text-xs mt-0.5 text-gray-400">{{ $hint }}</p>
        </div>
    </div>

    {{-- Cropper Modal --}}
    <div x-show="cropperOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4" style="backdrop-filter:blur(4px);">
        <div class="w-full max-w-md rounded-2xl border border-gray-200 bg-white shadow-2xl overflow-hidden">
            <div class="flex items-center justify-between border-b border-gray-100 px-5 py-4">
                <h3 class="text-base font-bold text-gray-900">Crop Photo</h3>
                <button type="button" @click="cancelCrop()" class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
            </div>
            <div class="p-4 bg-gray-900 flex items-center justify-center" style="min-height:280px;max-height:360px;">
                <img x-ref="cropImg" :src="cropSrc" style="max-width:100%;max-height:340px;display:block;" />
            </div>
            <div class="flex gap-3 px-5 py-4 border-t border-gray-100">
                <button type="button" @click="cancelCrop()"
                    class="flex-1 rounded-xl border border-gray-200 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-50 transition-colors">
                    Cancel
                </button>
                <button type="button" @click="applyCrop()"
                    class="flex-1 rounded-xl bg-orange-500 py-2.5 text-sm font-semibold text-white hover:bg-orange-600 transition-colors shadow-sm">
                    Save Photo
                </button>
            </div>
        </div>
    </div>
</div>