---
import { localeHref } from '../../i18n/paths';
import Base from '../../layouts/Base.astro';
import MemberCard from '../MemberCard.astro';
import { useTranslations, type Lang } from '../../i18n/ui';
import { getCommunity } from '../../lib/atproto/home';
import { getScope } from '../../config/scopes';

const { lang } = Astro.props as { lang: Lang };
const t = useTranslations(lang);
const { members } = await getCommunity();
const loginHref = localeHref(lang, '/login');
const buildersHref = localeHref(lang, '/builders');

// The .eu aggregate has no country of its own, so it can't auto-join: it lets the member pick which
// of the communities we run they belong to (one or more). .eu is English-only, so these are inline.
const scope = getScope(import.meta.env.PUBLIC_SITE_SCOPE);
const pickCountries = [
  { cc: 'nl', name: 'Netherlands' },
  { cc: 'be', name: 'Belgium' },
  { cc: 'no', name: 'Norway' },
];
---

<Base lang={lang} title={t('members.heading')}>
  <section class="hero">
    <h1 class="display page-title">{t('members.heading')}</h1>
    <p>{t('members.subtitle')}</p>
  </section>

  <section class="section members-info">
    <div
      class="info-card"
      id="membership-card"
      data-label-member={t('members.member.yes')}
      data-label-leave={t('members.member.leave')}
      data-label-join={t('members.member.join')}
      data-pick-prompt="Pick at least one country to join.">
      <h2>{t('members.join.h')}</h2>
      <p class="membership-signedout">{t('members.join')}</p>
      <a class="btn ghost membership-signedout" href={loginHref}>{t('members.join.cta')}</a>
      {scope.aggregate && (
        <fieldset class="membership-picker" hidden>
          <legend>Which community are you part of? You can pick more than one.</legend>
          {pickCountries.map((c) => (
            <label class="membership-cc">
              <input type="checkbox" name="member-cc" value={c.cc} /> {c.name}
            </label>
          ))}
        </fieldset>
      )}
      <p class="membership-status" hidden></p>
      <button class="btn ghost membership-toggle" type="button" hidden></button>
    </div>
    <div class="info-card">
      <h2>{t('members.hire.h')}</h2>
      <p>{t('members.hire')}</p>
      <a class="btn ghost" href={buildersHref}>{t('members.hire.cta')}</a>
    </div>
  </section>

  <section class="section">
    <div class="member-grid">
      {members.map((m) => <MemberCard member={m} lang={lang} />)}
    </div>
  </section>
</Base>

<style>
  .membership-picker {
    border: 1px solid var(--line, rgba(128, 128, 128, 0.3));
    border-radius: 8px;
    padding: 0.75rem 1rem 1rem;
    margin: 0.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .membership-picker legend {
    padding: 0 0.4rem;
    font-size: 0.9rem;
    opacity: 0.85;
  }
  .membership-cc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }
</style>