<template>
  <q-page class="invita-amico-page">
    <div class="q-pa-md">
      <q-card class="invita-amico-card">
        <!-- Header -->
        <q-card-section class="bg-primary text-white text-center">
          <div class="text-h5 q-mb-xs">
            <q-icon
              name="person_add"
              size="md"
              class="q-mr-sm"
            />
            Invita un Amico
          </div>
          <div class="text-subtitle2">Condividi la nostra app con i tuoi amici!</div>

          <!-- Stats Badge -->
          <div
            v-if="invitaStore.totaleInviti > 0"
            class="stats-badge q-mt-md"
          >
            <q-chip
              color="white"
              text-color="primary"
              icon="email"
              class="q-mx-xs"
            >
              {{ invitaStore.contatoreInvitiRiusciti }} inviati
            </q-chip>
            <!--<q-chip
              v-if="invitaStore.percentualeSuccesso > 0"
              color="white"
              text-color="primary"
              icon="trending_up"
              class="q-mx-xs"
            >
              {{ invitaStore.percentualeSuccesso }}% successo
            </q-chip>-->
          </div>
        </q-card-section>

        <q-separator />

        <!-- Form Section -->
        <q-card-section>
          <q-form
            @submit="onInviaEmail"
            class="q-gutter-md"
          >
            <!-- Email Input -->
            <q-input
              v-model="form.email"
              type="email"
              label="Email del tuo amico *"
              hint="Inserisci l'indirizzo email della persona che vuoi invitare"
              lazy-rules
              :rules="[
                (val) => !!val || 'L\'email è obbligatoria',
                (val) => invitaStore.isValidEmail(val) || 'Inserisci un\'email valida',
                (val) =>
                  !invitaStore.isEmailGiaInvitata(val) ||
                  'Email già invitata nelle ultime 24 ore',
              ]"
              outlined
              :disable="invitaStore.loading"
            >
              <template v-slot:prepend>
                <q-icon name="email" />
              </template>

              <!-- Badge se già invitata -->
              <template
                v-slot:append
                v-if="form.email && invitaStore.isEmailGiaInvitata(form.email)"
              >
                <q-icon
                  name="info"
                  color="orange"
                >
                  <q-tooltip>Già invitato nelle ultime 24h</q-tooltip>
                </q-icon>
              </template>
            </q-input>

            <!-- Messaggio Personalizzato (opzionale) -->
            <q-input
              v-model="form.messaggio"
              type="textarea"
              label="Messaggio personalizzato (opzionale)"
              hint="Aggiungi un messaggio personale al tuo invito"
              outlined
              rows="3"
              counter
              maxlength="500"
              :disable="invitaStore.loading"
            >
              <!-- Bottone per cancellare messaggio salvato -->
              <template
                v-slot:append
                v-if="form.messaggio"
              >
                <q-btn
                  flat
                  dense
                  round
                  icon="clear"
                  @click.stop="cancellaMessaggioSalvato"
                >
                  <q-tooltip>Cancella messaggio salvato</q-tooltip>
                </q-btn>
              </template>
              <template v-slot:prepend>
                <q-icon name="message" />
              </template>
            </q-input>
            <!-- Info che viene salvato -->
            <div
              v-if="form.messaggio"
              class="text-caption text-grey-6"
            >
              <q-icon
                name="info"
                size="xs"
              />
              Questo messaggio sarà riutilizzato nei prossimi inviti
            </div>

            <!-- Alert errore -->
            <q-banner
              v-if="invitaStore.error"
              class="bg-negative text-white"
              rounded
              dense
            >
              <template v-slot:avatar>
                <q-icon name="error" />
              </template>
              {{ invitaStore.error }}
            </q-banner>

            <!-- Bottone Invio Email -->
            <q-btn
              type="submit"
              label="Invia Invito via Email"
              icon="email"
              color="primary"
              size="lg"
              class="full-width"
              :loading="invitaStore.loading"
              :disable="invitaStore.loading || !form.email"
              unelevated
            />
          </q-form>
        </q-card-section>

        <q-separator inset />

        <!-- Sezione Telegram -->
        <q-card-section>
          <div class="text-center q-mb-md">
            <div class="text-subtitle1 text-grey-8 q-mb-xs">
              Oppure invita tramite Telegram
            </div>
            <div class="text-caption text-grey-6">
              Genera un messaggio da condividere su Telegram
            </div>
          </div>

          <q-btn
            @click="onInviaTelegram"
            label="Invia via Telegram"
            icon="telegram"
            color="blue-9"
            size="lg"
            class="full-width"
            outline
            :disable="invitaStore.loading"
          />
        </q-card-section>

        <!-- Info Section -->
        <q-card-section class="bg-blue-1">
          <div class="text-center">
            <q-icon
              name="info"
              color="primary"
              size="sm"
              class="q-mr-xs"
            />
            <span class="text-grey-8">
              Riceverai sul {{ tools.getBotName() }} il messaggio da inoltrare alla persona amica.
            </span>
          </div>
        </q-card-section>

        <!-- Cronologia Inviti (opzionale) -->
        <q-card-section v-if="invitaStore.hasCronologia && mostraCronologia">
          <div class="text-subtitle2 text-grey-8 q-mb-sm">
            <q-icon
              name="history"
              class="q-mr-xs"
            />
            Ultimi inviti
            <q-btn
              flat
              dense
              round
              icon="close"
              size="sm"
              @click="mostraCronologia = false"
              class="float-right"
            />
          </div>

          <q-list
            dense
            bordered
            separator
          >
            <q-item
              v-for="invito in invitaStore.ultimi5Inviti"
              :key="invito.id"
            >
              <q-item-section avatar>
                <q-icon
                  :name="invito.successo ? 'check_circle' : 'error'"
                  :color="invito.successo ? 'positive' : 'negative'"
                />
              </q-item-section>

              <q-item-section>
                <q-item-label>{{ invito.email }}</q-item-label>
                <q-item-label caption>
                  {{ formatDate(invito.data) }}
                  <span
                    v-if="invito.errore"
                    class="text-negative"
                  >
                    - {{ invito.errore }}
                  </span>
                </q-item-label>
              </q-item-section>

              <q-item-section side>
                <q-btn
                  flat
                  dense
                  round
                  icon="delete"
                  size="sm"
                  @click="invitaStore.rimuoviDaCronologia(invito.id)"
                />
              </q-item-section>
            </q-item>
          </q-list>

          <div class="text-center q-mt-sm">
            <q-btn
              flat
              dense
              label="Cancella cronologia"
              color="negative"
              size="sm"
              @click="confermaEliminaCronologia"
            />
          </div>
        </q-card-section>

        <!-- Bottone per mostrare cronologia -->
        <q-card-section v-if="invitaStore.hasCronologia && !mostraCronologia">
          <q-btn
            flat
            dense
            label="Mostra cronologia inviti"
            icon="history"
            color="primary"
            class="full-width"
            @click="mostraCronologia = true"
          />
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

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

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