---
import Avatar from './Avatar.astro';
import type { Event, UserPublic } from '../lib/db';
import { eventKindLabel, redactName } from '../lib/format';

interface Props {
  event: Event | null;
  attendees: UserPublic[];   // confirmed (status='yes')
  confirmedCount: number;
  myRsvp: 'yes' | 'no' | 'interested' | null;
}

const { event, attendees, confirmedCount, myRsvp } = Astro.props;

function parseUtc(s: string): Date {
  if (/T.*[Zz]$/.test(s) || /[+-]\d{2}:?\d{2}$/.test(s)) return new Date(s);
  return new Date(s.replace(' ', 'T') + 'Z');
}
function fmt(part: Intl.DateTimeFormatOptions, iso: string): string {
  return new Intl.DateTimeFormat('en-GB', { ...part, timeZone: 'Europe/Copenhagen' }).format(parseUtc(iso));
}

const dayPadded   = event ? String(parseUtc(event.starts_at).getUTCDate()).padStart(2, '0') : '';
const weekday     = event ? fmt({ weekday: 'long' }, event.starts_at).toUpperCase() : '';
const monthShort  = event ? fmt({ month: 'short' }, event.starts_at).toUpperCase() : '';
const startTime   = event ? fmt({ hour: '2-digit', minute: '2-digit', hour12: false }, event.starts_at) : '';

const visibleAttendees = attendees.slice(0, 3);
const overflow = Math.max(0, attendees.length - visibleAttendees.length);
---
{event ? (
  <article class="hero" aria-label={`Next gathering: ${event.title}`}>

    <div class="hero-top">
      <div class="hero-date">
        <span class="hero-weekday">{weekday}</span>
        <span class="hero-day">{dayPadded}</span>
        <span class="hero-month-time">{monthShort} · {startTime}</span>
      </div>

      <div class="hero-mid">
        <p class="hero-eyebrow">Next gathering · {eventKindLabel(event.kind).toUpperCase()}</p>
        <h2 class="hero-title">{event.title}</h2>
        <p class="hero-desc">{event.description}</p>
        <p class="hero-location">{event.location}</p>
      </div>

      <div class="hero-meta">
        {event.duration_label && (
          <p class="hero-duration">{event.duration_label.toUpperCase()}</p>
        )}
        {visibleAttendees.length > 0 && (
          <ul class="hero-attendees" aria-label="Confirmed attendees">
            {visibleAttendees.map(u => (
              <li class="hero-attendee">
                <span class="hero-attendee-name">{redactName(u.name)}</span>
                <Avatar id={u.id} name={u.name} size={18} />
              </li>
            ))}
            {overflow > 0 && (
              <li class="hero-attendee">
                <span class="hero-attendee-name">+{overflow} more</span>
                <span class="hero-attendee-overflow" aria-hidden="true">+{overflow}</span>
              </li>
            )}
          </ul>
        )}
      </div>
    </div>

    <footer class="hero-foot">
      <p class="hero-status">
        {event.capacity ? `${event.capacity} SEATS · ` : ''}{confirmedCount} CONFIRMED
      </p>

      <form method="POST" class="hero-actions">
        <input type="hidden" name="action" value="rsvp" />
        <input type="hidden" name="event_slug" value={event.slug} />
        {myRsvp === 'yes' ? (
          <>
            <span class="hero-confirmed">You're confirmed ✓</span>
            <button type="submit" name="status" value="no" class="hero-change">Change</button>
          </>
        ) : (
          <>
            <button type="submit" name="status" value="no" class="hero-decline">Can't make it</button>
            <button type="submit" name="status" value="yes" class="hero-cta">Save your seat →</button>
          </>
        )}
      </form>
    </footer>
  </article>
) : (
  <article class="hero hero--empty">
    <p class="hero-empty"><em>Nothing scheduled yet — when we have something, you'll be the first to know.</em></p>
  </article>
)}

<style>
  .hero {
    background: var(--ink);
    color: var(--on-ink);
    border-radius: 14px;
    padding: 32px 36px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .hero-top {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 32px;
    align-items: start;
  }

  /* ── Date column ─────────────────────────────────────────────── */
  .hero-date {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .hero-weekday {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-ink-muted);
  }
  .hero-day {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 88px;
    line-height: 0.85;
    color: var(--on-ink);
  }
  .hero-month-time {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-ink-muted);
  }

  /* ── Mid column ──────────────────────────────────────────────── */
  .hero-mid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .hero-eyebrow {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-ink-muted);
    margin: 0;
  }
  .hero-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.15;
    color: var(--on-ink);
    margin: 0;
  }
  .hero-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--on-ink-body);
    margin: 0;
    max-width: 380px;
  }
  .hero-location {
    font-size: 12px;
    color: var(--on-ink-muted);
    margin: 0;
  }

  /* ── Right meta column ───────────────────────────────────────── */
  .hero-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 140px;
  }
  .hero-duration {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-ink-muted);
    text-align: right;
    margin: 0;
  }
  .hero-attendees {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }
  .hero-attendee {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
  }
  .hero-attendee-name {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--on-ink-muted);
  }
  .hero-attendee-overflow {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 252, 247, 0.15);
    color: var(--on-ink);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Bottom strip ────────────────────────────────────────────── */
  .hero-foot {
    border-top: 0.5px solid var(--ink-divider);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .hero-status {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-ink-muted);
    margin: 0;
  }

  .hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .hero-decline {
    background: none;
    border: none;
    color: var(--on-ink-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
  }
  .hero-decline:hover { color: var(--on-ink); }

  .hero-cta {
    background: var(--on-ink);
    color: var(--ink);
    border: none;
    padding: 9px 22px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }
  .hero-cta:hover { opacity: 0.88; }

  .hero-confirmed {
    color: var(--on-ink);
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 9px 22px;
    border: 0.5px solid rgba(255, 252, 247, 0.3);
    border-radius: 999px;
  }
  .hero-change {
    background: transparent;
    border: none;
    color: var(--on-ink-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: underline;
  }
  .hero-change:hover { color: var(--on-ink); }

  /* ── Empty state ─────────────────────────────────────────────── */
  .hero--empty {
    align-items: flex-start;
    min-height: 200px;
    justify-content: center;
  }
  .hero-empty {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--on-ink-body);
    margin: 0;
    max-width: 32rem;
  }
  .hero-empty em { font-style: italic; }

  /* ── Responsive ───────────────────────────────────────────────── */
  @media (max-width: 880px) {
    .hero-top { grid-template-columns: 1fr; }
    .hero-meta { align-items: flex-start; }
    .hero-duration, .hero-attendee { justify-content: flex-start; }
  }
</style>
