<template>
  <div
    class="rec-card-wrapper"
    :class="{ 'is-even': indexRow % 2 === 0, 'is-odd': indexRow % 2 !== 0 }"
    :style="{ maxWidth: computedWidth() }"
  >
    <!-- Evento Calendar con data grande -->
    <div
      v-if="myrec && table === shared_consts.TABLES_MYBACHECAS"
      class="event-card"
    >
      <div class="event-date-column">
        <div class="date-stack">
          <span class="day-of-week">{{ tools.getDayOfWeek(myrec.dateTimeStart) }}</span>
          <span class="day-number">{{ tools.getstrDay(myrec.dateTimeStart) }}</span>
          <span class="month-name">{{
            tools.getstrMonth3Letters(myrec.dateTimeStart)
          }}</span>
          <span class="time-start">{{ tools.getstrTime(myrec.dateTimeStart) }}</span>
          <span
            v-if="
              tools.getstrDay(myrec.dateTimeStart) === tools.getstrDay(myrec.dateTimeEnd)
            "
            class="time-end"
          >
            {{ tools.getstrTime(myrec.dateTimeEnd) }}
          </span>

          <!-- Data fine se diversa -->
          <template
            v-if="
              tools.getstrDay(myrec.dateTimeStart) !== tools.getstrDay(myrec.dateTimeEnd)
            "
          >
            <div class="date-separator">→</div>
            <span class="day-of-week">{{ tools.getDayOfWeek(myrec.dateTimeEnd) }}</span>
            <span class="day-number">{{ tools.getstrDay(myrec.dateTimeEnd) }}</span>
            <span class="month-name">{{
              tools.getstrMonth3Letters(myrec.dateTimeEnd)
            }}</span>
            <span class="time-end">{{ tools.getstrTime(myrec.dateTimeEnd) }}</span>
          </template>

          <q-avatar
            size="40px"
            class="user-avatar"
          >
            <q-img
              :src="getImgUser(myrec)"
              :alt="myrec.username"
            />
          </q-avatar>
        </div>
      </div>

      <div
        class="event-image-container"
        :style="{ height: computedEventImageHeight() }"
      >
        <q-img
          :src="tools.getFullFileName(myrec.photos, table, myrec.username, '')"
          :alt="myrec.descr"
          class="event-image"
          @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
        />
      </div>
    </div>

    <!-- Card Record Principale -->
    <q-item
      v-if="myrec"
      clickable
      v-ripple
      class="modern-rec-card"
      :class="{ 'is-attending': tools.isPartecipero(myrec) }"
    >
      <!-- Avatar / Immagine -->
      <q-item-section
        v-if="
          (shared_consts.TABLES_VISU_IMG.includes(table) &&
            myrec.photos &&
            myrec.photos?.length > 0) ||
          (myrec.mygrp && myrec.mygrp.photos?.length > 0)
        "
        avatar
        @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
        class="avatar-section"
      >
        <q-badge
          v-if="showBadge()"
          :color="fieldsTable.getColByAdType(myrec.adType)"
          class="type-badge"
        >
          {{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
        </q-badge>

        <q-avatar
          size="56px"
          class="record-avatar"
        >
          <q-img
            v-if="
              myrec.mygrp &&
              myrec.mygrp.groupname &&
              tools.getValue(myrec.mygrp, 'photos', '')
            "
            :src="
              tools.getFullFileName(
                tools.getValue(myrec.mygrp, 'photos', ''),
                'mygroups',
                myrec.username,
                myrec.groupname
              )
            "
            alt="immagine del gruppo"
          />
          <q-img
            v-else
            :src="tools.getFullFileName(myrec.photos, table, myrec.username, '')"
            :alt="myrec.descr"
          />
        </q-avatar>
      </q-item-section>
      <q-item-section
        v-else-if="!myrec.organisedBy && table !== shared_consts.TABLES_MYBACHECAS"
        avatar
        @click="naviga(`/my/` + myrec.username)"
        class="avatar-section"
      >
        <q-badge
          v-if="showBadge()"
          :color="fieldsTable.getColByAdType(myrec.adType)"
          class="type-badge"
        >
          {{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
        </q-badge>
        <q-avatar
          size="56px"
          class="record-avatar"
        >
          <q-img
            :src="getImgUser(myrec)"
            :alt="myrec.username"
          />
        </q-avatar>
      </q-item-section>

      <!-- Contenuto Principale -->
      <q-item-section
        @click="navigaExt(myrec)"
        class="content-section"
      >
        <!-- Tags e Chips -->
        <q-item-label class="tags-row">
          <div class="category-hierarchy">
            <q-chip
              v-for="(recSect, ind) of arrSector"
              :key="'sec-' + ind"
              class="tag-chip sector"
              :style="{
                background: `linear-gradient(135deg, ${recSect.color}, ${recSect.color})`,
              }"
              :color="recSect.color"
            >
              <q-icon
                v-if="recSect.icon"
                :name="recSect.icon"
                size="xs"
                class="q-mr-xs"
              />
              {{ recSect.descr }}
            </q-chip>
            <q-icon
              v-if="arrSubSector.length > 0"
              name="chevron_right"
              size="sm"
              class="hierarchy-arrow"
            />
            <q-chip
              v-for="(rec, ind) of arrSubSector"
              :key="'sub-' + ind"
              class="tag-chip subsector"
              :style="{
                background: `linear-gradient(135deg, ${getColorSubSector}, ${getColorSubSector})`,
                opacity: 0.8,
              }"
              :color="getColorSubSector"
            >
              <q-icon
                v-if="rec.icon"
                :name="rec.icon"
                size="xs"
                class="q-mr-xs"
              />
              {{ rec.descr }}
            </q-chip>
          </div>
          <div class="status-row">
            <div v-for="(recstatus, index) in myrec.idStatusSkill">
              <q-badge
                v-if="
                  recstatus === shared_consts.STATUSSKILL_ONLINE ||
                  myrec.idStatusSkill?.length > 1
                "
                :key="'stat-' + index"
                :color="globalStore.getColByStatusSkills(recstatus)"
                class="status-badge"
              >
                <q-icon
                  :name="globalStore.getStatusSkillIconById(recstatus)"
                  size="14px"
                />
                {{ globalStore.getStatusSkillById(recstatus) }}
              </q-badge>
            </div>
          </div>
        </q-item-label>

        <!-- Descrizione -->
        <q-item-label
          lines="3"
          :class="[
            'description-text',
            { 'event-title': table === shared_consts.TABLES_MYBACHECAS },
          ]"
          v-if="myrec.descr"
        >
          {{ myrec.descr }}
        </q-item-label>

        <!-- Preferences (solo per MYHOSPS) -->
        <q-item-label
          v-if="
            table === shared_consts.TABLES_MYHOSPS &&
            myrec.preferences &&
            myrec.preferences.length > 0
          "
          class="preferences-row"
        >
          <div class="preferences-icons-container">
            <q-avatar
              v-for="(prefId, ind) of myrec.preferences"
              :key="ind"
              size="32px"
              :style="`background-color: ${tools.getPreferenceById(prefId)?.color || 'grey'}; cursor: pointer;`"
              class="preference-icon-avatar"
              @click.stop="showPreferencesDialog = true"
            >
              <q-icon
                :name="tools.getPreferenceById(prefId)?.icon || 'help'"
                size="18px"
                color="white"
              />
              <q-tooltip>{{ tools.getPreferenceById(prefId)?.label }}</q-tooltip>
            </q-avatar>
          </div>
        </q-item-label>

        <!-- Info Utente e Stats -->
        <q-item-label class="user-stats-row">
          <div class="user-name">
            <span v-if="table === shared_consts.TABLES_MYBACHECAS && myrec.organisedBy">
              {{ myrec.organisedBy }}
            </span>
            <span v-else>{{ getNameToShow(myrec) }}</span>
          </div>
          <div class="stats-container">
            (
            <template
              v-if="
                table === shared_consts.TABLES_MYBACHECAS &&
                tools.getNumPartecipantes(myrec) > 0
              "
            >
              <span class="stat-item">
                {{ tools.getNumPartecipantes(myrec) }}
                <q-icon
                  name="check_circle"
                  size="14px"
                  color="positive"
                />
              </span>
            </template>
            <span class="stat-item">
              {{ myrec.numseen || 0 }}
              <q-icon
                name="visibility"
                size="14px"
                color="primary"
              />
            </span>
            <span class="stat-item">
              {{ myrec.numfav || 0 }}
              <q-icon
                :name="
                  userStore.isFavorite(myrec._id, table) ? 'favorite' : 'favorite_border'
                "
                size="14px"
                color="negative"
              />
            </span>
            )
          </div>
        </q-item-label>

        <!-- Badge Partecipazione -->
        <q-item-label
          v-if="tools.isPartecipero(myrec)"
          class="attending-badge"
        >
          <q-icon
            name="check_circle"
            size="16px"
          />
          {{ t('event.attend') }}
        </q-item-label>

        <!-- Città e Contrib Type -->
        <q-item-label class="cities-contrib-row">
          <div
            v-if="myrec.idContribType && myrec.idContribType.length > 0"
            class="preferences-icons-container"
          >
            <q-avatar
              v-for="(reccontr, index) in myrec.idContribType"
              :key="index"
              size="32px"
              :style="`background-color: ${calendarStore.getColByContribType(reccontr) || 'grey'}; opacity: 0.85; cursor: pointer;`"
              class="preference-icon-avatar"
            >
              <q-icon
                :name="calendarStore.getIconByContribType(reccontr) || ''"
                size="18px"
                color="white"
              />
              <q-tooltip>{{ calendarStore.getContribtypeById(reccontr) }}</q-tooltip>
            </q-avatar>
          </div>
          <div class="cities-text">
            <span
              v-for="(rec, ind) of myrec.mycities"
              :key="ind"
            >
              <span v-if="ind > 0">, </span>{{ rec.comune }} ({{ rec.prov }})
            </span>
          </div>
        </q-item-label>
      </q-item-section>

      <!-- Menu Azioni -->
      <q-item-section
        v-if="tools.canModifyThisRec(myrec, table) || editOn"
        side
        class="actions-section"
      >
        <q-btn
          round
          flat
          dense
          icon="more_vert"
          size="sm"
          class="action-menu-btn"
        >
          <q-menu>
            <q-list dense>
              <q-item
                clickable
                v-close-popup
                @click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
              >
                <q-item-section avatar>
                  <q-icon
                    name="edit"
                    size="18px"
                    color="primary"
                  />
                </q-item-section>
                <q-item-section>{{ t('reg.edit') }}</q-item-section>
              </q-item>
              <q-item
                clickable
                v-close-popup
                @click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
              >
                <q-item-section avatar>
                  <q-icon
                    name="content_copy"
                    size="18px"
                    color="primary"
                  />
                </q-item-section>
                <q-item-section>{{ t('event.duplicate') }}</q-item-section>
              </q-item>
              <q-separator />
              <q-item
                clickable
                v-close-popup
                @click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
              >
                <q-item-section avatar>
                  <q-icon
                    name="delete"
                    size="18px"
                    color="negative"
                  />
                </q-item-section>
                <q-item-section>{{ t('reg.elimina') }}</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-item-section>
    </q-item>
    <q-separator />
  </div>
  <!-- Categories Dialog -->
  <q-dialog v-model="showPreferencesDialog">
    <q-card
      class="categories-dialog"
      :style="{ minWidth: $q.screen.lt.sm ? '90vw' : '400px' }"
    >
      <q-card-section class="dialog-header">
        <div class="text-h6">Categorie</div>
      </q-card-section>

      <q-separator />

      <q-card-section class="dialog-content">
        <div class="categories-grid">
          <q-chip
            v-for="(rec, ind) of myrec.preferences"
            :key="ind"
            class="category-chip shadow-3"
            :style="`background-color: ${tools.getPreferenceById(rec).color}; color: white;`"
          >
            <q-icon
              :name="tools.getPreferenceById(rec).icon"
              left
              size="18px"
            />
            {{ tools.getPreferenceById(rec).label }}
          </q-chip>
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn
          flat
          label="Chiudi"
          color="primary"
          v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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

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