---
import { LinkPresets } from "@constants/link-presets";
import { LinkPreset } from "@/types/config";
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";


const pageTitle = LinkPresets[LinkPreset.Albums].name;
const pageDescription = LinkPresets[LinkPreset.Albums].description;

// 获取所有相册
const albumsData = sortedAlbums.filter(album => album.visible);
---

<GridLayout title={pageTitle} description={pageDescription}>
    <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 currentPath={Astro.url.pathname} />
            <!-- 页面标题 -->
            <header class="mb-8">
                <h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-100 mb-3">
                    {pageTitle}
                </h1>
                <p class="text-neutral-600 dark:text-neutral-400">
                    {pageDescription}
                </p>
            </header>
            <!-- 相册网格 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {albumsData.map(album => (
                    <article
                        class="album-card group bg-white dark:bg-neutral-900 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 border border-neutral-200 dark:border-neutral-800"
                    >
                        <a href={`/albums/${album.id}/`} class="block">
                            <!-- 封面图片 -->
                            <div class="aspect-4/3 overflow-hidden bg-neutral-100 dark:bg-neutral-700">
                                <img
                                    src={album.cover}
                                    alt={album.title}
                                    class="w-full h-full object-cover group-hover:scale-105 transition duration-300"
                                    loading="lazy"
                                />
                            </div>
                            <!-- 相册信息 -->
                            <div class="p-4">
                                <h3 class="font-bold text-lg text-neutral-900 dark:text-neutral-100 mb-2 group-hover:text-(--primary) transition-colors">
                                    {album.title}
                                </h3>
                                {album.description && (
                                    <p class="text-neutral-600 dark:text-neutral-400 text-sm mb-3 line-clamp-2">
                                        {album.description}
                                    </p>
                                )}
                                <!-- 元数据 -->
                                <div class="flex items-center justify-between text-xs text-neutral-500 dark:text-neutral-500">
                                    <div class="flex items-center gap-4">
                                        <span>{album.photos.length} {album.photos.length > 1 ? i18n(I18nKey.albumsPhotosCount) : i18n(I18nKey.albumsPhotoCount)}</span>
                                        {album.location && (
                                            <span class="flex items-center gap-1">
                                                <svg class="w-3 h-3" 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>
                                    <time>{new Date(album.date).toLocaleDateString('zh-CN')}</time>
                                </div>
                                <!-- 标签 -->
                                {album.tags && album.tags.length > 0 && (
                                    <div class="flex flex-wrap gap-1 mt-3">
                                        {album.tags.slice(0, 3).map(tag => (
                                            <span class="btn-regular h-6 text-xs px-2 rounded-lg">
                                                {tag}
                                            </span>
                                        ))}
                                        {album.tags.length > 3 && (
                                            <span class="btn-regular h-6 text-xs px-2 rounded-lg">
                                                +{album.tags.length - 3}
                                            </span>
                                        )}
                                    </div>
                                )}
                            </div>
                        </a>
                    </article>
                ))}
            </div>
            <!-- 空状态 -->
            {albumsData.length === 0 && (
                <div class="text-center py-12">
                    <div class="text-neutral-400 dark:text-neutral-600 mb-4">
                        <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-medium text-neutral-900 dark:text-neutral-100 mb-2">
                        {i18n(I18nKey.albumsEmpty)}
                    </h3>
                    <p class="text-neutral-600 dark:text-neutral-400">
                        {i18n(I18nKey.albumsEmptyDesc)}
                    </p>
                </div>
            )}
        </div>
    </div>
</GridLayout>

<style>
    .album-card:hover {
        translate: 0 -2px;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            translate: 0 20px;
        }
        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    .album-card {
        animation: fadeInUp 0.3s ease-out;
    }
</style>