minstrel/flutter_client/lib/library/artist_detail_screen.dart

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

import '../api/endpoints/likes.dart';
import '../likes/like_button.dart';
import '../models/album.dart';
import '../player/player_provider.dart';
import '../shared/widgets/server_image.dart';
import '../theme/theme_extension.dart';
import 'library_providers.dart';
import 'widgets/album_card.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    final artist = ref.watch(artistProvider(id));
    final albums = ref.watch(artistAlbumsProvider(id));

    return Scaffold(
      appBar: AppBar(),
      backgroundColor: fs.obsidian,
      body: artist.when(
        error: (e, _) => Center(child: Text('$e', style: TextStyle(color: fs.error))),
        loading: () => const Center(child: CircularProgressIndicator()),
        data: (a) => ListView(children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(children: [
              ClipOval(
                child: SizedBox(
                  width: 96,
                  height: 96,
                  // Server derives artist cover from a representative
                  // album. Drift cache doesn't persist that pointer, so
                  // mirror the trick client-side: reuse the first album
                  // returned by artistAlbumsProvider. Falls back to
                  // slate while albums are loading or empty.
                  child: _ArtistAvatar(
                    serverCoverUrl: a.coverUrl,
                    albums: albums,
                    fs: fs,
                  ),
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Text(
                  a.name,
                  style: TextStyle(
                    color: fs.parchment,
                    fontFamily: fs.display.fontFamily,
                    fontSize: 24,
                  ),
                ),
              ),
              Container(
                width: 48, height: 48,
                decoration: BoxDecoration(color: fs.accent, shape: BoxShape.circle),
                child: IconButton(
                  icon: Icon(Icons.play_arrow, color: fs.parchment),
                  onPressed: () async {
                    final tracks = await ref.read(artistTracksProvider(id).future);
                    if (tracks.isEmpty) return;
                    final shuffled = [...tracks]..shuffle();
                    ref.read(playerActionsProvider).playTracks(shuffled);
                  },
                ),
              ),
              LikeButton(kind: LikeKind.artist, id: a.id, size: 28),
            ]),
          ),
          const Padding(
            padding: EdgeInsets.fromLTRB(16, 16, 16, 8),
            child: Text('Albums', style: TextStyle(fontSize: 16)),
          ),
          albums.when(
            error: (e, _) => Center(child: Text('$e', style: TextStyle(color: fs.error))),
            loading: () => const Padding(padding: EdgeInsets.all(16), child: Center(child: CircularProgressIndicator())),
            data: (list) => GridView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              padding: const EdgeInsets.all(8),
              // mainAxisExtent locks each cell's height to the actual
              // AlbumCard footprint (124 cover + 8 + 14 title + 12
              // artist + ~6 padding), instead of letting
              // childAspectRatio inflate it. Removes the visible vertical
              // gap below each card.
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisExtent: 168,
                mainAxisSpacing: 8,
                crossAxisSpacing: 8,
              ),
              itemCount: list.length,
              itemBuilder: (_, i) {
                final AlbumRef album = list[i];
                return AlbumCard(album: album, onTap: () => context.push('/albums/${album.id}'));
              },
            ),
          ),
        ]),
      ),
    );
  }
}

/// Renders the artist's avatar. Server-emitted coverUrl wins when
/// non-empty; otherwise we mirror the server's "use the first album's
/// cover" rule client-side via the loaded album list.
class _ArtistAvatar extends StatelessWidget {
  const _ArtistAvatar({
    required this.serverCoverUrl,
    required this.albums,
    required this.fs,
  });
  final String serverCoverUrl;
  final AsyncValue<List<AlbumRef>> albums;
  final FabledSwordTheme fs;

  @override
  Widget build(BuildContext context) {
    if (serverCoverUrl.isNotEmpty) {
      return ServerImage(
        url: serverCoverUrl,
        fit: BoxFit.cover,
        fallback: Container(color: fs.slate),
      );
    }
    final firstId = albums.value?.isNotEmpty == true ? albums.value!.first.id : null;
    if (firstId == null) {
      return Container(color: fs.slate);
    }
    return ServerImage(
      url: '/api/albums/$firstId/cover',
      fit: BoxFit.cover,
      fallback: Container(color: fs.slate),
    );
  }
}