---
import type { Event, EventPageEntry } from "../data/events";
import {
  barcampParticipants,
  barcampProposalDocUrl,
  barcampRegistrationUrl,
  barcampTracks,
  getBarcampTrackScheduleGroups,
} from "../data/barcamp";
import { getEventBasePath } from "../data/events";
import { getEventNavItems } from "../data/eventNav";
import SiteLayout from "../layouts/SiteLayout.astro";

type Props = {
  event: Event;
  pageEntry?: EventPageEntry;
};

const { event } = Astro.props;
const basePath = getEventBasePath(event);
const pageEntry = Astro.props.pageEntry ?? {
  id: "overview",
  label: "Overview",
  href: basePath,
  type: "overview",
};
const eventTitle = event.shortTitle ?? event.title;
const isOverview = pageEntry.type === "overview";
const pageTitle = isOverview ? eventTitle : `${pageEntry.label} - ${eventTitle}`;
const navItems = getEventNavItems(event);
const trackScheduleGroups = {
  "track-a": getBarcampTrackScheduleGroups("track-a"),
  "track-b": getBarcampTrackScheduleGroups("track-b"),
};
---

<SiteLayout
  title={pageTitle}
  description={event.summary}
  theme="barcamp"
  brandHref={basePath}
  brandTitle={eventTitle}
  brandSubtitle="Event home"
  navItems={navItems}
>
  {isOverview ? (
    <section class="barcamp-hero">
      <div class="barcamp-hero__copy">
        <p class="eyebrow">Unconference / July 18, 2026</p>
        <h1>Barcamp 2026</h1>
        <p class="lede">
          A participant-led day at IIT Gandhinagar for short talks, demos, open discussions,
          workshops, questions, experiments, and useful hallway conversations.
        </p>
        <div class="hero-actions">
          <a class="button button--barcamp" href={barcampRegistrationUrl}>Register for Barcamp 2026</a>
          <a class="button button--secondary" href={`${basePath}schedule/`}>View schedule</a>
        </div>
      </div>
      <div
        class="barcamp-board"
        aria-hidden="true"
      >
        <span class="barcamp-board__rail"></span>
        <span class="barcamp-board__card barcamp-board__card--one">Track A</span>
        <span class="barcamp-board__card barcamp-board__card--two">Track B</span>
        <span class="barcamp-board__card barcamp-board__card--three">Demos</span>
        <span class="barcamp-board__card barcamp-board__card--four">BoF</span>
        <span class="barcamp-board__pin barcamp-board__pin--one"></span>
        <span class="barcamp-board__pin barcamp-board__pin--two"></span>
      </div>
    </section>
  ) : (
    <section class="event-page-heading event-page-heading--barcamp">
      <nav class="event-breadcrumb" aria-label="Event breadcrumb">
        <a class="event-breadcrumb__event" href={basePath}>{eventTitle}</a>
        <span aria-hidden="true">/</span>
        <span>{pageEntry.label}</span>
      </nav>
      <h1>{pageEntry.label}</h1>
    </section>
  )}

  {isOverview && (
    <div class="barcamp-page">
      <section class="barcamp-facts" aria-label="Event facts">
        <dl>
          <div>
            <dt>Date</dt>
            <dd>July 18, 2026</dd>
          </div>
          <div>
            <dt>Time</dt>
            <dd>9:30 AM - 6:00 PM</dd>
          </div>
          <div>
            <dt>Venue</dt>
            <dd>AB 7/101-104</dd>
          </div>
          <div>
            <dt>Registration</dt>
            <dd>Open until July 14</dd>
          </div>
        </dl>
      </section>

      <section class="barcamp-section barcamp-section--intro">
        <div>
          <p class="eyebrow">What is a Barcamp?</p>
          <h2>The room makes the program.</h2>
        </div>
        <div class="barcamp-section__copy">
          <p>
            A Barcamp is an open, participatory unconference. Instead of arriving to a
            fully fixed speaker list, participants help create the agenda by proposing
            sessions, joining conversations, and moving toward the rooms where they can
            learn or contribute the most.
          </p>
          <p>
            Sessions can be talks, demos, teach-ins, open discussions, problem clinics,
            reading circles, or small workshops. The common thread is simple: everyone
            has permission to shape the day.
          </p>
        </div>
      </section>

      <section class="barcamp-card-grid" aria-label="Barcamp format">
        <article>
          <span aria-hidden="true">01</span>
          <h3>Propose a session</h3>
          <p>Share an idea, a question, a demo, a problem, or a work-in-progress before the event.</p>
        </article>
        <article>
          <span aria-hidden="true">02</span>
          <h3>Show up early</h3>
          <p>Time slots open in person on the day, first come first served.</p>
        </article>
        <article>
          <span aria-hidden="true">03</span>
          <h3>Move freely</h3>
          <p>Find the conversations that are useful to you, and leave room for serendipity.</p>
        </article>
      </section>

      <section class="barcamp-section">
        <div>
          <p class="eyebrow">Who should come?</p>
          <h2>Curious people with something to share.</h2>
        </div>
        <div class="barcamp-section__copy">
          <p>
            Students, researchers, teachers, builders, designers, writers, organizers,
            artists, engineers, and curious local participants are all welcome. The day
            is strongest when the room has different kinds of expertise and different
            kinds of questions.
          </p>
          <div class="barcamp-topic-strip" aria-label="Possible session themes">
            <span>computing</span>
            <span>education</span>
            <span>games</span>
            <span>math</span>
            <span>design</span>
            <span>civic tech</span>
            <span>science</span>
            <span>culture</span>
          </div>
        </div>
      </section>

      <section class="barcamp-cta">
        <div>
          <p class="eyebrow">Registration</p>
          <h2>Let us know you are coming.</h2>
          <p>
            Registration helps us plan lunch, room capacity, campus entry, and the
            participant updates for the day.
          </p>
        </div>
        <a class="button button--barcamp" href={barcampRegistrationUrl}>Register now</a>
      </section>
    </div>
  )}

  {pageEntry.id === "participants" && (
    <div class="event-shell event-shell--single barcamp-shell">
      <section class="barcamp-participants" aria-label="Participants">
        <div class="barcamp-participant-grid">
          {barcampParticipants.map((person) => (
            <article class="barcamp-participant">
              <h3>{person.name}</h3>
            </article>
          ))}
        </div>
      </section>
    </div>
  )}

  {pageEntry.id === "schedule" && (
    <div class="event-shell event-shell--single barcamp-shell">
      <section
        class="barcamp-schedule"
        data-barcamp-schedule
      >
        <div class="barcamp-schedule__head">
          <div>
            <p class="eyebrow">Schedule</p>
            <h2>Propose now. Pick slots on the day.</h2>
          </div>
          <p>
            Add session ideas to the shared proposal document before the event.
            Time slots are assigned in person on the room whiteboard, first come
            first served.
          </p>
        </div>

        <div class="barcamp-proposal-callout">
          <div>
            <h3>Have something you might want to run?</h3>
            <p>
              Put the topic and a short high-level description in the shared document
              so other participants can read it before they arrive. This is not a
              time-slot booking; the schedule stays intentionally fluid until the day.
            </p>
          </div>
          <a
            class="button button--barcamp"
            href={barcampProposalDocUrl}
            target="_blank"
            rel="noreferrer"
            aria-label="Open the Barcamp 2026 session proposal Google Doc"
          >
            Propose a session
          </a>
        </div>

        <div class="barcamp-tablist" role="tablist" aria-label="Schedule tracks">
          {barcampTracks.map((track, index) => (
            <button
              type="button"
              role="tab"
              id={`tab-${track.id}`}
              aria-controls={`panel-${track.id}`}
              aria-selected={index === 0 ? "true" : "false"}
              tabindex={index === 0 ? "0" : "-1"}
              data-track-tab={track.id}
              aria-label={`${track.label}, room ${track.room}`}
            >
              <span class="barcamp-tab-title">{track.label}</span>
              <span class="barcamp-tab-room">Room {track.room}</span>
            </button>
          ))}
        </div>

        {barcampTracks.map((track, index) => (
          <section
            class="barcamp-track-panel"
            id={`panel-${track.id}`}
            role="tabpanel"
            tabindex="0"
            aria-labelledby={`tab-${track.id}`}
            data-track-panel={track.id}
            hidden={index !== 0}
          >
            <div class="barcamp-track-panel__intro">
              <div class="barcamp-track-panel__title">
                <h3>{track.label} <span>Room {track.room}</span></h3>
              </div>
              <p>{track.description}</p>
            </div>

            {track.id === "workshops" ? (
              <div class="barcamp-workshops">
                <h3>Coming soon</h3>
                <p>
                  Workshop and birds-of-a-feather sessions will be listed here once
                  the workshop board opens. Watercooler space is in 7/104.
                </p>
              </div>
            ) : (
              <div class="barcamp-slot-groups">
                {trackScheduleGroups[track.id].map((group) => (
                  <section class="barcamp-slot-group" aria-labelledby={`${track.id}-${group.id}-heading`}>
                    <div class="barcamp-slot-group__head">
                      <h4 id={`${track.id}-${group.id}-heading`}>{group.label}</h4>
                      {group.note && <p>{group.note}</p>}
                    </div>
                    <ol class="barcamp-slot-list">
                      {group.items.map((item) => (
                        <li
                          class:list={["barcamp-slot", item.kind === "fixed" && "barcamp-slot--fixed"]}
                        >
                          <time>{item.time}</time>
                          <div class="barcamp-slot__body">
                            <h5>{item.title}</h5>
                            {item.kind === "fixed" && "note" in item && item.note && <p>{item.note}</p>}
                          </div>
                        </li>
                      ))}
                    </ol>
                  </section>
                ))}
              </div>
            )}
          </section>
        ))}
      </section>
    </div>
  )}

  {pageEntry.id === "schedule" && (
    <script is:inline>
      const scheduleRoot = document.querySelector("[data-barcamp-schedule]");

      if (scheduleRoot) {
        const tabs = Array.from(scheduleRoot.querySelectorAll("[data-track-tab]"));
        const panels = Array.from(scheduleRoot.querySelectorAll("[data-track-panel]"));

        const activateTrack = (trackId) => {
          tabs.forEach((tab) => {
            const isActive = tab.getAttribute("data-track-tab") === trackId;
            tab.setAttribute("aria-selected", isActive ? "true" : "false");
            tab.setAttribute("tabindex", isActive ? "0" : "-1");
          });

          panels.forEach((panel) => {
            panel.hidden = panel.getAttribute("data-track-panel") !== trackId;
          });
        };

        tabs.forEach((tab, index) => {
          tab.addEventListener("click", () => {
            activateTrack(tab.getAttribute("data-track-tab"));
          });

          tab.addEventListener("keydown", (event) => {
            const keyMap = {
              ArrowRight: 1,
              ArrowLeft: -1,
            };

            if (event.key === "Home" || event.key === "End" || event.key in keyMap) {
              event.preventDefault();
              const nextIndex =
                event.key === "Home"
                  ? 0
                  : event.key === "End"
                    ? tabs.length - 1
                    : (index + keyMap[event.key] + tabs.length) % tabs.length;
              const nextTab = tabs[nextIndex];
              nextTab.focus();
              activateTrack(nextTab.getAttribute("data-track-tab"));
            }
          });
        });
      }
    </script>
  )}
</SiteLayout>
