@php
    $accessMode = $settings->guestMediaAccessMode();
    $status = $settings->guestMediaStatus();
    $frameOptions = $frames->map(fn (\App\Models\WeddingMediaFrame $frame): array => [
        'uuid' => $frame->uuid,
        'name' => $frame->name,
        'url' => \Illuminate\Support\Facades\Storage::disk('public')->url($frame->file_path),
        'orientation' => $frame->orientation->value,
    ])->values();
    $filterOptions = collect($filters)->map(fn (\App\Enums\WeddingMediaFilter $filter): array => [
        'value' => $filter->value,
        'label' => $filter->label(),
        'css' => $filter->css(),
        ...$filter->treatment(),
    ])->values();
    $filterPreviewImage = $settings->hero_image
        ? \Illuminate\Support\Facades\Storage::disk('public')->url($settings->hero_image)
        : null;
@endphp

<x-layouts.public title="{{ __('Share Photos & Videos') }}" active="media" :description="$settings->guest_media_privacy_text">
    <section class="lg-media" data-wedding-media-app
        x-data="weddingMediaCamera(@js([
            'token' => $mediaToken,
            'inviteCode' => $inviteCode,
            'accessMode' => $accessMode->value,
            'cameraEnabled' => $settings->guest_camera_enabled,
            'galleryEnabled' => $settings->guest_gallery_upload_enabled,
            'videoEnabled' => $settings->guest_video_enabled,
            'multiple' => $settings->guest_media_multiple_upload_enabled,
            'maxImageBytes' => $settings->guest_media_max_image_mb * 1024 * 1024,
            'maxVideoBytes' => $settings->guest_media_max_video_mb * 1024 * 1024,
            'maxVideoSeconds' => $settings->guest_media_max_video_duration,
            'outputMime' => $settings->guest_media_output_format === 'webp' ? 'image/webp' : 'image/jpeg',
            'outputExtension' => $settings->guest_media_output_format === 'webp' ? 'webp' : 'jpg',
            'imageQuality' => max(0.1, min(1, $settings->guest_media_image_quality / 100)),
            'maxWidth' => $settings->guest_media_max_width,
            'maxHeight' => $settings->guest_media_max_height,
            'defaultFrameUuid' => $frames->firstWhere('id', $settings->guest_media_default_frame_id)?->uuid,
            'filterPreviewImage' => $filterPreviewImage,
            'filters' => $filterOptions,
            'frames' => $frameOptions,
            'successMessage' => $settings->guest_media_success_text,
        ]))"
        x-init="init()">
        <div class="lg-media__hero lg-shell">
            <p class="lg-eyebrow">{{ $settings->topBarName() }}</p>
            <h1 class="lg-display lg-media__title">{{ __('Kongsi Momen Bersama Kami') }}</h1>
            <p class="lg-media__intro">{{ $settings->guest_media_intro_text }}</p>
            <p class="lg-media__privacy">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10V8a5 5 0 0 1 10 0v2M5 10h14v11H5z"/></svg>
                {{ $settings->guest_media_privacy_text }}
            </p>
            @if ($settings->guest_media_close_at)
                <p class="lg-media__limit">{{ __('Uploads close') }} {{ $settings->guest_media_close_at->translatedFormat('j F Y, g:i A') }}</p>
            @endif
        </div>

        @if (! $settings->guestMediaIsOpen())
            <div class="lg-shell lg-media__closed">
                <div class="lg-card">
                    <p class="lg-eyebrow">{{ $status->label() }}</p>
                    <h2 class="lg-display">{{ $status === \App\Enums\WeddingMediaStatus::Scheduled ? __('Uploads are not open yet') : __('Uploads are closed') }}</h2>
                    <p>{{ __('Thank you for being part of the celebration.') }}</p>
                </div>
            </div>
        @else
            <div class="lg-media__workspace lg-shell">
                <div class="lg-media__identity" x-show="stage === 'choose'">
                    @if ($rsvp)
                        <p>{{ __('Uploading as') }} <strong>{{ $rsvp->name }}</strong>@if ($rsvp->table_assignment) · {{ __('Table') }} {{ $rsvp->table_assignment }}@endif</p>
                    @elseif ($settings->guest_media_require_guest_name || $settings->guest_media_require_table_number)
                        <div class="lg-media__fields">
                            @if ($settings->guest_media_require_guest_name)
                                <label><span>{{ __('Your name') }}</span><input class="lg-input" type="text" x-model.trim="guestName" maxlength="255" autocomplete="name"></label>
                            @endif
                            @if ($settings->guest_media_require_table_number)
                                <label><span>{{ __('Table number') }}</span><input class="lg-input" type="text" x-model.trim="tableNumber" maxlength="255"></label>
                            @endif
                        </div>
                    @endif

                    @if ($accessMode === \App\Enums\WeddingMediaAccessMode::AccessCode)
                        <label class="lg-media__code"><span>{{ __('Upload access code') }}</span><input class="lg-input" type="password" x-model="accessCode" maxlength="255" autocomplete="one-time-code"></label>
                    @endif
                </div>

                <div class="lg-media__actions" x-show="stage === 'choose'">
                    @if ($settings->guest_camera_enabled)
                        <button type="button" class="lg-media-action lg-media-action--primary" @click="startCamera('photo')">
                            <span class="lg-media-action__icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h3l1.5-2h7L17 7h3v12H4z"/><circle cx="12" cy="13" r="3.2"/></svg></span>
                            <span><strong>{{ __('Start Camera') }}</strong><small>{{ __('Take a photo now') }}</small></span>
                        </button>
                    @endif
                    @if ($settings->guest_gallery_upload_enabled)
                        <button type="button" class="lg-media-action" @click="$refs.gallery.click()">
                            <span class="lg-media-action__icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="m4 16 5-5 4 4 2-2 5 5"/><circle cx="15.5" cy="8.5" r="1.5"/></svg></span>
                            <span><strong>{{ __('Upload from Gallery') }}</strong><small>{{ $settings->guest_media_multiple_upload_enabled ? __('Choose photos or videos') : __('Choose one photo or video') }}</small></span>
                        </button>
                    @endif
                    @if ($settings->guest_video_enabled)
                        <button type="button" class="lg-media-action" @click="startCamera('video')">
                            <span class="lg-media-action__icon"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3"/></svg></span>
                            <span><strong>{{ __('Record Video') }}</strong><small>{{ __('Up to :seconds seconds', ['seconds' => $settings->guest_media_max_video_duration]) }}</small></span>
                        </button>
                    @endif
                    <input x-ref="gallery" class="lg-visually-hidden" type="file" accept="image/jpeg,image/png,image/webp,image/heic,image/heif,video/mp4,video/quicktime,video/webm" @change="selectFiles($event)" @if ($settings->guest_media_multiple_upload_enabled) multiple @endif>
                </div>

                <div class="lg-camera" x-show="stage === 'camera'" x-cloak>
                    <div class="lg-camera__viewport">
                        <video x-ref="camera" autoplay playsinline muted :style="`filter:${selectedFilter.css}`"></video>
                        <span class="lg-camera__filter-tint" :style="filterTintStyle(selectedFilter)"></span>
                        <span class="lg-camera__filter-vignette" :style="`opacity:${selectedFilter.vignette || 0}`"></span>
                        <span class="lg-camera__filter-grain" :style="`opacity:${selectedFilter.grain || 0}`"></span>
                        <img x-show="selectedFrame.url" :src="selectedFrame.url" alt="" class="lg-camera__frame">
                        <span class="lg-camera__countdown" x-show="countdown > 0" x-text="countdown"></span>
                        <span class="lg-camera__timer" x-show="recording" x-text="formatDuration(recordingSeconds)"></span>
                        <div class="lg-camera__timer-picker" x-show="cameraMode === 'photo' && countdown === 0" role="group" aria-label="{{ __('Photo timer') }}">
                            <span class="lg-camera__timer-picker-label">
                                <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="13" r="8"/><path d="M9 2h6M12 5V2m0 7v4l3 2"/></svg>
                                <span>{{ __('Timer') }}</span>
                            </span>
                            <template x-for="seconds in timerOptions" :key="seconds">
                                <button type="button" @click="timerSeconds = seconds" :class="timerSeconds === seconds ? 'is-active' : ''" :aria-pressed="timerSeconds === seconds" :aria-label='seconds === 0 ? @js(__('No timer')) : `${seconds}s`'>
                                    <span class="lg-camera__timer-value"><strong x-text="seconds"></strong><small>s</small></span>
                                </button>
                            </template>
                        </div>
                    </div>
                    <div class="lg-camera__toolbar">
                        <button type="button" class="lg-camera__tool" @click="closeCamera()" aria-label="{{ __('Close camera') }}">&times;</button>
                        <button type="button" class="lg-camera__shutter" :class="recording ? 'is-recording' : ''" :disabled="countdown > 0" @click="cameraMode === 'video' ? toggleRecording() : captureWithCountdown()" :aria-label="cameraMode === 'video' ? '{{ __('Record video') }}' : '{{ __('Take photo') }}'"></button>
                        <button type="button" class="lg-camera__tool" @click="switchCamera()" aria-label="{{ __('Switch camera') }}"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 0 1-14.5 4.7L3 14m1-2a8 8 0 0 1 14.5-4.7L21 10"/><path d="M3 18v-4h4M21 6v4h-4"/></svg></button>
                    </div>
                    <div class="lg-media-carousel" x-show="cameraMode === 'photo'">
                        <template x-for="filter in config.filters" :key="filter.value">
                            <button type="button" class="lg-camera-filter" @click="selectedFilter = filter" :class="selectedFilter.value === filter.value ? 'is-active' : ''" :aria-label="`Use ${filter.label} filter`">
                                <span class="lg-camera-filter__thumb" aria-hidden="true">
                                    <span class="lg-camera-filter__image" :style="filterThumbnailStyle(filter)"></span>
                                    <span class="lg-camera-filter__tint" :style="filterTintStyle(filter)"></span>
                                    <span class="lg-camera-filter__vignette" :style="`opacity:${filter.vignette || 0}`"></span>
                                    <span class="lg-camera-filter__grain" :style="`opacity:${filter.grain || 0}`"></span>
                                </span>
                                <span class="lg-camera-filter__label" x-text="filter.label"></span>
                            </button>
                        </template>
                    </div>
                    <div class="lg-media-carousel" x-show="cameraMode === 'photo' && config.frames.length">
                        <button type="button" @click="selectedFrame = emptyFrame" :class="!selectedFrame.uuid ? 'is-active' : ''">{{ __('No frame') }}</button>
                        <template x-for="frame in config.frames" :key="frame.uuid">
                            <button type="button" @click="selectedFrame = frame" :class="selectedFrame.uuid === frame.uuid ? 'is-active' : ''" x-text="frame.name"></button>
                        </template>
                    </div>
                    <p class="lg-media__error" x-show="cameraError" x-text="cameraError" role="alert"></p>
                </div>

                <div class="lg-media-preview" x-show="stage === 'preview'" x-cloak>
                    <img x-show="previewType === 'photo'" :src="previewUrl" alt="{{ __('Captured photo preview') }}">
                    <video x-show="previewType === 'video'" :src="previewUrl" controls playsinline></video>
                    @if ($settings->guest_media_caption_enabled)
                        <label><span>{{ __('Caption (optional)') }}</span><textarea class="lg-input" x-model.trim="caption" maxlength="500" rows="2"></textarea></label>
                    @endif
                    <div class="lg-media-preview__actions">
                        <button type="button" class="lg-btn lg-btn-secondary" @click="retake()">{{ __('Retake') }}</button>
                        <button type="button" class="lg-btn lg-btn-primary" @click="queuePreview()">{{ __('Use & Upload') }}</button>
                    </div>
                </div>

                <div class="lg-media-queue" x-show="uploads.length && stage !== 'success'" x-cloak aria-live="polite">
                    <template x-for="item in uploads" :key="item.id">
                        <article class="lg-media-upload">
                            <div class="lg-media-upload__top"><strong x-text="item.name"></strong><span x-text="item.statusLabel"></span></div>
                            <div class="lg-media-upload__bar"><span :style="`width:${item.progress}%`"></span></div>
                            <p x-show="item.error" x-text="item.error" role="alert"></p>
                            <div class="lg-media-upload__buttons" x-show="item.status === 'failed'">
                                <button type="button" @click="retry(item)">{{ __('Retry') }}</button>
                            </div>
                            <button type="button" class="lg-media-upload__cancel" x-show="['queued','uploading','storing'].includes(item.status)" @click="cancel(item)">{{ __('Cancel') }}</button>
                        </article>
                    </template>
                </div>

                <div class="lg-media-success" x-show="stage === 'success'" x-cloak>
                    <span class="lg-media-success__mark" aria-hidden="true">&#10003;</span>
                    <h2 class="lg-display">{{ __('Terima kasih') }}</h2>
                    <p x-text="config.successMessage"></p>
                    <button type="button" class="lg-btn lg-btn-primary" @click="shareMore()">{{ __('Share more moments') }}</button>
                </div>
            </div>
        @endif
    </section>
</x-layouts.public>