import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';
import '../../globals.dart';

class JoinMatchPage extends StatefulWidget {
  @override
  _JoinMatchPageState createState() => _JoinMatchPageState();
}

class _JoinMatchPageState extends State<JoinMatchPage> {
  TextEditingController _matchIdController = TextEditingController();
  bool _isJoined = false;
  bool _isLoading = false;
  int _player1Score = 0;
  int _player2Score = 0;
  String? _player1name;
  String? _player2name;
  String? _matchId;

  final String _joinMatchApiUrl = '$apiurl/joinmatch';
  final String _endMatchApiUrl = '$apiurl/endmatch';

  Future<void> _joinMatch() async {
    setState(() {
      _isLoading = true;
    });

    final prefs = await SharedPreferences.getInstance();
    final String? token = prefs.getString('token');
    final String matchId = _matchIdController.text;

    if (token == null) {
      _showToast('No token found. Please login again.');
      setState(() {
        _isLoading = false;
      });
      return;
    }

    try {
      final response = await http.post(
        Uri.parse(_joinMatchApiUrl),
        headers: {'Content-Type': 'application/json'},
        body: json.encode({'token': token, 'match_id': int.parse(matchId)}),
      );

      if (response.statusCode == 200) {
        final responseData = json.decode(response.body);
        setState(() {
          _isJoined = true;
          _player1name = responseData['player1_name'];
          _player2name = responseData['player2_name'];
          _player1Score = 0;
          _player2Score = 0;
          _matchId = matchId;
        });
        _showToast('Joined match successfully!');
      } else {
        _showToast('Failed to join match.');
      }
    } catch (e) {
      _showToast('Error: $e');
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  void _updateScore(int player, int delta) {
    setState(() {
      if (player == 1) {
        _player1Score += delta;
      } else if (player == 2) {
        _player2Score += delta;
      }
    });
  }

  Future<void> _endMatch() async {
    setState(() {
      _isLoading = true;
    });

    final prefs = await SharedPreferences.getInstance();
    final String? token = prefs.getString('token');

    if (token == null) {
      _showToast('No token found. Please login again.');
      setState(() {
        _isLoading = false;
      });
      return;
    }

    try {
      final response = await http.post(
        Uri.parse(_endMatchApiUrl),
        headers: {'Content-Type': 'application/json'},
        body: json.encode({
          'match_id': int.parse(_matchId!),
          'player1_score': _player1Score,
          'player2_score': _player2Score,
        }),
      );

      if (response.statusCode == 200) {
        _showToast('Match ended successfully!');
      } else {
        _showToast('Failed to end match.');
      }
    } catch (e) {
      _showToast('Error: $e');
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  void _showToast(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: _isLoading
            ? Center(child: CircularProgressIndicator())
            : _isJoined
                ? Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        // Player 1
                        Text(
                          _player1name ?? 'Player 1',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(height: 8),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            IconButton(
                              icon: Icon(Icons.remove, color: Colors.white),
                              onPressed: () => _updateScore(1, -1),
                            ),
                            Container(
                              width: 100,
                              height: 50,
                              decoration: BoxDecoration(
                                border:
                                    Border.all(color: Colors.white, width: 2),
                                borderRadius: BorderRadius.circular(8),
                              ),
                              child: Center(
                                child: Text(
                                  '$_player1Score',
                                  style: TextStyle(
                                    fontSize: 24,
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ),
                            IconButton(
                              icon: Icon(Icons.add, color: Colors.white),
                              onPressed: () => _updateScore(1, 1),
                            ),
                          ],
                        ),
                        SizedBox(height: 8),
                        Divider(
                          color: Colors.white,
                          thickness: 2,
                          indent: 80,
                          endIndent: 80,
                        ),
                        SizedBox(height: 8),
                        // Player 2
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            IconButton(
                              icon: Icon(Icons.remove, color: Colors.white),
                              onPressed: () => _updateScore(2, -1),
                            ),
                            Container(
                              width: 100,
                              height: 50,
                              decoration: BoxDecoration(
                                border:
                                    Border.all(color: Colors.white, width: 2),
                                borderRadius: BorderRadius.circular(8),
                              ),
                              child: Center(
                                child: Text(
                                  '$_player2Score',
                                  style: TextStyle(
                                    fontSize: 24,
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ),
                            IconButton(
                              icon: Icon(Icons.add, color: Colors.white),
                              onPressed: () => _updateScore(2, 1),
                            ),
                          ],
                        ),
                        SizedBox(height: 8),
                        Text(
                          _player2name ?? 'Player 2',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(height: 32),
                        ElevatedButton(
                          onPressed: _endMatch,
                          child: Text('End Match'),
                        ),
                      ],
                    ),
                  )
                : Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      // Match ID Text Field
                      TextField(
                        controller: _matchIdController,
                        decoration: InputDecoration(
                          labelText: 'Enter Match ID',
                          border: OutlineInputBorder(),
                        ),
                      ),
                      SizedBox(height: 16),
                      ElevatedButton(
                        onPressed: () {
                          if (_matchIdController.text.isNotEmpty) {
                            _joinMatch();
                          } else {
                            _showToast('Please enter a Match ID.');
                          }
                        },
                        child: Text('Join Match'),
                      ),
                    ],
                  ),
      ),
    );
  }
}