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

import '../../game/models/season.dart';
import '../../state/providers.dart';
import '../theme/palette.dart';
import 'game_screen.dart';

/// Stage selection for the active season. Themed map art lands in Phase 6;
/// for now a clean node grid with stars and locks.
class SeasonMapScreen extends ConsumerWidget {
  const SeasonMapScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final seasons = ref.watch(seasonsProvider);
    return seasons.when(
      loading: () =>
          const Scaffold(body: Center(child: CircularProgressIndicator())),
      error: (e, _) => Scaffold(body: Center(child: Text('$e'))),
      data: (list) => _Map(pack: list.first),
    );
  }
}

class _Map extends ConsumerWidget {
  const _Map({required this.pack});

  final SeasonPack pack;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Watching progress keeps stars/locks fresh after each win.
    ref.watch(progressProvider);
    final repo = ref.read(saveRepositoryProvider);
    final ids = [for (final stage in pack.stages) stage.id];
    final unlocked = repo.highestUnlockedIndex(pack.seasonId, ids);
    final totalStars = repo.totalStars(pack.seasonId);
    final locale = Localizations.localeOf(context).languageCode;

    return Scaffold(
      appBar: AppBar(
        title: Text(pack.titleFor(locale)),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 16),
            child: Center(
              child: Text(
                '★ $totalStars/${pack.stages.length * 3}',
                style: Theme.of(context)
                    .textTheme
                    .titleMedium
                    ?.copyWith(color: Colors.amber),
              ),
            ),
          ),
        ],
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(16),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          mainAxisSpacing: 12,
          crossAxisSpacing: 12,
        ),
        itemCount: pack.stages.length,
        itemBuilder: (context, i) {
          final progress = repo.progressFor(pack.seasonId, ids[i]);
          final isUnlocked = i <= unlocked;
          return _StageNode(
            number: i + 1,
            stars: progress?.stars ?? 0,
            unlocked: isUnlocked,
            onTap: !isUnlocked
                ? null
                : () {
                    ref
                        .read(seasonFlowProvider.notifier)
                        .startSeasonStage(pack, i);
                    Navigator.of(context).push(
                      MaterialPageRoute(builder: (_) => const GameScreen()),
                    );
                  },
          );
        },
      ),
    );
  }
}

class _StageNode extends StatelessWidget {
  const _StageNode({
    required this.number,
    required this.stars,
    required this.unlocked,
    required this.onTap,
  });

  final int number;
  final int stars;
  final bool unlocked;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: unlocked ? GamePalette.emptyCell : GamePalette.boardBackground,
      borderRadius: BorderRadius.circular(14),
      child: InkWell(
        borderRadius: BorderRadius.circular(14),
        onTap: onTap,
        child: unlocked
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '$number',
                    style: Theme.of(context)
                        .textTheme
                        .titleLarge
                        ?.copyWith(fontWeight: FontWeight.w800),
                  ),
                  const SizedBox(height: 4),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      for (var s = 0; s < 3; s++)
                        Icon(
                          Icons.star,
                          size: 14,
                          color: s < stars ? Colors.amber : Colors.white24,
                        ),
                    ],
                  ),
                ],
              )
            : const Center(
                child: Icon(Icons.lock, color: Colors.white24, size: 22),
              ),
      ),
    );
  }
}