import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:http/http.dart' as http;
import 'package:provider/provider.dart';
import 'package:pvt15/api/backend_api.dart';
import 'package:pvt15/pages/info_game.dart';
import 'package:pvt15/pages/lobby/enter_code_page.dart';
import 'package:pvt15/pages/lobby/lobby_add_players.dart';
import 'package:pvt15/pages/profile_page.dart';
import 'package:pvt15/providers/user_provider.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:pvt15/hop_colors.dart';

class GameCategoryPage extends StatelessWidget {
  final GoogleSignInAccount? user;
  const GameCategoryPage({super.key, this.user});

  @override
  Widget build(BuildContext context) {
    final user = Provider.of<UserProvider>(context).user;
    final String username = user?.username ?? 'Gäst';
    final profilePicUrl = user?.profilePicUrl ?? '';
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Container(
        decoration: HopColors.hopBackgroundDecoration,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(height: 52),
            Padding(
              padding: const EdgeInsets.only(left: 24, right: 24, bottom: 32),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: Text(
                      'Välkommen $username',
                      style: GoogleFonts.poppins(
                        fontSize: 24,
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      if (user != null) {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => ProfilePage(user: this.user),
                          ),
                        );
                      }
                    },
                    child:
                        profilePicUrl.isNotEmpty
                            ? CircleAvatar(
                              backgroundImage: NetworkImage(profilePicUrl),
                              radius: 25,
                            )
                            : Container(
                              width: 48,
                              height: 48,
                              decoration: const BoxDecoration(
                                color: Colors.deepOrange,
                                shape: BoxShape.circle,
                              ),
                              child: const Icon(
                                Icons.account_circle,
                                color: Colors.white,
                                size: 40,
                              ),
                            ),
                  ),
                ],
              ),
            ),
            SizedBox(
              width: screenWidth * 0.87,
              child: RichText(
                text: TextSpan(
                  style: GoogleFonts.poppins(
                    fontSize: 20,
                    fontWeight: FontWeight.normal,
                    color: Colors.white,
                  ),
                  children: [
                    const TextSpan(
                      text: 'Välj önskad spelkategori',
                      style: TextStyle(fontSize: 20),
                    ),
                    WidgetSpan(
                      alignment: PlaceholderAlignment.middle,
                      child: IconButton(
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => const InfoGame(),
                            ),
                          );
                        },
                        icon: const Icon(
                          Icons.info_outline_rounded,
                          color: Colors.white,
                          size: 32,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 24),
            _gamesCard(context, 'Vilt spel', 'VILT'),
            const SizedBox(height: 32),
            _gamesCard(context, 'Lugnt spel', 'LUGNT'),
            const SizedBox(height: 32),
            GestureDetector(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => EnterCode()),
                );
              },
              child: Container(
                width: screenWidth * 0.9,
                padding: const EdgeInsets.symmetric(
                  horizontal: 8,
                  vertical: 16,
                ),
                decoration: BoxDecoration(
                  color: HopColors.hopGreenPrimary,
                  borderRadius: BorderRadius.circular(30),
                ),
                child: const Center(
                  child: Text(
                    'Gå med spel',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w600,
                      fontSize: 20,
                      shadows: [
                        const Shadow(
                          blurRadius: 5,
                          color: Colors.black54,
                          offset: Offset(0, 2),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _gamesCard(BuildContext context, String text, String difficulty) {
    double screenWidth = MediaQuery.of(context).size.width;

    Future<http.Response> createLobby() async {
      final response = await authHttpRequest(
        context: context,
        url:
            'https://group-1-15.pvt.dsv.su.se/api/game-sessions?gameType=$difficulty',
        method: 'POST',
      );
      return response;
    }

    void handleCreateLobby() async {
      final response = await createLobby();
      if (response.statusCode == 201) {
        final sessionID = response.body;
        Navigator.push(
          context,
          MaterialPageRoute(
            builder:
                (context) => LobbyAddPlayers(
                  sessionID: sessionID,
                  difficulty: difficulty,
                ),
          ),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Fel vid skapande av lobby: ${response.statusCode}'),
          ),
        );
      }
    }

    // Bakgrundsfärger och bild för varje svårighetsgradskort
    final bgColor =
        difficulty == 'VILT'
            ? HopColors.hopGreenPrimary
            : HopColors.hopBluePrimary;
    final assetImage =
        difficulty == 'VILT'
            ? 'assets/images/vilt.webp'
            : 'assets/images/lugnt.webp';

    return GestureDetector(
      onTap: handleCreateLobby,
      child: SizedBox(
        width: screenWidth * 0.9,
        height: 220,
        child: Container(
          decoration: BoxDecoration(
            color: bgColor,
            borderRadius: BorderRadius.circular(30),
            image: DecorationImage(
              image: AssetImage(assetImage),
              fit: BoxFit.fitWidth,
              alignment: Alignment.bottomCenter,
            ),
          ),
          child: Center(
            child: Text(
              text,
              style: GoogleFonts.poppins(
                fontSize: 32,
                letterSpacing: 1,
                fontWeight: FontWeight.bold,
                color: Colors.white,
                shadows: [
                  const Shadow(
                    blurRadius: 5,
                    color: Colors.black54,
                    offset: Offset(1, 3),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}