import 'package:flutter/material.dart';

class LeaderboardPage extends StatelessWidget {
  LeaderboardPage({Key? key}) : super(key: key);

  // Sample JSON data structure for leaderboard
  final List<Map<String, dynamic>> leaderboardData = [
    {
      "user": {
        "displayName": "Ahmed Hassan",
        "avatar": "https://via.placeholder.com/50",
      },
      "attempts": 3,
      "time": "2025-01-15T08:45:23.000Z",
    },
    {
      "user": {
        "displayName": "Sarah Abdullah",
        "avatar": "https://via.placeholder.com/50",
      },
      "attempts": 4,
      "time": "2025-01-15T09:12:45.000Z",
    },
    {
      "user": {
        "displayName": "Omar Al-Rashid",
        "avatar": "https://via.placeholder.com/50",
      },
      "attempts": 2,
      "time": "2025-01-15T08:23:12.000Z",
    },
    {
      "user": {
        "displayName": "Fatima Al-Zahra",
        "avatar": "https://via.placeholder.com/50",
      },
      "attempts": 5,
      "time": "2025-01-15T09:34:56.000Z",
    },
    {
      "user": {
        "displayName": "Khalid Mohammed",
        "avatar": "https://via.placeholder.com/50",
      },
      "attempts": 3,
      "time": "2025-01-15T08:56:34.000Z",
    },
    {
      "user": {
        "displayName": "Layla Ibrahim",
        "avatar": "https://via.placeholder.com/50",
      },
      "attempts": 4,
      "time": "2025-01-15T09:18:27.000Z",
    },
  ];

  @override
  Widget build(BuildContext context) {
    // Sort leaderboard by time (fastest first)
    final sortedData = List<Map<String, dynamic>>.from(leaderboardData);
    sortedData.sort((a, b) {
      final timeA = DateTime.parse(a['time']);
      final timeB = DateTime.parse(b['time']);
      return timeA.compareTo(timeB);
    });

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: Container(),
        centerTitle: true,
        title: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'وصال',
              style: TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.w200,
                fontFamily: 'Blaka',
                color: Color(0xFF6A4C93),
              ),
            ),
            SizedBox(width: 8),
            Text(
              'Leaderboard',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w500,
                color: Colors.grey[600],
              ),
            ),
          ],
        ),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(1),
          child: Container(height: 1, color: Colors.grey[200]),
        ),
      ),
      body: Column(
        children: [
          // Leaderboard list
          Expanded(
            child: ListView.builder(
              padding: EdgeInsets.all(16),
              itemCount: sortedData.length,
              itemBuilder: (context, index) {
                final entry = sortedData[index];
                final user = entry['user'];
                final attempts = entry['attempts'];
                final timeString = entry['time'];
                final time = DateTime.parse(timeString);
                final rank = index + 1;

                // Format time display
                final timeFormatted =
                    '${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}:${time.second.toString().padLeft(2, '0')}';

                // Determine rank styling
                Color rankColor = Colors.grey[600]!;
                IconData? rankIcon;
                if (rank == 1) {
                  rankColor = Color(0xFFFFD700); // Gold
                  rankIcon = Icons.workspace_premium;
                } else if (rank == 2) {
                  rankColor = Color(0xFFC0C0C0); // Silver
                  rankIcon = Icons.workspace_premium;
                } else if (rank == 3) {
                  rankColor = Color(0xFFCD7F32); // Bronze
                  rankIcon = Icons.workspace_premium;
                }

                return Container(
                  margin: EdgeInsets.only(bottom: 12),
                  padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.05),
                        blurRadius: 8,
                        offset: Offset(0, 2),
                      ),
                    ],
                    border: rank <= 3
                        ? Border.all(
                            color: rankColor.withOpacity(0.3),
                            width: 2,
                          )
                        : Border.all(color: Colors.grey[200]!, width: 1),
                  ),
                  child: Row(
                    children: [
                      // Rank indicator
                      Container(
                        width: 40,
                        child: Column(
                          children: [
                            if (rankIcon != null)
                              Icon(rankIcon, color: rankColor, size: 24)
                            else
                              Text(
                                '#$rank',
                                style: TextStyle(
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                  color: rankColor,
                                ),
                              ),
                          ],
                        ),
                      ),
                      SizedBox(width: 16),

                      // User avatar
                      CircleAvatar(
                        radius: 25,
                        backgroundColor: Color(0xFF6A4C93).withOpacity(0.1),
                        child: Text(
                          user['displayName'][0].toUpperCase(),
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFF6A4C93),
                          ),
                        ),
                      ),
                      SizedBox(width: 16),

                      // User details
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              user['displayName'],
                              style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                color: Colors.black87,
                              ),
                            ),
                            SizedBox(height: 4),
                            Row(
                              children: [
                                Icon(
                                  Icons.access_time,
                                  size: 16,
                                  color: Colors.grey[600],
                                ),
                                SizedBox(width: 4),
                                Text(
                                  timeFormatted,
                                  style: TextStyle(
                                    fontSize: 14,
                                    color: Colors.grey[600],
                                  ),
                                ),
                                SizedBox(width: 16),
                                Icon(
                                  Icons.try_sms_star,
                                  size: 16,
                                  color: Colors.grey[600],
                                ),
                                SizedBox(width: 4),
                                Text(
                                  '$attempts attempts',
                                  style: TextStyle(
                                    fontSize: 14,
                                    color: Colors.grey[600],
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),

          // Return button
          Container(
            padding: EdgeInsets.all(24),
            child: SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0xFF6A4C93),
                  padding: EdgeInsets.symmetric(vertical: 16),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                child: Text(
                  'Return',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}