<template>
  <q-page class="circuit-activation-page">
    <div class="circuit-container">
      <!-- Header con gradient -->
      <div class="circuit-header">
        <div class="header-content">
          <q-img
            src="/images/1ris_rosso_100.png"
            width="64px"
            class="header-icon"
          />
          <h4 class="header-title">
            {{ t('reg.title_abilita_circuito') }}
          </h4>
          <p class="header-subtitle">
            Abilitazione fiducia del <strong>{{ circuitName }}</strong>
          </p>
        </div>
      </div>

      <!-- Loading state -->
      <transition
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
        mode="out-in"
      >
        <div v-if="isLoading" class="loading-state">
          <q-spinner-dots color="primary" size="50px" />
          <p class="loading-text">
            Elaborazione in corso...
          </p>
        </div>

        <!-- Result card -->
        <q-card v-else class="result-card" flat bordered>
          <!-- Already activated warning -->
          <q-card-section
            v-if="giaammesso()"
            class="warning-section"
          >
            <div class="status-content">
              <q-icon name="warning" size="48px" />
              <div class="status-text">
                <div class="status-title">Attenzione</div>
                <div class="status-message" v-html="risultato"></div>
              </div>
            </div>
          </q-card-section>

          <!-- Success message -->
          <q-card-section
            v-else-if="abilitaok()"
            class="success-section"
          >
            <div class="status-content">
              <q-icon name="check_circle" size="48px" />
              <div class="status-text">
                <div class="status-title">Circuito Abilitato</div>
                <div class="status-message" v-html="risultato"></div>
              </div>
            </div>
          </q-card-section>

          <!-- Actions -->
          <q-card-actions align="center" class="actions-section">
            <q-btn
              v-if="abilitaok()"
              label="Visualizza Profilo"
              color="primary"
              unelevated
              icon="person"
              @click="goToProfile"
              class="action-btn-primary"
            />
            <q-btn
              label="Torna alla Home"
              color="primary"
              outline
              @click="goHome"
              class="action-btn-outline"
            />
          </q-card-actions>
        </q-card>
      </transition>

      <!-- Info card -->
      <q-card flat bordered class="info-card">
        <q-card-section class="info-section">
          <div class="info-content">
            <q-icon name="info" color="primary" size="24px" />
            <div class="info-text">
              L'attivazione del circuito verrà notificata via email
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

<script lang="ts" src="./abilitacircuito.ts">
</script>

<style lang="scss" scoped>
    @import './abilitacircuito.scss';
</style>
