---
import { authPB } from "src/utils/pocketbase";
import type { RecordModel } from 'pocketbase'

// export const prerender = false

const pb = await authPB()
const photos = await pb.collection('photos').getFullList({
    sort: '-created'
})
---

<script>
    import Swiper from 'swiper';
    import { Navigation, Keyboard, EffectFade } from 'swiper/modules';
    import 'swiper/css';
    import 'swiper/css/effect-fade';

    const dataElement = document.getElementById('carousel-data');
    const photos = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
    const titleEl = document.getElementById('photo-title');
    const cameraEl = document.getElementById('photo-camera');
    const locationEl = document.getElementById('photo-location');
    const currentPosIndicator = document.getElementById('current-pos');
    const maxPosIndicator = document.getElementById('max-pos');

    if (maxPosIndicator) {
        maxPosIndicator.innerText = String(photos.length);
    }
    if (currentPosIndicator) {
        currentPosIndicator.innerText = '1';
    }

    const swiper = new Swiper('.swiper', {
        modules: [Navigation, Keyboard, EffectFade],
        effect: 'cards',
        fadeEffect: {
            crossFade: true
        },
        speed: 400,
        navigation: {
            nextEl: '#inc-button',
            prevEl: '#dec-button',
        },
        keyboard: {
            enabled: true,
            onlyInViewport: false,
        },
        loop: true,
        on: {
            slideChange: function() {
                const realIndex = this.realIndex;
                const currentPhoto = photos[realIndex];
                
                if (currentPosIndicator) {
                    currentPosIndicator.innerText = String(realIndex + 1);
                }
                
                if (titleEl && currentPhoto) {
                    titleEl.textContent = currentPhoto.title || "Untitled";
                }
                if (cameraEl && currentPhoto) {
                    cameraEl.textContent = `📸 ${currentPhoto.camera}`;
                }
                if (locationEl && currentPhoto) {
                    locationEl.textContent = `📌 ${currentPhoto.location}`;
                }
            }
        }
    });
</script>

<!-- Hidden element to pass server data to client -->
<div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>

<div class="swiper w-full h-[60vh] md:h-[calc(100vh-7rem)]">
    <div class="swiper-wrapper">
        {photos.map((photo) => (
            <div class="swiper-slide flex items-center justify-center">
                <img 
                    src={pb.files.getURL(photo, photo.image)} 
                    class="w-full h-full object-contain"
                    alt={photo.title || 'Photo'}
                />
            </div>
        ))}
    </div>
</div>