import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, effect, inject, signal, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { InstanceService, Provider } from '../../services/instance.service';
import { ThemesService } from '../../services/themes.service';
import { YoutubeApiService } from '../../services/youtube-api.service';
import { Video } from '../../models/video.model';
import { TranslatePipe } from '../../pipes/translate.pipe';
import { LikeButtonComponent } from '../shared/components/like-button/like-button.component';
import { DurationPipe } from '../../app/shared/pipes/duration.pipe';
import { ProviderBadgeComponent } from '../../app/shared/components/provider-badge/provider-badge.component';
import { ChannelIdentityComponent } from '../../app/shared/components/channel-identity/channel-identity.component';
import { InfiniteAnchorComponent } from '../shared/infinite-anchor/infinite-anchor.component';
import { classifyVideo, isLiveVideo, isShortVideo } from '../../app/shared/utils/video-kind';
import { map, of, switchMap, catchError, forkJoin, Observable } from 'rxjs';
import { timeout } from 'rxjs/operators';
import { PagedResult } from '../../services/youtube-api.service';

const TWITCH_THEME_KEYWORDS: Record<string, string[]> = {
  trending: ['just chatting', 'highlights'],
  live: ['live', 'stream'],
  gaming: ['gaming', 'playthrough'],
  sports: ['sports', 'esports'],
  'finance-crypto': ['finance', 'crypto'],
  business: ['business', 'entrepreneur'],
  tech: ['technology', 'coding'],
  science: ['science', 'space'],
  health: ['fitness', 'wellness'],
  music: ['music', 'performance'],
  podcasts: ['podcast', 'talk show'],
  'movies-tv': ['movie review', 'tv discussion'],
  education: ['education', 'tutorial'],
  travel: ['travel vlog'],
  food: ['cooking', 'food'],
  'diy-makers': ['diy', 'maker'],
  autos: ['car build', 'automotive'],
  'nature-animals': ['outdoors', 'wildlife'],
  comedy: ['comedy', 'standup'],
  'art-design': ['art stream', 'drawing'],
  vlogs: ['vlog', 'lifestyle'],
  reviews: ['tech review', 'unboxing'],
  documentary: ['history', 'documentary'],
  'family-kids': ['family', 'kids'],
  news: ['news', 'politics'],
};
@Component({
  selector: 'app-provider-theme',
  standalone: true,
  templateUrl: './provider-theme-page.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, FormsModule, RouterLink, TranslatePipe, LikeButtonComponent, DurationPipe, ProviderBadgeComponent, ChannelIdentityComponent, InfiniteAnchorComponent]
})
export class ProviderThemePageComponent implements OnDestroy {
  private route = inject(ActivatedRoute);
  private router = inject(Router);
  private instances = inject(InstanceService);
  themes = inject(ThemesService);
  private api = inject(YoutubeApiService);
  private cdr = inject(ChangeDetectorRef);

  provider = signal<Provider>('youtube');
  theme = signal<string>('trending');

  // Guard to ignore stale async responses
  private version = 0;

  // Filters state
  sort = signal<'recent' | 'viewed' | 'longest'>('recent');
  duration = signal<'any' | 'short' | 'medium' | 'long'>('any');
  type = signal<'any' | 'video' | 'live' | 'recorded' | 'short' | 'channel'>('any');
  language = signal<'any' | 'en' | 'fr'>('any');
  date = signal<'any' | 'day' | 'week' | 'month' | 'year'>('any');

  // Data state
  allVideos = signal<Video[]>([]);
  nextCursor = signal<string | null>(null);
  // Curseurs par section Twitch (les paginations Helix sont indépendantes).
  private twitchCursors = { live: null as string | null, vod: null as string | null, clip: null as string | null, channel: null as string | null };
  /** Catégorie Twitch résolue (directory/category façon twitch.tv). */
  twitchGame = signal<{ id: string; name: string; boxArtUrl?: string } | null>(null);
  loading = signal(false);
  // Continuation (cursor > first page): grid stays mounted, bottom loader only.
  loadingMore = signal(false);
  error = signal<string | null>(null);

  // Derived state for the UI
  providersList = computed(() => this.instances.providers());
  videos = computed(() => this.applyFilters(this.allVideos()));

  /** La page courante est-elle une page Twitch à sections (hors thème live) ? */
  isTwitchSections = computed(() => this.provider() === 'twitch' && this.theme() !== 'live');

  /** Listes Twitch par section (filtres hors-type appliqués), façon directory. */
  private twitchFilteredNoType(): Video[] {
    return this.applyFiltersWithType(this.allVideos(), 'any');
  }

  twitchLives = computed(() => {
    const p = this.provider();
    return this.twitchFilteredNoType().filter(v =>
      isLiveVideo({ ...v, provider: (v.provider as string) || p }));
  });
  twitchVods = computed(() => {
    const p = this.provider();
    return this.twitchFilteredNoType().filter(v => {
      const w = { ...v, provider: (v.provider as string) || p };
      if (isLiveVideo(w)) return false;
      if (isShortVideo(w)) return false;
      if (String(v.type || '').toLowerCase() === 'channel') return false;
      return true;
    });
  });
  twitchClips = computed(() => {
    const p = this.provider();
    return this.twitchFilteredNoType().filter(v => {
      const w = { ...v, provider: (v.provider as string) || p };
      if (isLiveVideo(w)) return false;
      if (String(v.type || '').toLowerCase() === 'channel') return false;
      if (String((v as any).kind || '').toLowerCase() === 'clip') return true;
      return isShortVideo(w);
    });
  });
  twitchChannels = computed(() => {
    const p = this.provider();
    return this.twitchFilteredNoType().filter(v => {
      if ((v as any).isLive === true) return false;
      if (isLiveVideo({ ...v, provider: (v.provider as string) || p })) return false;
      return String(v.type || '').toLowerCase() === 'channel';
    });
  });

  /** Onglet Twitch synchronisé avec le filtre "type" existant. */
  twitchTab = computed<'all' | 'live' | 'video' | 'clip' | 'channel'>(() => {
    const t = this.type();
    if (t === 'live') return 'live';
    if (t === 'video' || t === 'recorded') return 'video';
    if (t === 'short') return 'clip';
    if (t === 'channel') return 'channel';
    return 'all';
  });

  setTwitchTab(v: 'all' | 'live' | 'video' | 'clip' | 'channel'): void {
    if (v === 'all') this.type.set('any');
    else if (v === 'video') this.type.set('video');
    else if (v === 'clip') this.type.set('short');
    else this.type.set(v);
  }

  constructor() {
    this.route.paramMap.subscribe(pm => {
      const provider = (pm.get('provider') as Provider) || 'youtube';
      const theme = pm.get('theme') || 'trending';
      this.provider.set(provider);
      this.theme.set(theme);
      this.instances.setSelectedProvider(provider);
      // Thème "En direct" : activer le filtre "Live" par défaut et lever les
      // filtres qui masqueraient les lives (durée/date = any).
      if (theme === 'live') {
        this.type.set('live');
        this.duration.set('any');
        this.date.set('any');
      } else if (this.type() === 'live') {
        // En quittant le thème live, ne pas rester bloqué sur le filtre Live.
        this.type.set('any');
      }
      this.resetAndLoad();
    });

    // Re-apply filters on change
    effect(() => {
      this.sort();
      this.duration();
      this.type();
      this.language();
      this.date();
      this.cdr.markForCheck();
    });
  }

  private resetAndLoad() {
    this.version++;
    this.allVideos.set([]);
    this.nextCursor.set(null);
    this.twitchCursors = { live: null, vod: null, clip: null, channel: null };
    this.twitchGame.set(null);
    this.error.set(null);
    this.loadingMore.set(false);
    this.loadMore();
  }

  private buildQuery(provider: Provider): string {
    const slug = this.theme();
    const baseTokens = this.themes.tokensFor(slug);

    if (provider === 'twitch') {
      // Helix /search/channels et /search/categories ne matchent que des noms
      // proches : une longue phrase multi-mots ("cooking food Food Cooking
      // Recipe") ne retourne jamais rien. On envoie UN mot-clé court ; le
      // service tente ensuite les variantes + game_id + top streams.
      const twitchTokens = TWITCH_THEME_KEYWORDS[slug] || [];
      const first = (twitchTokens[0] || baseTokens[0] || slug.replace(/-/g, ' ') || '').trim();
      // Garde le premier mot pour maximiser le taux de match Helix.
      const short = String(first).split(/[^A-Za-z0-9à-ÿ]+/).filter(Boolean)[0] || first;
      return (short || first || slug.replace(/-/g, ' ')).trim();
    }

    const value = baseTokens.join(' ').trim();
    return value || slug.replace(/-/g, ' ');
  }

  loadMore() {
    if (this.loading() || this.loadingMore()) return;

    const readiness = this.instances.getProviderReadiness(this.provider());
    if (!readiness.ready) {
      this.error.set(readiness.reason || 'Provider not ready');
      return;
    }

    // First page (empty list) -> full loader; continuations -> bottom loader,
    // grid stays mounted so scroll position is preserved.
    if (this.allVideos().length > 0) this.loadingMore.set(true);
    else this.loading.set(true);
    this.error.set(null);
    const snapshotVersion = this.version;
    const provider = this.provider();
    const query = this.buildQuery(provider);
    const cursor = this.nextCursor();
    const themeSlug = this.theme();
    const isLiveTheme = themeSlug === 'live';

    // Fournisseurs sans aucun direct : aucune vidéo, message explicite.
    const LIVE_PROVIDERS: Provider[] = ['youtube', 'twitch'];
    if (isLiveTheme && !LIVE_PROVIDERS.includes(provider)) {
      this.error.set('Ce fournisseur ne propose pas de directs.');
      this.loading.set(false);
      this.loadingMore.set(false);
      this.cdr.markForCheck();
      return;
    }

    let apiCall: Observable<PagedResult<Video>>;
    if (isLiveTheme && provider === 'youtube') {
      // Directs YouTube : search.list eventType=live (vrais lives uniquement).
      apiCall = this.api.searchYouTubeLivePage('', cursor || undefined);
    } else if (provider === 'twitch' && !isLiveTheme) {
      // Page Twitch à sections façon directory : lives / vidéos / clips / chaînes
      // chargés en parallèle avec leurs propres curseurs Helix.
      this.loadTwitchSections(snapshotVersion, provider, query);
      return;
    } else if (provider === 'twitch') {
      // Thème live : top streams (jamais vide quand Twitch est configuré).
      apiCall = this.api.getTwitchTopStreamsPage(cursor || undefined);
    } else {
      apiCall = query
        ? this.api.searchVideosPage(query, cursor, provider)
        : this.api.getTrendingPage(cursor, provider);
    }

    apiCall.subscribe({
      next: (res: PagedResult<Video>) => {
        if (snapshotVersion !== this.version) return;

        // Thème live : garde-fou, ne jamais mélanger des VODs.
        let items = res.items || [];
        if (isLiveTheme) {
          items = items.filter((v: Video) =>
            isLiveVideo({ ...v, provider: (v.provider as string) || provider })
          );
        }
        const existingIds = new Set(this.allVideos().map((v: Video) => v.videoId));
        const newVideos = items.filter((v: Video) => !existingIds.has(v.videoId));

        this.allVideos.update(current => [...current, ...newVideos]);
        this.nextCursor.set(res.nextCursor || null);
        this.loading.set(false);
        this.loadingMore.set(false);
        this.cdr.markForCheck();
      },
      error: (e) => {
        if (snapshotVersion !== this.version) return;
        this.error.set(e.message || 'Failed to load videos');
        this.loading.set(false);
        this.loadingMore.set(false);
        this.cdr.markForCheck();
      }
    });
  }

  private applyFilters(list: Video[]): Video[] {
    return this.applyFiltersWithType(list, this.type());
  }

  /**
   * Chargement Twitch à sections (directory/category) : lives (+ catégorie),
   * VODs, clips et chaînes en parallèle, chacun avec son curseur Helix.
   * En continuation on ne recharge que l'onglet actif (ou tout si "Tout").
   */
  private loadTwitchSections(snapshotVersion: number, provider: Provider, query: string): void {
    const firstPage = this.allVideos().length === 0;
    const tab = this.twitchTab();
    const wantLive = firstPage || tab === 'all' || tab === 'live';
    const wantVod = firstPage || tab === 'all' || tab === 'video';
    const wantClip = firstPage || tab === 'all' || tab === 'clip';
    const wantChannel = firstPage || tab === 'all' || tab === 'channel';

    const finish = (items: Video[], next: string | null, err?: string) => {
      if (snapshotVersion !== this.version) return;
      if (err) this.error.set(err);
      const existing = new Set(this.allVideos().map(v => `${v.type}:${v.videoId}`));
      const fresh = items.filter(v => !existing.has(`${v.type}:${v.videoId}`));
      if (fresh.length) this.allVideos.update(cur => [...cur, ...fresh]);
      this.nextCursor.set(next);
      this.loading.set(false);
      this.loadingMore.set(false);
      this.cdr.markForCheck();
    };

    // Une section lente ne doit jamais bloquer les autres (forkJoin
    // échoue dès qu'un appel erreur : chaque section est bornée à 25 s
    // et retombe sur une page vide, le filet top-streams suit).
    const bounded = (call: Observable<PagedResult<Video>>): Observable<PagedResult<Video>> =>
      call.pipe(
        timeout(25000),
        catchError(() => of({ items: [], nextCursor: null } as PagedResult<Video>))
      );

    const fetchAll = (gameId: string | null) => {
      const calls: Record<string, Observable<PagedResult<Video>>> = {};
      if (wantLive) {
        const liveCall = gameId
          ? this.api.getTwitchGameStreamsPage(gameId, this.twitchCursors.live || undefined, 12).pipe(
              catchError(() => this.api.getTwitchTopStreamsPage(this.twitchCursors.live || undefined)))
          : this.api.getTwitchTopStreamsPage(this.twitchCursors.live || undefined);
        calls['live'] = bounded(liveCall);
      }
      if (wantVod) calls['vod'] = bounded(this.api.searchTwitchVodsPage(query, this.twitchCursors.vod || undefined));
      if (wantClip) calls['clip'] = bounded(this.api.searchTwitchClipsPage(query, this.twitchCursors.clip || undefined));
      if (wantChannel) calls['channel'] = bounded(this.api.searchTwitchAllChannelsPage(query, this.twitchCursors.channel || undefined, 20));
      if (Object.keys(calls).length === 0) {
        this.loading.set(false);
        this.loadingMore.set(false);
        this.cdr.markForCheck();
        return;
      }
      forkJoin(calls).subscribe({
        next: (res) => {
          if (snapshotVersion !== this.version) return;
          const r = res as Record<string, PagedResult<Video>>;
          if (r['live']) this.twitchCursors.live = r['live'].nextCursor || null;
          if (r['vod']) this.twitchCursors.vod = r['vod'].nextCursor || null;
          if (r['clip']) this.twitchCursors.clip = r['clip'].nextCursor || null;
          if (r['channel']) this.twitchCursors.channel = r['channel'].nextCursor || null;
          const items = Object.values(r).flatMap(x => x?.items || []);
          // Filets de sécurité : si VODs+clips vides et aucun live, compléter
          // par top streams (repli serveur inclus), puis par la recherche
          // serveur unifiée (/api/search?providers=tw).
          const hasContent = items.length > 0;
          if (!hasContent && firstPage) {
            this.api.getTwitchTopStreamsPage(null).subscribe({
              next: (top) => {
                const all = [...items, ...(top.items || [])];
                if (all.length) {
                  finish(all, top.nextCursor || null);
                  return;
                }
                this.api.searchTwitchViaServer(query, 24).subscribe({
                  next: (srv) => finish([...all, ...(srv.items || [])], srv.nextCursor || null),
                  error: () => finish(all, null),
                });
              },
              error: () => finish(items, null),
            });
            return;
          }
          const next = this.twitchCursors.live || this.twitchCursors.vod || this.twitchCursors.clip || this.twitchCursors.channel;
          finish(items, next);
        },
        error: (e) => finish([], null, e?.message || 'Failed to load videos'),
      });
    };

    if (firstPage) {
      // Première page : résoudre la catégorie Twitch pour des lives
      // thématiques, SANS bloquer l'affichage (4 s max, la recherche de
      // catégorie séquentielle prenait plusieurs secondes à elle seule).
      this.api.searchTwitchCategory(query).pipe(
        timeout(4000),
        catchError(() => of(null))
      ).subscribe({
        next: (game) => {
          if (snapshotVersion !== this.version) return;
          if (game) this.twitchGame.set(game);
          fetchAll(game?.id || null);
        },
        error: () => {
          if (snapshotVersion !== this.version) return;
          fetchAll(null);
        },
      });
    } else {
      fetchAll(this.twitchGame()?.id || null);
    }
  }

  private applyFiltersWithType(list: Video[], typeOverride: 'any' | 'video' | 'live' | 'recorded' | 'short' | 'channel'): Video[] {
    let arr = [...list];
    const isLiveTheme = this.theme() === 'live';
    const durationFilter = this.duration();
    // Les lives n'ont pas de durée connue (0) : le filtre durée ne s'applique pas sur le thème live.
    if (durationFilter !== 'any' && !isLiveTheme) {
      arr = arr.filter(v => {
        const dur = v.duration || 0;
        if (durationFilter === 'short') return dur > 0 && dur < 240; // < 4 min
        if (durationFilter === 'medium') return dur >= 240 && dur < 1200; // 4-20 min
        if (durationFilter === 'long') return dur >= 1200; // > 20 min
        return true;
      });
    }

    const typeFilter = typeOverride;
    if (typeFilter !== 'any') {
      const p = this.provider();
      arr = arr.filter(v => {
        const withProvider = { ...v, provider: (v.provider as string) || p };
        if (typeFilter === 'video') return !isShortVideo(withProvider) && !isLiveVideo(withProvider) && String(v.type || '').toLowerCase() !== 'channel' && (v.type === 'video' || v.type === 'recorded');
        if (typeFilter === 'live') return isLiveVideo(withProvider);
        if (typeFilter === 'recorded') return !isLiveVideo(withProvider) && String(v.type || '').toLowerCase() !== 'channel' && (v.type === 'recorded' || (v.type === 'video' && !isShortVideo(withProvider)));
        // Shorts / Clips : classification partagée + kind='clip' (durée parfois absente).
        if (typeFilter === 'short') {
          if (isLiveVideo(withProvider)) return false;
          if (String(v.type || '').toLowerCase() === 'channel') return false;
          if (String((v as any).kind || '').toLowerCase() === 'clip') return true;
          return isShortVideo(withProvider);
        }
        // Chaînes : hors-ligne uniquement (les lives restent dans "Direct").
        if (typeFilter === 'channel') {
          if ((v as any).isLive === true) return false;
          if (isLiveVideo(withProvider) && String(v.type || '').toLowerCase() !== 'channel') return false;
          return String(v.type || '').toLowerCase() === 'channel';
        }
        return true;
      });
    } else if (this.theme() === 'live') {
      // Thème live même si l'utilisateur remet le filtre sur "Any" : LIVE seulement.
      const p = this.provider();
      arr = arr.filter(v => isLiveVideo({ ...v, provider: (v.provider as string) || p }));
    }

    const langFilter = this.language();
    if (langFilter !== 'any') {
      // Simple heuristic, can be improved
      const isFr = (s: string) => /[éèêàùçîïô]/.test(s) || /\b(le|la|les|un|une)\b/i.test(s);
      const isEn = (s: string) => /\b(the|a|an|and|for)\b/i.test(s);
      arr = arr.filter(v => {
        const text = `${v.title} ${v.uploaderName}`.toLowerCase();
        if (langFilter === 'fr') return isFr(text);
        if (langFilter === 'en') return isEn(text) && !isFr(text);
        return true;
      });
    }

    const dateFilter = this.date();
    if (dateFilter !== 'any') {
      const now = Date.now();
      const cutoff = {
        day: now - 24 * 3600 * 1000,
        week: now - 7 * 24 * 3600 * 1000,
        month: now - 30 * 24 * 3600 * 1000,
        year: now - 365 * 24 * 3600 * 1000,
      }[dateFilter] || 0;
      if (cutoff > 0) {
        arr = arr.filter(v => (v.uploaded || 0) >= cutoff);
      }
    }

    const sortOrder = this.sort();
    if (sortOrder === 'recent') arr.sort((a, b) => (b.uploaded || 0) - (a.uploaded || 0));
    if (sortOrder === 'viewed') arr.sort((a, b) => (b.views || 0) - (a.views || 0));
    if (sortOrder === 'longest') arr.sort((a, b) => (b.duration || 0) - (a.duration || 0));

    return arr;
  }

  changeProvider(p: any) {
    const provider = String(p) as Provider;
    this.instances.setSelectedProvider(provider);
    this.router.navigate(['/p', provider, 't', this.theme()]);
  }

  onSortChange(val: any) { this.sort.set(val as any); }
  onDurationChange(val: any) { this.duration.set(val as any); }
  onTypeChange(val: any) { this.type.set(val as any); }

  // Raccourci Vidéos / Shorts synchronisé avec le filtre "type" existant.
  contentFilter = computed<'all' | 'videos' | 'shorts'>(() => {
    const t = this.type();
    if (t === 'short') return 'shorts';
    if (t === 'video') return 'videos';
    return 'all';
  });
  setContentFilter(v: 'all' | 'videos' | 'shorts'): void {
    this.type.set(v === 'shorts' ? 'short' : v === 'videos' ? 'video' : 'any');
  }

  kindOf(v: Video): string {
    const p = this.provider();
    return classifyVideo({ ...v, provider: (v.provider as string) || p });
  }

  /** Badges Twitch : LIVE seulement si réellement en direct (pas les chaînes hors-ligne). */
  isLiveCard(v: Video): boolean {
    if ((v as any).isLive === true) return true;
    if (String(v.type || '').toLowerCase() === 'live') return true;
    if (String(v.type || '').toLowerCase() === 'channel') return false;
    const p = this.provider();
    return isLiveVideo({ ...v, provider: (v.provider as string) || p })
      && String(v.type || '').toLowerCase() !== 'channel';
  }

  isChannelCard(v: Video): boolean {
    if ((v as any).isLive === true) return false;
    return String(v.type || '').toLowerCase() === 'channel';
  }

  isClipCard(v: Video): boolean {
    if (this.isLiveCard(v) || this.isChannelCard(v)) return false;
    if (String((v as any).kind || '').toLowerCase() === 'clip') return true;
    const p = this.provider();
    return isShortVideo({ ...v, provider: (v.provider as string) || p });
  }

  /** Affichage "Tout" Twitch : sections empilées façon directory. */
  showTwitchSectionsAll = computed(() => this.isTwitchSections() && this.twitchTab() === 'all');

  shortsCount(): number {
    const p = this.provider();
    return this.allVideos().filter(v => isShortVideo({ ...v, provider: (v.provider as string) || p })).length;
  }
  onLanguageChange(val: any) { this.language.set(val as any); }
  onDateChange(val: any) { this.date.set(val as any); }

  retry() {
    this.error.set(null);
    this.loadMore();
  }

  watchQueryParams(v: Video): Record<string, any> | null {
    const p = this.provider();
    const qp: any = { p };
    if (p === 'odysee' && v.url?.startsWith('https://odysee.com/')) {
      let slug = v.url.substring('https://odysee.com/'.length);
      if (slug.startsWith('/')) slug = slug.slice(1);
      qp.slug = slug;
    }
    if (p === 'twitch') {
      // Clips : embed dédié ?clip=<slug> (jamais ?channel=, le slug n'est pas un login).
      if (String((v as any).kind || '').toLowerCase() === 'clip') {
        qp.clip = v.videoId;
        return qp;
      }
      if (v.type === 'channel' || v.type === 'live' || (v as any).isLive === true) {
        // ?channel= exige le login (non numérique) ; un id numérique = VOD.
        if (v.videoId && !/^\d+$/.test(String(v.videoId))) qp.channel = v.videoId;
      }
    }
    return qp;
  }

  trackByVideo(_idx: number, v: Video) { return `${v.type}:${v.videoId}` || v.url; }

  ngOnDestroy(): void {
    this.version++; // Invalidate any pending requests
  }
}