<template>
  <div
    v-if="site.confpages?.enableReg"
    class="registration-container"
  >
    <!-- Bottone Iniziale -->
    <div
      v-if="!start"
      class="start-button-wrapper"
    >
      <q-btn
        unelevated
        size="lg"
        color="primary"
        icon="person_add"
        @click="buttRegistrati()"
        :label="$t('reg.submit')"
        class="start-btn"
      />
    </div>

    <!-- Carousel Registrazione -->
    <q-card
      v-if="start"
      class="registration-card"
    >
      <q-carousel
        v-model="slide"
        transition-prev="slide-right"
        transition-next="slide-left"
        animated
        swipeable
        class="modern-carousel"
        :height="isMobile ? 'auto' : '500px'"
      >
        <!-- Slide 1: Hai un Invitante? -->
        <q-carousel-slide
          name="start"
          class="carousel-slide"
        >
          <div class="slide-content">
            <div class="slide-icon-wrapper">
              <q-icon
                name="person_add"
                size="64px"
                color="primary"
              />
            </div>

            <h2 class="slide-title">{{ t('reg.invitante') }}</h2>

            <div class="action-buttons">
              <q-btn
                unelevated
                size="lg"
                color="positive"
                icon="check"
                @click="
                  listlinksreg.length > 0 ? (slide = 'sceglilink') : (slide = 'second');
                  noInvited = false;
                  chooseReg = true;
                "
                :label="$t('dialog.yes')"
                class="action-btn yes-btn"
              />

              <q-btn
                unelevated
                size="lg"
                color="negative"
                icon="close"
                @click="
                  slide = 'second';
                  noInvited = true;
                  chooseReg = false;
                "
                :label="$t('dialog.no')"
                class="action-btn no-btn"
              />
            </div>
          </div>
        </q-carousel-slide>

        <!-- Slide 2: Scegli Link (se disponibile) -->
        <q-carousel-slide
          name="sceglilink"
          class="carousel-slide"
        >
          <div class="slide-content">
            <h2 class="slide-title">{{ t('reg.title_reg_con_link') }}</h2>

            <div class="links-list">
              <div
                v-for="(rec, i) in listlinksreg"
                :key="i"
                class="link-item"
              >
                <CMyUser
                  :mycontact="rec"
                  :visu="costanti.FIND_PEOPLE"
                  @setCmd="tools.setCmd"
                  :actionType="actionType"
                  :hideellipses="true"
                />
              </div>

              <div class="custom-link">
                <a
                  href="/registrati"
                  target="_blank"
                  class="custom-link-text"
                >
                  <q-icon
                    name="arrow_forward"
                    size="20px"
                  />
                  {{ t('reg.scelgo_l_invitante') }}
                </a>
              </div>
            </div>

            <q-btn
              flat
              color="grey-7"
              icon="arrow_back"
              @click="slide = 'start'"
              :label="$t('dialog.indietro')"
              class="back-btn"
            />
          </div>
        </q-carousel-slide>

        <!-- Slide 3: Scelta Registrazione -->
        <q-carousel-slide
          name="second"
          class="carousel-slide"
        >
          <div class="slide-content">
            <!-- Caso: Non Invitato -->
            <div
              v-if="noInvited"
              class="no-invited-content"
            >
              <div class="slide-icon-wrapper">
                <q-icon
                  name="info"
                  size="56px"
                  color="info"
                />
              </div>

              <h2 class="slide-title">Se ancora non sei stato invitato:</h2>

              <div class="instructions">
                <div class="instruction-item">
                  <div class="instruction-number">1</div>
                  <div class="instruction-content">
                    <p>Entra nei gruppi Territoriali su Telegram</p>
                    <q-btn
                      unelevated
                      color="positive"
                      icon="fab fa-telegram"
                      href="https://t.me/riso_canale/3"
                      target="_blank"
                      label="Progetto RISO"
                      class="telegram-btn"
                    />
                  </div>
                </div>

                <div class="instruction-item">
                  <div class="instruction-number">2</div>
                  <div class="instruction-content">
                    <p>
                      Sul post del canale fissato in alto, troverai tutte le info sul
                      progetto e su come entrare nel gruppo della tua provincia.
                    </p>
                    <p class="instruction-note">
                      Potrai così richiedere il link una volta entrato nella chat di
                      gruppo.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <!-- Caso: Con Invitante -->
            <div
              v-else-if="chooseReg"
              class="with-invited-content"
            >
              <div class="flex justify-center">
                <logo
                  class="signup-logo "
                  mystyle="width: 50px !important; height: 50px !important;"
                />
              </div>

              <!-- Multi Choice: Telegram vs Email -->
              <div
                v-if="site.confpages?.enableRegMultiChoice"
                class="registration-options"
              >
                <q-btn
                  unelevated
                  size="lg"
                  color="primary"
                  icon="fab fa-telegram"
                  type="a"
                  :href="invited ? tools.getLinkBotTelegram(invited, regexpire) : `/bot`"
                  :label="$t('reg.bytelegram')"
                  class="option-btn telegram-option"
                >
                  <q-badge
                    color="positive"
                    floating
                    class="recommended-badge"
                  >
                    Consigliato
                  </q-badge>
                </q-btn>

                <div class="divider">
                  <span>oppure</span>
                </div>

                <q-btn
                  outline
                  size="lg"
                  color="primary"
                  icon="email"
                  @click="regEventEmail"
                  :label="$t('reg.byemail')"
                  class="option-btn email-option"
                />
              </div>

              <!-- Single Choice: Solo Registrati -->
              <div
                v-else
                class="single-registration"
              >
                <p class="registration-text">Registrati</p>
                <q-btn
                  unelevated
                  size="lg"
                  color="primary"
                  icon="person_add"
                  @click="clickToRegister"
                  :label="$t('reg.submit')"
                  class="register-btn"
                />
              </div>
            </div>
          </div>
        </q-carousel-slide>
      </q-carousel>

      <!-- Navigation Indicators -->
      <div
        v-if="start"
        class="navigation-dots"
      >
        <div
          v-for="(s, i) in ['start', 'sceglilink', 'second']"
          :key="i"
          class="nav-dot"
          :class="{ active: slide === s, visible: shouldShowDot(s) }"
          @click="slide = s"
        ></div>
      </div>
    </q-card>
  </div>
</template>

<script lang="ts" src="./CRegistration.ts"></script>
<style lang="scss" scoped>
@import './CRegistration.scss';
</style>
