AudiOhm/frontend/lib/presentation/widgets/library/playlist_tile.dart

import 'package:flutter/material.dart';

import '../../../../core/theme/colors.dart';
import '../../../../domain/entities/playlist.dart';
import '../common/cached_network_image_with_fallback.dart';

/// Playlist tile widget for library
class PlaylistTile extends StatelessWidget {
  final Playlist playlist;
  final VoidCallback? onTap;
  final VoidCallback? onDelete;
  final bool canDelete;

  const PlaylistTile({
    required this.playlist,
    this.onTap,
    this.onDelete,
    this.canDelete = false,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: AppColors.surfaceVariant,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: AppColors.cyan.withOpacity(0.2),
            width: 1,
          ),
        ),
        child: Row(
          children: [
            // Playlist cover
            ClipRRect(
              borderRadius: const BorderRadius.horizontal(
                left: Radius.circular(12),
              ),
              child: SizedBox(
                width: 80,
                height: 80,
                child: Container(
                  decoration: BoxDecoration(
                    gradient: AppColors.primaryGradient,
                  ),
                  child: CachedNetworkImageWithFallback(
                    imageUrl: playlist.imageUrl,
                    fallbackIcon: Icons.playlist_play,
                    progressColor: AppColors.cyan,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),

            // Playlist info
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      playlist.name,
                      style: const TextStyle(
                        color: AppColors.onSurface,
                        fontWeight: FontWeight.w600,
                        fontSize: 16,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: 4),
                    Text(
                      '${playlist.trackCount} songs • ${playlist.formattedDuration}',
                      style: const TextStyle(
                        color: AppColors.muted,
                        fontSize: 13,
                      ),
                    ),
                    if (playlist.description != null &&
                        playlist.description!.isNotEmpty)
                      Padding(
                        padding: const EdgeInsets.only(top: 4),
                        child: Text(
                          playlist.description!,
                          style: const TextStyle(
                            color: AppColors.muted,
                            fontSize: 12,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                  ],
                ),
              ),
            ),

            // Delete button (if owned)
            if (canDelete && onDelete != null)
              IconButton(
                icon: const Icon(Icons.delete_outline, color: AppColors.muted),
                onPressed: onDelete,
                tooltip: 'Delete playlist',
              ),
          ],
        ),
      ),
    );
  }
}