---
import { getCollection } from 'astro:content';
import AppLayout from '../layouts/AppLayout.astro';
import { fmtDate } from '../lib/markdown';

const user = Astro.locals.user;

const allMeetings = await getCollection('meetings');
const meetings = allMeetings.sort(
  (a, b) => new Date(a.data.date).getTime() - new Date(b.data.date).getTime()
);

const now = new Date();
const upcoming = meetings.filter((m) => new Date(m.data.date) >= now);
const past = meetings.filter((m) => new Date(m.data.date) < now).reverse();
---
<AppLayout title="Calendar" user={user}>
  <div class="page">

    <header class="page-header">
      <p class="label-sm eyebrow">Calendar</p>
      <h1 class="display-md page-title">Meetings and sessions.</h1>
      <p class="lead subtitle">
        CAB sessions, demos, and reviews. Agendas posted two weeks before;
        notes within 48 hours.
      </p>
    </header>

    <div class="content">
      {upcoming.length > 0 && (
        <section class="meeting-section">
          <h2 class="label-sm section-heading">Upcoming</h2>
          <ul class="meeting-list">
            {upcoming.map((meeting) => (
              <li class="meeting-item">
                <a href={`/calendar/${meeting.slug}`} class="meeting-link">
                  <div class="meeting-meta">
                    <time class="label-sm meeting-date" datetime={String(meeting.data.date)}>
                      {fmtDate(String(meeting.data.date))}
                    </time>
                    <span class="label-sm meeting-time">{meeting.data.time}</span>
                  </div>
                  <div class="meeting-info">
                    <h3 class="headline-sm meeting-title">{meeting.data.title}</h3>
                    <p class="body-sm meeting-location">{meeting.data.location}</p>
                  </div>
                  <span class="meeting-arrow" aria-hidden="true">↗</span>
                </a>
              </li>
            ))}
          </ul>
        </section>
      )}

      {past.length > 0 && (
        <section class="meeting-section">
          <h2 class="label-sm section-heading">Past</h2>
          <ul class="meeting-list">
            {past.map((meeting) => (
              <li class="meeting-item past">
                <a href={`/calendar/${meeting.slug}`} class="meeting-link">
                  <div class="meeting-meta">
                    <time class="label-sm meeting-date" datetime={String(meeting.data.date)}>
                      {fmtDate(String(meeting.data.date))}
                    </time>
                    <span class="label-sm meeting-time">{meeting.data.time}</span>
                  </div>
                  <div class="meeting-info">
                    <h3 class="headline-sm meeting-title">{meeting.data.title}</h3>
                    <p class="body-sm meeting-location">{meeting.data.location}</p>
                  </div>
                  <span class="meeting-arrow" aria-hidden="true">↗</span>
                </a>
              </li>
            ))}
          </ul>
        </section>
      )}
    </div>

  </div>
</AppLayout>

<style>
  .page {
    padding: var(--space-12) var(--space-20) var(--space-16);
    max-width: var(--content-max);
    margin: 0 auto;
  }

  /* ── Header ──────────────────────────────────────────────────────── */
  .page-header {
    max-width: 44rem;
    margin-bottom: var(--space-12);
  }

  .eyebrow {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-muted);
    margin-bottom: var(--space-3);
  }

  .page-title {
    margin-bottom: var(--space-5);
  }

  .subtitle {
    color: var(--on-surface-variant);
    max-width: var(--reading-max);
    margin: 0;
  }

  /* ── Content ─────────────────────────────────────────────────────── */
  .content {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    max-width: 52rem;
  }

  /* ── Section ─────────────────────────────────────────────────────── */
  .section-heading {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-muted);
    margin-bottom: var(--space-4);
  }

  /* ── Meeting list ────────────────────────────────────────────────── */
  .meeting-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .meeting-item {
    border-top: var(--ghost-border);
  }
  .meeting-item:last-child {
    border-bottom: var(--ghost-border);
  }

  .meeting-link {
    display: grid;
    grid-template-columns: 10rem 1fr auto;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    text-decoration: none;
    border-bottom: none;
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .meeting-link:hover {
    border-bottom: none;
  }
  .meeting-link:hover .meeting-title {
    color: var(--secondary);
  }
  .meeting-link:hover .meeting-arrow {
    color: var(--secondary);
  }

  .meeting-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .meeting-date {
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-surface-variant);
  }

  .meeting-time {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-normal);
  }

  .meeting-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .meeting-title {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: var(--tracking-snug);
    margin: 0;
    color: var(--on-surface);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .meeting-location {
    color: var(--on-surface-muted);
    margin: 0;
  }

  .meeting-arrow {
    font-family: var(--font-serif);
    color: var(--on-surface-muted);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .past .meeting-title {
    color: var(--on-surface-variant);
  }
  .past .meeting-date {
    color: var(--on-surface-muted);
  }
</style>
