@props([
    'name' => null,
    'label' => 'Photo',
    'facingMode' => 'environment',
    'currentUrl' => null,
    'wrapperClass' => '',
    /** Flat list of validation messages for this field (do not name this prop "errors" — it clashes with the shared error bag). */
    'errorMessages' => [],
    'id' => null,
    /** Alpine expression for dynamic input name, e.g. "'guarantors[' + index + '][photo]'" */
    'nameAlpine' => null,
    /** Alpine expression for existing preview URL, e.g. "guarantor.photo_url" */
    'currentUrlAlpine' => null,
    'accept' => 'image/*',
    /** When false, hide the per-slot empty-state hint (use a shared section hint instead). */
    'showEmptyHint' => true,
    'required' => null,
])

@php
    $inputId = $id ?? ($name ?: null);
    $isDynamic = filled($nameAlpine);
    $urlExpr = $isDynamic && filled($currentUrlAlpine) ? $currentUrlAlpine : 'null';
@endphp

<div
    @class([$wrapperClass])
    @if ($isDynamic)
        {{-- Evaluate name/url expressions in the parent Alpine scope before this component's x-data
             shadows helpers like fieldName() (component.fieldName is the input name string). --}}
        x-data="kycPhotoCapture({
            name: {{ $nameAlpine }},
            facingMode: @js($facingMode),
            currentUrl: {{ $urlExpr }} || null,
            hasStoredFile: Boolean({{ $urlExpr }}),
        })"
    @else
        x-data="kycPhotoCapture({
            name: @js($name),
            facingMode: @js($facingMode),
            currentUrl: @js($currentUrl),
            hasStoredFile: @js(filled($currentUrl)),
        })"
    @endif
    x-on:keydown.escape.window="cameraOpen && closeCamera()"
>
    <x-input-label :for="$inputId" :value="$label" :required="$required" />

    <template x-if="currentUrl && !hasNewFile">
        <button
            type="button"
            class="mt-1 inline-block text-xs text-indigo-600 hover:text-indigo-500"
            @click="$dispatch('open-image-lightbox', { src: currentUrl, label: @js($label), alt: @js($label) })"
        >
            View current file
        </button>
    </template>

    <div class="mt-2 space-y-2">
        {{-- Keep file input out of flex layout: focused sr-only file inputs collapse modal width in Chrome. --}}
        <input
            x-ref="fileInput"
            @if ($inputId)
                id="{{ $inputId }}"
            @endif
            :name="fieldName"
            type="file"
            accept="{{ $accept }}"
            class="hidden"
            tabindex="-1"
            @change="onFileInputChange()"
        />
        <div class="relative flex min-w-0 flex-wrap items-center gap-2">
            <button
                type="button"
                class="inline-flex items-center gap-1.5 rounded-lg border border-teal-200 bg-teal-50 px-3 py-2 text-xs font-semibold text-teal-800 hover:bg-teal-100"
                @click.prevent.stop="openCamera()"
            >
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h2l1-2h8l1 2h2a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                    <circle cx="12" cy="13" r="3" />
                </svg>
                Take photo
            </button>
            <button
                type="button"
                class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50"
                @click.prevent.stop="openFilePicker()"
            >
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5 5 5M12 5v12" />
                </svg>
                Upload file
            </button>
            <button
                type="button"
                class="inline-flex items-center rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50"
                x-show="hasNewFile"
                x-cloak
                @click.prevent.stop="clearSelection()"
            >
                Clear
            </button>
        </div>

        <p class="text-xs text-slate-500" x-show="hasNewFile" x-cloak>
            Ready to save: <span class="font-medium text-slate-700" x-text="fileLabel"></span>
        </p>
        @if ($showEmptyHint)
            <p class="text-xs text-slate-500" x-show="!hasNewFile && !hasStoredFile" x-cloak>
                Use the camera for a live capture, or upload an existing image.
            </p>
        @endif
        <p class="text-xs text-amber-700" x-show="!isSecureContext" x-cloak>
            Live camera preview needs HTTPS. On this connection, <strong>Take photo</strong> opens your device camera or file picker instead.
        </p>

        <div x-show="hasPreview()" x-cloak class="overflow-hidden rounded-lg border border-slate-200 bg-slate-50">
            <button
                type="button"
                class="block w-full cursor-zoom-in"
                @click="$dispatch('open-image-lightbox', { src: displayPreviewUrl(), label: @js($label), alt: @js($label) })"
                aria-label="{{ __('View :label in full size', ['label' => $label]) }}"
            >
                <img
                    :src="displayPreviewUrl()"
                    alt="{{ $label }} preview"
                    class="max-h-40 w-full object-contain"
                />
            </button>
        </div>
    </div>

    <x-input-error class="mt-2" :messages="$errorMessages" />

    {{-- Camera overlay — full viewport on mobile (teleport avoids modal clipping) --}}
    <template x-teleport="body">
    <div
        x-show="cameraOpen"
        x-cloak
        {{-- Above loan-modal-overlay (130) and #modal-stack-host (140) so capture works inside Edit client / nested form modals --}}
        class="fixed inset-0 z-[200] flex h-[100dvh] flex-col bg-black"
        role="dialog"
        aria-modal="true"
        :aria-label="'Capture {{ $label }}'"
    >
        {{-- Top bar --}}
        <div class="absolute inset-x-0 top-0 z-10 flex items-center justify-between bg-gradient-to-b from-black/70 to-transparent px-4 pb-10 pt-[max(0.75rem,env(safe-area-inset-top))]">
            <h3 class="text-sm font-semibold text-white">{{ $label }}</h3>
            <div class="flex items-center gap-1">
                <button
                    type="button"
                    class="rounded-full p-2 text-white hover:bg-white/10"
                    x-show="!capturedUrl && !error"
                    @click="switchCamera()"
                    aria-label="Switch camera"
                >
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" 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" />
                    </svg>
                </button>
                <button
                    type="button"
                    class="rounded-full p-2 text-white hover:bg-white/10"
                    @click="closeCamera()"
                    aria-label="Close camera"
                >
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>

        {{-- Camera preview — fills the screen --}}
        <div class="relative min-h-0 flex-1 bg-black">
            <video
                x-ref="video"
                x-show="!capturedUrl && !error"
                playsinline
                muted
                class="absolute inset-0 h-full w-full object-cover"
            ></video>

            <img
                x-show="capturedUrl"
                :src="capturedUrl"
                alt="Captured preview"
                class="absolute inset-0 h-full w-full object-contain"
            />

            <div
                x-show="error"
                class="absolute inset-0 flex items-center justify-center p-8 text-center text-sm text-slate-200"
                x-text="error"
            ></div>

            <div
                x-show="starting"
                class="absolute inset-0 flex items-center justify-center bg-black/50 text-sm font-medium text-white"
            >
                Opening camera…
            </div>
        </div>

        <canvas x-ref="canvas" class="hidden" aria-hidden="true"></canvas>

        {{-- Bottom controls --}}
        <div class="absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-16">
            <template x-if="!capturedUrl">
                <div class="flex w-full flex-wrap gap-3">
                    <button
                        type="button"
                        class="inline-flex flex-1 items-center justify-center rounded-xl bg-teal-600 px-4 py-3 text-sm font-semibold text-white hover:bg-teal-700 disabled:opacity-50"
                        :disabled="Boolean(error) || starting"
                        @click="captureFrame()"
                    >
                        Capture
                    </button>
                    <button
                        type="button"
                        class="inline-flex flex-1 items-center justify-center rounded-xl border border-white/30 bg-white/10 px-4 py-3 text-sm font-semibold text-white backdrop-blur-sm hover:bg-white/20"
                        @click="error ? openNativeCapture() : closeCamera()"
                        x-text="error ? 'Use camera / upload' : 'Cancel'"
                    ></button>
                </div>
            </template>
            <template x-if="capturedUrl">
                <div class="flex w-full flex-wrap gap-3">
                    <button
                        type="button"
                        class="inline-flex flex-1 items-center justify-center rounded-xl bg-teal-600 px-4 py-3 text-sm font-semibold text-white hover:bg-teal-700"
                        @click="useCapturedPhoto()"
                    >
                        Use photo
                    </button>
                    <button
                        type="button"
                        class="inline-flex flex-1 items-center justify-center rounded-xl border border-white/30 bg-white/10 px-4 py-3 text-sm font-semibold text-white backdrop-blur-sm hover:bg-white/20"
                        @click="retake()"
                    >
                        Retake
                    </button>
                </div>
            </template>
        </div>
    </div>
    </template>
</div>