---
export const prerender = false;

import { actions } from 'astro:actions';
import { getLiveCollection } from 'astro:content';
import Base from '../layouts/Base.astro';
import Header from '../components/layout/Header.astro';
import Footer from '../components/layout/Footer.astro';
import EventCard from '../components/events/EventCard.astro';
import RsvpNotice from '../components/events/RsvpNotice.astro';
import { getRsvpsForEvents, type CalendarRsvp } from '../lib/rsvps';

const rsvpResult = Astro.getActionResult(actions.rsvpEvent);

if (rsvpResult?.data?.redirectUrl) {
  return Astro.redirect(rsvpResult.data.redirectUrl, 303);
}

if (rsvpResult?.error) {
  return Astro.redirect('/events?rsvp=error', 303);
}

const eventsResult = await getLiveCollection('events');
const allEvents = (eventsResult.entries ?? [])
  .map((entry) => entry.data)
  .sort((a, b) => a.startsAt.getTime() - b.startsAt.getTime());

const { upcoming: upcomingEvents = [], past: pastEvents = [] } = Object.groupBy(
  allEvents,
  (event) => (event.isPast ? 'past' : 'upcoming'),
);
pastEvents.reverse();

const loggedInUser = Astro.locals.loggedInUser;
let rsvpsByEvent = new Map<string, CalendarRsvp>();
let rsvpReadFailed = false;

if (loggedInUser) {
  try {
    rsvpsByEvent = await getRsvpsForEvents(loggedInUser, [
      ...upcomingEvents.map((event) => ({ uri: event.atUri })),
      ...pastEvents.map((event) => ({ uri: event.atUri })),
    ]);
  } catch {
    rsvpReadFailed = true;
  }
}

const rsvpMessage = Astro.url.searchParams.get('rsvp');
---

<Base title="Events" description="Upcoming AT Protocol community events, meetups, and conferences.">
  <Header slot="header" />

  <section class="events-page section">
    <div class="container">
      <h1>Upcoming events</h1>
      <p class="events-sub">
        Community meetups, conferences, and hangouts across the Atmosphere.
        Events are sourced from <a href="https://smokesignal.events" rel="noopener noreferrer" target="_blank">Smoke Signal</a> and <a href="https://openmeet.net" rel="noopener noreferrer" target="_blank">OpenMeet</a>.
      </p>
      <RsvpNotice message={rsvpMessage} />
      {rsvpReadFailed && (
        <p class="events-notice events-notice--error">We couldn't check which events you're going to right now.</p>
      )}

      {upcomingEvents.length > 0 ? (
        <div class="grid-2 events-grid">
          {upcomingEvents.map((event) => (
            <EventCard
              {...event}
              showRsvp
              isLoggedIn={Boolean(loggedInUser)}
              rsvpStatus={rsvpsByEvent.get(event.atUri)?.record.status}
              sourceAvatar={event.sourceAvatar}
            />
          ))}
        </div>
      ) : (
        <div class="events-empty">
          <p>No upcoming events right now. Check back soon or <a href="https://smokesignal.events">create one on Smoke Signal</a>.</p>
        </div>
      )}

      {pastEvents.length > 0 && (
        <section class="events-past">
          <h2 class="events-past__heading">Past events</h2>
          <div class="grid-2 events-grid">
            {pastEvents.map((event) => (
              <EventCard
                {...event}
                isLoggedIn={Boolean(loggedInUser)}
                rsvpStatus={rsvpsByEvent.get(event.atUri)?.record.status}
                sourceAvatar={event.sourceAvatar}
              />
            ))}
          </div>
        </section>
      )}
    </div>
  </section>

  <Footer slot="footer" />
</Base>

<style>
  .events-page h1 {
    margin-bottom: var(--space-sm);
  }

  .events-sub {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    max-width: 55ch;
    line-height: var(--leading-relaxed);
  }

  .events-notice {
    margin-top: var(--space-base);
    max-width: 55ch;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .events-notice--success {
    background: var(--teal-100);
    color: var(--teal-600);
  }

  .events-notice--error {
    background: var(--coral-100);
    color: var(--coral-600);
  }

  .events-grid {
    margin-top: var(--space-xl);
  }

  .events-empty {
    margin-top: var(--space-xl);
    padding: var(--space-2xl);
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--neutral-100);
    border-radius: var(--radius-md);
  }

  .events-past {
    margin-top: var(--space-3xl, var(--space-2xl));
  }
  .events-past__heading {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-base);
  }
  .events-past :global(.event-card) {
    filter: grayscale(0.5);
    background: var(--neutral-50);
  }
</style>