---
import type { AlbumGroup } from "@utils/albums";
import { sortedAlbums } from "@utils/albums";
import { i18n } from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";
import GridLayout from "@layouts/grid.astro";
import BackwardButton from "@components/backwardButton.astro";


export const getStaticPaths = async () => {
    return sortedAlbums.filter(album => album.visible).map((album) => ({
        params: { id: album.id },
        props: { album },
    }));
};


interface Props {
    album: AlbumGroup;
}

const { album } = Astro.props;

if (!album) {
    return Astro.redirect("/404");
}
---

<GridLayout title={album.title} description={album.description || album.title}>
    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32">
        <div class="card-base z-10 px-9 py-6 relative w-full">
            <BackwardButton href="/albums/" text={i18n(I18nKey.albumsBackToList)} />
            <!-- 相册标题信息 -->
            <header class="mb-8">
                <h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-100 mb-3">
                    {album.title}
                </h1>
                {album.description && (
                    <p class="text-neutral-600 dark:text-neutral-400 mb-4">
                        {album.description}
                    </p>
                )}
                <!-- 相册元数据 -->
                <div class="flex flex-wrap items-center gap-4 text-sm text-neutral-500 dark:text-neutral-500">
                    <span>{album.photos.length} {album.photos.length > 1 ? i18n(I18nKey.albumsPhotosCount) : i18n(I18nKey.albumsPhotoCount)}</span>
                    <time>{new Date(album.date).toLocaleDateString('zh-CN')}</time>
                    {album.location && (
                        <span class="flex items-center gap-1">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                            </svg>
                            {album.location}
                        </span>
                    )}
                </div>
                <!-- 标签 -->
                {album.tags && album.tags.length > 0 && (
                    <div class="flex flex-wrap gap-2 mt-4">
                        {album.tags.map(tag => (
                            <span class="btn-regular h-8 text-sm px-3 rounded-lg">
                                {tag}
                            </span>
                        ))}
                    </div>
                )}
            </header>
            <!-- 照片网格 -->
            <div
                class={`photo-gallery moment-images ${album.layout === 'masonry' ? 'masonry-layout' : 'grid-layout'}`}
                data-layout={album.layout || 'grid'}
                data-columns={album.columns || 3}
            >
                {album.photos.map((photo, index) => (
                    <figure class="photo-item group relative overflow-hidden rounded-lg">
                        <a
                            href={photo.src}
                            data-fancybox="gallery"
                            data-caption={photo.alt}
                            data-no-swup
                            class="block"
                        >
                            <img
                                src={photo.src}
                                alt={photo.alt}
                                class="photo-image w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer"
                                loading="lazy"
                            />
                        </a>
                    </figure>
                ))}
            </div>
        </div>
    </div>
</GridLayout>

<style>
    .grid-layout {
        display: grid;
        gap: 1rem;
    }

    .grid-layout[data-columns="2"] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .grid-layout[data-columns="3"] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .grid-layout[data-columns="4"] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .masonry-layout {
        columns: 2;
        column-gap: 1rem;
    }

    @media (min-width: 768px) {
        .masonry-layout {
            columns: 3;
        }
    }

    @media (min-width: 1280px) {
        .masonry-layout[data-columns="4"] {
            columns: 4;
        }
    }

    .masonry-layout .photo-item {
        break-inside: avoid;
        margin-bottom: 1rem;
    }

    .grid-layout .photo-container {
        aspect-ratio: 1;
    }
</style>