<?php
use function App\Core\{e, url};

$items = $galleryItems ?? [];
$title = (string) ($mod['title'] ?? 'Mod galerisi');
$mediaUrl = static function (string $path): string {
    $path = trim($path);
    if ($path === '') {
        return '';
    }

    return preg_match('~^https?://~i', $path) ? $path : url($path);
};

if ($items === []) {
    $cover = (string) ($mod['cover_image'] ?? $mod['cover'] ?? '');
    $items[] = [
        'type' => 'image',
        'src' => $cover,
        'thumb' => $cover,
        'label' => $title,
    ];
}
?>
<section class="mod-gallery" data-mod-gallery aria-label="<?= e($title) ?> galerisi">
    <div class="mod-gallery-stage">
        <?php foreach ($items as $index => $item): ?>
            <?php
            $type = (string) ($item['type'] ?? 'image');
            $src = (string) ($item['src'] ?? '');
            $embed = (string) ($item['embed_url'] ?? $src);
            $label = (string) ($item['label'] ?? $title);
            $resolvedSrc = $mediaUrl($type === 'video' ? $embed : $src);
            ?>
            <figure class="mod-gallery-item <?= $index === 0 ? 'is-active' : '' ?>" data-gallery-item data-index="<?= $index ?>" data-type="<?= e($type) ?>" data-src="<?= e($resolvedSrc) ?>" data-label="<?= e($label) ?>">
                <?php if ($type === 'video' && $embed !== ''): ?>
                    <div class="gallery-video-frame">
                        <iframe src="<?= e($embed) ?>" title="<?= e($label) ?>" loading="lazy" allow="accelerometer; autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
                    </div>
                <?php elseif ($type === 'model' && $src !== ''): ?>
                    <div class="gallery-model-frame">
                        <model-viewer src="<?= e($mediaUrl($src)) ?>" camera-controls auto-rotate interaction-prompt="none" loading="lazy" alt="<?= e($label) ?>">
                            <div class="gallery-model-fallback">
                                <strong><?= e($label) ?></strong>
                                <p>3D model onizleme desteklenmiyor.</p>
                                <a class="pill" href="<?= e($mediaUrl($src)) ?>" target="_blank" rel="noopener">Goruntule / Indir</a>
                            </div>
                        </model-viewer>
                        <button class="gallery-model-open pill" type="button" data-gallery-open>Fullscreen</button>
                    </div>
                <?php elseif ($src !== ''): ?>
                    <button class="gallery-image-button" type="button" data-gallery-open aria-label="Galeriyi buyut">
                        <img loading="<?= $index === 0 ? 'eager' : 'lazy' ?>" src="<?= e($mediaUrl($src)) ?>" alt="<?= e($label) ?>">
                    </button>
                <?php else: ?>
                    <button class="gallery-image-button gallery-fallback" type="button" data-gallery-open aria-label="Galeriyi buyut">
                        <span><?= e($title) ?></span>
                    </button>
                <?php endif; ?>
            </figure>
        <?php endforeach; ?>

        <?php if (count($items) > 1): ?>
            <button class="gallery-nav prev" type="button" data-gallery-prev aria-label="Onceki">&lsaquo;</button>
            <button class="gallery-nav next" type="button" data-gallery-next aria-label="Sonraki">&rsaquo;</button>
        <?php endif; ?>
    </div>

    <?php if (count($items) > 1): ?>
        <div class="mod-gallery-thumbs" role="tablist" aria-label="Galeri kucuk gorselleri">
            <?php foreach ($items as $index => $item): ?>
                <?php
                $type = (string) ($item['type'] ?? 'image');
                $thumb = (string) (($item['thumb'] ?? '') ?: ($item['src'] ?? ''));
                ?>
                <button type="button" class="<?= $index === 0 ? 'is-active' : '' ?>" data-gallery-thumb data-index="<?= $index ?>" aria-label="Galeri oge <?= $index + 1 ?>">
                    <?php if ($type === 'video'): ?>
                        <span class="video-thumb">Video</span>
                    <?php elseif ($type === 'model'): ?>
                        <span class="video-thumb">3D</span>
                    <?php elseif ($thumb !== ''): ?>
                        <img loading="lazy" src="<?= e($mediaUrl($thumb)) ?>" alt="">
                    <?php else: ?>
                        <span></span>
                    <?php endif; ?>
                </button>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</section>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
