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

import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    final data = context.watch<DataService>();
    final stats = data.homepageStats;
    final locos = stats?.topLocos ?? [];
    if (data.isHomepageLoading && locos.isEmpty) {
      return const Padding(
        padding: EdgeInsets.all(16.0),
        child: Center(child: CircularProgressIndicator()),
      );
    }
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Card(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Top Traction",
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                decoration: TextDecoration.underline,
              ),
            ),
            if (locos.isEmpty)
              const Padding(
                padding: EdgeInsets.all(16.0),
                child: Text('No traction data yet'),
              )
            else
              Column(
                children: List.generate(
                  locos.length,
                  (index) {
                    final loco = locos[index];
                    return Container(
                      width: double.infinity,
                      margin:
                          const EdgeInsets.symmetric(horizontal: 0, vertical: 8),
                      child: Padding(
                        padding: const EdgeInsets.all(8),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text.rich(
                                  TextSpan(
                                    children: [
                                      TextSpan(
                                        text: '${index + 1}. ',
                                        style: const TextStyle(
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      TextSpan(
                                        text:
                                            '${loco.locoClass} ${loco.number}',
                                      ),
                                    ],
                                  ),
                                ),
                                Text(
                                  loco.name ?? '',
                                  style:
                                      const TextStyle(fontStyle: FontStyle.italic),
                                ),
                              ],
                            ),
                            Text('${loco.mileage?.toStringAsFixed(1)} mi'),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ),
          ],
        ),
      ),
    );
  }
}