content: import 'package:flutter/material.dart';
  import 'package:flutter_riverpod/flutter_riverpod.dart';
  import 'package:isar/isar.dart';
  import 'package:mangayomi/main.dart';
  import 'package:mangayomi/models/manga.dart';
  import 'package:mangayomi/models/track.dart';
  import 'package:mangayomi/models/track_search.dart';
  import 'package:mangayomi/modules/tracker_library/tracker_item_card.dart';
  import 'package:mangayomi/modules/widgets/bottom_text_widget.dart';
  import 'package:mangayomi/utils/cached_network.dart';
  import 'package:mangayomi/utils/constant.dart';
  import 'package:mangayomi/utils/extensions/build_context_extensions.dart';
  
  class TrackerLibraryImageCard extends ConsumerStatefulWidget {
    final TrackSearch track;
    final ItemType itemType;
  
    const TrackerLibraryImageCard({
      super.key,
      required this.track,
      required this.itemType,
    });
  
    @override
    ConsumerState<TrackerLibraryImageCard> createState() =>
        _TrackerLibraryImageCardState();
  }
  
  class _TrackerLibraryImageCardState
      extends ConsumerState<TrackerLibraryImageCard>
      with AutomaticKeepAliveClientMixin<TrackerLibraryImageCard> {
    @override
    Widget build(BuildContext context) {
      super.build(context);
      final trackData = widget.track;
      return StreamBuilder(
        stream: isar.tracks
            .filter()
            .mangaIdIsNotNull()
            .mediaIdEqualTo(trackData.mediaId)
            .itemTypeEqualTo(widget.itemType)
            .watch(fireImmediately: true),
        builder: (context, snapshot) {
          final hasData = snapshot.hasData && snapshot.data!.isNotEmpty;
          return GestureDetector(
            onTap: () => _showCard(context, snapshot.data?.firstOrNull?.mangaId),
            child: Padding(
              padding: const EdgeInsets.only(left: 10),
              child: Stack(
                children: [
                  SizedBox(
                    width: 110,
                    child: Column(
                      children: [
                        Builder(
                          builder: (context) {
                            return ClipRRect(
                              borderRadius: BorderRadius.circular(5),
                              child: Stack(
                                children: [
                                  cachedNetworkImage(
                                    imageUrl: toImgUrl(trackData.coverUrl ?? ""),
                                    width: 110,
                                    height: 150,
                                    fit: BoxFit.cover,
                                  ),
                                  Positioned(
                                    top: 0,
                                    right: 0,
                                    child: Text.rich(
                                      TextSpan(
                                        style: TextStyle(
                                          background: Paint()
                                            ..color = Theme.of(context)
                                                .scaffoldBackgroundColor
                                                .withValues(alpha: 0.75)
                                            ..strokeWidth = 20.0
                                            ..strokeJoin = StrokeJoin.round
                                            ..style = PaintingStyle.stroke,
                                        ),
                                        children: [
                                          WidgetSpan(
                                            child: Icon(
                                              Icons.star,
                                              color: context.primaryColor,
                                            ),
                                          ),
                                          TextSpan(
                                            text: " ${trackData.score ?? "?"}",
                                            style: const TextStyle(
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            );
                          },
                        ),
                        BottomTextWidget(
                          fontSize: 12.0,
                          text: trackData.title!,
                          isLoading: true,
                          textColor: Theme.of(context).textTheme.bodyLarge!.color,
                          isComfortableGrid: true,
                        ),
                      ],
                    ),
                  ),
                  Container(
                    width: 110,
                    height: 150,
                    color: hasData ? Colors.black.withValues(alpha: 0.7) : null,
                  ),
                  if (hasData)
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Padding(
                        padding: const EdgeInsets.all(4),
                        child: Icon(
                          Icons.collections_bookmark,
                          color: context.primaryColor,
                        ),
                      ),
                    ),
                ],
              ),
            ),
          );
        },
      );
    }
  
    void _showCard(BuildContext context, int? mangaId) {
      showDialog(
        context: context,
        builder: (context) => TrackerItemCard(
          track: widget.track,
          itemType: widget.itemType,
          mangaId: mangaId,
        ),
      );
    }
  
    @override
    bool get wantKeepAlive => true;
  }
  