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

import '../../models/playlist.dart';
import '../../shared/widgets/server_image.dart';
import '../../theme/theme_extension.dart';

/// Mirrors the web PlaylistCard. ~176dp wide, square cover (~144dp),
/// name + optional system-variant badge below. Tap pushes
/// `/playlists/{id}`.
class PlaylistCard extends StatelessWidget {
  const PlaylistCard({super.key, required this.playlist});

  final Playlist playlist;

  @override
  Widget build(BuildContext context) {
    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
    return SizedBox(
      width: 176,
      child: GestureDetector(
        onTap: () => context.push('/playlists/${playlist.id}'),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(6),
              child: Container(
                width: 144,
                height: 144,
                color: fs.slate,
                child: playlist.coverUrl.isEmpty
                    ? Icon(Icons.queue_music, color: fs.ash, size: 56)
                    : ServerImage(url: playlist.coverUrl, fit: BoxFit.cover),
              ),
            ),
            const SizedBox(height: 8),
            Text(
              playlist.name,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(color: fs.parchment, fontSize: 14),
            ),
            if (playlist.isSystem)
              Padding(
                padding: const EdgeInsets.only(top: 2),
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                  decoration: BoxDecoration(
                    color: fs.iron,
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(
                    playlist.systemVariant!.replaceAll('_', ' '),
                    style: TextStyle(color: fs.accent, fontSize: 11),
                  ),
                ),
              ),
          ]),
        ),
      ),
    );
  }
}