---
import PhotoLayout from '../../../layouts/PhotoLayout.astro';
import CategoryNav from '../CategoryNav.astro';
import AlbumHeader from '../AlbumHeader.astro';
import MasonryGallery from '../MasonryGallery.astro';
import Lightbox from '../Lightbox.astro';
import { getPostBaseSlug, type Locale } from '../../../utils/i18n';

interface Props {
  post: any;
  lang?: Locale;
}

const { post, lang = 'fr' } = Astro.props;

// Importer toutes les images du dossier photos
const allImages = import.meta.glob<{ default: ImageMetadata }>('/src/assets/images/photos/blog/**/*.{jpg,jpeg,png,webp}');

const { Content } = await post.render();

const baseSlug = getPostBaseSlug(post.id);

// Construire le chemin de l'album avec l'année
const year = post.data.date.getFullYear();
const albumPath = `/src/assets/images/photos/blog/${year}/${baseSlug}/`;
const albumImages = Object.keys(allImages)
  .filter(path => path.startsWith(albumPath))
  .sort();

// Résoudre la cover image depuis le glob
const coverPath = `/src/assets/images/photos/blog/${year}/${baseSlug}/${post.data.coverImage}`;
const coverImageLoader = allImages[coverPath];
const coverImage = coverImageLoader ? (await coverImageLoader()).default : undefined;

// Résoudre les images de la galerie
const galleryImages = await Promise.all(
  albumImages.map(async (imagePath) => {
    const loader = allImages[imagePath];
    const img = await loader();
    const filename = imagePath.split('/').pop() || '';
    return {
      src: img.default,
      alt: filename.replace(/\.[^/.]+$/, '').replace(/-/g, ' ').replace(/^\d+-/, ''),
    };
  })
);

// Données pour la lightbox
const lightboxImages = galleryImages.map(img => ({
  src: img.src.src,
  alt: img.alt
}));
---

<PhotoLayout title={`${post.data.title} - Blog Photo - Jalil Arfaoui`} enableScroll={true} lang={lang}>
  <div class="album-container">
    <CategoryNav currentCategory="blog" opaque={false} lang={lang} />

    <AlbumHeader
      title={post.data.title}
      description={post.data.description}
      date={new Date(post.data.date)}
      tags={post.data.tags}
      coverImage={coverImage}
      scrollTarget="#album-content"
      lang={lang}
    />

    <div id="album-content">
      {post.body && (
        <div class="post-content">
          <Content />
        </div>
      )}

      <MasonryGallery images={galleryImages} />
    </div>
  </div>

  <Lightbox images={lightboxImages} albumTitle={post.data.title} lang={lang} />
</PhotoLayout>

<style>
.album-container {
  background: #000;
  color: #fff;
  min-height: 100vh;
  padding-top: var(--header-height, 53px);
}

.post-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px 40px;
  line-height: 1.6;
  text-align: center;
}

.post-content :global(h1),
.post-content :global(h2),
.post-content :global(h3) {
  margin: 2em 0 1em 0;
  font-weight: 600;
  color: white;
}

.post-content :global(p) {
  margin: 1.5em 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
}

.post-content :global(img) {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2em 0;
}
</style>