import 'package:flutter/material.dart';

import 'live_info_business_object.dart';
import 'time_formatter.dart';

class RecentlyPlayedList extends StatelessWidget {
  const RecentlyPlayedList({
    super.key,
    required this.recentPlayed,
    required this.isLoading,
  });

  final List<RecentPlayedItem> recentPlayed;
  final bool isLoading;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Recently Played (runtime)',
          style: Theme.of(
            context,
          ).textTheme.labelLarge?.copyWith(fontWeight: FontWeight.w700),
        ),
        const SizedBox(height: 6),
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.black.withValues(alpha: 0.08),
              borderRadius: BorderRadius.circular(12),
            ),
            child: recentPlayed.isEmpty
                ? Center(
                    child: Text(
                      isLoading
                          ? 'Loading recent items...'
                          : 'No recent tracks captured yet',
                      style: Theme.of(context).textTheme.bodySmall,
                    ),
                  )
                : ListView.separated(
                    itemCount: recentPlayed.length,
                    separatorBuilder: (BuildContext context, int index) =>
                        Divider(
                          height: 1,
                          color: Colors.black.withValues(alpha: 0.08),
                        ),
                    itemBuilder: (BuildContext context, int index) {
                      final RecentPlayedItem item = recentPlayed[index];
                      final String window = formatTimeWindow(
                        item.starts,
                        item.ends,
                      );

                      return ListTile(
                        dense: true,
                        contentPadding: const EdgeInsets.symmetric(
                          horizontal: 12,
                          vertical: 0,
                        ),
                        title: Text(
                          item.title,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: Theme.of(context).textTheme.bodyMedium
                              ?.copyWith(fontWeight: FontWeight.w600),
                        ),
                        subtitle: Text(
                          item.subtitle.isEmpty
                              ? window
                              : '${item.subtitle}  |  $window',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: Theme.of(context).textTheme.bodySmall,
                        ),
                        leading: const Icon(Icons.queue_music_rounded),
                      );
                    },
                  ),
          ),
        ),
      ],
    );
  }
}