minstrel/flutter_client/lib/playlists/playlist_detail_screen.dart

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

import '../models/playlist.dart';
import '../models/track.dart';
import '../player/player_provider.dart';
import '../theme/theme_extension.dart';
import 'playlists_provider.dart';

class PlaylistDetailScreen extends ConsumerWidget {
  const PlaylistDetailScreen({required this.id, super.key});
  final String id;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    final detail = ref.watch(playlistDetailProvider(id));
    return Scaffold(
      backgroundColor: fs.obsidian,
      appBar: AppBar(
        backgroundColor: fs.obsidian,
        elevation: 0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: fs.parchment),
          onPressed: () => context.pop(),
        ),
        title: detail.maybeWhen(
          data: (d) => Text(
            d.playlist.name,
            style: TextStyle(color: fs.parchment),
            overflow: TextOverflow.ellipsis,
          ),
          orElse: () => const SizedBox.shrink(),
        ),
      ),
      body: detail.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (e, _) =>
            Center(child: Text('$e', style: TextStyle(color: fs.error))),
        data: (d) => _Body(detail: d),
      ),
    );
  }
}

class _Body extends ConsumerWidget {
  const _Body({required this.detail});
  final PlaylistDetail detail;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final tracks = detail.tracks;
    final playable = tracks.where((t) => t.isAvailable).toList();

    return RefreshIndicator(
      onRefresh: () async =>
          ref.refresh(playlistDetailProvider(detail.playlist.id).future),
      child: ListView.builder(
        itemCount: tracks.length + 1, // header + rows
        itemBuilder: (ctx, i) {
          if (i == 0) return _Header(detail: detail, playable: playable);
          final t = tracks[i - 1];
          return _PlaylistTrackRow(
            row: t,
            onTap: t.isAvailable
                ? () {
                    final ref = ProviderScope.containerOf(ctx);
                    final liveTrack = _toTrackRef(t);
                    final playableRefs =
                        playable.map(_toTrackRef).toList(growable: false);
                    final startIdx = playable.indexWhere((p) => p.trackId == t.trackId);
                    ref.read(playerActionsProvider).playTracks(
                          playableRefs,
                          initialIndex: startIdx >= 0 ? startIdx : 0,
                        );
                    // Keep liveTrack referenced to avoid an unused-variable
                    // warning while we leave hooks for menu wiring later.
                    assert(liveTrack.id == t.trackId);
                  }
                : null,
          );
        },
      ),
    );
  }
}

TrackRef _toTrackRef(PlaylistTrack t) => TrackRef(
      id: t.trackId ?? '',
      title: t.title,
      albumId: t.albumId ?? '',
      albumTitle: t.albumTitle,
      artistId: t.artistId ?? '',
      artistName: t.artistName,
      durationSec: t.durationSec,
      streamUrl: t.streamUrl ?? '',
    );

class _Header extends ConsumerWidget {
  const _Header({required this.detail, required this.playable});
  final PlaylistDetail detail;
  final List<PlaylistTrack> playable;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    final p = detail.playlist;
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        if (p.description.isNotEmpty)
          Padding(
            padding: const EdgeInsets.only(bottom: 12),
            child: Text(
              p.description,
              style: TextStyle(color: fs.ash, fontSize: 13),
            ),
          ),
        Row(children: [
          Text(
            '${p.trackCount} ${p.trackCount == 1 ? "track" : "tracks"}',
            style: TextStyle(color: fs.ash, fontSize: 12),
          ),
          const Spacer(),
          if (playable.isNotEmpty)
            FilledButton.icon(
              onPressed: () {
                final refs = playable.map(_toTrackRef).toList(growable: false);
                ref.read(playerActionsProvider).playTracks(refs);
              },
              icon: const Icon(Icons.play_arrow),
              label: const Text('Play'),
              style: FilledButton.styleFrom(
                backgroundColor: fs.accent,
                foregroundColor: fs.parchment,
              ),
            ),
        ]),
      ]),
    );
  }
}

class _PlaylistTrackRow extends StatelessWidget {
  const _PlaylistTrackRow({required this.row, required this.onTap});
  final PlaylistTrack row;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    final mins = (row.durationSec ~/ 60).toString().padLeft(2, '0');
    final secs = (row.durationSec % 60).toString().padLeft(2, '0');
    final color = row.isAvailable ? fs.parchment : fs.ash;
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        child: Row(children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  row.title,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: color,
                    fontSize: 14,
                    decoration: row.isAvailable
                        ? null
                        : TextDecoration.lineThrough,
                  ),
                ),
                Text(
                  '${row.artistName} · ${row.albumTitle}',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(color: fs.ash, fontSize: 12),
                ),
              ],
            ),
          ),
          Text('$mins:$secs', style: TextStyle(color: fs.ash, fontSize: 12)),
        ]),
      ),
    );
  }
}