import 'package:flutter/material.dart';
import 'package:mileograph_flutter/services/data_service.dart';

import 'package:provider/provider.dart';

class LeaderboardPanel extends StatelessWidget {
  const LeaderboardPanel({super.key});

  @override
  Widget build(BuildContext context) {
    final data = context.watch<DataService>();
    final leaderboard = data.homepageStats?.leaderboard ?? [];
    if (data.isHomepageLoading && leaderboard.isEmpty) {
      return const Padding(
        padding: EdgeInsets.all(16.0),
        child: Center(child: CircularProgressIndicator()),
      );
    }
    return Card(
      clipBehavior: Clip.antiAlias,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              "Leaderboard",
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            if (leaderboard.isEmpty)
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: Text('No leaderboard data yet'),
              )
            else
              Column(
                children: List.generate(
                  leaderboard.length,
                  (index) {
                    final leaderboardEntry = leaderboard[index];
                    return Container(
                      width: double.infinity,
                      margin: const EdgeInsets.symmetric(
                          horizontal: 0, vertical: 8),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 6),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text.rich(
                              TextSpan(
                                children: [
                                  TextSpan(
                                    text: '${index + 1}. ',
                                    style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  TextSpan(
                                    text: leaderboardEntry.userFullName,
                                  ),
                                ],
                              ),
                            ),
                            Text(
                              '${leaderboardEntry.mileage.toStringAsFixed(1)} mi',
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ),
          ],
        ),
      ),
    );
  }
}