<template>
  <CMyPage
    img=""
    :title="$t('otherpages.admin.userpanel')"
    keywords=""
    :description="$t('otherpages.admin.userpanel')"
  >
    <div class="user-panel-container">
      <!-- Export Button -->
      <div class="export-section">
        <q-btn
          unelevated
          rounded
          color="positive"
          icon="download"
          label="Esporta Lista Email"
          @click="exportListaEmail"
          no-caps
        />
      </div>

      <!-- Search Section -->
      <div class="search-section">
        <q-input
          v-model="search"
          outlined
          dense
          type="search"
          debounce="500"
          label="Cerca utente"
          @keyup.enter="doSearch"
        >
          <template v-slot:prepend>
            <q-icon name="search" />
          </template>
          <template v-slot:append>
            <q-btn
              flat
              dense
              rounded
              color="primary"
              icon="search"
              @click="doSearch"
            />
          </template>
        </q-input>

        <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
          v-model="colVisib"
          outlined
          dense
          multiple
          options-dense
          :display-value="$t('grid.columns')"
          emit-value
          map-options
          :options="mycolumns"
          option-value="name"
          @update:model-value="changeCol"
        />
      </div>

      <!-- User Info Section -->
      <div
        v-if="myuser.username"
        class="user-info-section"
      >
        <!-- Search Result Header -->
        <div class="search-result-header">
          <q-icon
            name="person"
            size="20px"
            color="primary"
          />
          <span class="username-searched">{{ search }}</span>
        </div>

        <!-- Status Banners -->
        <div class="status-banners">
          <!-- Verification Status -->
          <div
            v-if="myuser.verified_by_aportador"
            class="status-card verified"
          >
            <q-icon
              name="verified"
              size="24px"
            />
            <div class="status-content">
              <div class="status-title">Verificato</div>
              <div class="status-subtitle">da {{ myuser.aportador_solidario }}</div>
            </div>
          </div>

          <div
            v-else
            class="status-card not-verified"
          >
            <q-icon
              name="pending"
              size="24px"
            />
            <div class="status-content">
              <div class="status-title">Non Verificato</div>
              <div class="status-subtitle">da {{ myuser.aportador_solidario }}</div>
            </div>
            <q-btn
              flat
              dense
              rounded
              color="positive"
              icon="check"
              label="Verifica"
              @click="tools.verifyUser($q, getMyUsername(), myuser.username)"
              no-caps
              size="sm"
            />
          </div>

          <!-- Report Status -->
          <div
            v-if="myuser.reported"
            class="status-card reported"
          >
            <q-icon
              name="report"
              size="24px"
            />
            <div class="status-content">
              <div class="status-title">Utente Segnalato</div>
              <div class="status-subtitle">
                {{
                  t('db.reporteduser', {
                    date_report: tools.getstrDateTimeShort(myuser.date_report),
                  })
                }}
                <br />da: {{ myuser.username_who_report }}
              </div>
            </div>
            <q-btn
              flat
              dense
              rounded
              color="positive"
              icon="lock_open"
              label="Sblocca"
              @click="tools.unblockUser($q, getMyUsername(), myuser.username)"
              no-caps
              size="sm"
            />
          </div>

          <div
            v-else
            class="action-btn-wrapper"
          >
            <q-btn
              flat
              dense
              rounded
              color="negative"
              icon="report"
              :label="`Segnala ${myuser.username}`"
              @click="tools.reportUser($q, getMyUsername(), myuser.username)"
              no-caps
              size="sm"
            />
          </div>
        </div>

        <!-- User Details -->
        <div class="user-details-card">
          <div class="section-header">
            <q-icon
              name="info"
              size="20px"
            />
            <span>Informazioni Generali</span>
          </div>

          <CKeyAndValue
            mykey="Username"
            :myvalue="myuser.username"
          />

          <template v-if="myuser.profile">
            <CKeyAndValue
              mykey="Email"
              :myvalue="myuser.email"
            />
            <CKeyAndValue
              mykey="Versione"
              :myvalue="myuser.profile.version"
            />
            <CKeyAndValue
              mykey="Invitato da"
              :myvalue="myuser.aportador_solidario"
            />
            <CKeyAndValue
              mykey="Online il"
              :mydate="myuser.lasttimeonline"
            />
          </template>
        </div>

        <!-- Telegram Section -->
        <div
          v-if="myuser.profile"
          class="user-details-card telegram-section"
        >
          <div class="section-header telegram-header">
            <q-icon
              name="fab fa-telegram"
              size="20px"
            />
            <span>Telegram</span>
          </div>

          <CKeyAndValue
            mykey="Username"
            :myvalue="myuser.profile.username_telegram"
          />
          <CKeyAndValue
            mykey="ID"
            :myvalue="myuser.profile.teleg_id"
          />
          <CKeyAndValue
            v-if="myuser.profile.firstname_telegram"
            mykey="Nome Completo"
            :myvalue="`${myuser.profile.firstname_telegram} ${myuser.profile.lastname_telegram}`"
          />
        </div>

        <!-- Personal Info Section -->
        <div
          v-if="myuser.profile"
          class="user-details-card"
        >
          <div class="section-header">
            <q-icon
              name="location_on"
              size="20px"
            />
            <span>Dati Personali</span>
          </div>

          <CKeyAndValue
            mykey="Provincia"
            :myvalue="myuser.profile.resid_province"
          />
          <CKeyAndValue
            mykey="Città di Nascita"
            :myvalue="myuser.profile.born_city"
          />
          <CKeyAndValue
            mykey="Data di Nascita"
            :mydate="myuser.profile.dateofbirth"
          />
          <CKeyAndValue
            mykey="Biografia"
            :myvalue="myuser.profile.biografia"
          />
          <CKeyAndValue
            mykey="Saltato Circuito Prov"
            :myvalue="myuser.profile.noCircuit"
            :show-set-button="true"
            :on-set-value="userStore.savenoCircuit"
            :valuetoSet="false"
            :param2="myuser._id"
            button-tooltip="Reset No Circuito"
          />
          <CKeyAndValue
            mykey="Saltato Circuito Ita"
            :myvalue="myuser.profile.noCircIta"
            :show-set-button="true"
            :on-set-value="userStore.savenoCircIta"
            :valuetoSet="false"
            :param2="myuser._id"
            button-tooltip="Reset No Circuito ITA"
          />
          <CKeyAndValue
            mykey="Note"
            :myvalue="myuser.profile.note"
          />
          <CKeyAndValue
            mykey="Da Contattare"
            :myvalue="myuser.profile.da_contattare"
          />
          <CKeyAndValue
            mykey="Facilitatore"
            :myvalue="
              tools.isBitActive(myuser.perm, shared_consts.Permissions.Facilitatore.value)
            "
          />
          <CKeyAndValue
            mykey="Qualifica"
            :myvalue="myuser.profile.qualifica"
          />
        </div>

        <!-- Notification Section -->
        <div class="notification-section">
          <div class="section-header">
            <q-icon
              name="notifications"
              size="20px"
            />
            <span>Invia Notifica</span>
          </div>

          <div class="notification-form">
            <div class="form-row">
              <q-select
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                outlined
                dense
                v-model="notifdirtype"
                :options="listnotiftype"
                label="Tipo"
                emit-value
                map-options
              />
              <q-select
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                outlined
                dense
                v-model="notifidtype"
                :options="listnotifid"
                label="Notifica"
                emit-value
                map-options
              />
            </div>

            <q-input
              v-model="title"
              outlined
              dense
              label="Titolo"
            />

            <q-input
              v-model="mynotif"
              outlined
              dense
              type="textarea"
              label="Testo notifica"
              rows="3"
            />

            <q-btn
              unelevated
              rounded
              color="positive"
              icon="send"
              :label="`Invia a ${myuser.username}`"
              @click="sendNotifToUser"
              no-caps
              class="full-width"
            />
          </div>
        </div>

        <!-- Test Notification Section (Manager only) -->
        <div
          v-if="tools.isManager()"
          class="notification-section test-section"
        >
          <div class="section-header test-header">
            <q-icon
              name="bug_report"
              size="20px"
            />
            <span>Notifica TEST</span>
          </div>

          <div class="notification-form">
            <div class="form-row">
              <q-select
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                outlined
                dense
                v-model="notifdirtypeTest"
                :options="listnotiftypeTest"
                label="Tipo"
                emit-value
                map-options
              />
              <q-select
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                outlined
                dense
                v-model="notifidtypeTest"
                :options="listnotifidTest"
                label="Notifica"
                emit-value
                map-options
              />
            </div>

            <q-input
              v-model="title"
              outlined
              dense
              label="Titolo TEST"
            />

            <q-input
              v-model="mynotif"
              outlined
              dense
              type="textarea"
              label="Testo notifica TEST"
              rows="3"
            />

            <q-btn
              unelevated
              rounded
              color="warning"
              icon="send"
              :label="`Invia TEST a ${myuser.username}`"
              @click="sendNotifToUserTest"
              no-caps
              class="full-width"
            />
          </div>
        </div>
      </div>

      <!-- Results HTML -->
      <div
        v-if="risultato"
        class="results-section"
        v-html="risultato"
      ></div>
    </div>
  </CMyPage>
</template>
<script lang="ts" src="./userPanel.ts">
import { useUserStore } from 'app/src/store/index.js';

</script>

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