<template>
  <div class="riso-modern-home">
    <!-- Hero Section: Card Principali -->
    <section class="hero-cards">
      <!-- Card Annunci -->
      <div
        class="hero-card gradient-primary"
        @click="openAnnunciDialog"
      >
        <q-icon
          name="campaign"
          size="2.5rem"
        />
        <span class="card-title">Annunci</span>
        <span class="card-subtitle">Beni, Servizi, Ospitalità</span>
      </div>

      <!-- Card Circuiti RIS -->
      <div
        class="hero-card gradient-success"
        @click="goToCircuits"
      >
        <q-icon
          name="fas fa-coins"
          size="2.5rem"
        />
        <span class="card-title">Circuiti RIS</span>
        <span class="card-subtitle">Gestisci i tuoi RIS</span>
      </div>

      <!-- Card Eventi -->
      <div
        class="hero-card gradient-accent"
        @click="goToEvents"
      >
        <q-icon
          name="event"
          size="2.5rem"
        />
        <span class="card-title">Eventi</span>
        <span class="card-subtitle">{{ upcomingEventsCount }} prossimi</span>
      </div>

      <!-- Card Profilo -->
      <div
        class="hero-card gradient-orange"
        @click="goToProfile"
      >
        <q-icon
          name="account_circle"
          size="2.5rem"
        />
        <span class="card-title">Il mio Profilo</span>
        <span class="card-subtitle text-italic">({{ userStore.my.username }})</span>
      </div>
    </section>

    <!-- Azioni RIS -->
    <section class="ris-actions-section">
      <div class="ris-actions-grid">
        <q-btn
          unelevated
          rounded
          class="ris-action-btn send-btn"
          icon="arrow_upward"
          label="Invia RIS"
          @click="sendRIS"
        />
        <q-btn
          unelevated
          rounded
          class="ris-action-btn receive-btn"
          icon="arrow_downward"
          label="Ricevi RIS"
          @click="receiveRIS"
        />
      </div>
    </section>

    <!-- Wallet Card Dettagliata con 2 Circuiti -->
    <section class="wallet-section">
      <div class="wallet-card">
        <div class="wallet-header">
          <h2 class="section-title-white">
            <q-icon name="fas fa-coins" />
            I Tuoi Scambi in RIS
          </h2>
          <q-btn
            flat
            dense
            round
            icon="refresh"
            text-color="white"
            @click="refreshWallet"
          />
        </div>

        <!-- Saldi Entrambi Circuiti -->
        <div class="circuits-balance-overview">
          <div class="circuit-balance-mini">
            <CRISBalanceBar
              :current-balance="circuits.provinciale.realBalance"
              :min-limit="circuits.provinciale.trustLimit"
              :max-limit="circuits.provinciale.maxAccumulation"
              :label="circuits.provinciale.title"
              small
            />
          </div>
          <div class="circuit-balance-mini">
            <CRISBalanceBar
              :current-balance="circuits.italia.realBalance"
              :min-limit="circuits.italia.trustLimit"
              :max-limit="circuits.italia.maxAccumulation"
              :label="circuits.italia.title"
              small
            />
          </div>
        </div>

        <!-- Selettore Circuito -->
        <div class="circuit-selector">
          <div class="selector-label">
            <span class="selector-emoji">👉🏻</span>
            <span class="selector-text">Seleziona il Circuito</span>
          </div>
          <q-btn-toggle
            v-model="selectedCircuit"
            dense
            no-caps
            unelevated
            rounded
            toggle-color="white"
            toggle-text-color="primary"
            :options="[
              { label: 'RIS Provinciale', value: 'provinciale' },
              { label: 'RIS Italia', value: 'italia' },
            ]"
            class="circuit-toggle"
          />
        </div>

        <!-- Statistiche transazioni del circuito selezionato -->
        <div class="wallet-transactions">
          <div class="transaction-stat total">
            <q-icon
              name="repeat"
              size="sm"
            />
            <span class="stat-number">{{ currentCircuitData.totalTransactions }}</span>
            <span class="stat-label">Transazioni</span>
          </div>
          <div class="transaction-stat members">
            <q-icon
              name="people"
              size="sm"
            />
            <span class="stat-number">{{ currentCircuitData.uniqueMembers }}</span>
            <span class="stat-label">Membri coinvolti</span>
          </div>
          <div class="transaction-stat sent">
            <q-icon
              name="arrow_upward"
              size="sm"
            />
            <span class="stat-number">{{ currentCircuitData.sentCount }}</span>
            <span class="stat-label">Inviate</span>
          </div>
          <div class="transaction-stat received">
            <q-icon
              name="arrow_downward"
              size="sm"
            />
            <span class="stat-number">{{ currentCircuitData.receivedCount }}</span>
            <span class="stat-label">Ricevute</span>
          </div>
        </div>

        <!-- Saldi compatti circuito selezionato -->
        <div class="wallet-balances-compact">
          <CRISBalanceBar
            :current-balance="currentCircuitData.realBalance"
            :min-limit="currentCircuitData.trustLimit"
            :max-limit="currentCircuitData.maxAccumulation"
            :label="currentCircuitData.title"
          />
        </div>

        <!-- Ultime 3 transazioni del circuito selezionato -->
        <!-- SOSTITUISCI la sezione recent-transactions -->

        <div class="recent-transactions">
          <div class="transactions-header">
            <h4 class="transactions-title">Ultimi Scambi</h4>
            <q-btn-toggle
              v-model="transactionsView"
              dense
              no-caps
              unelevated
              rounded
              size="md"
              toggle-color="primary"
              :options="[
                { label: 'Personali', value: 'mine' },
                { label: 'Della Community', value: 'all' },
              ]"
            />
          </div>

          <!-- Tue Transazioni -->
          <div
            v-if="transactionsView === 'mine'"
            class="transaction-list"
          >
            <div
              v-for="(tx, idx) in currentCircuitData.recentTransactions.slice(0, 3)"
              :key="idx"
              class="transaction-item"
              @click="openTransaction(tx)"
            >
              <q-avatar
                size="32px"
                :color="tx.amount > 0 ? 'positive' : 'negative'"
                text-color="white"
              >
                {{ tx.userInitial }}
              </q-avatar>
              <div class="transaction-content">
                <span class="transaction-desc">{{ tx.description }}</span>
                <span class="transaction-time">{{ tx.time }}</span>
              </div>
              <span
                :class="['transaction-amount', tx.amount > 0 ? 'positive' : 'negative']"
              >
                {{ tx.amount > 0 ? '+' : '' }}{{ tx.amount }}
              </span>
            </div>
          </div>

          <!-- Transazioni Community -->
          <div
            v-if="transactionsView === 'all'"
            class="transaction-list"
          >
            <div
              v-for="(tx, idx) in allTransactions.slice(0, 3)"
              :key="idx"
              class="transaction-item"
              @click="openTransaction(tx)"
            >
              <div class="transaction-users">
                <q-avatar
                  size="28px"
                  color="primary"
                  text-color="white"
                >
                  {{ tx.fromInitial }}
                </q-avatar>
                <q-icon
                  name="arrow_forward"
                  size="xs"
                  color="grey-6"
                />
                <q-avatar
                  size="28px"
                  color="secondary"
                  text-color="white"
                >
                  {{ tx.toInitial }}
                </q-avatar>
              </div>
              <div class="transaction-content">
                <span class="transaction-desc">{{ tx.fromName }} → {{ tx.toName }}</span>
                <span class="transaction-time">{{ tx.time }}</span>
              </div>
              <span class="transaction-amount community">
                {{ tx.amount > 0 ? '+' : '' }}{{ tx.amount }}
              </span>
            </div>
          </div>
        </div>

        <!-- Focus su attività di scambio -->
        <q-btn
          unelevated
          rounded
          class="wallet-detail-btn"
          label="Dettaglio Transazioni"
          icon-right="arrow_forward"
          @click="goToTransactions"
        />
      </div>
      <div
        v-if="showBannScambio"
        class="avviso-card"
      >
        <div class="wallet-activity-focus">
          <q-btn
            flat
            dense
            round
            icon="close"
            class="close-btn"
            @click="
              showBannScambio = false;
              tools.setCookie('bann_scambio', '0');
            "
          />
          <div class="activity-message">
            <q-icon
              name="people_outline"
              size="lg"
            />
            <span class="activity-text"
              >Continua a scambiare con più persone per far crescere la tua
              comunità!</span
            >
          </div>
        </div>
      </div>
    </section>
    <!-- Prossimi Eventi -->
    <section
      v-if="hasEvents"
      class="content-section"
    >
      <div class="section-header">
        <h2 class="section-title">
          <q-icon name="event" />
          Prossimi Eventi
        </h2>
        <q-btn
          flat
          dense
          round
          icon="arrow_forward"
          @click="goToAllEvents"
        />
      </div>

      <div
        v-for="(event, idx) in recentEvents"
        :key="idx"
        class="event-card"
        @click="openEvent(event)"
      >
        <q-img
          :src="event.image || '/images/event-placeholder.png'"
          class="event-image"
          ratio="1"
        >
          <template
            v-if="!event.image"
            v-slot:error
          >
            <div class="event-image-placeholder">
              <q-icon
                name="event"
                size="2rem"
                color="grey-5"
              />
            </div>
          </template>
        </q-img>
        <div class="event-date">
          <span class="event-day">{{ event.day }}</span>
          <span class="event-month">{{ event.month }}</span>
        </div>
        <div class="event-info">
          <span class="event-title">{{ event.title }}</span>
          <span class="event-location">{{ event.location }}</span>
        </div>
        <q-icon name="chevron_right" />
      </div>
    </section>

    <!-- Organizzazioni -->
    <section
      v-if="hasOrganizations"
      class="content-section"
    >
      <div class="section-header">
        <h2 class="section-title">
          <q-icon name="fas fa-users" />
          Organizzazioni
        </h2>
        <q-btn
          flat
          dense
          round
          icon="arrow_forward"
          @click="goToAllOrganizations"
        />
      </div>

      <div class="org-scroll">
        <div
          v-for="(org, idx) in organizations.slice(0, 10)"
          :key="idx"
          class="org-card-scroll"
          @click="openOrganization(org)"
        >
          <q-avatar
            size="50px"
            color="blue-6"
            text-color="white"
          >
            {{ org.initial }}
          </q-avatar>
          <span class="org-name">{{ org.name }}</span>
          <span class="org-members">{{ org.membersCount }} membri</span>
        </div>
      </div>
    </section>

    <!-- Circuiti RIS Overview -->
    <!--<section class="circuits-overview-section">
      <div class="section-header">
        <h2 class="section-title">
          <q-icon name="account_balance" />
          Circuiti RIS
        </h2>
      </div>

      <div class="circuits-cards">
        <div class="circuit-info-card">
          <q-icon
            name="check_circle"
            color="positive"
            size="lg"
          />
          <span class="circuit-stat-number">{{ activeCircuitsCount }}</span>
          <span class="circuit-stat-label">Circuiti Attivi</span>
        </div>
        <div class="circuit-info-card">
          <q-icon
            name="public"
            color="primary"
            size="lg"
          />
          <span class="circuit-stat-number">{{ totalCircuitsAvailable }}</span>
          <span class="circuit-stat-label">Circuiti Disponibili</span>
        </div>
      </div>

      <q-btn
        unelevated
        rounded
        class="view-all-btn"
        label="Esplora tutti i Circuiti"
        icon-right="arrow_forward"
        color="primary"
        @click="goToAllCircuits"
      />
    </section>
    -->

    <!-- Community Actions -->
    <section class="community-actions-section">
      <h2 class="section-title">
        <q-icon name="people" />
        Community
      </h2>

      <div class="invite-banner">
        <div class="invite-message">
          <q-icon
            name="campaign"
            size="md"
            color="positive"
          />
          <div class="invite-text">
            <span class="invite-main"
              >Aiuta la community a crescere, parla di RISO ed invita le persone alla
              App</span
            >
            <span class="invite-count"
              >Hai già inviato <strong>{{ invitesSent }}</strong> inviti</span
            >
          </div>
        </div>
      </div>

      <div class="community-actions-grid">
        <q-btn
          unelevated
          rounded
          class="community-action-btn"
          icon="person_add"
          label="Invita Amici"
          color="positive"
          @click="inviteFriend"
        />
        <q-btn
          unelevated
          rounded
          class="community-action-btn"
          icon="list"
          label="Lista Iscritti"
          color="info"
          @click="showMembers"
        />
      </div>
    </section>


    <!-- Attività Community
    <section class="community-section">
      <div class="community-card">
        <div class="community-header">
          <h3 class="community-title">
            <q-icon name="handshake" />
            Strette di Mano
          </h3>
          <q-btn-toggle
            v-model="handshakesView"
            dense
            no-caps
            unelevated
            rounded
            size="sm"
            toggle-color="primary"
            :options="[
              { label: 'Tue', value: 'mine' },
              { label: 'Generali', value: 'all' },
            ]"
          />
        </div>

        <div
          v-if="handshakesView === 'mine'"
          class="activity-list"
        >
          <div
            v-for="(handshake, idx) in myHandshakes.slice(0, 5)"
            :key="idx"
            class="activity-item"
            @click="openHandshake(handshake)"
          >
            <q-avatar
              size="40px"
              color="purple-6"
              text-color="white"
            >
              {{ handshake.userInitial }}
            </q-avatar>
            <div class="activity-content">
              <span class="activity-title">{{ handshake.name }}</span>
              <span class="activity-time">Stretta di mano {{ handshake.time }}</span>
            </div>
            <q-icon
              name="handshake"
              color="purple-6"
            />
          </div>
        </div>

        <div
          v-if="handshakesView === 'all'"
          class="activity-list"
        >
          <div
            v-for="(handshake, idx) in allHandshakes.slice(0, 5)"
            :key="idx"
            class="activity-item"
            @click="openHandshake(handshake)"
          >
            <div class="handshake-avatars">
              <q-avatar
                size="32px"
                color="purple-6"
                text-color="white"
              >
                {{ handshake.user1Initial }}
              </q-avatar>
              <q-avatar
                size="32px"
                color="purple-4"
                text-color="white"
                class="avatar-overlap"
              >
                {{ handshake.user2Initial }}
              </q-avatar>
            </div>
            <div class="activity-content">
              <span class="activity-title"
                >{{ handshake.user1Name }} e {{ handshake.user2Name }}</span
              >
              <span class="activity-time">{{ handshake.time }}</span>
            </div>
            <q-icon
              name="handshake"
              color="purple-6"
            />
          </div>
        </div>
      </div>
      -->

      <!-- Ultimi Scambi -->
      <!--<div class="community-card">
        <div class="community-header">
          <h3 class="community-title">
            <q-icon name="swap_horiz" />
            Ultimi Scambi
          </h3>
          <q-btn
            flat
            dense
            round
            icon="arrow_forward"
            @click="goToAllTrades"
          />
        </div>
        <div class="activity-list">
          <div
            v-for="(trade, idx) in recentTrades.slice(0, 3)"
            :key="idx"
            class="activity-item"
            @click="openTrade(trade)"
          >
            <q-avatar
              size="40px"
              color="primary"
              text-color="white"
            >
              {{ trade.userInitial }}
            </q-avatar>
            <div class="activity-content">
              <span class="activity-title">{{ trade.description }}</span>
              <span class="activity-time">{{ trade.time }}</span>
            </div>
            <div class="activity-amount">
              <span :class="trade.amount > 0 ? 'positive' : 'negative'">
                {{ trade.amount > 0 ? '+' : '' }}{{ trade.amount }} RIS
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>-->

    <!-- Canali Telegram -->
    <!--<section
      v-if="hasTelegramLinks"
      class="content-section"
    >
      <div class="section-header">
        <h2 class="section-title">
          <q-icon name="telegram" />
          Unisciti ai Canali
        </h2>
      </div>

      <div class="telegram-grid-modern">
        <a
          v-for="(link, idx) in telegramLinks.slice(0, 3)"
          :key="idx"
          :href="link.url"
          target="_blank"
          class="telegram-card-modern"
        >
          <q-img
            v-if="link.image"
            :src="link.image"
            class="telegram-card-image"
            ratio="16/9"
          >
            <div class="telegram-overlay">
              <q-icon
                name="telegram"
                size="3rem"
                color="white"
              />
            </div>
          </q-img>
          <div
            v-else
            class="telegram-icon-wrapper"
          >
            <q-icon
              name="telegram"
              size="3rem"
              color="white"
            />
          </div>
          <div class="telegram-content-modern">
            <span class="telegram-title">{{ link.title }}</span>
            <q-icon
              name="open_in_new"
              size="sm"
            />
          </div>
        </a>
      </div>
    </section>
    -->

    <!-- Footer Links -->
    <section class="footer-section-modern">
      <q-btn
        unelevated
        rounded
        class="footer-btn-modern"
        icon="help_outline"
        label="FAQ"
        color="primary"
        @click="openFAQ"
      />
      <q-btn
        unelevated
        rounded
        class="footer-btn-modern"
        icon="school"
        label="Guida"
        color="secondary"
        @click="openGuide"
      />
      <q-btn
        unelevated
        rounded
        class="footer-btn-modern"
        icon="support_agent"
        label="Assistenza"
        color="positive"
        @click="openInfo"
      />
    </section>

    <!-- Dialog Annunci -->
    <q-dialog
      v-model="showAnnunciDialog"
      transition-show="slide-up"
      transition-hide="slide-down"
    >
      <q-card class="annunci-dialog">
        <q-card-section class="dialog-header">
          <h3 class="dialog-title">Scegli Categoria</h3>
          <q-btn
            flat
            round
            dense
            icon="close"
            v-close-popup
          />
        </q-card-section>

        <q-card-section class="dialog-content">
          <div class="annunci-options-mobile">
            <div
              class="annuncio-option gradient-indigo"
              @click="goToGoods"
            >
              <q-icon
                name="fas fa-tshirt"
                size="2.5rem"
              />
              <span class="option-title">Beni</span>
              <span class="option-subtitle">Autoproduzioni, cibo</span>
            </div>

            <div
              class="annuncio-option gradient-red"
              @click="goToServices"
            >
              <q-icon
                name="fas fa-house-user"
                size="2.5rem"
              />
              <span class="option-title">Servizi</span>
              <span class="option-subtitle">Competenze, aiuti</span>
            </div>

            <div
              class="annuncio-option gradient-lime"
              @click="goToHospitality"
            >
              <q-icon
                name="fas fa-bed"
                size="2.5rem"
              />
              <span class="option-title">Ospitalità</span>
              <span class="option-subtitle">Ospitare viaggiatori</span>
            </div>

            <div
              class="annuncio-option gradient-teal"
            >
              <q-icon
                name="directions_car"
                size="2.5rem"
              />
              <span class="option-title">Trasporti</span>
              <span class="option-subtitle">Condivisione viaggi</span>
              <span class="option-subtitle">⚠️ (IN ARRIVO...)</span>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

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

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