<!-- Блок подписки (модель / канал / категория): шапка с аватаром, тегами и счётчиками + лента роликов -->
<template>
  <article class="library-feed">
    <header
      :class="{ '--without-avatar': withoutAvatar }"
      class="library-feed__header"
    >
      <NuxtLink
        v-if="!withoutAvatar"
        :to="item.to"
        :title="item.title"
        class="library-feed__avatar-link"
      >
        <UiImg
          v-if="currentAvatar"
          :src="currentAvatar"
          :alt="item.title"
          :loading="priority ? 'eager' : 'lazy'"
          :priority="priority"
          class="library-feed__avatar"
          width="64"
          height="64"
          sizes="64px"
          @error="avatarError = true"
        />
        <span
          v-else
          class="library-feed__avatar library-feed__initials"
        >{{ initials }}</span>
      </NuxtLink>

      <div class="library-feed__info">
        <div class="library-feed__heading">
          <NuxtLink
            :to="item.to"
            class="library-feed__name"
          >
            {{ item.title }}
            <img
              v-if="item.country"
              :alt="item.country.title"
              :title="`${t('birthplace_country')}: ${item.country.title}`"
              :src="`/icons/flags/${item.country.name}.svg`"
              class="library-feed__flag"
              width="20"
              height="14"
            >
          </NuxtLink>

          <span
            v-if="item.newCount"
            class="library-feed__badge"
          >{{ t('library.new_count', { count: item.newCount }) }}</span>
        </div>

        <LazyUiExpandRow
          v-if="item.tags && item.tags.length"
          :items="item.tags"
          class="library-feed__tags"
          hydrate-on-visible
          micro
          hide-more
        />

        <p
          v-if="parametersText || ageText"
          class="library-feed__params"
        >{{ parametersText }}<span
          v-if="ageText"
          class="library-feed__age"
        >{{ ageText }}</span></p>

        <p class="library-feed__meta">
          <span
            v-for="(entry, index) in item.meta"
            :key="`meta-${index}`"
            :class="{ '_from-sm': entry.desktopOnly }"
            class="library-feed__meta-item"
          >
            <UiIcon
              v-if="entry.icon"
              :name="entry.icon"
              size="14"
            />
            {{ entry.text }}
          </span>
        </p>
      </div>

      <div class="library-feed__actions">
        <UiFollowBtn
          :following="following"
          :name="item.title"
          @toggle="emit('toggle-follow', item)"
        />

        <UiLink
          :to="item.to"
          theme="secondary"
          class="_from-sm"
        >
          {{ videosText }}
          <UiIcon
            name="arrow-right"
            size="16"
          />
        </UiLink>
      </div>
    </header>

    <!-- На мобиле ссылки на сущность в шапке нет — она уезжает сюда, в строку над лентой -->
    <div
      v-if="item.feedTitle || item.openText"
      class="library-feed__feed-head _to-sm"
    >
      <p
        v-if="item.feedTitle"
        class="library-feed__feed-title"
      >{{ item.feedTitle }}</p>

      <NuxtLink
        v-if="item.openText"
        :to="item.to"
        class="library-feed__open"
      >
        {{ item.openText }}
        <UiIcon
          name="arrow-right"
          size="16"
        />
      </NuxtLink>
    </div>

    <div class="library-feed__grid">
      <CardVideo
        v-for="(video, index) in item.videos"
        :key="video.guid"
        :card="video"
        :loading="priority && index < 3 ? 'eager' : 'lazy'"
        :priority="priority && index < 3"
        compact
      />
    </div>
  </article>
</template>

<script setup lang="ts">
import type { ILibraryFeedItem } from '../../types';

const props = defineProps<{
  item: ILibraryFeedItem
  following?: boolean
  priority?: boolean
  /** У категорий аватарки нет вообще — колонка не рисуется, инициалы не подставляются */
  withoutAvatar?: boolean
}>();

const emit = defineEmits<{
  (eventName: 'toggle-follow', item: ILibraryFeedItem): void,
}>();

const { t } = useI18n();

const avatarError = ref(false);

const currentAvatar = computed(() => avatarError.value ? undefined : props.item.avatarUrl);

/** Заглушка вместо аватара: «Top To Bottom» → TTB, «Bareback» → B. */
const initials = computed(() => props.item.title
  .split(/\s+/)
  .slice(0, 3)
  .map(word => word.charAt(0))
  .join('')
  .toUpperCase());

const videosText = computed(() => t('plural.videos', props.item.videosCount));

const parametersText = computed(() => (props.item.parameters ?? []).filter(Boolean).join(' · '));

/** Возраст идёт хвостом той же строки, поэтому разделитель печатается только когда параметры есть. */
const ageText = computed(() => {
  if (!props.item.age) return '';
  return parametersText.value ? ` · ${props.item.age}` : props.item.age;
});
</script>

<style lang="scss">
.library-feed {
  @include from-br(sm) {
    padding: 20px;
    border: 1px solid $library-feed-border;
    background-color: $library-feed-bg;
    border-radius: $radius-xl;
  }
}

.library-feed__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
  margin-bottom: 20px;

  @include from-br(sm) {
    align-items: start;
  }
}

.library-feed__header.--without-avatar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.library-feed__avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: $radius-full;

  /* Кольцо рисуем тенью, а не бордером: при border-box рамка съедала бы 4px картинки */
  box-shadow: 0 0 0 2px $library-feed-avatar-border;

  @media (hover: hover) {
    transition: var(--transition) box-shadow;
  }
}

@media (hover: hover) {
  .library-feed__avatar-link:is(:hover, :focus-visible) .library-feed__avatar {
    box-shadow: 0 0 0 2px $library-feed-avatar-border--hover;
  }
}

.library-feed__initials {
  @include font-lg;

  display: grid;
  place-content: center;
  font-weight: 700;
  text-transform: uppercase;
  color: $library-feed-initials;
  background: linear-gradient(to bottom right, $library-feed-initials-gradient-from, $library-feed-initials-gradient-to);
}

.library-feed__info {
  min-width: 0;
}

.library-feed__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
}

.library-feed__name {
  @include font-lg;

  display: flex;
  align-items: center;
  column-gap: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: $library-feed-name;

  @include from-br(sm) {
    transition: var(--transition) color;
  }

  @include hover(color) {
    color: $library-feed-name--hover;
  }
}

.library-feed__flag {
  flex-shrink: 0;
  border-radius: 2px;
}

.library-feed__badge {
  @include font-xs;

  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
  padding-block: 4px;
  padding-inline: 10px;
  color: $library-feed-badge-text;
  background-color: $library-feed-badge-bg;
  border-radius: $radius-full;
}

.library-feed__tags {
  margin-top: 4px;
}

.library-feed__params {
  @include font-sm;

  margin-top: 4px;
  color: $library-feed-params;
}

.library-feed__age {
  color: $library-feed-age;
}

.library-feed__meta {
  @include font-sm;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  margin-top: 2px;
  color: $library-feed-meta;
}

.library-feed__meta-item {
  display: flex;
  align-items: center;
  column-gap: 6px;
}

/* Разделитель слева, а не справа: скрытый на мобиле счётчик не оставляет висячей точки */
.library-feed__meta-item:not(:first-child)::before {
  content: '·';
  margin-inline-end: 2px;
  color: $library-feed-meta-dot;
}

.library-feed__actions {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.library-feed__feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  margin-bottom: 8px;
}

.library-feed__feed-title {
  @include font-sm;

  margin: 0;
  font-weight: 400;
  color: $library-feed-title;
}

/* Заголовка может не быть (лента без подписи) — ссылка всё равно держится правого края */
.library-feed__open {
  @include font-sm;

  display: flex;
  align-items: center;
  column-gap: 4px;
  flex-shrink: 0;
  margin-inline-start: auto;
  white-space: nowrap;
  color: $library-feed-open;

  @include hover(color) {
    color: $library-feed-open--hover;
  }
}

.library-feed__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);

  @include from-br(xm) {
    grid-template-columns: repeat(3, 1fr);
  }

  @include from-br(sm) {
    gap: 24px 16px;
    grid-template-columns: repeat(4, 1fr);
  }

  @include from-br(md) {
    grid-template-columns: repeat(5, 1fr);
  }
}

.library-feed__all {
  margin-top: 16px;
}
</style>
