import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

import '../../core/theme/app_theme.dart';
import '../../core/widgets/game_ui.dart';
import 'game_repository.dart';
import 'tier.dart';

/// لیست میزها (tierها) با ورودی/جایزه؛ انتخاب → ورود به میز.
class TierListScreen extends StatefulWidget {
  final GameRepository repo;
  const TierListScreen({super.key, required this.repo});

  @override
  State<TierListScreen> createState() => _TierListScreenState();
}

class _TierListScreenState extends State<TierListScreen> {
  late Future<List<TableTier>> _future;

  @override
  void initState() {
    super.initState();
    _future = widget.repo.getTiers();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GameBackground(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(12),
              child: Row(children: [
                _BackButton(onTap: () => context.pop()),
                const Spacer(),
                const GlowText('انتخاب میز', size: 26),
                const Spacer(),
                const SizedBox(width: 48),
              ]),
            ),
            Expanded(
              child: FutureBuilder<List<TableTier>>(
                future: _future,
                builder: (context, snap) {
                  if (snap.connectionState != ConnectionState.done) {
                    return const Center(
                        child: CircularProgressIndicator(color: AppColors.gold));
                  }
                  if (snap.hasError || snap.data == null) {
                    return Center(
                      child: Column(mainAxisSize: MainAxisSize.min, children: [
                        const Text('خطا در بارگذاری میزها'),
                        TextButton(
                          onPressed: () =>
                              setState(() => _future = widget.repo.getTiers()),
                          child: const Text('تلاش مجدد'),
                        ),
                      ]),
                    );
                  }
                  final tiers = snap.data!;
                  return ListView.separated(
                    padding: const EdgeInsets.fromLTRB(16, 4, 16, 20),
                    itemCount: tiers.length,
                    separatorBuilder: (_, __) => const SizedBox(height: 14),
                    itemBuilder: (_, i) => _TierCard(tier: tiers[i], index: i),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _BackButton extends StatelessWidget {
  final VoidCallback onTap;
  const _BackButton({required this.onTap});
  @override
  Widget build(BuildContext context) => GestureDetector(
        onTap: onTap,
        child: Container(
          width: 48,
          height: 48,
          decoration: BoxDecoration(
            color: AppColors.panel,
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: AppColors.gold, width: 1.5),
          ),
          child: const Icon(Icons.arrow_back, color: AppColors.gold),
        ),
      );
}

class _TierCard extends StatelessWidget {
  final TableTier tier;
  final int index;
  const _TierCard({required this.tier, required this.index});

  // پالتِ رنگیِ هر میز (مطابق اپ مرجع).
  static const _palettes = [
    [Color(0xFF43A047), Color(0xFF1B5E20)], // سبز
    [Color(0xFFE53935), Color(0xFF8E0E1B)], // قرمز
    [Color(0xFF1E88E5), Color(0xFF0D3C73)], // آبی
    [Color(0xFF8E24AA), Color(0xFF4A0D5E)], // بنفش
  ];

  @override
  Widget build(BuildContext context) {
    final colors = _palettes[index % _palettes.length];
    return GestureDetector(
      onTap: () => context.push('/game/${tier.id}?prize=${tier.prize}'),
      child: Container(
        padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: colors,
          ),
          borderRadius: BorderRadius.circular(16),
          border: Border.all(color: AppColors.gold, width: 2),
          boxShadow: const [
            BoxShadow(color: Colors.black54, blurRadius: 10, offset: Offset(0, 5)),
          ],
        ),
        child: Row(
          children: [
            // ریبونِ تعداد دست
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(
                color: const Color(0xFFE9952F),
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: AppColors.gold),
              ),
              child: Column(children: [
                Text('${tier.hands}',
                    style: const TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold)),
                const Text('دست',
                    style: TextStyle(color: Colors.white, fontSize: 11)),
              ]),
            ),
            const SizedBox(width: 14),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(tier.title,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      shadows: [Shadow(color: Colors.black54, blurRadius: 3)],
                    )),
                const SizedBox(height: 6),
                _stat(Icons.login, 'ورودی', tier.entry),
                _stat(Icons.monetization_on, 'جایزه', tier.prize),
              ],
            ),
            const Spacer(),
            Column(children: [
              _badge(Icons.star, 'XP ${tier.xp}'),
              const SizedBox(height: 6),
              _badge(Icons.emoji_events, '${tier.trophy}'),
            ]),
          ],
        ),
      ),
    );
  }

  Widget _stat(IconData icon, String label, int value) => Padding(
        padding: const EdgeInsets.symmetric(vertical: 2),
        child: Row(mainAxisSize: MainAxisSize.min, children: [
          Icon(icon, size: 15, color: AppColors.gold),
          const SizedBox(width: 5),
          Text('$label: $value',
              style: const TextStyle(color: Colors.white, fontSize: 13)),
        ]),
      );

  Widget _badge(IconData icon, String text) => Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, size: 16, color: AppColors.gold),
          const SizedBox(width: 4),
          Text(text,
              style: const TextStyle(color: Colors.white, fontSize: 12)),
        ],
      );
}