import 'package:siro_driver/constant/currency.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 Center(
              child: CircularProgressIndicator(
                  color: FinanceDesignSystem.primaryDark));
        }
        return CustomScrollView(
            physics: const BouncingScrollPhysics(),
            slivers: [
              SliverAppBar(
                expandedHeight: 200,
                pinned: true,
                backgroundColor: Get.isDarkMode
                    ? FinanceDesignSystem.primaryDark
                    : 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.withValues(alpha: 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: FinanceDesignSystem.backgroundColor.withValues(alpha: 0.5),
                    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.withValues(alpha: 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 ? FinanceDesignSystem.cardColor : Colors.transparent,
            borderRadius: BorderRadius.circular(10),
            boxShadow: selected
                ? [
                    BoxShadow(
                        color: Colors.black.withValues(alpha: 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.withValues(alpha: 0.08)
            : FinanceDesignSystem.cardColor,
        borderRadius: BorderRadius.circular(14),
        border: e.isCurrentUser
            ? Border.all(
                color: FinanceDesignSystem.accentBlue.withValues(alpha: 0.3),
                width: 1.5)
            : null,
        boxShadow: [
          BoxShadow(
              color: Colors.black.withValues(alpha: 0.02),
              blurRadius: 8,
              offset: const Offset(0, 3))
        ],
      ),
      child: Row(children: [
        // Rank
        Container(
            width: 32,
            height: 32,
            decoration: BoxDecoration(
                color: rankColor.withValues(alpha: 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: FinanceDesignSystem.backgroundColor,
            child: Text(e.name.isNotEmpty ? e.name[0] : '?',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: FinanceDesignSystem.textSecondary))),
        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)} ${CurrencyHelper.currency}'
                : '${e.value.toInt()} ${'Rides'.tr}',
            style: TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.w800,
                color: FinanceDesignSystem.primaryDark)),
      ]),
    );
  }

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