import { defineComponent, ref, computed, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { CRISBalanceBar } from '@/components/CRISBalanceBar';
import { tools } from '@tools';
import { useCircuitStore, useGlobalStore, useUserStore } from 'app/src/store';

const isTest = true; // Cambia a false in produzione

export default defineComponent({
  name: 'RisoHomeModern',
  components: { CRISBalanceBar },
  setup() {
    const $router = useRouter();

    // State
    const showAnnunciDialog = ref(false);
    const showBannScambio = ref(true);
    const walletSectionOpen = ref(false);

    const handshakesView = ref<'mine' | 'all'>('mine');

    const transactionsView = ref<'mine' | 'all'>('mine');

    // Transazioni globali community
    const allTransactions = ref<any[]>([]);

    // Dati wallet (da collegare allo store)
    const availableBalance = ref(0); // Saldo utilizzabile (include fido)
    const realBalance = ref(0); // Saldo reale effettivo
    const trustLimit = ref(-100); // Fido concesso (negativo)
    const maxAccumulation = ref(200); // Massimo accumulo
    const receivedCount = ref(0);
    const sentCount = ref(0);

    // Dati eventi (da collegare allo store)
    const upcomingEventsCount = ref(0);
    const recentEvents = ref<any[]>([
      // Esempio struttura:
      // { day: '15', month: 'DIC', title: 'Mercatino', location: 'Roma' }
    ]);

    // Dati attività (da collegare allo store)
    const recentTrades = ref<any[]>([
      // Esempio struttura:
      // { userInitial: 'M', description: 'Scambio completato', time: '2h fa', amount: 50 }
    ]);

    const recentConnections = ref<any[]>([
      // Esempio struttura:
      // { userInitial: 'A', name: 'Mario Rossi', time: '1 giorno fa' }
    ]);

    // Stats
    const totalMembers = ref(0);
    const totalTrades = ref(0);
    const totalEvents = ref(0);

    const totalTransactions = ref(0);
    const uniqueMembers = ref(0);
    const lastTradeTime = ref('Mai');

    const userStore = useUserStore()
    const circuitStore = useCircuitStore()
    const globalStore = useGlobalStore()


    // Telegram
    const telegramLinks = ref<any[]>([
      // Esempio struttura:
      // { title: 'Canale Principale', url: 'https://t.me/...', image: '/path/to/img' }
    ]);

    // Computed
    const hasEvents = computed(() => recentEvents.value.length > 0);
    const hasOrganizations = computed(() => organizations.value.length > 0);
    const hasTelegramLinks = computed(() => telegramLinks.value.length > 0);

    const organizations = computed(() => globalStore.getMyGroups())

    // ========== METODI DA IMPLEMENTARE ==========

    // Dialog Annunci
    const openAnnunciDialog = () => {
      showAnnunciDialog.value = true;
    };

    // Navigazione Annunci
    const goToGoods = () => {
      showAnnunciDialog.value = false;
      $router.push('/goods')
    };

    const goToServices = () => {
      showAnnunciDialog.value = false;
      $router.push('/services')
    };

    const goToHospitality = () => {
      showAnnunciDialog.value = false;
      $router.push('/hosps')
    };

    const goToTransport = () => {
      showAnnunciDialog.value = false;
      // TODO: navigare a /transport (da creare?)
      // $router.push('/transport')
    };

    // Hero Cards
    const goToWallet = () => {
      // TODO: navigare al portafoglio dettagliato
      // $router.push('/wallet')
    };

    const goToCircuits = () => {
      // TODO: navigare ai circuiti RIS
      $router.push('/circuits')
    };

    const goToEvents = () => {
      // TODO: navigare alla lista eventi
      $router.push('/events')
    };

    const goToProfile = () => {
      // TODO: navigare al profilo utente
      $router.push('/my/' + userStore.my.username)
    };

    // Azioni Rapide
    const sendRIS = () => {
      // TODO: aprire dialog/pagina invio RIS
    };

    const receiveRIS = () => {
      // TODO: aprire dialog/pagina ricezione RIS
    };


    // Wallet
    const refreshWallet = () => {
      // TODO: ricaricare dati wallet dallo store/API
    };

    const goToTransactions = () => {
      // TODO: navigare alla lista transazioni
      // $router.push('/transactions')
    };

    // Eventi
    const goToAllEvents = () => {
      // TODO: navigare a tutti gli eventi
      $router.push('/events')
    };

    const openEvent = (event: any) => {
      // TODO: aprire dettaglio evento
      // $router.push(`/events/${event.id}`)
    };

    // Community
    const openTrade = (trade: any) => {
      // TODO: aprire dettaglio scambio
    };

    const openConnection = (connection: any) => {
      // TODO: aprire profilo utente connesso
    };

    const goToAllTrades = () => {
      // TODO: navigare a lista completa scambi
      // $router.push('/trades')
    };

    const goToAllConnections = () => {
      // TODO: navigare a lista completa connessioni
      // $router.push('/connections')
    };

    // Organizzazioni
    const createOrganization = () => {
      // TODO: aprire form creazione organizzazione
    };

    const openOrganization = (org: any) => {
      // TODO: aprire dettaglio organizzazione
      $router.push(`/grp/${org.groupname}`)
    };

    const goToAllOrganizations = () => {
      // TODO: navigare a lista completa organizzazioni
      $router.push('/groups')
    };

    // Footer
    const openFAQ = () => {
      // TODO: navigare a FAQ
      $router.push('/faq_ris')
    };

    const openGuide = () => {
      // TODO: navigare a guida
      $router.push('/guida')
    };

    const openInfo = () => {
      // TODO: navigare a info
      // $router.push('/info')
    };

    // Dati community
    const invitesSent = ref(0);
    const myHandshakes = ref<any[]>([]);
    const allHandshakes = ref<any[]>([]);

    // Circuiti overview
    const activeCircuitsCount = ref(2);
    const totalCircuitsAvailable = ref(12);

    // Metodi
    const openTransaction = (tx: any) => {
      // TODO: aprire dettaglio transazione
    };

    const openHandshake = (handshake: any) => {
      // TODO: aprire dettaglio stretta di mano
    };

    const goToAllCircuits = () => {
      // TODO: navigare a lista circuiti
      // $router.push('/circuits')
    };

    //loadTestData();

    onMounted(() => {
      showBannScambio.value = tools.getCookieBool('bann_scambio', true);

      //   loadWalletData()
      //   loadRecentEvents()
      //   loadRecentActivity()
      //   loadStats()
      //   loadOrganizations()
      //   loadTelegramLinks()
    });

    return {
      // State
      showAnnunciDialog,

      // Data
      availableBalance,
      realBalance,
      trustLimit,
      maxAccumulation,
      receivedCount,
      sentCount,
      upcomingEventsCount,
      recentEvents,
      recentTrades,
      recentConnections,
      totalMembers,
      totalTrades,
      totalEvents,
      organizations,
      telegramLinks,

      // Computed
      hasEvents,
      hasOrganizations,
      hasTelegramLinks,

      // Methods
      openAnnunciDialog,
      goToGoods,
      goToServices,
      goToHospitality,
      goToTransport,
      goToWallet,
      goToEvents,
      goToProfile,
      sendRIS,
      receiveRIS,
      refreshWallet,
      goToTransactions,
      goToAllEvents,
      openEvent,
      openTrade,
      openConnection,
      goToAllTrades,
      goToAllConnections,
      createOrganization,
      openOrganization,
      goToAllOrganizations,
      openFAQ,
      openGuide,
      openInfo,
      totalTransactions,
      uniqueMembers,
      lastTradeTime,
      goToCircuits,
      handshakesView,
      invitesSent,
      myHandshakes,
      allHandshakes,
      activeCircuitsCount,
      totalCircuitsAvailable,
      openTransaction,
      openHandshake,
      goToAllCircuits,
      showBannScambio,
      tools,
      transactionsView,
      allTransactions,
      userStore,
      walletSectionOpen,
      circuitStore,
    };
  },
});