import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, signal, viewChild, HostListener, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { firstValueFrom, forkJoin, from, map, of } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
import { YoutubeApiService } from '../../services/youtube-api.service';
import { InstanceService, Provider } from '../../services/instance.service';
import { HistoryService } from '../../services/history.service';
import { LikesService } from '../../services/likes.service';
import { DownloadService } from '../../services/download.service';
import { SubscriptionsService, GROUP_ICON_KEYWORDS } from '../../services/subscriptions.service';
import { AuthService } from '../../services/auth.service';
import { Video } from '../../models/video.model';
import { shortsFeedAccepts, isPlayable as isPlayablePolicy, type PlayableContext } from '../../app/shared/utils/section-policy';
import { SHORT_TO_LONG, type ProviderId } from '../../app/shared/providers/provider-ids';
import { dailymotionEmbedBase } from '../../app/shared/providers/dailymotion-player';
import { PlayerMenuComponent } from '../../app/shared/components/player-menu/player-menu.component';
import { SearchService } from '../../app/search/search.service';
import { ChannelProviderFactory } from '../../app/core/providers/channel/channel-provider.factory';
import {
  catalogShortToVideo,
  formatShortMeta,
  formatCapturedAgo,
  normalizeShortsLangMode,
  resolveShortsLangs,
  SHORTS_LANG_MODES,
  type ShortsLangMode,
  SHORTS_CATALOG_PAGE_SIZE,
  SHORTS_CATALOG_MIN_ITEMS,
} from '../../app/search/shorts-catalog';

/** Provider long (youtube…) -> id court d'abonnement ('yt'…). */
const SUB_PROVIDER_OF: Record<string, ProviderId> = Object.fromEntries(
  Object.entries(SHORT_TO_LONG).map(([shortId, longId]) => [longId, shortId]),
) as Record<string, ProviderId>;

/** Clé de persistance du filtre de langues (invité compris, sans backend). */
const LS_SHORTS_LANG_KEY = 'newtube.shorts.langFilter';

type ShortsGlyph = { kind: 'play' } | { kind: 'chat' } | { kind: 'letter'; letter: string };

/**
 * Pastilles fournisseurs : disque aux couleurs de la marque (mêmes dégradés
 * que `ProviderBadgeComponent`) + glyphe blanc — play YouTube, bulle Twitch,
 * initiale sinon. Reconnaissable à 24 px sans charger d'assets.
 */
const SHORTS_PROVIDER_STYLE: Record<string, { disc: string; glyph: ShortsGlyph }> = {
  youtube: { disc: 'bg-gradient-to-br from-red-600 to-red-500', glyph: { kind: 'play' } },
  dailymotion: { disc: 'bg-gradient-to-br from-sky-600 to-sky-500', glyph: { kind: 'letter', letter: 'd' } },
  twitch: { disc: 'bg-gradient-to-br from-violet-600 to-purple-500', glyph: { kind: 'chat' } },
  peertube: { disc: 'bg-gradient-to-br from-amber-500 to-yellow-400', glyph: { kind: 'letter', letter: 'P' } },
  rumble: { disc: 'bg-gradient-to-br from-emerald-600 to-green-500', glyph: { kind: 'letter', letter: 'R' } },
  odysee: { disc: 'bg-gradient-to-br from-pink-500 to-fuchsia-500', glyph: { kind: 'letter', letter: 'O' } },
};

/** Mots vides FR/EN + termes vidéo génériques (extraction de sujets "Pour toi"). */
const TOPIC_STOPWORDS = new Set([
  'les', 'des', 'une', 'dans', 'avec', 'pour', 'sur', 'par', 'pas', 'plus', 'tout', 'tous', 'toute', 'toutes',
  'cette', 'ces', 'son', 'sa', 'ses', 'mon', 'ma', 'mes', 'ton', 'ta', 'tes', 'notre', 'votre', 'leurs',
  'qui', 'que', 'quoi', 'dont', 'est', 'sont', 'été', 'être', 'avoir', 'faire', 'fait', 'faites', 'vous',
  'nous', 'ils', 'elles', 'mais', 'comme', 'aussi', 'entre', 'sans', 'sous', 'chez', 'vers', 'très',
  'the', 'and', 'for', 'with', 'from', 'that', 'this', 'these', 'those', 'have', 'has', 'had', 'will',
  'would', 'can', 'all', 'your', 'you', 'our', 'their', 'they', 'them', 'she', 'her', 'his', 'him',
  'are', 'was', 'were', 'been', 'being', 'what', 'when', 'where', 'which', 'how', 'why', 'not', 'but',
  'video', 'vidéo', 'videos', 'vidéos', 'official', 'officiel', 'officielle', 'clip', 'clips', 'live',
  'short', 'shorts', 'bande', 'annonce', 'trailer', 'episode', 'épisode', 'part', 'partie', 'full',
  'entier', 'entière', 'complete', 'complet', 'complète', 'best', 'top', 'nouveau', 'nouvelle', 'bestof',
]);

/**
 * Rotation de requêtes par provider pour un défilement infini façon YouTube
 * Shorts : quand une page/un curseur est épuisé, on passe à la requête
 * suivante au lieu d'afficher une impasse. Les requêtes restent génériques
 * pour maximiser le nombre de résultats courts.
 */
const SHORTS_QUERIES: Record<string, string[]> = {
  youtube: ['shorts', '#shorts', 'vertical video', 'short film', 'funny shorts'],
  dailymotion: ['shorts', '#shorts', 'vertical', 'funny', 'music'],
  peertube: ['shorts', 'vertical', 'funny', 'music', 'clip'],
  rumble: ['shorts', 'funny', 'viral', 'music', 'sports'],
  odysee: ['shorts', 'funny', 'crypto', 'music', 'gaming'],
  twitch: ['Just Chatting', 'gaming', 'music', 'sports', 'food'],
};

@Component({
  selector: 'app-watch-short',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, RouterLink, PlayerMenuComponent],
  templateUrl: './watch-short.component.html'
})
export class WatchShortComponent implements OnDestroy {
  private api = inject(YoutubeApiService);
  private instances = inject(InstanceService);
  private sanitizer = inject(DomSanitizer);
  private http = inject(HttpClient);
  private history = inject(HistoryService);
  private likes = inject(LikesService);
  private downloads = inject(DownloadService);
  private subs = inject(SubscriptionsService);
  private auth = inject(AuthService);
  /**
   * Phase Shorts-catalogue — le flux est alimenté par le catalogue unifié
   * (`/api/search?type=shorts` : cache, provenance, feature-flags, capacités),
   * le chemin historique direct restant en repli (Twitch clips, panne serveur,
   * provider sans équivalent Shorts catalogue).
   */
  private catalog = inject(SearchService);
  private channelStrategies = inject(ChannelProviderFactory);

  loading = signal(true);
  error = signal<string | null>(null);
  items = signal<Video[]>([]);
  index = signal(0);
  nextCursor = signal<string | null>(null);
  busyMore = signal(false);
  /** Mode "Pour toi" : flux perso multi-fournisseurs (voir loadForYou). */
  forYou = signal(false);
  topics = signal<string[]>([]);
  topicsLoading = signal(false);

  // ---- Expérience façon YouTube Shorts ----
  /** Cadre 9:16 (plein écran + focus). */
  frameRef = viewChild<ElementRef<HTMLElement>>('shortsFrame');
  /**
   * Son ACTIVÉ par défaut : les embeds YouTube / Odysee / Dailymotion /
   * PeerTube démarrent avec le son (`mute=0`). C'est une tentative — le
   * navigateur peut bloquer l'autoplay sonore sans interaction préalable,
   * auquel cas l'utilisateur tape une fois sur la vidéo (geste qui débloque
   * les suivantes).
   *
   * Exceptions (muet forcé, autoplay garanti) :
   * - Twitch clips : l'embed `clips.twitch.tv` n'expose AUCUNE API de son —
   *   `muted=true` est la seule combinaison qui démarre sans geste ;
   * - Rumble : `autoplay=1` (son) par défaut, `autoplay=2` (muet) si
   *   l'utilisateur coupe le son.
   */
  muted = signal(false);
  /**
   * Embed Rumble autoritaire : id demandé -> vrai id scrapé via
   * /api/rumble/video/<id> (comme /watch). Les IDs de liste approximatifs
   * ("Video not found") sont ainsi corrigés ou retirés du flux.
   */
  resolvedRumbleEmbed = signal<Record<string, string>>({});
  private rumblePending = new Set<string>();
  private rumbleInflight = new Set<string>();
  private rumbleEmbedFailed = new Set<string>();
  private readonly RUMBLE_RESOLVE_CONCURRENCY = 3;
  /** J'aime (état + busy). */
  liked = signal(false);
  private likedCheckedFor = '';
  likeBusy = signal(false);
  /** Abonnement à la chaîne du short courant. */
  subBusy = signal(false);
  /** Partage : "copié" éphémère. */
  shareCopied = signal(false);
  private shareCopiedTimer: any = null;
  /** Menu ⋯. */
  menuOpen = signal(false);
  /** Progression YouTube (0..1), null si inconnue / non-YouTube. */
  ytProgress = signal<number | null>(null);
  /** Plein écran actif. */
  isFullscreen = signal(false);

  readonly isLoggedIn = computed(() => {
    try { return !!this.auth.currentUser(); } catch { return false; }
  });

  /** Id court d'abonnement + id externe de la chaîne courante (null si inconnu). */
  readonly currentChannelKey = computed<{ short: 'yt' | 'dm' | 'tw' | 'pt' | 'od' | 'ru'; externalId: string } | null>(() => {
    const v = this.current();
    if (!v) return null;
    const p = this.providerOf(v);
    const short = SUB_PROVIDER_OF[p];
    const externalId = String((v as any)?.channelExternalId || (v as any)?.channelId || (v as any)?.channelHandle || '').trim();
    if (!short || !externalId) return null;
    return { short, externalId };
  });

  readonly isSubscribed = computed(() => {
    const key = this.currentChannelKey();
    if (!key) return false;
    try { return this.subs.isSubscribed(key.short, key.externalId); } catch { return false; }
  });
  /** IDs déjà vus (dedup inter-pages pour l'infini). */
  private seenIds = new Set<string>();
  /** Position dans la rotation SHORTS_QUERIES pour le provider courant. */
  private queryIndex = 0;
  /** Requêtes déjà épuisées (curseur null) pour ce chargement. */
  private exhaustedQueries = new Set<string>();
  /**
   * Alimentation catalogue active : la pagination suit alors les pages
   * `/api/search` (`catalogPage`), pas les curseurs du chemin historique.
   * Toute bascule vers le repli historique remet ce drapeau à `false`.
   */
  private catalogActive = false;
  private catalogPage = 1;
  /** Erreur non bloquante du catalogue (« source dégradée », esprit 7.4). */
  readonly catalogError = signal<string | null>(null);
  /** Clés déjà tentées pour la résolution paresseuse d'avatar (anti-boucle). */
  private avatarResolved = new Set<string>();

  // scroll/swipe helpers
  private wheelAccum = 0;
  private lastSwipeY: number | null = null;
  private lastScrollTs = 0;
  private lastProvider: string | null = null;

  readonly provider = computed(() => this.instances.selectedProvider());
  readonly providersList = computed(() => this.instances.providers());

  /** Pastilles fournisseurs enrichies du style de disque + glyphe (logos). */
  readonly providerButtons = computed(() => this.providersList().map((p) => {
    const style = SHORTS_PROVIDER_STYLE[String(p?.id || '')] || {
      disc: 'bg-slate-700',
      glyph: { kind: 'letter', letter: String(p?.label || '?').trim().charAt(0).toUpperCase() } as ShortsGlyph,
    };
    return { ...p, disc: style.disc, glyph: style.glyph };
  }));

  /** Lettre du glyphe (`@switch` ne rétrécit pas toujours l'union en template). */
  glyphLetter(p: { glyph?: ShortsGlyph } | null | undefined): string {
    const g = p?.glyph;
    return g && g.kind === 'letter' ? g.letter : '';
  }

  /**
   * Filtre de langues préférées de la page (persisté, invité compris) :
   * `profile` = langues du profil utilisateur (défaut), sinon restriction
   * explicite. Chaque bouton (chaque provider + « Pour toi ») passe par
   * `effectiveShortsLangs()` — un seul filtre pour tout le flux.
   */
  readonly langFilter = signal<ShortsLangMode>(((): ShortsLangMode => {
    try { return normalizeShortsLangMode(localStorage.getItem(LS_SHORTS_LANG_KEY)); } catch { return 'profile'; }
  })());

  setLangFilter(mode: ShortsLangMode): void {
    const next = normalizeShortsLangMode(mode);
    if (next === this.langFilter()) return;
    this.langFilter.set(next);
    try { localStorage.setItem(LS_SHORTS_LANG_KEY, next); } catch {}
    // Le flux courant est filtré avec l'ancien jeu : on recharge pour que le
    // changement soit immédiat (même requête, nouveau filtre).
    try { this.loadFeed(); } catch {}
  }

  /**
   * Globe cyclique (bouton icon-only) : Profil → Français → Anglais →
   * FR+EN → Toutes → Profil… Le filtre actif se lit dans le tooltip et
   * l'anneau ambré ; aucun texte affiché.
   */
  cycleLangFilter(): void {
    const order = [...SHORTS_LANG_MODES];
    const at = order.indexOf(this.langFilter());
    this.setLangFilter(order[(at + 1) % order.length]);
  }

  /** Langues effectives : `[]` = aucune restriction (tout passe). */
  private effectiveShortsLangs(): string[] {
    try {
      const profile = this.api.getShortsLanguages();
      return resolveShortsLangs(this.langFilter(), profile);
    } catch {
      return resolveShortsLangs(this.langFilter(), ['en', 'fr']);
    }
  }

  /** Libellé du filtre actif pour le `title` du sélecteur. */
  readonly langFilterHint = computed(() => {
    try {
      const eff = this.effectiveShortsLangs();
      const base = eff.length ? eff.join(', ') : 'toutes langues';
      return this.langFilter() === 'profile' ? `Filtre actif : ${base} (profil)` : `Filtre actif : ${base}`;
    } catch { return 'Filtre de langues'; }
  });

  /** Libellé court du mode de langue pour le menu FAB (« Français »…). */
  readonly langFilterShort = computed(() => {
    switch (this.langFilter()) {
      case 'profile': return 'Profil';
      case 'fr': return 'Français';
      case 'en': return 'Anglais';
      case 'fren': return 'FR + EN';
      case 'all': return 'Toutes';
      default: return this.langFilter();
    }
  });
  readonly current = computed<Video | null>(() => {
    const list = this.items();
    const i = this.index();
    return (i >= 0 && i < list.length) ? list[i] : null;
  });

  /**
   * Méta façon YouTube sous le titre (« 12 k vues • il y a 2 j ») : vient du
   * catalogue (vues + date réelles), chaque morceau inconnu est omis.
   */
  readonly currentMeta = computed(() => {
    const v = this.current();
    if (!v) return '';
    try { return formatShortMeta((v as Video).views, (v as Video).uploadedDate); } catch { return ''; }
  });

  /** Fraîcheur de collecte catalogue (« capturé il y a 4 min », '' si inconnue). */
  readonly currentCaptured = computed(() => {
    const v = this.current();
    if (!v) return '';
    try {
      const raw = (v as unknown as { raw?: { capturedAt?: number } })?.raw;
      return formatCapturedAgo(raw?.capturedAt);
    } catch { return ''; }
  });

  /** Voie de collecte catalogue (`api`, `innertube`, `cache`… — '' si inconnue). */
  readonly currentSource = computed(() => {
    const v = this.current();
    if (!v) return '';
    try {
      const raw = (v as unknown as { raw?: { source?: unknown } })?.raw;
      const s = String(raw?.source || '').trim();
      return s || '';
    } catch { return ''; }
  });

  /** Libellé du fournisseur courant (pastille façon YouTube). */
  readonly providerLabel = computed(() => {
    try {
      const list = this.providersList() as Array<{ id?: unknown; label?: unknown }>;
      const hit = (list || []).find((p) => String(p?.id || '') === String(this.provider()));
      const label = String(hit?.label || '').trim();
      return label || String(this.provider());
    } catch { return String(this.provider()); }
  });

  readonly canPrev = computed(() => this.index() > 0);
  readonly canNext = computed(() =>
    this.index() < this.items().length - 1 || (!this.forYou() && (!!this.nextCursor() || this.hasMoreQueries()))
  );

  /** Provider effectif d'une vidéo : en mode "Pour toi", chaque item garde son fournisseur. */
  private providerOf(v: Video | null): Provider {
    if (this.forYou() && v) {
      const p = String((v as any).provider || '').toLowerCase();
      if (p === 'youtube' || p === 'dailymotion' || p === 'twitch' || p === 'peertube' || p === 'rumble' || p === 'odysee') {
        return p as Provider;
      }
    }
    return this.provider();
  }

  private queriesFor(p: string): string[] {
    return SHORTS_QUERIES[p] || SHORTS_QUERIES['youtube'];
  }

  private currentQuery(): string {
    const list = this.queriesFor(this.provider());
    return list[this.queryIndex % list.length];
  }

  private hasMoreQueries(): boolean {
    const list = this.queriesFor(this.provider());
    return this.exhaustedQueries.size < list.length;
  }

  readonly embedUrl = computed<SafeResourceUrl | null>(() => {
    const v = this.current();
    if (!v) return null;
    const p = this.providerOf(v);
    try {
      const host = (location && location.hostname) ? location.hostname : 'localhost';
      if (p === 'youtube' && v.videoId) {
        // Strictement la même base que /watch (youtube-nocookie + origin +
        // widget_referrer + enablejsapi). Le flag videoEmbeddable + le filtre
        // des vidéos non-embeddables (durée -1) évitent l'erreur 153 ; les
        // params loop/playlist ont été retirés car ils déclenchaient 153
        // sur certaines vidéos.
        let origin = '';
        let ref = '';
        try {
          origin = window.location.origin || '';
          ref = window.location.href || '';
        } catch {}
        const mute = this.muted() ? 1 : 0;
        let u = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(v.videoId)}?autoplay=1&mute=${mute}&rel=0&modestbranding=1&playsinline=1&enablejsapi=1`;
        if (origin) u += `&origin=${encodeURIComponent(origin)}`;
        if (ref) u += `&widget_referrer=${encodeURIComponent(ref)}`;
        return this.sanitizer.bypassSecurityTrustResourceUrl(u);
      }
      if (p === 'dailymotion' && v.videoId) {
        // Nouveau player + Player ID obligatoire depuis fév. 2026 (player.html
        // sans Player ID répond "Forbidden"). Démarrage MUET (comme /watch),
        // son uniquement sur action explicite du bouton Son.
        const withSound = !this.muted() && this.soundTouched();
        const u = `${dailymotionEmbedBase(v.videoId)}&mute=${withSound ? 0 : 1}&autoplay=1`;
        return this.sanitizer.bypassSecurityTrustResourceUrl(u);
      }
      if (p === 'twitch' && v.videoId) {
        const parentsSet = new Set<string>([host, 'localhost', '127.0.0.1']);
        const parentParams = Array.from(parentsSet).map(h => `parent=${encodeURIComponent(h)}`).join('&');
        // Les Shorts Twitch = clips uniquement (jamais de live/channel).
        const clipId = (v as any).kind === 'clip' ? v.videoId : null;
        if (clipId) {
          // `muted=true` FORCÉ (indépendant du bouton Son) : l'embed clips
          // n'expose aucune API de volume — muet est la seule combinaison
          // qui démarre sans geste. Le son reste disponible via « Ouvrir
          // chez le fournisseur » / Watch.
          const u = `https://clips.twitch.tv/embed?clip=${encodeURIComponent(clipId)}&${parentParams}&autoplay=true&muted=true`;
          return this.sanitizer.bypassSecurityTrustResourceUrl(u);
        }
        // Repli : player channel/VOD (ne devrait pas arriver, les lives
        // sont exclus du flux Shorts).
        const base = 'https://player.twitch.tv/';
        const chan = !/^\d+$/.test(String(v.videoId)) ? v.videoId : null;
        const qs = chan
          ? `?channel=${encodeURIComponent(chan)}&${parentParams}&autoplay=true&muted=true`
          : `?video=${encodeURIComponent(v.videoId)}&${parentParams}&autoplay=true&muted=true`;
        return this.sanitizer.bypassSecurityTrustResourceUrl(base + qs);
      }
      if (p === 'peertube' && v.videoId) {
        // L'instance peut différer de l'instance active (navigation, fédération)
        // : on la dérive de l'URL vidéo, avec repli sur l'instance active.
        // "Sorry this video does not exist" venait d'un mauvais host.
        const inst = this.peerTubeHostOf(v) || this.instances.activePeerTubeInstance();
        // `muted=1` est requis pour que l'autoplay ne soit pas bloqué.
        const u = `https://${inst}/videos/embed/${encodeURIComponent(v.videoId)}?autoplay=1&muted=${this.muted() ? 1 : 0}&api=1`;
        return this.sanitizer.bypassSecurityTrustResourceUrl(u);
      }
      if (p === 'odysee') {
        const slug = this.odyseeSlugOf(v);
        if (slug) {
          // Le player Odysee bloque l'autoplay sonore sans geste préalable et
          // affiche un rectangle « tap to unmute » à la place de la vidéo :
          // on démarre donc MUET (lecture immédiate, pas d'overlay) et on ne
          // passe au son QUE sur action explicite du bouton Son — le clic EST
          // le geste qui autorise l'autoplay sonore, donc pas de rectangle.
          const withSound = !this.muted() && this.soundTouched();
          const u = `https://odysee.com/$/embed/${slug}?autoplay=1&muted=${withSound ? 0 : 1}`;
          return this.sanitizer.bypassSecurityTrustResourceUrl(u);
        }
      }
      if (p === 'rumble' && (v.videoId || v.url)) {
        // Même base que /watch. L'id autoritaire résolu via
        // /api/rumble/video/<id> prime (les IDs de liste approximatifs
        // donnent "Video not found" alors que Watch fonctionne).
        const id = this.rumbleIdOf(v);
        const clean = (id && this.resolvedRumbleEmbed()[id]) || id;
        if (clean) {
          return this.sanitizer.bypassSecurityTrustResourceUrl(this.rumbleEmbedUrl(clean));
        }
      }
    } catch {}
    return null;
  });

  /** Host PeerTube déduit de l'URL vidéo (fédération), sinon null. */
  private peerTubeHostOf(v: Video): string | null {
    try {
      const raw = String((v as any)?.url || '');
      if (/^https?:\/\//i.test(raw)) {
        const host = new URL(raw).hostname;
        if (host && host.includes('.')) return host;
      }
    } catch {}
    return null;
  }

  /** Slug Odysee "canal/video" (non encodé : @ : / doivent rester bruts). */
  private odyseeSlugOf(v: Video): string | null {
    try {
      const raw = String((v as any)?.url || '').split(/[?#]/)[0];
      if (/^https?:\/\//i.test(raw)) {
        const u = new URL(raw);
        let path = (u.pathname || '').replace(/^\/+\$?\/+embed\/+/, '').replace(/^\/+/, '').replace(/\/+$/, '');
        if (path && path !== '/' && !/^embed$/i.test(path)) return path;
      }
    } catch {}
    const id = String((v as any)?.videoId || '').trim();
    return id || null;
  }

  /**
   * URL d'embed Rumble : autoplay=2 = lecture auto (mode muet, compatible
   * avec le blocage autoplay des navigateurs) ; autoplay=1 + son sinon.
   */
  private rumbleEmbedUrl(id: string): string {
    const ap = this.muted() ? 2 : 1;
    return `https://rumble.com/embed/${id}/?pub=4&autoplay=${ap}`;
  }

  /** ID court Rumble (vXXXX…), sans encodage (l'embed le veut brut). */
  private rumbleIdOf(v: Video): string | null {
    try {
      const url = String((v as any)?.url || '');
      const mUrl = /\/(v[\w-]+?)(?:\.html|\/|$)/i.exec(url);
      if (mUrl?.[1]) return mUrl[1];
    } catch {}
    try {
      const raw = String((v as any)?.videoId || '').trim();
      const m = /^(v[0-9A-Za-z]+)/.exec(raw);
      if (m?.[1]) return m[1];
      if (raw) return raw.replace(/\.html$/i, '').split('/').filter(Boolean).pop() || raw;
    } catch {}
    return null;
  }

  /** Lien "voir en page Watch" pour le short courant (secours si l'embed échoue). */
  readonly watchLink = computed<any[] | null>(() => {
    const v = this.current();
    if (!v?.videoId) return null;
    return ['/watch', v.videoId];
  });

  readonly watchQueryParams = computed<Record<string, any> | null>(() => {
    const v = this.current();
    if (!v) return null;
    const p = this.providerOf(v);
    const qp: any = { p };
    if (p === 'twitch' && (v as any).kind === 'clip' && v.videoId) qp.clip = v.videoId;
    else if (p === 'twitch' && v.type === 'channel' && v.videoId) qp.channel = v.videoId;
    if (p === 'odysee') {
      const slug = this.odyseeSlugOf(v);
      if (slug) qp.slug = slug;
    }
    return qp;
  });

  /** URL "ouvrir chez le fournisseur" (youtube.com/shorts/…, etc.). */
  readonly providerUrl = computed<string | null>(() => {
    const v = this.current();
    if (!v) return null;
    const p = this.providerOf(v);
    try {
      if (p === 'youtube' && v.videoId) return `https://www.youtube.com/shorts/${encodeURIComponent(v.videoId)}`;
      if (p === 'dailymotion' && v.videoId) return `https://www.dailymotion.com/video/${encodeURIComponent(v.videoId)}`;
      if (p === 'twitch' && v.videoId) {
        if ((v as any).kind === 'clip') return `https://clips.twitch.tv/${encodeURIComponent(v.videoId)}`;
        return `https://www.twitch.tv/${encodeURIComponent(v.videoId)}`;
      }
      if (p === 'peertube' && v.videoId) {
        const inst = this.peerTubeHostOf(v) || this.instances.activePeerTubeInstance();
        return `https://${inst}/w/${encodeURIComponent(v.videoId)}`;
      }
      if (p === 'odysee' && v.url && /^https?:\/\//i.test(v.url)) return v.url;
      if (p === 'rumble') {
        if (v.url && /^https?:\/\//i.test(v.url)) return v.url;
        const id = this.rumbleIdOf(v);
        if (id) return `https://rumble.com/${id}`;
      }
    } catch {}
    return null;
  });

  // Called when a query returns no usable items; falls back to Trending
  private afterNoResults(): void {
    this.error.set('Aucun Short trouvé pour ce fournisseur. Essayez un autre fournisseur ou réessayez.');
  }

  // Filter YouTube results to real Shorts using the Videos API to get durations.
  private async filterYouTubeShorts(list: Video[]): Promise<Video[]> {
    const ids = Array.from(new Set(list.map(v => v.videoId))).slice(0, 50);
    try {
      const durations = await firstValueFrom(this.api.getYouTubeDurations(ids));
      // Durée issue de videos.list appliquée à l'item, puis classification centrale.
      return list.filter(v => shortsFeedAccepts(
        { ...(v as object), duration: durations?.[v.videoId] ?? 0, provider: 'youtube' } as Video,
        'youtube',
      ));
    } catch {
      return [];
    }
  }

  /**
   * Filtre Shorts YouTube en préférant les durées déjà enrichies par
   * searchShortsPage (0 appel API supplémentaire). Ne refait un appel
   * videos.list que si aucune durée n'est connue (économie de quota).
   * Les durées -1 (= non-embeddable, erreur 153) sont toujours exclues.
   */
  private async pickYouTubeShorts(list: Video[]): Promise<Video[]> {
    const shorts = list.filter(v => shortsFeedAccepts({ ...(v as object), provider: 'youtube' } as Video, 'youtube'));
    const allKnown = list.every(v => typeof v.duration === 'number' && v.duration !== 0);
    if (shorts.length > 0 || allKnown) return shorts;
    // Certaines durées manquent : on les récupère au lieu de jeter les vidéos.
    const missing = list.filter(v => typeof v.duration !== 'number' || v.duration === 0);
    const fetched = await this.filterYouTubeShorts(missing);
    return [...shorts, ...fetched.filter(v => this.accepts(v))];
  }

  constructor() {
    // Recharger le flux quand le provider global change (ex. sélecteur du header).
    effect(() => {
      const p = this.provider();
      if (this.lastProvider !== p) {
        this.lastProvider = p;
        this.loadFeed();
      }
    });
    // Pré-chargement façon YouTube Shorts : dès qu'on s'approche de la fin,
    // on charge la page suivante pour un défilement sans impasse.
    effect(() => {
      const i = this.index();
      const len = this.items().length;
      const cursor = this.nextCursor();
      const busy = this.busyMore();
      const loading = this.loading();
      const fy = this.forYou();
      if (!fy && !loading && !busy && len > 0 && i >= len - 3 && (cursor || this.hasMoreQueries())) {
        this.fetchNextPage(false);
      }
    });
    // Hydrate abonnements (état du bouton S'abonner) une fois.
    try {
      if (this.subs.items().length === 0) this.subs.list().subscribe();
      this.subs.listGroups().subscribe();
    } catch {}
    // Pré-validation Rumble (courant + suivant) + reset progression.
    effect(() => {
      const v = this.current();
      const i = this.index();
      const list = this.items();
      this.ytProgress.set(null);
      this.ytPlaying.set(true);
      this.menuOpen.set(false);
      if (!v) return;
      const nx = (i >= 0 && i + 1 < list.length) ? list[i + 1] : null;
      this.queueRumbleResolves([v, nx]);
      // Avatar paresseux via le catalogue (`channelMeta`) : le flux n'affiche
      // plus une image cassée quand la recherche ne fournit pas d'avatar.
      this.ensureAvatar(v);
      // Avance auto en fin de vidéo (minuteur générique ; YouTube a en plus
      // son événement temps réel, voir handleShortMessage).
      this.scheduleAutoAdvance(v);
      // Nudge YouTube : si l'autoplay a calé (politique navigateur), une
      // commande `playVideo` explicite relance la lecture dès qu'une
      // activation utilisateur existe. Sans effet sinon (jamais d'erreur).
      this.nudgeYouTubePlay(v);
      // État J'aime du short courant (connecté uniquement).
      try {
        if (this.isLoggedIn() && v.videoId) {
          const key = `${String((v as any).provider || '')}:${v.videoId}`;
          if (key !== this.likedCheckedFor) {
            this.likedCheckedFor = key;
            this.liked.set(false);
            this.likes.isLiked(this.providerOf(v), v.videoId).subscribe({
              next: (r) => { if (this.likedCheckedFor === key) this.liked.set(!!(r as any)?.liked); },
              error: () => {},
            });
          }
        } else {
          this.liked.set(false);
          this.likedCheckedFor = '';
        }
      } catch {}
    });
    try { window.addEventListener('message', this.handleShortMessage); } catch {}
    try { document.addEventListener('fullscreenchange', this.handleFullscreenChange); } catch {}
  }

  ngOnDestroy(): void {
    try { window.removeEventListener('message', this.handleShortMessage); } catch {}
    try { document.removeEventListener('fullscreenchange', this.handleFullscreenChange); } catch {}
    try { if (this.autoAdvanceTimer) clearTimeout(this.autoAdvanceTimer); } catch {}
    this.autoAdvanceTimer = null;
    try { if (this.chromeIdleTimer) clearTimeout(this.chromeIdleTimer); } catch {}
    this.chromeIdleTimer = null;
    try { if (this.passthroughTimer) clearTimeout(this.passthroughTimer); } catch {}
    this.passthroughTimer = null;
    if (this.shareCopiedTimer) { try { clearTimeout(this.shareCopiedTimer); } catch {} }
  }

  /**
   * Résout l'avatar de la chaîne du short courant via le catalogue
   * (`GET /channels/:provider/:externalId`, une seule requête par vidéo grâce
   * au garde `avatarResolved`). Le lot est patché immuablement pour rester
   * compatible OnPush. Silence total en échec : pas d'avatar vaut mieux qu'un
   * spinner ou une erreur dans un flux infini.
   */
  private ensureAvatar(v: Video | null): void {
    try {
      if (!v?.videoId || v.uploaderAvatar) return;
      const extId = String((v as unknown as { channelExternalId?: unknown })?.channelExternalId || '').trim();
      if (!extId) return;
      const p = this.providerOf(v);
      const short = SUB_PROVIDER_OF[p];
      if (!short) return;
      const key = `${p}:${String(v.videoId)}`;
      if (this.avatarResolved.has(key)) return;
      this.avatarResolved.add(key);
      this.channelStrategies.get(short).getChannelInfo(extId).subscribe({
        next: (detail) => {
          const avatar = String((detail as unknown as { avatarUrl?: unknown })?.avatarUrl || '').trim();
          if (!avatar) return;
          const at = this.items().findIndex((x) =>
            String(x.videoId) === String(v.videoId) &&
            String((x as unknown as { provider?: unknown })?.provider || '') === String((v as unknown as { provider?: unknown })?.provider || ''));
          if (at < 0 || this.items()[at]?.uploaderAvatar) return;
          const next = this.items().slice();
          next[at] = { ...next[at], uploaderAvatar: avatar };
          this.items.set(next);
        },
        error: () => {},
      });
    } catch {}
  }

  /** Timer d'avance auto en fin de vidéo (repli générique). */
  private autoAdvanceTimer: any = null;
  private autoAdvanceKey = '';
  /** État de lecture YouTube (via `playerState`, pour le toggle tap). */
  private ytPlaying = signal(true);
  /** Chrome (boutons/méta) visible — auto-hide sur desktop au repos. */
  readonly chromeVisible = signal(true);
  private chromeIdleTimer: any = null;
  /** Accès direct au lecteur (overlay effacé 6 s, tap non-YouTube). */
  readonly passthrough = signal(false);
  readonly passthroughHint = signal(false);
  private passthroughTimer: any = null;

  /**
   * Durée effective pour l'avance auto quand la durée réelle est inconnue.
   * - clips Twitch : 60 s (plafond plateforme, par construction) ;
   * - autres : 90 s (`VERTICAL_SHORT_MAX_SECONDS`, plafond d'un Short).
   *
   * Compromis assumé : sans signal de fin du player, on ne peut pas savoir
   * quand une vidéo sans durée se termine. Le plafond 90 s borne le pire cas
   * (écran de fin), et une vidéo plus longue égarée dans le flux est coupée
   * à 90 s — acceptable pour un flux Shorts, la navigation manuelle restant
   * toujours disponible. Dès que la durée est connue, elle prime.
   */
  private estimatedDuration(v: Video): number {
    const kind = String((v as unknown as { kind?: unknown })?.kind || '').toLowerCase();
    const p = String((v as unknown as { provider?: unknown })?.provider || '').toLowerCase();
    if (kind === 'clip' || p === 'twitch') return 60;
    return 90;
  }

  /**
   * Avance auto en fin de lecture :
   * - YouTube : `playerState` + `infoDelivery` temps réel (voir
   *   handleShortMessage : 0 = fin → suivant, 2 = pause → minuteur désarmé,
   *   1 = reprise → minuteur réarmé) ;
   * - tous : minuteur basé sur la durée connue (ou estimée, voir
   *   `estimatedDuration`) + 2,5 s de grâce pour le buffering. Gardé par
   *   (index, videoId) : si l'utilisateur a déjà navigué, le timer ne fait
   *   rien. Ignoré si l'onglet est caché (on ne fait pas défiler un flux
   *   invisible).
   */
  private scheduleAutoAdvance(v: Video | null): void {
    try {
      if (this.autoAdvanceTimer) { clearTimeout(this.autoAdvanceTimer); this.autoAdvanceTimer = null; }
    } catch {}
    this.autoAdvanceKey = '';
    if (!v?.videoId) return;
    const known = Number((v as Video).duration || 0);
    const secs = (Number.isFinite(known) && known > 0) ? known : this.estimatedDuration(v);
    if (!Number.isFinite(secs) || secs <= 0) return;
    const atIndex = this.index();
    const id = String(v.videoId);
    const key = `${atIndex}:${id}`;
    this.autoAdvanceKey = key;
    this.autoAdvanceTimer = setTimeout(() => {
      this.autoAdvanceTimer = null;
      try {
        if (typeof document !== 'undefined' && document.hidden) return;
        if (this.autoAdvanceKey !== key) return;
        const cur = this.current();
        if (this.index() === atIndex && cur && String(cur.videoId) === id) this.advanceWithRetry();
      } catch {}
    }, Math.min(600000, (secs + 2.5) * 1000));
  }

  /**
   * Avance avec réessais bornés : `next()` peut être absorbé sans effet quand
   * un pré-chargement est en cours (`busyMore`) ou que la page suivante n'est
   * pas encore arrivée — sans réessai, la vidéo reste bloquée sur son écran
   * de fin. 2 réessais à 2,5 s puis abandon (jamais de boucle).
   */
  private advanceWithRetry(attempt = 0): void {
    try {
      const before = this.index();
      if (!this.items().length || this.loading()) return;
      this.next();
      if (this.index() !== before) return;
      if (attempt < 2) {
        setTimeout(() => {
          try {
            if (this.index() === before && this.items().length > 0 && !this.loading()) {
              this.advanceWithRetry(attempt + 1);
            }
          } catch {}
        }, 2500);
      }
    } catch {}
  }

  /** Fin de lecture vue par un player (garde anti-double). */
  private advanceFromPlayer(id: string): void {
    const key = `end:${id}`;
    if (this.autoAdvanceKey === key) return;
    this.autoAdvanceKey = key;
    this.advanceWithRetry();
  }

  /**
   * Relance la lecture YouTube si l'autoplay a calé : commande `playVideo`
   * via l'API iframe (`enablejsapi=1` déjà présent dans l'URL d'embed).
   * N'agit que sur le short courant (gardé par videoId au moment du tir).
   */
  private nudgeYouTubePlay(v: Video | null): void {
    try {
      if (!v?.videoId || this.providerOf(v) !== 'youtube') return;
      const id = String(v.videoId);
      const atIndex = this.index();
      // Handshake SANS LEQUEL le player YouTube n'émet RIEN (ni infoDelivery
      // ni onStateChange) : c'est ce qui rendait l'avance auto et la barre de
      // progression inopérantes. Envoyé tout de suite + après chargement.
      this.postToPlayer({ event: 'listening' });
      setTimeout(() => {
        try {
          const cur = this.current();
          if (this.index() !== atIndex || !cur || String(cur.videoId) !== id) return;
          this.postToPlayer({ event: 'listening' });
          if (this.ytPlaying()) this.postToPlayer({ event: 'command', func: 'playVideo', args: '' });
        } catch {}
      }, 1500);
    } catch {}
  }

  /** Post un message à l'iframe du short courant (API YouTube, sans effet sinon). */
  private postToPlayer(msg: object): void {
    try {
      const frame = this.frameRef()?.nativeElement;
      const iframe = frame?.querySelector('iframe') as HTMLIFrameElement | null;
      iframe?.contentWindow?.postMessage(JSON.stringify(msg), '*');
    } catch {}
  }

  /**
   * File de résolution Rumble (concurrence bornée) : chaque id est vérifié
   * via le backend (comme /watch). Succès => l'embed bascule sur le vrai
   * id ; 404 (page absente, premium…) => la vidéo est retirée du flux
   * AVANT d'afficher "Video not found". Autres erreurs réseau => on garde
   * l'URL construite (le doute profite à la vidéo).
   */
  private queueRumbleResolves(videos: (Video | null)[]): void {
    let added = false;
    for (const v of videos) {
      if (!v || this.providerOf(v) !== 'rumble') continue;
      const id = this.rumbleIdOf(v);
      if (!id || this.resolvedRumbleEmbed()[id] || this.rumbleEmbedFailed.has(id) ||
          this.rumblePending.has(id) || this.rumbleInflight.has(id)) continue;
      this.rumblePending.add(id);
      added = true;
    }
    if (added) this.pumpRumbleQueue();
  }

  private pumpRumbleQueue(): void {
    while (this.rumbleInflight.size < this.RUMBLE_RESOLVE_CONCURRENCY) {
      const next = [...this.rumblePending][0];
      if (!next) return;
      this.rumblePending.delete(next);
      if (this.resolvedRumbleEmbed()[next] || this.rumbleEmbedFailed.has(next)) continue;
      this.rumbleInflight.add(next);
      this.http.get<any>(`/api/rumble/video/${encodeURIComponent(next)}`).subscribe({
        next: (data) => {
          this.rumbleInflight.delete(next);
          const eurl = String(data?.embedUrl || '');
          const m = /\/embed\/(v[0-9A-Za-z]+)/.exec(eurl);
          if (eurl && m?.[1]) {
            this.resolvedRumbleEmbed.update(r => ({ ...r, [next]: m[1] }));
          } else {
            this.rumbleEmbedFailed.add(next);
            this.dropRumbleId(next);
          }
          this.pumpRumbleQueue();
        },
        error: (err) => {
          this.rumbleInflight.delete(next);
          // 404 = introuvable de façon certaine => retrait du flux.
          if (err?.status === 404) {
            this.rumbleEmbedFailed.add(next);
            this.dropRumbleId(next);
          }
          this.pumpRumbleQueue();
        }
      });
    }
  }

  // ---- Actions façon YouTube Shorts ----
  /**
   * Geste sonore EXPLICITE (clic sur le bouton Son). Certains players
   * (Odysee) refusent le son sans geste : ce drapeau distingue « son par
   * défaut » (tentative, peut être bloquée) de « son demandé » (le clic EST
   * l'activation qui autorise l'autoplay sonore).
   */
  private soundTouched = signal(false);

  toggleMute(): void {
    this.soundTouched.set(true);
    this.muted.update(m => !m);
  }

  /**
   * Chrome auto-hide (desktop) : visible au survol / à l'interaction, masqué
   * après 2,5 s d'immobilité — façon YouTube. Sur tactile, `mousemove` ne
   * tire presque jamais : le chrome reste visible en permanence.
   */
  pokeChrome(): void {
    try {
      this.chromeVisible.set(true);
      if (this.chromeIdleTimer) clearTimeout(this.chromeIdleTimer);
      this.chromeIdleTimer = setTimeout(() => {
        try { this.chromeVisible.set(false); } catch {}
      }, 2500);
    } catch {}
  }

  /**
   * Tap sur la vidéo (mobile : l'overlay capte le toucher, l'iframe ne le
   * voit pas — voir `.shorts-gesture`) :
   * - YouTube : play/pause via l'API iframe (état suivi par `playerState`) ;
   * - autres (pas d'API) : 6 s d'accès DIRECT au lecteur — l'overlay
   *   s'efface et les boutons du fournisseur deviennent touchables, puis
   *   l'overlay revient seul. Discret et réversible.
   */
  private onVideoTap(): void {
    try {
      const v = this.current();
      if (!v) return;
      this.pokeChrome();
      if (this.providerOf(v) === 'youtube') {
        const play = !this.ytPlaying();
        this.postToPlayer({ event: 'command', func: play ? 'playVideo' : 'pauseVideo', args: '' });
        this.ytPlaying.set(play);
        return;
      }
      this.enterPassthrough();
    } catch {}
  }

  private enterPassthrough(): void {
    try {
      this.passthrough.set(true);
      this.passthroughHint.set(true);
      if (this.passthroughTimer) clearTimeout(this.passthroughTimer);
      this.passthroughTimer = setTimeout(() => {
        try { this.passthrough.set(false); this.passthroughHint.set(false); } catch {}
      }, 6000);
    } catch {}
  }

  toggleFullscreen(): void {
    try {
      if (document.fullscreenElement) {
        document.exitFullscreen();
        return;
      }
      const el = this.frameRef()?.nativeElement;
      if (el?.requestFullscreen) el.requestFullscreen();
    } catch {}
  }

  private handleFullscreenChange = (): void => {
    try { this.isFullscreen.set(!!document.fullscreenElement); } catch {}
  };

  closeMenu(): void {
    this.menuOpen.set(false);
  }

  copyLink(): void {
    const url = this.providerUrl() || (typeof window !== 'undefined' ? window.location.href : '');
    if (!url) return;
    const done = () => {
      this.shareCopied.set(true);
      this.menuOpen.set(false);
      if (this.shareCopiedTimer) { try { clearTimeout(this.shareCopiedTimer); } catch {} }
      this.shareCopiedTimer = setTimeout(() => this.shareCopied.set(false), 2000);
    };
    try {
      if (navigator?.clipboard?.writeText) {
        navigator.clipboard.writeText(url).then(done).catch(() => {});
        return;
      }
    } catch {}
  }

  share(): void {
    const v = this.current();
    const url = this.providerUrl() || '';
    this.menuOpen.set(false);
    try {
      const nav: any = navigator as any;
      if (nav?.share && url) {
        nav.share({ title: v?.title || 'Short', url }).catch(() => {});
        return;
      }
    } catch {}
    this.copyLink();
  }

  toggleLike(): void {
    const v = this.current();
    if (!v?.videoId || !this.isLoggedIn() || this.likeBusy()) return;
    const p = this.providerOf(v);
    this.likeBusy.set(true);
    const done = (liked: boolean) => {
      this.liked.set(liked);
      this.likeBusy.set(false);
    };
    if (this.liked()) {
      this.likes.unlike(p, v.videoId).subscribe({
        next: () => done(false),
        error: () => this.likeBusy.set(false),
      });
    } else {
      this.likes.like(p, v.videoId, v.title, v.thumbnail).subscribe({
        next: () => done(true),
        error: () => this.likeBusy.set(false),
      });
    }
  }

  toggleSubscribe(): void {
    const key = this.currentChannelKey();
    if (!key || !this.isLoggedIn() || this.subBusy()) return;
    this.subBusy.set(true);
    if (this.isSubscribed()) {
      try {
        const item = (this.subs.items() || []).find(
          s => (s as any)?.channel?.provider === key.short && (s as any)?.channel?.externalId === key.externalId
        );
        const id = (item as any)?.subscriptionId;
        if (id == null) { this.subBusy.set(false); return; }
        this.subs.unsubscribe(Number(id)).subscribe({
          next: () => this.subBusy.set(false),
          error: () => this.subBusy.set(false),
        });
      } catch { this.subBusy.set(false); }
      return;
    }
    this.subs.subscribe(key.short, key.externalId).subscribe({
      next: () => this.subBusy.set(false),
      error: () => this.subBusy.set(false),
    });
  }

  /** Progression + erreurs YouTube via postMessage (enablejsapi=1). */
  private handleShortMessage = (ev: MessageEvent): void => {
    try {
      const origin = String(ev?.origin || '');
      if (!origin.includes('youtube')) return;
      const v = this.current();
      if (!v || this.providerOf(v) !== 'youtube') return;
      const data = typeof ev?.data === 'string' ? JSON.parse(ev.data) : ev?.data;
      if (!data || typeof data !== 'object') return;
      // Erreur player (153/150/101…) : on saute automatiquement, comme l'app
      // native qui ne montre jamais une erreur à la place d'un Short.
      if (data.event === 'onError') {
        try { this.skipUnplayable(); } catch {}
        return;
      }
      // Fin/début/pause canoniques (`onStateChange`, plus fiable que le temps :
      // pas de marge). Requiert le handshake `listening` (voir nudgeYouTubePlay).
      if (data.event === 'onStateChange') {
        const st = Number(data.info);
        const cur = this.current();
        if (!cur || String(cur.videoId) !== String(v.videoId) || !Number.isFinite(st)) return;
        const id = String(v.videoId);
        if (st === 0) {
          this.advanceFromPlayer(id);
        } else if (st === 2) {
          // Pause utilisateur : état + minuteur désarmé (on n'avance pas une
          // vidéo mise en pause).
          this.ytPlaying.set(false);
          this.autoAdvanceKey = `paused:${id}`;
        } else if (st === 1) {
          this.ytPlaying.set(true);
          if (this.autoAdvanceKey.startsWith('paused:')) this.scheduleAutoAdvance(v);
        }
        return;
      }
      if (data.event === 'infoDelivery' && data.info && typeof data.info === 'object') {
        const ct = Number(data.info.currentTime);
        let dur = Number(data.info.duration);
        if (!Number.isFinite(dur) || dur <= 0) dur = Number((v as any)?.duration || 0);
        // `playerState` YouTube : 0 = fin, 1 = lecture, 2 = pause.
        const state = Number(data.info.playerState);
        const cur = this.current();
        const same = !!cur && String(cur.videoId) === String(v.videoId);
        if (Number.isFinite(state) && same) {
          const id = String(v.videoId);
          if (state === 0) {
            // Fin certaine (plus fiable que le temps : pas de marge) → suivant.
            this.advanceFromPlayer(id);
            return;
          }
          if (state === 2) {
            // Pause utilisateur : on désarme le minuteur générique pour ne
            // pas faire avancer une vidéo mise en pause.
            this.ytPlaying.set(false);
            this.autoAdvanceKey = `paused:${id}`;
            return;
          }
          if (state === 1) {
            // Reprise après pause : on réarme le minuteur (repli, la fin
            // temps réel prime de toute façon).
            this.ytPlaying.set(true);
            if (this.autoAdvanceKey.startsWith('paused:')) this.scheduleAutoAdvance(v);
            return;
          }
        }
        if (Number.isFinite(ct) && ct >= 0 && dur > 0) {
          this.ytProgress.set(Math.max(0, Math.min(1, ct / dur)));
          // Fin de lecture (marge 0,75 s : l'événement arrive par salves) →
          // short suivant, façon YouTube. Gardé par videoId : l'événement ne
          // doit jamais faire avancer une vidéo déjà quittée. La clé écrase
          // aussi le minuteur générique (même garde).
          if (ct >= dur - 0.75) {
            const cur = this.current();
            if (cur && String(cur.videoId) === String(v.videoId)) {
              this.advanceFromPlayer(String(v.videoId));
            }
          }
        }
      }
    } catch {}
  };

  /**
   * Répartiteur du flux Shorts par provider :
   *  - PeerTube : vidéos locales uniquement (les distantes échouent à
   *    l'embed : "follow constraints" / "does not exist") ;
   *  - Rumble : flux natif /shorts (vertical ≤ 90 s) + recherche ;
   *  - autres : recherche filtrée durée côté serveur quand possible.
   */
  private shortsPage(query: string, cursor?: string | null) {
    const p = this.provider();
    if (p === 'peertube') return this.api.searchPeerTubeShortsPage(query, cursor);
    if (p === 'rumble') return this.api.searchRumbleShortsPage(query, cursor);
    return this.api.searchShortsPage(query, cursor);
  }

  selectProvider(p: Provider): void {
    if (this.forYou()) this.forYou.set(false);
    if (p === this.provider()) {
      if (this.items().length === 0) this.loadFeed();
      return;
    }
    this.instances.setSelectedProvider(p);
    // L'effect ci-dessus déclenche loadFeed().
  }

  // ------------------------- Mode "Pour toi" -------------------------
  // Flux personnalisé multi-fournisseurs : les sujets sont extraits des
  // abonnements (+ groupes), de l'historique de recherche et de visionnage,
  // des likes et des téléchargements, puis chaque sujet est cherché en
  // Shorts sur tous les fournisseurs et les résultats sont entrelacés.

  toggleForYou(): void {
    if (this.forYou()) {
      this.forYou.set(false);
      this.loadFeed();
      return;
    }
    this.forYou.set(true);
    this.loadForYou();
  }

  private loadForYou(): void {
    this.loading.set(true);
    this.error.set(null);
    this.items.set([]);
    this.index.set(0);
    this.nextCursor.set(null);
    this.seenIds = new Set<string>();
    this.topicsLoading.set(true);
    // Hydrate les abonnements/groupes (signaux) s'ils ne sont pas chargés.
    try { if (this.subs.items().length === 0) this.subs.list().subscribe(); } catch {}
    try { this.subs.listGroups().subscribe(); } catch {}
    const loggedIn = (() => { try { return !!this.auth.currentUser(); } catch { return false; } })();
    const search$ = loggedIn ? this.history.getSearchHistory(30).pipe(catchError(() => of([]))) : of([]);
    const watch$ = loggedIn ? this.history.getWatchHistory(30).pipe(catchError(() => of([]))) : of([]);
    const likes$ = loggedIn ? this.likes.list(100).pipe(catchError(() => of([]))) : of([]);
    const dl$ = loggedIn ? this.downloads.listJobs({ limit: 50 }).pipe(catchError(() => of({ items: [] }))) : of({ items: [] });
    forkJoin([search$, watch$, likes$, dl$]).subscribe({
      next: ([searches, watches, liked, jobs]: any[]) => {
        const topics = this.extractTopics(searches || [], watches || [], liked || [], (jobs as any)?.items || []);
        this.topics.set(topics);
        this.topicsLoading.set(false);
        if (!topics.length) {
          // Aucun signal : repli sur des sujets génériques populaires.
          this.topics.set(['music', 'gaming', 'funny', 'sports']);
        }
        this.fetchForYou(this.topics());
      },
      error: () => {
        this.topicsLoading.set(false);
        this.topics.set(['music', 'gaming', 'funny', 'sports']);
        this.fetchForYou(this.topics());
      }
    });
  }

  /** Extrait des sujets pondérés (abos ×3, recherches ×2, reste ×1). */
  private extractTopics(searches: any[], watches: any[], liked: any[], jobs: any[]): string[] {
    const scores = new Map<string, number>();
    const fullQueries: Array<{ q: string; w: number }> = [];
    const addText = (text: string, weight: number) => {
      const clean = String(text || '').toLowerCase().replace(/[#@]/g, ' ').replace(/[^a-zà-ÿ0-9\s'-]/gi, ' ');
      for (const tok of clean.split(/[\s'’-]+/)) {
        const t = tok.trim().replace(/^-+|-+$/g, '');
        if (t.length < 3 || TOPIC_STOPWORDS.has(t) || /^\d+$/.test(t)) continue;
        scores.set(t, (scores.get(t) || 0) + weight);
      }
    };
    try {
      for (const s of this.subs.items() || []) {
        const name = String((s as any)?.channel?.title || (s as any)?.channel?.handle || '');
        if (name) addText(name, 3);
      }
      for (const g of this.subs.subscriptionGroups() || []) {
        if ((g as any)?.name) addText(String((g as any).name), 3);
        const kw = GROUP_ICON_KEYWORDS[String((g as any)?.icon || '')];
        if (kw) addText(kw, 2);
      }
    } catch {}
    for (const h of searches || []) {
      const q = String((h as any)?.query || '').trim().slice(0, 40);
      if (q) {
        fullQueries.push({ q, w: 4 });
        addText(q, 2);
      }
    }
    for (const w of watches || []) {
      const t = String((w as any)?.title || '');
      if (t) addText(t, 1.5);
    }
    for (const l of liked || []) {
      const t = String((l as any)?.title || '');
      if (t) addText(t, 1.5);
    }
    for (const j of jobs || []) {
      const t = String((j as any)?.title || (j as any)?.fileName || '');
      if (t) addText(t, 1);
    }
    const ranked = Array.from(scores.entries()).sort((a, b) => b[1] - a[1]).map(([t]) => t);
    const out: string[] = [];
    const seen = new Set<string>();
    for (const fq of fullQueries.slice(0, 3)) {
      const key = fq.q.toLowerCase();
      if (!seen.has(key)) { seen.add(key); out.push(fq.q); }
    }
    for (const t of ranked) {
      if (out.length >= 8) break;
      if (!seen.has(t)) { seen.add(t); out.push(t); }
    }
    return out;
  }

  /**
   * Voie catalogue avec repli historique (mode « Pour toi ») : le catalogue
   * est tenté d'abord (cache 60 s, provenance) ; s'il rend moins de
   * `SHORTS_CATALOG_MIN_ITEMS` items — ou en erreur — on rejoue l'appel
   * historique fourni. Le reste du pipeline (filtre `accepts`, mélange,
   * entrelacement) est inchangé.
   */
  private catalogOrLegacy(p: Provider, topic: string, legacy: any): any {
    const attempt = this.catalog.fetchCatalogShorts(p, topic, { page: 1, pageSize: SHORTS_CATALOG_PAGE_SIZE }).then(
      (r) => {
        const videos = (r.items || [])
          .map((it) => catalogShortToVideo(it))
          .filter((v): v is Video => !!v?.videoId);
        return videos.length >= SHORTS_CATALOG_MIN_ITEMS ? { items: videos, nextCursor: null } : null;
      },
      () => null,
    ).catch(() => null);
    return from(attempt).pipe(
      switchMap((hit) => hit
        ? of(hit)
        : (legacy as any).pipe(catchError(() => of({ items: [], nextCursor: null })))),
    );
  }

  /** Cherche chaque sujet en Shorts sur tous les fournisseurs et entrelace. */
  private fetchForYou(topics: string[]): void {    const picks = topics.slice(0, 4);
    if (!picks.length) {
      this.afterNoResults();
      this.loading.set(false);
      return;
    }
    const defs: Array<{ provider: Provider; call: any }> = [];
    const ready = (p: Provider) => {
      try { return this.instances.getProviderReadiness(p).ready; } catch { return true; }
    };
    for (const t of picks) {
      if (ready('youtube')) defs.push({ provider: 'youtube', call: this.catalogOrLegacy('youtube', t, this.api.searchShortsPage(t, null, 'youtube' as Provider)) });
      if (ready('dailymotion')) defs.push({ provider: 'dailymotion', call: this.catalogOrLegacy('dailymotion', t, this.api.searchShortsPage(t, null, 'dailymotion' as Provider)) });
      if (ready('peertube')) defs.push({ provider: 'peertube', call: this.catalogOrLegacy('peertube', t, this.api.searchPeerTubeShortsPage(t, null)) });
      if (ready('rumble')) defs.push({ provider: 'rumble', call: this.catalogOrLegacy('rumble', t, this.api.searchRumbleShortsPage(t, null)) });
      if (ready('odysee')) defs.push({ provider: 'odysee', call: this.catalogOrLegacy('odysee', t, this.api.searchShortsPage(t, null, 'odysee' as Provider)) });
    }
    if (ready('twitch')) {
      for (const t of picks.slice(0, 2)) {
        defs.push({ provider: 'twitch', call: this.api.searchTwitchClipsPage(t).pipe(catchError(() => of({ items: [], nextCursor: null }))) });
      }
    }
    if (!defs.length) {
      this.afterNoResults();
      this.loading.set(false);
      return;
    }
    forkJoin(defs.map(d => d.call.pipe(catchError(() => of({ items: [], nextCursor: null }))))).subscribe({
      next: (pages: any[]) => {
        // Regroupe par provider puis entrelace (tourniquet) pour mixer les sources.
        const byProvider: Video[][] = defs.map((d, i) => {
          const raw = ((pages[i]?.items || []) as Video[]).filter(v => !!v?.videoId);
          const list = raw.filter(v =>
            this.accepts({ ...v, provider: d.provider } as Video) &&
            (d.provider !== 'twitch' || this.shortsLangOk({ ...v, provider: d.provider } as Video))
          );
          // Mélange léger par sujet pour varier l'ordre à chaque visite.
          for (let k = list.length - 1; k > 0; k--) {
            const j = Math.floor(Math.random() * (k + 1));
            [list[k], list[j]] = [list[j], list[k]];
          }
          return list;
        });
        const merged: Video[] = [];
        let added = true;
        while (added && merged.length < 80) {
          added = false;
          for (const arr of byProvider) {
            const v = arr.shift();
            if (!v) continue;
            const key = `${String((v as any).provider || '')}:${String(v.videoId)}`;
            if (this.seenIds.has(key)) continue;
            this.seenIds.add(key);
            merged.push(v);
            added = true;
            if (merged.length >= 80) break;
          }
        }
        this.items.set(merged);
        this.index.set(0);
        this.nextCursor.set(null);
        // Pré-validation Rumble (retire les "Video not found").
        this.queueRumbleResolves(merged);
        if (!merged.length) this.afterNoResults(); else this.error.set(null);
        this.loading.set(false);
      },
      error: () => {
        this.afterNoResults();
        this.loading.set(false);
      }
    });
  }

  retry(): void {
    this.loadFeed();
  }

  /**
   * La vidéo courante est illisible (erreur 153 YouTube, Forbidden
   * Dailymotion, "Video not found"…): on la retire du flux et on avance,
   * façon YouTube Shorts qui saute les contenus indisponibles.
   */
  skipUnplayable(): void {
    this.dropAt(this.index());
  }

  /**
   * Retire silencieusement l'item à `idx` (pré-validation échouée, erreur
   * player…) en gardant la position de lecture cohérente, puis relance le
   * flux si la liste se vide (infini).
   */
  private dropAt(idx: number): void {
    const list = this.items();
    if (idx < 0 || idx >= list.length) return;
    const cur = this.index();
    const next = list.slice(0, idx).concat(list.slice(idx + 1));
    this.items.set(next);
    if (idx < cur) this.index.set(cur - 1);
    else if (cur >= next.length) this.index.set(Math.max(0, next.length - 1));
    if (next.length === 0 && !this.loading()) {
      if (this.forYou()) {
        this.afterNoResults();
      } else if (this.nextCursor() || this.hasMoreQueries() || this.provider() === 'rumble' || this.provider() === 'twitch') {
        this.fetchNextPage(true);
      } else {
        this.afterNoResults();
      }
    } else if (!this.forYou() && this.index() >= Math.max(0, next.length - 3)) {
      this.fetchNextPage(false);
    }
  }

  private dropRumbleId(id: string): void {
    const list = this.items();
    const idx = list.findIndex(v => this.providerOf(v) === 'rumble' && this.rumbleIdOf(v) === id);
    if (idx >= 0) this.dropAt(idx);
  }

  loadFeed(): void {
    if (this.forYou()) {
      this.loadForYou();
      return;
    }
    this.loading.set(true);
    this.error.set(null);
    this.items.set([]);
    this.index.set(0);
    this.nextCursor.set(null);
    this.seenIds = new Set<string>();
    this.queryIndex = 0;
    this.exhaustedQueries = new Set<string>();
    this.catalogActive = false;
    this.catalogError.set(null);
    const ready = this.instances.getProviderReadiness(this.provider());
    if (!ready.ready) {
      this.loading.set(false);
      this.error.set(ready.reason || 'Provider not ready.');
      return;
    }
    const provider = this.provider();
    // Shorts via le CATALOGUE d'abord (`/api/search?type=shorts` : cache,
    // provenance, feature-flags). Twitch garde son flux de clips historique
    // (pas d'équivalent catalogue : la recherche serveur renvoie des VOD).
    if (provider === 'twitch') {
      this.catalogActive = false;
      this.api.getTwitchClipsFeed()?.subscribe({
        next: (res: { items: Video[]; nextCursor?: string | null }) => {
          const raw: Video[] = (res.items || []).filter((v: Video) => !!v.videoId);
          // Langue utilisateur + double sécurité anti "time machine".
          this.twitchShortsReady(raw.filter((v: Video) => this.accepts(v))).subscribe({
            next: (filtered) => {
              const list: Video[] = this.dedup(filtered);
              this.items.set(list);
              this.index.set(0);
              this.nextCursor.set(res.nextCursor || null);
              if (list.length === 0) {
                // Repli : clips thématiques puis trending, pour ne jamais rester vide.
                this.loadTwitchThemeFallback();
              } else {
                this.error.set(null);
                this.loading.set(false);
                if (list.length <= 4) this.fetchNextPage(false);
              }
            },
            error: () => this.loadTwitchThemeFallback(),
          });
        },
        error: () => {
          this.loadTwitchThemeFallback();
        }
      });
      return;
    }
    this.loadCatalogFeed();
  }

  /**
   * Voie catalogue : une page `/api/search?type=shorts` pour la requête
   * courante, mappée vers le modèle du flux puis soumise aux mêmes portes que
   * l'historique (`accepts()` : classification centrale + jouabilité +
   * langue, enrichissement des durées YouTube inclus). Sous le seuil
   * `SHORTS_CATALOG_MIN_ITEMS` — ou en erreur — on rejoue le chemin
   * historique direct : le flux ne reste jamais vide pour une raison
   * d'alimentation.
   */
  private loadCatalogFeed(): void {
    this.catalogActive = true;
    this.catalogPage = 1;
    this.catalogError.set(null);
    const query = this.currentQuery();
    this.catalog.fetchCatalogShorts(this.provider(), query, { page: 1, pageSize: SHORTS_CATALOG_PAGE_SIZE }).then(
      (res) => {
        if (!this.catalogActive) return; // un rechargement a eu lieu entre-temps
        if (res.providerError) this.catalogError.set(res.providerError);
        const raw = (res.items || [])
          .map((it) => catalogShortToVideo(it))
          .filter((v): v is Video => !!v?.videoId);
        if (this.provider() === 'youtube' && raw.length) {
          this.pickYouTubeShorts(raw).then(
            (list) => this.showCatalogList(list.filter((v) => this.accepts(v)), query),
            () => this.loadLegacyFeed(),
          );
          return;
        }
        this.showCatalogList(raw.filter((v) => this.accepts(v)), query);
      },
      () => this.loadLegacyFeed(),
    ).catch(() => this.loadLegacyFeed());
  }

  /** Affiche un lot catalogue (mêmes invariants que la voie historique). */
  private showCatalogList(list: Video[], query: string): void {
    if (!this.catalogActive) return;
    if (list.length >= SHORTS_CATALOG_MIN_ITEMS) {
      const deduped = this.dedup(list);
      this.items.set(deduped);
      this.index.set(0);
      this.nextCursor.set(null);
      this.error.set(null);
      this.loading.set(false);
      this.queueRumbleResolves(deduped);
      this.ensureAvatar(deduped[0] || null);
      if (deduped.length > 0 && deduped.length <= 4) this.fetchNextPage(false);
      return;
    }
    // Lot trop maigre : la requête est marquée épuisée côté catalogue et on
    // rejoue l'historique (qui a ses propres requêtes de secours + trending).
    this.catalogActive = false;
    this.loadLegacyFeed();
  }

  /**
   * Chemin historique direct (requêtes `SHORTS_QUERIES` vers les API
   * fournisseurs) : inchangé, il sert de repli au catalogue et reste la voie
   * des cas sans équivalent catalogue.
   */
  private loadLegacyFeed(): void {
    this.catalogActive = false;
    this.shortsPage(this.currentQuery()).subscribe({
      next: (res) => this.handleShortsResponse(res, true),
      error: () => this.tryNextShortsQueryOrTrending(),
    });
  }

  /** Repli Twitch : clips sur requêtes génériques, puis top streams. */
  private loadTwitchThemeFallback(): void {
    const queries = this.queriesFor('twitch');
    const q = queries[this.queryIndex % queries.length] || 'gaming';
    this.api.searchTwitchClipsPage(q)?.subscribe({
      next: (res) => {
        const raw = (res?.items || []).filter(v => !!v.videoId);
        const shorts = raw.filter(v => this.accepts(v));
        // Langue utilisateur + validation (recherche non validée côté service).
        this.twitchShortsReady(shorts).subscribe({
          next: (filtered) => {
            const list = this.dedup(filtered);
            this.showTwitchFallbackList(list, res?.nextCursor || null);
          },
          error: () => this.showTwitchFallbackList(this.dedup(shorts), res?.nextCursor || null),
        });
      },
      error: () => { this.afterNoResults(); this.loading.set(false); }
    });
  }

  private showTwitchFallbackList(list: Video[], nextCursor: string | null): void {
    if (list.length > 0) {
      this.items.set(list);
      this.index.set(0);
      this.nextCursor.set(nextCursor);
      this.error.set(null);
      this.loading.set(false);
      if (list.length <= 4) this.fetchNextPage(false);
    } else {
      this.api.getTwitchTopStreamsPage()?.subscribe({
        next: (top) => {
          const clips = (top?.items || []).filter(v => !!v.videoId);
          const mapped = this.dedup(clips.map(v => ({ ...v, kind: 'clip' as const })));
          this.items.set(mapped);
          this.index.set(0);
          this.nextCursor.set(top?.nextCursor || null);
          if (!mapped.length) this.afterNoResults(); else this.error.set(null);
          this.loading.set(false);
        },
        error: () => { this.afterNoResults(); this.loading.set(false); }
      });
    }
  }

  /** Applique le filtre Shorts à une page de résultats (1er passage ou requête de secours). */
  private handleShortsResponse(res: { items: Video[]; nextCursor?: string | null }, allowAltQuery: boolean): void {
    const raw = (res.items || []).filter(v => !!v.videoId);
    this.nextCursor.set(res.nextCursor || null);
    if (!res.nextCursor) this.exhaustedQueries.add(this.currentQuery());
    const show = (list: Video[]) => {
      const deduped = this.dedup(list);
      this.items.set(deduped);
      this.index.set(0);
      this.error.set(null);
      this.loading.set(false);
      // Pré-validation Rumble de tout le lot (retire les "Video not found").
      this.queueRumbleResolves(deduped);
      if (deduped.length > 0 && deduped.length <= 4) this.fetchNextPage(false);
    };
    if (this.provider() === 'youtube' && raw.length) {
      this.pickYouTubeShorts(raw).then(list => {
        const shorts = this.dedup(list.filter(v => this.accepts(v)));
        if (shorts.length > 0) show(shorts);
        else if (allowAltQuery) this.tryNextShortsQueryOrTrending();
        else this.loadTrendingFallback();
      }).catch(() => {
        if (allowAltQuery) this.tryNextShortsQueryOrTrending();
        else this.loadTrendingFallback();
      });
      return;
    }
    const list = this.dedup(raw.filter(v => this.accepts(v)));
    if (list.length > 0) show(list);
    else if (allowAltQuery) this.tryNextShortsQueryOrTrending();
    else this.loadTrendingFallback();
  }

  /** Passe à la requête suivante de la rotation avant le repli trending. */
  private tryNextShortsQueryOrTrending(): void {
    const list = this.queriesFor(this.provider());
    this.exhaustedQueries.add(this.currentQuery());
    if (this.queryIndex < list.length - 1) {
      this.queryIndex++;
      this.shortsPage(this.currentQuery()).subscribe({
        next: (res) => this.handleShortsResponse(res, true),
        error: () => this.tryNextShortsQueryOrTrending(),
      });
      return;
    }
    this.loadTrendingFallback();
  }

  /** Repli : trending du provider filtré sur les Shorts (jamais de contenu long). */
  private loadTrendingFallback(): void {
    this.api.getTrendingPage(null).subscribe({
      next: (res) => {
        const raw = (res.items || []).filter(v => !!v.videoId);
        const p = this.provider();
        const apply = (list: Video[]) => {
          const deduped = this.dedup(list);
          this.items.set(deduped);
          this.index.set(0);
          this.nextCursor.set(null);
          if (deduped.length === 0) this.afterNoResults(); else this.error.set(null);
          this.loading.set(false);
        };
        if (p === 'youtube' && raw.length) {
          this.filterYouTubeShorts(raw).then(list => apply(list.filter(v => this.accepts(v)))).catch(() => apply([]));
        } else {
          apply(raw.filter(v => this.accepts(v)));
        }
      },
      error: () => {
        this.afterNoResults();
        this.loading.set(false);
      }
    });
  }

  /**
   * Le feed accepte-t-il cet item ? Séparation stricte :
   *  - classification : `shortsFeedAccepts` (centre video-kind/section-policy,
   *    tolérance « durée inconnue » Rumble/Odysee incluse) ;
   *  - jouabilité : `isPlayable` (allowEmbed, lives/chaînes Twitch, Rumble 404).
   */
  private accepts(v: Video): boolean {
    const p = String((v as any).provider || this.provider()).toLowerCase();
    const withProvider = { ...(v as object), provider: p } as Video;
    return shortsFeedAccepts(withProvider, p) && this.isPlayable(withProvider) && this.shortsLangOk(withProvider);
  }

  /** Jouabilité : l'embed répondra-t-il ? (indépendant du type de contenu) */
  private isPlayable(v: Video): boolean {
    const p = String((v as any).provider || this.provider()).toLowerCase();
    const ctx: PlayableContext = { provider: p };
    if (p === 'rumble') {
      const id = this.rumbleIdOf(v);
      if (id) {
        ctx.rumbleResolved = !!this.resolvedRumbleEmbed()[id];
        ctx.rumbleFailed = this.rumbleEmbedFailed.has(id);
      }
    }
    return isPlayablePolicy(v, ctx);
  }

  /**
   * La vidéo respecte-t-elle les langues préférées (filtre de la page :
   * profil utilisateur par défaut, restriction explicite sinon) ?
   * On lit `language` (mappé pour DM/PeerTube/Odysee) ou `raw.language`
   * (Twitch). Sans métadonnée, le doute profite à la vidéo : YouTube et
   * PeerTube sont de toute façon filtrés côté serveur (relevanceLanguage,
   * languageOneOf) et Rumble n'expose pas la langue.
   */
  private shortsLangOk(v: Video): boolean {
    const lang = String((v as any)?.language || (v as any)?.raw?.language || '')
      .toLowerCase().split('-')[0];
    if (!lang || lang === 'other') return true;
    const accepted = this.effectiveShortsLangs();
    // `[]` = mode « toutes langues » : tout passe.
    if (!accepted.length) return true;
    return accepted.includes(lang);
  }

  /** Shorts Twitch : langue utilisateur + clips morts exclus avant affichage. */
  private twitchShortsReady(list: Video[]): import('rxjs').Observable<Video[]> {
    const inLang = list.filter(v => this.shortsLangOk(v));
    return this.withoutDeadClips(inLang);
  }

  /**
   * Exclut les clips Twitch morts ("time machine") avant affichage.
   * Les flux game/broadcaster sont déjà validés côté service ; ce garde-fou
   * couvre la recherche de clips thématique (repli).
   */
  private withoutDeadClips(list: Video[]): import('rxjs').Observable<Video[]> {
    const clips = list.filter(v => String((v as any).kind || '').toLowerCase() === 'clip' && !!v.videoId);
    if (!clips.length) return of(list);
    return this.api.validateTwitchClipIds(clips.map(v => v.videoId)).pipe(
      map(valid => list.filter(v =>
        String((v as any).kind || '').toLowerCase() !== 'clip' || !v.videoId || valid.has(v.videoId)
      )),
      catchError(() => of(list))
    );
  }

  /** Dedup inter-pages (clé videoId + provider). */
  private dedup(list: Video[]): Video[] {
    const out: Video[] = [];
    for (const v of list) {
      const key = `${String((v as any).provider || this.provider())}:${String(v.videoId)}`;
      if (!v.videoId || this.seenIds.has(key)) continue;
      this.seenIds.add(key);
      out.push(v);
    }
    return out;
  }

  private fetchNextPage(autoAdvance = false) {
    if (this.busyMore() || this.forYou()) return;
    const provider = this.provider();
    // Voie catalogue : pages `/api/search` successives de la requête courante,
    // puis requête suivante de la rotation. Contrairement au chemin historique
    // (curseurs opaques), la pagination est un simple compteur de pages.
    if (this.catalogActive && provider !== 'twitch') {
      this.busyMore.set(true);
      this.fetchCatalogMore(this.currentQuery(), this.catalogPage + 1, autoAdvance);
      return;
    }
    // Cas Twitch : pagination du flux de clips (curseur streams) ou rotation.
    if (provider === 'twitch') {
      if (!this.nextCursor() && !this.hasMoreQueries() && this.items().length > 0) {
        // Boucle infinie : on repart du début quand tout est épuisé.
        this.nextCursor.set(null);
      }
      if (!this.nextCursor()) {
        this.rotateTwitchQuery();
        return;
      }
      this.busyMore.set(true);
      const cursor = this.nextCursor();
      this.api.getTwitchClipsFeed(cursor || undefined)?.subscribe({
        next: (res: any) => this.handleMore(res, autoAdvance, () => this.rotateTwitchQuery(autoAdvance)),
        error: () => { this.busyMore.set(false); }
      });
      return;
    }
    const cursor = this.nextCursor();
    if (!cursor) {
      // Curseur épuisé → requête suivante de la rotation (infini).
      const list = this.queriesFor(provider);
      this.exhaustedQueries.add(this.currentQuery());
      if (this.queryIndex < list.length - 1) {
        this.queryIndex++;
        this.busyMore.set(true);
        this.shortsPage(this.currentQuery()).subscribe({
          next: (res) => this.handleMore(res, autoAdvance),
          error: () => { this.busyMore.set(false); }
        });
      } else if (this.items().length > 0) {
        // Tout est épuisé : on boucle sur la première requête (jamais de fin).
        this.queryIndex = 0;
        this.exhaustedQueries = new Set<string>();
        this.busyMore.set(true);
        this.shortsPage(this.currentQuery()).subscribe({
          next: (res) => this.handleMore(res, autoAdvance),
          error: () => { this.busyMore.set(false); }
        });
      }
      return;
    }
    this.busyMore.set(true);
    this.shortsPage(this.currentQuery(), cursor || undefined).subscribe({
      next: (res) => {
        this.handleMore(res, autoAdvance);
      },
      error: () => {
        this.busyMore.set(false);
      }
    });
  }

  /**
   * Page catalogue suivante (ajout au flux, jamais de remplacement).
   * Page vide (tout est déjà vu) → requête suivante de la rotation ; rotation
   * épuisée sans rien de neuf → on s'arrête proprement (pas de boucle de
   * re-fetch : le cache 60 s resservirait les mêmes items, tous dédupliqués).
   */
  private fetchCatalogMore(query: string, page: number, autoAdvance: boolean): void {
    const provider = this.provider();
    this.catalog.fetchCatalogShorts(provider, query, { page, pageSize: SHORTS_CATALOG_PAGE_SIZE }).then(
      (res) => {
        if (!this.catalogActive) { this.busyMore.set(false); return; }
        const raw = (res.items || [])
          .map((it) => catalogShortToVideo(it))
          .filter((v): v is Video => !!v?.videoId);
        const apply = (list: Video[]) => {
          const deduped = this.dedup(list.filter((v) => this.accepts(v)));
          if (deduped.length > 0) {
            this.catalogPage = page;
            const merged = this.items().concat(deduped);
            this.items.set(merged);
            this.queueRumbleResolves(deduped);
            if (autoAdvance) this.index.update((i) => Math.min(i + 1, merged.length - 1));
            this.busyMore.set(false);
            return;
          }
          const rotation = this.queriesFor(provider);
          if (this.queryIndex < rotation.length - 1) {
            this.queryIndex++;
            this.catalogPage = 1;
            this.fetchCatalogMore(this.currentQuery(), 1, autoAdvance);
          } else {
            // Rotation complète sans rien de neuf : fin du pré-chargement,
            // le flux existant reste consultable (jamais de spinner infini).
            this.queryIndex = 0;
            this.catalogPage = 1;
            this.busyMore.set(false);
          }
        };
        if (provider === 'youtube' && raw.length) {
          this.pickYouTubeShorts(raw).then(
            (list) => apply(list),
            () => { this.busyMore.set(false); },
          );
        } else {
          apply(raw);
        }
      },
      () => { this.busyMore.set(false); },
    ).catch(() => { this.busyMore.set(false); });
  }

  /** Passe à la requête Twitch suivante (clips thématiques). */
  private rotateTwitchQuery(autoAdvance = false): void {
    const list = this.queriesFor('twitch');
    if (this.queryIndex < list.length - 1) {
      this.queryIndex++;
      this.busyMore.set(true);
      this.api.searchTwitchClipsPage(this.currentQuery())?.subscribe({
        next: (res: any) => this.handleMore(res, autoAdvance),
        error: () => { this.busyMore.set(false); }
      });
    } else if (this.items().length > 0) {
      this.queryIndex = 0;
      this.busyMore.set(true);
      this.api.searchTwitchClipsPage(this.currentQuery())?.subscribe({
        next: (res: any) => this.handleMore(res, autoAdvance),
        error: () => { this.busyMore.set(false); }
      });
    } else {
      this.busyMore.set(false);
    }
  }

  /** Fusionne une page supplémentaire (dedup + filtre Shorts + avance auto). */
  private handleMore(res: any, autoAdvance: boolean, onEmpty?: () => void): void {
    const raw: Video[] = ((res.items || []) as Video[]).filter((v: Video) => !!v.videoId);
    const p = this.provider();
    const apply = (more: Video[]) => {
      const deduped = this.dedup(more);
      const merged = this.items().concat(deduped);
      this.items.set(merged);
      // Pré-validation Rumble du nouveau lot.
      this.queueRumbleResolves(deduped);
      this.nextCursor.set(res.nextCursor || null);
      if (!res.nextCursor) this.exhaustedQueries.add(this.currentQuery());
      if (autoAdvance && deduped.length > 0) {
        this.index.update(i => Math.min(i + 1, merged.length - 1));
      } else if (deduped.length === 0 && onEmpty) {
        onEmpty();
        return;
      } else if (deduped.length === 0 && !res.nextCursor && this.hasMoreQueries() && p !== 'twitch') {
        this.busyMore.set(false);
        this.fetchNextPage(autoAdvance);
        return;
      }
      this.busyMore.set(false);
    };
    if (p === 'youtube' && raw.length) {
      this.pickYouTubeShorts(raw).then((list: Video[]) => apply(list.filter((v: Video) => this.accepts(v)))).catch(() => { apply([]); });
    } else if (p === 'twitch' && raw.length) {
      // Langue utilisateur + clips paginés non tous validés côté service.
      const shorts = raw.filter((v: Video) => this.accepts(v));
      this.twitchShortsReady(shorts).subscribe({
        next: (clean) => apply(clean),
        error: () => apply(shorts),
      });
    } else {
      apply(raw.filter((v: Video) => this.accepts(v)));
    }
  }

  next(): void {
    if (this.canNext() && this.index() < this.items().length - 1) {
      this.index.update(i => i + 1);
    } else if (this.nextCursor() || this.hasMoreQueries()) {
      this.fetchNextPage(true);
    }
  }
  prev(): void { if (this.canPrev()) this.index.update(i => i - 1); }

  @HostListener('document:keydown', ['$event'])
  onKey(ev: KeyboardEvent) {
    if (this.items().length === 0) return;
    if (ev.key === 'ArrowDown') { ev.preventDefault(); this.next(); }
    if (ev.key === 'ArrowUp') { ev.preventDefault(); this.prev(); }
  }

  // Also listen on window to catch events when the cursor is over the iframe
  @HostListener('window:wheel', ['$event'])
  onWindowWheel(ev: WheelEvent) { this.onWheel(ev); }
  @HostListener('window:touchstart', ['$event'])
  onWindowTouchStart(ev: TouchEvent) { this.onTouchStart(ev); }
  @HostListener('window:touchend', ['$event'])
  onWindowTouchEnd(ev: TouchEvent) { this.onTouchEnd(ev); }

  // Handle mouse wheel on container (bound in template to allow preventDefault)
  onWheel(ev: WheelEvent) {
    if (this.items().length === 0) return;
    try { ev.preventDefault(); ev.stopPropagation(); } catch {}
    const now = Date.now();
    if (now - this.lastScrollTs < 250) return; // cooldown to avoid rapid fire
    this.wheelAccum += ev.deltaY;
    const threshold = 40; // more sensitive for trackpads
    if (this.wheelAccum > threshold) { this.wheelAccum = 0; this.lastScrollTs = now; this.next(); }
    else if (this.wheelAccum < -threshold) { this.wheelAccum = 0; this.lastScrollTs = now; this.prev(); }
  }

  onTouchStart(ev: TouchEvent) {
    if (this.items().length === 0) return;
    this.lastSwipeY = (ev.changedTouches?.[0]?.clientY ?? null);
  }

  onTouchEnd(ev: TouchEvent) {
    if (this.items().length === 0) return;
    const y = ev.changedTouches?.[0]?.clientY;
    if (this.lastSwipeY == null || y == null) return;
    const dy = y - this.lastSwipeY;
    const threshold = 50;
    if (dy < -threshold) this.next();
    else if (dy > threshold) this.prev();
    else if (Math.abs(dy) < 12) this.onVideoTap();
    this.lastSwipeY = null;
  }
}