@props([
    'name',
    'label' => null,
    'aspectRatio' => null, // e.g. 1 for square, 16/9, null = freeform
    'existingUrl' => null,
    'help' => null,
    'error' => null,
    // See forms/input.blade.php's comment — same _field.blade.php superset guard.
    'value' => null,
    'required' => false,
    'type' => null,
    'checked' => false,
    'options' => [],
    'selected' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
    // Must be known server-side and match the value handed to the JS factory
    // below exactly — modal.blade.php compiles this into an Alpine
    // `$event.detail == '{{ $name }}'` comparison at render time, so both
    // sides need the identical deterministic string, not a client-generated one.
    $cropModalName = 'image-crop-'.$name;
@endphp

<x-forms.field :name="$name" :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="imageUpload({ aspectRatio: @js($aspectRatio), existingUrl: @js($existingUrl), modalName: @js($cropModalName) })">
        <input type="file" x-ref="input" name="{{ $name }}" accept="image/*" class="hidden">

        <button type="button" x-show="hasFile" x-cloak @click="openCropper()"
                class="mt-2 inline-flex items-center gap-2 rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:border-primary hover:text-primary">
            <i class="fa-solid fa-crop" aria-hidden="true"></i> Crop image
        </button>

        <x-modal :name="$cropModalName" maxWidth="md">
            <div class="p-6">
                <h3 class="mb-4 text-lg font-semibold text-slate-900">Crop Image</h3>
                <div class="max-h-96 overflow-hidden">
                    <img x-ref="cropImage" class="block max-w-full" alt="Crop preview">
                </div>
                <p class="mt-2 text-xs text-slate-400">Drag to reposition. Arrow keys nudge the crop box (Shift for larger steps).</p>
                <div class="mt-4 flex justify-end gap-3">
                    <x-forms.button variant="secondary" type="button" @click="closeCropper()">Cancel</x-forms.button>
                    <x-forms.button variant="primary" type="button" @click="confirmCrop()">Apply Crop</x-forms.button>
                </div>
            </div>
        </x-modal>
    </div>
</x-forms.field>