myprojplanet_vite/src/components/InvitaAmico/InvitaAmico.ts

import { defineComponent, ref, reactive, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { useInvitaAmicoStore } from '../../stores/useInvitaAmicoStore';
import type { InvitoAmicoForm } from '../../types/invita-amico.types.ts';
import { tools } from 'app/src/store/Modules/tools';

// Chiave localStorage
const MESSAGGIO_STORAGE_KEY = 'invita-amico-messaggio-personalizzato';

export default defineComponent({
  name: 'InvitaAmico',

  emits: ['invito-inviato', 'telegram-click'],

  setup(props, { emit }) {
    // Composables
    const $q = useQuasar();
    const invitaStore = useInvitaAmicoStore();

    // State
    const mostraCronologia = ref(false);
    const form = reactive<InvitoAmicoForm & { usernameInvitante?: string }>({
      email: '',
      messaggio: '',
      usernameInvitante: '',
    });

    // ==========================================
    // METHODS
    // ==========================================

    /**
     * Invia invito via email usando lo store Pinia
     */
    const onInviaEmail = async () => {
      invitaStore.resetStato();

      if (form.messaggio) {
        localStorage.setItem(MESSAGGIO_STORAGE_KEY, form.messaggio.trim());
      }

      const result = await invitaStore.inviaInvitoEmail(
        tools.getIdApp(),
        form.email,
        form.messaggio || undefined
      );

      if (result.success) {
        $q.notify({
          type: 'positive',
          message: 'Invito inviato con successo! 🎉',
          caption: `L'email è stata inviata a ${form.email}`,
          icon: 'check_circle',
          timeout: 3000,
          actions: [
            {
              label: 'Vedi cronologia',
              color: 'white',
              handler: () => {
                mostraCronologia.value = true;
              },
            },
          ],
        });

        const sentEmail = form.email;

        form.email = '';
        form.usernameInvitante = '';

        emit('invito-inviato', result.emailInviata ? sentEmail : '');
      } else {
        $q.notify({
          type: 'negative',
          message: "Errore nell'invio dell'invito",
          caption: result.message,
          icon: 'error',
          timeout: 5000,
        });
      }
    };

    /**
     * Gestione click Telegram
     */
    const onInviaTelegram = async () => {
      emit('telegram-click');

      const success = await invitaStore.inviaInvitoTelegram(form.messaggio);

      if (success) {
        $q.notify({
          type: 'positive',
          message: 'Messaggio inviato via Telegram! ✈️',
          icon: 'telegram',
          timeout: 2000,
        });
      } else {
        $q.notify({
          type: 'negative',
          message: invitaStore.error || 'Errore invio Telegram',
          icon: 'error',
          timeout: 3000,
        });
      }
    };

    /**
     * Conferma eliminazione cronologia
     */
    const confermaEliminaCronologia = () => {
      $q.dialog({
        title: 'Conferma',
        message: 'Sei sicuro di voler cancellare tutta la cronologia degli inviti?',
        cancel: true,
        persistent: true,
      }).onOk(() => {
        invitaStore.svuotaCronologia();
        mostraCronologia.value = false;

        $q.notify({
          type: 'info',
          message: 'Cronologia cancellata',
          icon: 'delete',
          timeout: 2000,
        });
      });
    };

    /**
     * Formatta data per visualizzazione
     */
    const formatDate = (date: Date): string => {
      const now = new Date();
      const diff = now.getTime() - date.getTime();
      const minutes = Math.floor(diff / 60000);
      const hours = Math.floor(diff / 3600000);
      const days = Math.floor(diff / 86400000);

      if (minutes < 1) return 'Adesso';
      if (minutes < 60) return `${minutes} min fa`;
      if (hours < 24) return `${hours} ore fa`;
      if (days < 7) return `${days} giorni fa`;

      return date.toLocaleDateString('it-IT', {
        day: '2-digit',
        month: 'short',
        hour: '2-digit',
        minute: '2-digit',
      });
    };

    // Carica messaggio all'apertura
    onMounted(() => {
      const salvato = localStorage.getItem(MESSAGGIO_STORAGE_KEY);
      if (salvato) {
        form.messaggio = salvato;
      }
    });

    // Cancella
    const cancellaMessaggioSalvato = () => {
      localStorage.removeItem(MESSAGGIO_STORAGE_KEY);
      form.messaggio = '';
      $q.notify({ type: 'info', message: 'Messaggio cancellato' });
    };

    // RETURN
    return {
      mostraCronologia,
      form,
      onInviaEmail,
      onInviaTelegram,
      confermaEliminaCronologia,
      formatDate,
      invitaStore,
      cancellaMessaggioSalvato,
    };
  },
});