minstrel/flutter_client/lib/library/library_screen.dart

import 'dart:convert';

import 'package:drift/drift.dart' as drift;
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

import '../api/endpoints/library_lists.dart';
import '../api/endpoints/likes.dart';
import '../api/endpoints/me.dart';
import '../auth/auth_provider.dart' show authControllerProvider;
import '../cache/audio_cache_manager.dart' show appDbProvider;
import '../cache/cache_first.dart';
import '../cache/connectivity_provider.dart';
import '../cache/db.dart';
import '../cache/metadata_prefetcher.dart';
import '../cache/tile_providers.dart';
import '../library/library_providers.dart' show dioProvider;
import '../models/album.dart';
import '../models/artist.dart';
import '../models/history_event.dart';
// Aliased: Flutter's Material exports a `Page` class (Navigator 2.0
// route descriptor) that conflicts with our wire-format Page<T>.
import '../models/page.dart' as wire;
import '../models/quarantine_mine.dart';
import '../models/track.dart';
import '../player/player_provider.dart';
import '../quarantine/quarantine_provider.dart';
import '../shared/live_events_provider.dart';
import '../shared/widgets/main_app_bar_actions.dart';
import '../shared/widgets/skeletons.dart';
import '../shared/widgets/server_image.dart';
import '../theme/theme_extension.dart';
import 'widgets/album_card.dart';
import 'widgets/artist_card.dart';
import 'widgets/track_row.dart';

// Providers scoped to this screen. Each tab gets its own first page.
// Infinite scroll is a future enhancement; for v1 phone testing the
// first 50 rows per tab is enough.

final _libraryListsApiProvider = FutureProvider<LibraryListsApi>((ref) async {
  return LibraryListsApi(await ref.watch(dioProvider.future));
});

final _likesApiProvider = FutureProvider<LikesApi>((ref) async {
  return LikesApi(await ref.watch(dioProvider.future));
});

final _meApiProvider = FutureProvider<MeApi>((ref) async {
  return MeApi(await ref.watch(dioProvider.future));
});

/// Paginated artist list. AsyncNotifier so the screen can call
/// `loadMore()` when the scroll approaches the bottom; subsequent
/// pages append to the existing items rather than replacing them.
class _LibraryArtistsNotifier extends AsyncNotifier<wire.Paged<ArtistRef>> {
  static const _pageSize = 50;
  bool _loadingMore = false;

  @override
  Future<wire.Paged<ArtistRef>> build() async {
    final api = await ref.watch(_libraryListsApiProvider.future);
    return api.listArtists(limit: _pageSize, offset: 0);
  }

  Future<void> loadMore() async {
    if (_loadingMore) return;
    final cur = state.value;
    if (cur == null) return;
    if (cur.items.length >= cur.total) return;
    _loadingMore = true;
    try {
      final api = await ref.read(_libraryListsApiProvider.future);
      final next = await api.listArtists(
        limit: _pageSize,
        offset: cur.items.length,
      );
      state = AsyncData(wire.Paged(
        items: [...cur.items, ...next.items],
        total: next.total,
        limit: next.limit,
        offset: 0,
      ));
    } catch (_) {
      // Swallow — the next near-bottom event will retry. The current
      // partial list stays visible.
    } finally {
      _loadingMore = false;
    }
  }
}

final _libraryArtistsProvider = AsyncNotifierProvider<
    _LibraryArtistsNotifier,
    wire.Paged<ArtistRef>>(_LibraryArtistsNotifier.new);

class _LibraryAlbumsNotifier extends AsyncNotifier<wire.Paged<AlbumRef>> {
  static const _pageSize = 50;
  bool _loadingMore = false;

  @override
  Future<wire.Paged<AlbumRef>> build() async {
    final api = await ref.watch(_libraryListsApiProvider.future);
    return api.listAlbums(limit: _pageSize, offset: 0);
  }

  Future<void> loadMore() async {
    if (_loadingMore) return;
    final cur = state.value;
    if (cur == null) return;
    if (cur.items.length >= cur.total) return;
    _loadingMore = true;
    try {
      final api = await ref.read(_libraryListsApiProvider.future);
      final next = await api.listAlbums(
        limit: _pageSize,
        offset: cur.items.length,
      );
      state = AsyncData(wire.Paged(
        items: [...cur.items, ...next.items],
        total: next.total,
        limit: next.limit,
        offset: 0,
      ));
    } catch (_) {
      // Swallow — next scroll event will retry.
    } finally {
      _loadingMore = false;
    }
  }
}

final _libraryAlbumsProvider = AsyncNotifierProvider<
    _LibraryAlbumsNotifier,
    wire.Paged<AlbumRef>>(_LibraryAlbumsNotifier.new);

// Drift-first History tab. Mirrors homeProvider's pattern: store the
// last /api/me/history page as JSON in a single-row drift table, yield
// it immediately on subscribe (so the tab paints from disk on cold
// open), then SWR-refresh in the background. Also gives basic offline
// scrollback — the last fetched page survives connectivity loss.
//
// JSON blob (vs columnar) because the page is small, always read whole,
// and the HistoryPage.fromJson constructor already accepts the wire
// shape — no schema-evolution pain when server-side fields change.
final _historyProvider = StreamProvider<HistoryPage>((ref) {
  final db = ref.watch(appDbProvider);
  return cacheFirst<CachedHistorySnapshotData, HistoryPage>(
    driftStream: db.select(db.cachedHistorySnapshot).watch(),
    fetchAndPopulate: () async {
      final api = await ref.read(_meApiProvider.future);
      final fresh = await api.history();
      await db.into(db.cachedHistorySnapshot).insertOnConflictUpdate(
            CachedHistorySnapshotCompanion.insert(
              json: _encodeHistoryPage(fresh),
              updatedAt: drift.Value(DateTime.now()),
            ),
          );
    },
    toResult: (rows) => rows.isEmpty
        ? const HistoryPage(events: [], hasMore: false)
        : HistoryPage.fromJson(
            jsonDecode(rows.first.json) as Map<String, dynamic>),
    isOnline: () async => (await ref
        .read(connectivityProvider.future)
        .timeout(const Duration(seconds: 3), onTimeout: () => true)),
    // SWR: yield cache instantly, then refresh in the background so the
    // tab reflects the freshest plays. Matches homeProvider behavior.
    alwaysRefresh: true,
    tag: 'history',
  );
});

/// Encodes HistoryPage back to the wire-format JSON shape
/// /api/me/history emits, so HistoryPage.fromJson can round-trip
/// through the drift cache.
String _encodeHistoryPage(HistoryPage h) => jsonEncode({
      'events': h.events
          .map((e) => {
                'id': e.id,
                'played_at': e.playedAt,
                'track': {
                  'id': e.track.id,
                  'title': e.track.title,
                  'album_id': e.track.albumId,
                  'album_title': e.track.albumTitle,
                  'artist_id': e.track.artistId,
                  'artist_name': e.track.artistName,
                  'track_number': e.track.trackNumber,
                  'disc_number': e.track.discNumber,
                  'duration_sec': e.track.durationSec,
                  'stream_url': e.track.streamUrl,
                },
              })
          .toList(),
      'has_more': h.hasMore,
    });

// Per-item Liked tabs (Slice E of the per-item rendering pass).
// Each provider yields just the ordered list of entity IDs; the UI
// then renders per-tile widgets that hydrate each entity individually
// via albumTileProvider / artistTileProvider / trackTileProvider.
//
// Reads come from cached_likes (sync- and optimistic-write-populated),
// projected with ORDER BY likedAt DESC. fetchAndPopulate hits the
// cheap /api/likes/ids endpoint — the bulk /api/likes/* endpoints
// that returned fully denormalized entities are no longer needed for
// this path since tile providers handle entity hydration themselves.
//
// likedAt ordering note: cached_likes.likedAt is whatever drift
// assigned via currentDateAndTime when the row was first inserted
// (either by sync or LikesController). insertOrIgnore on subsequent
// fetches preserves the existing likedAt so ordering stays stable.
// Approximate but acceptable — matches prior Slice 3 behavior.

List<String> _idsForEntity(List<CachedLike> rows) =>
    rows.map((r) => r.entityId).toList(growable: false);

final _likedTrackIdsProvider = StreamProvider<List<String>>((ref) {
  final db = ref.watch(appDbProvider);
  final query = (db.select(db.cachedLikes)
        ..where((t) => t.entityType.equals('track'))
        ..orderBy([(t) => drift.OrderingTerm.desc(t.likedAt)]))
      .watch();
  return cacheFirst<CachedLike, List<String>>(
    driftStream: query,
    fetchAndPopulate: () => _populateLikeIds(ref),
    toResult: _idsForEntity,
    isOnline: () async => (await ref.read(connectivityProvider.future)),
    alwaysRefresh: true,
    tag: 'likedTrackIds',
  );
});

final _likedAlbumIdsProvider = StreamProvider<List<String>>((ref) {
  final db = ref.watch(appDbProvider);
  final query = (db.select(db.cachedLikes)
        ..where((t) => t.entityType.equals('album'))
        ..orderBy([(t) => drift.OrderingTerm.desc(t.likedAt)]))
      .watch();
  return cacheFirst<CachedLike, List<String>>(
    driftStream: query,
    fetchAndPopulate: () => _populateLikeIds(ref),
    toResult: _idsForEntity,
    isOnline: () async => (await ref.read(connectivityProvider.future)),
    alwaysRefresh: true,
    tag: 'likedAlbumIds',
  );
});

final _likedArtistIdsProvider = StreamProvider<List<String>>((ref) {
  final db = ref.watch(appDbProvider);
  final query = (db.select(db.cachedLikes)
        ..where((t) => t.entityType.equals('artist'))
        ..orderBy([(t) => drift.OrderingTerm.desc(t.likedAt)]))
      .watch();
  return cacheFirst<CachedLike, List<String>>(
    driftStream: query,
    fetchAndPopulate: () => _populateLikeIds(ref),
    toResult: _idsForEntity,
    isOnline: () async => (await ref.read(connectivityProvider.future)),
    alwaysRefresh: true,
    tag: 'likedArtistIds',
  );
});

/// Shared cold-cache populator: hits /api/likes/ids once and writes
/// rows for all three entity types via insertOrIgnore. The three
/// providers above all trigger this on their first empty-drift
/// emission; the dedup in cacheFirst's revalidate state plus drift's
/// insertOrIgnore semantics make the multiple-trigger case cheap.
Future<void> _populateLikeIds(Ref ref) async {
  final api = await ref.read(_likesApiProvider.future);
  final user = ref.read(authControllerProvider).value;
  if (user == null) return;
  final fresh = await api.ids();
  final db = ref.read(appDbProvider);
  await db.batch((b) {
    for (final id in fresh.tracks) {
      b.insert(
        db.cachedLikes,
        CachedLikesCompanion.insert(
          userId: user.id,
          entityType: 'track',
          entityId: id,
        ),
        mode: drift.InsertMode.insertOrIgnore,
      );
    }
    for (final id in fresh.albums) {
      b.insert(
        db.cachedLikes,
        CachedLikesCompanion.insert(
          userId: user.id,
          entityType: 'album',
          entityId: id,
        ),
        mode: drift.InsertMode.insertOrIgnore,
      );
    }
    for (final id in fresh.artists) {
      b.insert(
        db.cachedLikes,
        CachedLikesCompanion.insert(
          userId: user.id,
          entityType: 'artist',
          entityId: id,
        ),
        mode: drift.InsertMode.insertOrIgnore,
      );
    }
  });
}

// Hidden tab uses the canonical `myQuarantineProvider` (AsyncNotifier with
// optimistic flag/unflag) so flagging from any kebab and unflagging from
// the Hidden tab keep one source of truth.

class LibraryScreen extends ConsumerStatefulWidget {
  const LibraryScreen({super.key});

  @override
  ConsumerState<LibraryScreen> createState() => _LibraryScreenState();
}

class _LibraryScreenState extends ConsumerState<LibraryScreen>
    with TickerProviderStateMixin {
  late final TabController _ctrl = TabController(length: 5, vsync: this);

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    return Scaffold(
      backgroundColor: fs.obsidian,
      appBar: AppBar(
        backgroundColor: fs.obsidian,
        elevation: 0,
        title: Text('Library', style: TextStyle(color: fs.parchment)),
        actions: const [MainAppBarActions(currentRoute: '/library')],
        bottom: TabBar(
          controller: _ctrl,
          isScrollable: true,
          tabAlignment: TabAlignment.start,
          labelColor: fs.parchment,
          unselectedLabelColor: fs.ash,
          indicatorColor: fs.accent,
          tabs: const [
            Tab(text: 'Artists'),
            Tab(text: 'Albums'),
            Tab(text: 'History'),
            Tab(text: 'Liked'),
            Tab(text: 'Hidden'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _ctrl,
        children: const [
          _ArtistsTab(),
          _AlbumsTab(),
          _HistoryTab(),
          _LikedTab(),
          _HiddenTab(),
        ],
      ),
    );
  }
}

class _ArtistsTab extends ConsumerWidget {
  const _ArtistsTab();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    return ref.watch(_libraryArtistsProvider).when(
          loading: () => const Center(child: CircularProgressIndicator()),
          error: (e, _) => Center(child: Text('$e', style: TextStyle(color: fs.error))),
          data: (page) {
            // Warm details for the first screenful so taps are instant.
            ref
                .read(metadataPrefetcherProvider)
                .warmArtists(page.items.map((a) => a.id));
            return page.items.isEmpty
              ? Center(child: Text("No artists yet — scan a library folder via the server's config.", style: TextStyle(color: fs.ash), textAlign: TextAlign.center))
              : RefreshIndicator(
                  onRefresh: () async {
                    ref.invalidate(_libraryArtistsProvider);
                    await ref.read(_libraryArtistsProvider.future);
                  },
                  // Listen for scroll-near-bottom and ask the notifier
                  // to fetch the next page. 800px lookahead so the next
                  // page lands before the user reaches the visible end.
                  child: NotificationListener<ScrollNotification>(
                    onNotification: (n) {
                      if (n.metrics.pixels >=
                          n.metrics.maxScrollExtent - 800) {
                        ref
                            .read(_libraryArtistsProvider.notifier)
                            .loadMore();
                      }
                      return false;
                    },
                    child: GridView.builder(
                      padding: const EdgeInsets.all(8),
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        mainAxisSpacing: 8,
                        crossAxisSpacing: 8,
                        childAspectRatio: 0.78,
                      ),
                      itemCount: page.items.length,
                      itemBuilder: (ctx, i) {
                        final artist = page.items[i];
                        return ArtistCard(
                          artist: artist,
                          onTap: () => ctx.push('/artists/${artist.id}',
                              extra: artist),
                        );
                      },
                    ),
                  ),
                );
          },
        );
  }
}

class _AlbumsTab extends ConsumerWidget {
  const _AlbumsTab();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    return ref.watch(_libraryAlbumsProvider).when(
          loading: () => const Center(child: CircularProgressIndicator()),
          error: (e, _) => Center(child: Text('$e', style: TextStyle(color: fs.error))),
          data: (page) {
            return page.items.isEmpty
              ? Center(child: Text("No albums yet — scan a library folder via the server's config.", style: TextStyle(color: fs.ash), textAlign: TextAlign.center))
              : RefreshIndicator(
                  onRefresh: () async {
                    ref.invalidate(_libraryAlbumsProvider);
                    await ref.read(_libraryAlbumsProvider.future);
                  },
                  // Same responsive 3-up grid as the artist detail
                  // album list — LayoutBuilder + AlbumCard sized to the
                  // cell, mainAxisExtent matched to actual card height.
                  child: LayoutBuilder(builder: (ctx, constraints) {
                    const cols = 3;
                    const sidePad = 8.0;
                    const gap = 8.0;
                    final cellW = (constraints.maxWidth -
                            sidePad * 2 -
                            gap * (cols - 1)) /
                        cols;
                    // cover (cellW - 16) + gap (8) + 2-line title (~36)
                    // + artist line (~16) + slack. Slack is generous on
                    // purpose — line-height + font scaling variations
                    // would otherwise overflow the cell by a pixel
                    // (logged as a noisy RenderFlex warning).
                    final cellH = (cellW - 16) + 8 + 36 + 16 + 8;
                    return NotificationListener<ScrollNotification>(
                      onNotification: (n) {
                        if (n.metrics.pixels >=
                            n.metrics.maxScrollExtent - 800) {
                          ref
                              .read(_libraryAlbumsProvider.notifier)
                              .loadMore();
                        }
                        return false;
                      },
                      child: GridView.builder(
                        padding: const EdgeInsets.all(sidePad),
                        gridDelegate:
                            SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: cols,
                          mainAxisExtent: cellH,
                          mainAxisSpacing: gap,
                          crossAxisSpacing: gap,
                        ),
                        itemCount: page.items.length,
                        itemBuilder: (ctx, i) {
                          final album = page.items[i];
                          return AlbumCard(
                            album: album,
                            width: cellW,
                            titleMaxLines: 2,
                            onTap: () => ctx.push('/albums/${album.id}',
                                extra: album),
                          );
                        },
                      ),
                    );
                  }),
                );
          },
        );
  }
}

class _HistoryTab extends ConsumerWidget {
  const _HistoryTab();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    return ref.watch(_historyProvider).when(
          loading: () => const Center(child: CircularProgressIndicator()),
          error: (e, _) => Center(child: Text('$e', style: TextStyle(color: fs.error))),
          data: (page) => page.events.isEmpty
              ? Center(child: Text('No listening history yet.', style: TextStyle(color: fs.ash)))
              : RefreshIndicator(
                  onRefresh: () async => ref.refresh(_historyProvider.future),
                  child: ListView.separated(
                    itemCount: page.events.length,
                    separatorBuilder: (_, __) => Divider(height: 1, color: fs.iron),
                    itemBuilder: (ctx, i) {
                      final event = page.events[i];
                      return TrackRow(
                        track: event.track,
                        onTap: () => ref
                            .read(playerActionsProvider)
                            .playTracks([event.track]),
                        trailing: Text(
                          _relativeTime(event.playedAt),
                          style: TextStyle(color: fs.ash, fontSize: 12),
                        ),
                      );
                    },
                  ),
                ),
        );
  }
}

class _LikedTab extends ConsumerWidget {
  const _LikedTab();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    // SSE wire-up: any cross-device like / unlike triggers a refresh
    // of the discovery providers. LikesController handles local
    // mutations optimistically through the same cached_likes table,
    // so toggling a like locally re-emits the streams instantly
    // without needing an invalidate here.
    ref.listen<AsyncValue<LiveEvent>>(liveEventsProvider, (_, next) {
      final e = next.asData?.value;
      if (e == null) return;
      switch (e.kind) {
        case 'track.liked':
        case 'track.unliked':
        case 'album.liked':
        case 'album.unliked':
        case 'artist.liked':
        case 'artist.unliked':
          ref.invalidate(_likedTrackIdsProvider);
          ref.invalidate(_likedAlbumIdsProvider);
          ref.invalidate(_likedArtistIdsProvider);
      }
    });
    final tracksA = ref.watch(_likedTrackIdsProvider);
    final albumsA = ref.watch(_likedAlbumIdsProvider);
    final artistsA = ref.watch(_likedArtistIdsProvider);

    if (tracksA.isLoading || albumsA.isLoading || artistsA.isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    final trackIds = tracksA.value;
    final albumIds = albumsA.value;
    final artistIds = artistsA.value;
    if (trackIds == null || albumIds == null || artistIds == null) {
      return Center(child: Text("Couldn't load liked items.", style: TextStyle(color: fs.error)));
    }
    if (trackIds.isEmpty && albumIds.isEmpty && artistIds.isEmpty) {
      return Center(child: Text('No liked artists, albums, or tracks yet.', style: TextStyle(color: fs.ash), textAlign: TextAlign.center));
    }
    return RefreshIndicator(
      onRefresh: () async {
        await Future.wait([
          ref.refresh(_likedTrackIdsProvider.future),
          ref.refresh(_likedAlbumIdsProvider.future),
          ref.refresh(_likedArtistIdsProvider.future),
        ]);
      },
      child: ListView(children: [
        if (artistIds.isNotEmpty) ...[
          _SectionHeader(label: 'Artists', count: artistIds.length),
          SizedBox(
            height: 168,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              padding: const EdgeInsets.symmetric(horizontal: 8),
              itemCount: artistIds.length,
              itemBuilder: (ctx, i) =>
                  _LikedArtistTile(id: artistIds[i]),
            ),
          ),
        ],
        if (albumIds.isNotEmpty) ...[
          _SectionHeader(label: 'Albums', count: albumIds.length),
          SizedBox(
            height: 200,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              padding: const EdgeInsets.symmetric(horizontal: 8),
              itemCount: albumIds.length,
              itemBuilder: (ctx, i) =>
                  _LikedAlbumTile(id: albumIds[i]),
            ),
          ),
        ],
        if (trackIds.isNotEmpty) ...[
          _SectionHeader(label: 'Tracks', count: trackIds.length),
          ...trackIds.map(
            (id) => _LikedTrackRow(id: id, sectionIds: trackIds),
          ),
        ],
        const SizedBox(height: 96),
      ]),
    );
  }
}

/// Skeleton→content cross-fade duration. Matches home_screen so the
/// reveal feel is consistent across surfaces. See _tileRevealDuration
/// in home_screen.dart for the rationale.
const Duration _likedTileReveal = Duration(milliseconds: 220);

/// Liked-Artists carousel tile. Skeleton until artistTileProvider
/// yields a populated row.
class _LikedArtistTile extends ConsumerWidget {
  const _LikedArtistTile({required this.id});
  final String id;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final artist = ref.watch(artistTileProvider(id)).asData?.value;
    return AnimatedSwitcher(
      duration: _likedTileReveal,
      switchInCurve: Curves.easeOut,
      child: artist == null
          ? const SkeletonArtistTile(key: ValueKey('skeleton'))
          : ArtistCard(
              key: ValueKey('artist-${artist.id}'),
              artist: artist,
              onTap: () =>
                  context.push('/artists/${artist.id}', extra: artist),
            ),
    );
  }
}

/// Liked-Albums carousel tile. Skeleton until albumTileProvider
/// yields a populated row.
class _LikedAlbumTile extends ConsumerWidget {
  const _LikedAlbumTile({required this.id});
  final String id;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final album = ref.watch(albumTileProvider(id)).asData?.value;
    return AnimatedSwitcher(
      duration: _likedTileReveal,
      switchInCurve: Curves.easeOut,
      child: album == null
          ? const SkeletonAlbumTile(key: ValueKey('skeleton'))
          : AlbumCard(
              key: ValueKey('album-${album.id}'),
              album: album,
              onTap: () => context.push('/albums/${album.id}', extra: album),
            ),
    );
  }
}

/// Liked-Tracks list row. Skeleton until trackTileProvider yields a
/// populated row. Tap plays the section starting at this track,
/// using whichever tracks are currently hydrated; still-loading
/// tracks are skipped from the play queue and join on next rebuild.
class _LikedTrackRow extends ConsumerWidget {
  const _LikedTrackRow({required this.id, required this.sectionIds});
  final String id;
  final List<String> sectionIds;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final track = ref.watch(trackTileProvider(id)).asData?.value;
    return AnimatedSwitcher(
      duration: _likedTileReveal,
      switchInCurve: Curves.easeOut,
      child: track == null
          ? const SkeletonTrackRow(key: ValueKey('skeleton'))
          : TrackRow(
              key: ValueKey('track-${track.id}'),
              track: track,
              onTap: () {
                final hydrated = <TrackRef>[];
                for (final i in sectionIds) {
                  final v = ref.read(trackTileProvider(i)).asData?.value;
                  if (v != null) hydrated.add(v);
                }
                final start = hydrated.indexWhere((t) => t.id == id);
                ref.read(playerActionsProvider).playTracks(
                      hydrated,
                      initialIndex: start < 0 ? 0 : start,
                    );
              },
            ),
    );
  }
}

class _HiddenTab extends ConsumerWidget {
  const _HiddenTab();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    return ref.watch(myQuarantineProvider).when(
          loading: () => const Center(child: CircularProgressIndicator()),
          error: (e, _) => Center(child: Text('$e', style: TextStyle(color: fs.error))),
          data: (rows) => rows.isEmpty
              ? Center(
                  child: Text(
                    'No hidden tracks.\nUse a track\'s menu to flag bad rips or wrong tags.',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: fs.ash),
                  ),
                )
              : RefreshIndicator(
                  onRefresh: () async => ref.refresh(myQuarantineProvider.future),
                  child: ListView.separated(
                    itemCount: rows.length,
                    separatorBuilder: (_, __) => Divider(height: 1, color: fs.iron),
                    itemBuilder: (ctx, i) => _QuarantineTile(row: rows[i]),
                  ),
                ),
        );
  }
}

class _QuarantineTile extends ConsumerWidget {
  const _QuarantineTile({required this.row});
  final QuarantineMineRow row;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    final reasonLabel = switch (row.reason) {
      'bad_rip' => 'Bad rip',
      'wrong_file' => 'Wrong file',
      'wrong_tags' => 'Wrong tags',
      'duplicate' => 'Duplicate',
      _ => 'Other',
    };
    final coverUrl = row.albumId.isNotEmpty ? '/api/albums/${row.albumId}/cover' : '';
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(4),
          child: SizedBox(
            width: 56,
            height: 56,
            child: coverUrl.isEmpty
                ? Container(color: fs.slate)
                : ServerImage(
                    url: coverUrl,
                    fit: BoxFit.cover,
                    fallback: Container(color: fs.slate),
                  ),
          ),
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Text(
              row.trackTitle,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(color: fs.parchment, fontSize: 14),
            ),
            Text(
              '${row.artistName} · ${row.albumTitle}',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(color: fs.ash, fontSize: 12),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 4),
              child: Row(children: [
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                  decoration: BoxDecoration(
                    color: fs.iron,
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(reasonLabel, style: TextStyle(color: fs.ash, fontSize: 11)),
                ),
                if (row.createdAt.isNotEmpty) ...[
                  const SizedBox(width: 8),
                  Text(_relativeTime(row.createdAt),
                      style: TextStyle(color: fs.ash, fontSize: 11)),
                ],
              ]),
            ),
          ]),
        ),
        IconButton(
          tooltip: 'Unhide',
          icon: Icon(Icons.restore, color: fs.ash, size: 20),
          onPressed: () async {
            try {
              await ref.read(myQuarantineProvider.notifier).unflag(row.trackId);
            } catch (_) {
              // Optimistic rollback handled by the notifier; surface
              // the failure only if the user kept the tab open.
              if (context.mounted) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Could not unhide; try again.')),
                );
              }
            }
          },
        ),
      ]),
    );
  }
}

class _SectionHeader extends StatelessWidget {
  const _SectionHeader({required this.label, required this.count});
  final String label;
  final int count;

  @override
  Widget build(BuildContext context) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
      child: Row(children: [
        Text(label,
            style: TextStyle(
                color: fs.parchment, fontSize: 18, fontWeight: FontWeight.w500)),
        const SizedBox(width: 8),
        Text('$count', style: TextStyle(color: fs.ash, fontSize: 13)),
      ]),
    );
  }
}

/// Lightweight relative-time formatter: <1h "23m ago" / <24h "3h ago"
/// / <7d "Tue 14:32" / older "May 1" / older diff-year "May 1, 2025".
/// Mirrors web/src/lib/components/HistoryRow.svelte's relativeTime.
String _relativeTime(String iso) {
  final t = DateTime.tryParse(iso);
  if (t == null) return '';
  final now = DateTime.now();
  final diff = now.difference(t);
  if (diff.inMinutes < 60) {
    final m = diff.inMinutes < 1 ? 1 : diff.inMinutes;
    return '${m}m ago';
  }
  if (diff.inHours < 24) return '${diff.inHours}h ago';
  if (diff.inDays < 7) {
    const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    final hh = t.hour.toString().padLeft(2, '0');
    final mm = t.minute.toString().padLeft(2, '0');
    return '${days[t.weekday - 1]} $hh:$mm';
  }
  const months = [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
  ];
  if (t.year == now.year) return '${months[t.month - 1]} ${t.day}';
  return '${months[t.month - 1]} ${t.day}, ${t.year}';
}