<!-- Обёртка плеера: подключает core и interface. -->
<template>
  <div class="player-main">
    <div class="player-main__wrapper">
      <!-- Постер и «клик для старта» — SSR-заглушка <ITubePlayer lazy> (держит 16/9, без CLS). -->
      <LazyPlayerCore
        :data="data"
        :next-video="nextVideo"
        :hide-views="!!basePath"
        :class="{'_loading': loading}"
        class="player-main__player"
        @end="emit('end')"
        @advance="goNext"
      />

      <!--    <PlayerSponsored-->
      <!--        v-if="$features.SponsoredEnabled"-->
      <!--        class="player-main__sponsored"-->
      <!--        :card="sponsoredCard"-->
      <!--    />-->

      <LazyPlayerInterface
        :data="data"
        class="player-main__interface"
        hydrate-on-visible
      />

      <!--    <PlayerFollow-->
      <!--        v-if="data.channel"-->
      <!--        class="player-main__follow"-->
      <!--        :card="data.channel"-->
      <!--    />-->
    </div>

    <slot/>
  </div>
</template>

<script setup lang="ts">
import type { AsyncDataRequestStatus } from '#app';
import type { IVideoCard, IVideoData, PaginatedResponse } from '../../types';

const props = defineProps<{
  data: IVideoData
  loading: boolean
  statusAside?: AsyncDataRequestStatus
  suggestedVideos?: PaginatedResponse<IVideoCard> | null
  basePath?: string
}>();

const emit = defineEmits<{
  (eventName: 'end'): void
}>();

// Следующий ролик (для ховер-превью) + переход по next/автопереходу — см. composable.
const { nextVideo, goNext } = useNextVideo({
  data: () => props.data,
  suggestedVideos: () => props.suggestedVideos,
  basePath: () => props.basePath,
});
</script>

<style lang="scss">
.player-main {
  @include to-br(md) {
    display: contents;
  }

  @include from-br(md) {
    display: grid;
    column-gap: 16px;
    grid-template-columns: 1fr auto;
  }
}

.player-main__sponsored {
  margin-top: 8px;

  @include from-br(md) {
    grid-column: 1/-1;
    grid-row: 2;
  }
}

.player-main__interface {
  margin-top: 16px;
  margin-bottom: 24px;
}

.player-main__follow {
  margin-top: 8px;

  @include from-br(md) {
    grid-column: 1/-1;
    grid-row: 3;
  }
}

.player-main__player._loading {
  aspect-ratio: 16/9;
}

// Глобальный ._loading центрит спиннер через top: min(50%, 100px) — на высоком
// плеере (16:9) это прижимает его к 100px сверху. Возвращаем в центр.
.player-main__player._loading::after {
  top: 50%;
}

.player-main__info-wrapper {
  display: flex;
  align-items: center;
  grid-column: 1/-1;
  gap: 16px;

  @include from-br(md) {
    flex-direction: column;
    align-items: start;
    grid-row: 6;
    margin-top: 8px;
  }

  @include to-br(md) {
    justify-content: space-between;
  }
}

.player-main__info {
  margin-bottom: 24px;

  @include from-br(sm) {
    grid-row: 2;
  }
}
</style>
