intaleq_driver/lib/views/gamification/leaderboard_page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../constant/finance_design_system.dart';
import '../../../controller/gamification/leaderboard_controller.dart';

class LeaderboardPage extends StatelessWidget {
  LeaderboardPage({super.key});
  final LeaderboardController controller = Get.put(LeaderboardController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: FinanceDesignSystem.backgroundColor,
      body: GetBuilder<LeaderboardController>(builder: (lc) {
        if (lc.isLoading) return const Center(child: CircularProgressIndicator(color: FinanceDesignSystem.primaryDark));
        return CustomScrollView(physics: const BouncingScrollPhysics(), slivers: [
          SliverAppBar(
            expandedHeight: 200, pinned: true,
            backgroundColor: const Color(0xFF0A0E21),
            leading: IconButton(icon: const Icon(Icons.arrow_back_ios_new_rounded, color: Colors.white, size: 20), onPressed: () => Get.back()),
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text('Leaderboard'.tr, style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18)),
              background: Stack(fit: StackFit.expand, children: [
                Container(decoration: const BoxDecoration(gradient: LinearGradient(colors: [Color(0xFF0A0E21), Color(0xFFB71C1C)]))),
                Positioned(right: -40, top: -20, child: Icon(Icons.leaderboard_rounded, size: 180, color: Colors.white.withOpacity(0.04))),
                // Top 3 podium
                if (lc.currentLeaderboard.length >= 3) Positioned(bottom: 50, left: 0, right: 0, child: _buildPodium(lc)),
              ]),
            ),
          ),
          // Tab bar
          SliverToBoxAdapter(child: Container(
            margin: const EdgeInsets.fromLTRB(16, 16, 16, 0),
            padding: const EdgeInsets.all(4),
            decoration: BoxDecoration(color: Colors.grey.shade100, borderRadius: BorderRadius.circular(14)),
            child: Row(children: [
              _tab('Trips'.tr, Icons.local_taxi_rounded, 0, lc),
              _tab('Earnings'.tr, Icons.monetization_on_rounded, 1, lc),
            ]),
          )),
          // List
          SliverPadding(padding: const EdgeInsets.fromLTRB(16, 16, 16, 40), sliver: SliverList(
            delegate: SliverChildBuilderDelegate(
              (ctx, i) {
                if (i >= lc.currentLeaderboard.length) return null;
                return _buildRow(lc.currentLeaderboard[i], lc.selectedTab == 1);
              },
              childCount: lc.currentLeaderboard.length,
            ),
          )),
        ]);
      }),
    );
  }

  Widget _buildPodium(LeaderboardController lc) {
    final top3 = lc.currentLeaderboard.take(3).toList();
    return Row(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.end, children: [
      if (top3.length > 1) _podiumItem(top3[1], 2, 50, const Color(0xFFC0C0C0)),
      if (top3.isNotEmpty) _podiumItem(top3[0], 1, 70, const Color(0xFFFFD700)),
      if (top3.length > 2) _podiumItem(top3[2], 3, 35, const Color(0xFFCD7F32)),
    ]);
  }

  Widget _podiumItem(LeaderboardEntry e, int rank, double height, Color color) {
    return Padding(padding: const EdgeInsets.symmetric(horizontal: 8), child: Column(mainAxisSize: MainAxisSize.min, children: [
      CircleAvatar(radius: rank == 1 ? 22 : 18, backgroundColor: color.withOpacity(0.3),
        child: Text(_getRankEmoji(rank), style: TextStyle(fontSize: rank == 1 ? 22 : 16))),
      const SizedBox(height: 4),
      Text(e.name.length > 8 ? '${e.name.substring(0, 8)}...' : e.name,
        style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: e.isCurrentUser ? FontWeight.bold : FontWeight.normal)),
    ]));
  }

  Widget _tab(String label, IconData icon, int idx, LeaderboardController lc) {
    final selected = lc.selectedTab == idx;
    return Expanded(child: GestureDetector(
      onTap: () => lc.changeTab(idx),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        padding: const EdgeInsets.symmetric(vertical: 10),
        decoration: BoxDecoration(color: selected ? Colors.white : Colors.transparent, borderRadius: BorderRadius.circular(10),
          boxShadow: selected ? [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 5)] : null),
        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Icon(icon, size: 16, color: selected ? FinanceDesignSystem.primaryDark : Colors.grey),
          const SizedBox(width: 6),
          Text(label, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: selected ? FinanceDesignSystem.primaryDark : Colors.grey)),
        ]),
      ),
    ));
  }

  Widget _buildRow(LeaderboardEntry e, bool isEarnings) {
    final rankColor = e.rank == 1 ? const Color(0xFFFFD700) : e.rank == 2 ? const Color(0xFFC0C0C0) : e.rank == 3 ? const Color(0xFFCD7F32) : Colors.grey.shade400;
    return Container(
      margin: const EdgeInsets.only(bottom: 8),
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: e.isCurrentUser ? FinanceDesignSystem.accentBlue.withOpacity(0.08) : Colors.white,
        borderRadius: BorderRadius.circular(14),
        border: e.isCurrentUser ? Border.all(color: FinanceDesignSystem.accentBlue.withOpacity(0.3), width: 1.5) : null,
        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.02), blurRadius: 8, offset: const Offset(0, 3))],
      ),
      child: Row(children: [
        // Rank
        Container(width: 32, height: 32, decoration: BoxDecoration(color: rankColor.withOpacity(0.15), borderRadius: BorderRadius.circular(8)),
          child: Center(child: e.rank <= 3
              ? Text(_getRankEmoji(e.rank), style: const TextStyle(fontSize: 16))
              : Text('${e.rank}', style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, color: rankColor)))),
        const SizedBox(width: 12),
        // Avatar
        CircleAvatar(radius: 18, backgroundColor: Colors.grey.shade200, child: Text(e.name.isNotEmpty ? e.name[0] : '?', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey.shade600))),
        const SizedBox(width: 12),
        // Name
        Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Row(children: [
            Text(e.name, style: TextStyle(fontSize: 13, fontWeight: e.isCurrentUser ? FontWeight.bold : FontWeight.w500, color: FinanceDesignSystem.primaryDark)),
            if (e.isCurrentUser) ...[const SizedBox(width: 6),
              Container(padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2), decoration: BoxDecoration(color: FinanceDesignSystem.accentBlue, borderRadius: BorderRadius.circular(6)),
                child: Text('You'.tr, style: const TextStyle(fontSize: 8, fontWeight: FontWeight.bold, color: Colors.white)))],
          ]),
        ])),
        // Value
        Text(isEarnings ? '${e.value.toStringAsFixed(0)} ${'SYP'.tr}' : '${e.value.toInt()} ${'Rides'.tr}',
          style: TextStyle(fontSize: 13, fontWeight: FontWeight.w800, color: FinanceDesignSystem.primaryDark)),
      ]),
    );
  }

  String _getRankEmoji(int rank) => rank == 1 ? '🥇' : rank == 2 ? '🥈' : '🥉';
}