<!-- Подписки: что нового у моделей, каналов, категорий и плейлистов. Данные пока заглушка -->
<template>
  <div class="following _page _container">
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs"
    />

    <h1 class="_title">{{ t('following.title') }}</h1>

    <SectionSwiperCards
      :items="models"
      :count="t('following.updates', { count: modelsUpdates })"
      :title="t('models')"
      :all-link-text="t('following.view_all')"
      :all-link-note="t('plural.models', models.length)"
      :header-link-text="t('following.all_models')"
      all-link="/library/models"
      icon="user"
      variant="section"
      placeholder-avatar="/img/model-placeholder.webp"
      class="following__section"
      without-count
    />

    <SectionSwiperCards
      :items="channels"
      :count="t('following.updates', { count: channelsUpdates })"
      :title="t('channels')"
      :all-link-text="t('following.view_all')"
      :all-link-note="t('plural.channels', channels.length)"
      :header-link-text="t('following.all_channels')"
      all-link="/library/channels"
      icon="play-circle"
      variant="section"
      placeholder-avatar="/img/logo-placeholder.svg"
      class="following__section"
      without-count
    />

    <section class="following__section">
      <header class="following__header">
        <UiSectionTitle
          :title="t('categories')"
          :count="t('following.updates', { count: categoriesUpdates })"
          icon="grid"
          title-tag="h2"
          variant="section"
        />

        <!-- На мобиле плитки «все» в гриде нет, поэтому ссылка вынесена в шапку -->
        <UiLink
          :to="generateLink('/library/categories')"
          class="following__link _to-sm"
          theme="simple"
        >
          {{ t('following.all_categories') }}
          <UiIcon
            name="arrow-right"
            size="16"
          />
        </UiLink>
      </header>

      <GridCategories :categories="categories">
        <UiViewAll
          :text="t('following.view_all')"
          :note="t('plural.categories', categories.length)"
          class="_from-sm"
          to="/library/categories"
        />
      </GridCategories>
    </section>

    <section class="following__section">
      <header class="following__header">
        <UiSectionTitle
          :title="t('playlists')"
          :count="t('following.updates', { count: playlistsUpdates })"
          icon="playlist"
          title-tag="h2"
          variant="section"
        />

        <UiLink
          :to="generateLink('/library/playlists')"
          class="following__link _to-sm"
          theme="simple"
        >
          {{ t('following.all_playlists') }}
          <UiIcon
            name="arrow-right"
            size="16"
          />
        </UiLink>
      </header>

      <GridPlaylists :items="playlists">
        <UiViewAll
          :text="t('following.view_all')"
          :note="t('plural.playlists', playlists.length)"
          class="_from-sm"
          to="/library/playlists"
        />
      </GridPlaylists>
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  getLibraryCategoriesStub,
  getLibraryChannelsStub,
  getLibraryModelsStub,
  getLibraryPlaylistsStub
} from '../stubs/library-follows';
import { convertString } from '../runtime';
import type { IBreadcrumbItem, ICategoryCard, IRoundCard } from '../types';

const { t } = useI18n();
const { generateLink } = useGenerateLink();

/** Сначала те, у кого больше новинок — ради этого страница и открывается. */
const byNewCount = <T extends { newCount: number }>(items: T[]) => [...items].sort((a, b) => b.newCount - a.newCount);

const sumUpdates = (items: { newCount: number }[]) => items.reduce((total, item) => total + item.newCount, 0);

const modelsStub = computed(() => byNewCount(getLibraryModelsStub()));
const channelsStub = computed(() => byNewCount(getLibraryChannelsStub()));
const categoriesStub = computed(() => byNewCount(getLibraryCategoriesStub()));
const playlists = computed(() => byNewCount(getLibraryPlaylistsStub()));

const models = computed<IRoundCard[]>(() => modelsStub.value.map(model => ({
  title: model.title,
  primaryImageUrl: model.avatarUrl,
  videosCount: model.videosCount,
  link: `/models/${convertString().toSlug(model.title)}`,
  newCount: model.newCount,
})));

const channels = computed<IRoundCard[]>(() => channelsStub.value.map(channel => ({
  title: channel.title,
  primaryImageUrl: channel.avatarUrl ?? '',
  videosCount: channel.videosCount,
  link: `/channels/${convertString().toSlug(channel.title)}`,
  newCount: channel.newCount,
})));

const categories = computed<ICategoryCard[]>(() => categoriesStub.value.map(category => ({
  guid: category.guid,
  name: convertString().toSlug(category.title),
  title: category.title,
  videosCount: category.videosCount,
  thumbUrls: category.videos[0]?.thumbUrls,
  newCount: category.newCount,
})));

const modelsUpdates = computed(() => sumUpdates(modelsStub.value));
const channelsUpdates = computed(() => sumUpdates(channelsStub.value));
const categoriesUpdates = computed(() => sumUpdates(categoriesStub.value));
const playlistsUpdates = computed(() => sumUpdates(playlists.value));

useNoindex();

const { brandName } = useAppConfig();

useHead(() => ({
  title: `${t('library.following')} — ${brandName}`,
}));

const breadcrumbs = [
  {
    name: `${t('navigation.main')}`,
    to: '/',
  },
  {
    name: `${t('library.following')}`,
  },
] as IBreadcrumbItem[];
</script>

<style lang="scss">
.following__section {
  margin-bottom: 48px;
}

.following__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  margin-bottom: 16px;
}

.following__link {
  flex-shrink: 0;
}

/* Плитка «смотреть все» часто оказывается одна в новом ряду: без равных рядов
   ряд сжимается по её контенту и она выходит ниже карточек. */
.following .grid-categories,
.following .grid-playlists {
  grid-auto-rows: 1fr;
}
</style>
