---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import type { ImageMetadata } from "astro";
import PhotosSubNav from "@/components/PhotosSubNav.astro";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { collectionSlug, getChildCollections } from "@/lib/collections";

const allCollections = await getCollection(
  "collections_photos",
  ({ data }) => !data.draft,
);

// Top-level collections only (no slash in slug)
const topLevel = getChildCollections("", allCollections);

const imageModules = import.meta.glob<{ default: ImageMetadata }>(
  "/src/content/photos/collections/**/*.jpg",
  { eager: true },
);

// Pick first image per top-level collection as cover
const covers = Object.fromEntries(
  topLevel.map((col) => {
    const slug = collectionSlug(col);
    const prefix = `/src/content/photos/collections/${slug}/`;
    const cover = Object.entries(imageModules)
      .filter(([p]) => p.startsWith(prefix))
      .sort(([a], [b]) => a.localeCompare(b))[0];
    return [slug, cover?.[1]?.default ?? null];
  }),
);
---

<BaseLayout
  title="Collections"
  description="Photo collections by Adrian Altner — travel and street photography."
  navDesktopHidden={true}
  footerDark={true}
>
  <div class="page">
    <main class="main">
      <PhotosSubNav />
      <ul class="collection-grid" role="list">
        {
          topLevel.map((col) => {
            const slug = collectionSlug(col);
            const cover = covers[slug];
            return (
              <li class="collection-card">
                <a href={`/photos/collections/${slug}`} class="collection-link">
                  {cover && (
                    <div class="collection-cover">
                      <Image
                        src={cover}
                        alt={col.data.title}
                        width={600}
                        height={400}
                        class="collection-img"
                      />
                    </div>
                  )}
                  <div class="collection-meta">
                    <span class="collection-title">{col.data.title}</span>
                    {col.data.location && (
                      <span class="collection-location">
                        {col.data.location}
                      </span>
                    )}
                  </div>
                </a>
              </li>
            );
          })
        }
      </ul>
    </main>
  </div>
</BaseLayout>

<style>
  .page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background: #111;
    color: #f5f5f3;
  }

  .main {
    max-width: var(--width-wide);
    margin: 0 auto;
    padding: 1.5rem;
    width: 100%;
  }

  .collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .collection-card {
    border-radius: 2px;
    overflow: hidden;
  }

  .collection-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .collection-cover {
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }

  .collection-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .collection-link:hover .collection-img {
    transform: scale(1.03);
  }

  .collection-meta {
    padding: 0.6rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .collection-title {
    font-size: 0.95rem;
    font-weight: 500;
  }

  .collection-location {
    font-size: 0.8rem;
    color: #888;
  }

  .page :global(.footer a) {
    color: #f5f5f3;
  }

  @media (max-width: 640px) {
    .main {
      padding: 0.75rem;
    }

    .collection-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }
  }
</style>
