import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:http/http.dart' as http;
import 'package:pvt15/api/backend_api.dart';
import 'package:pvt15/pages/navigation_controller_page.dart';

class AddUserCredentialPage extends StatefulWidget {
  final GoogleSignInAccount? user;
  const AddUserCredentialPage({super.key, required this.user});

  @override
  State<AddUserCredentialPage> createState() => _AddUserCredentialPageState();
}

class _AddUserCredentialPageState extends State<AddUserCredentialPage> {
  final _formKey = GlobalKey<FormState>();
  final _usernameController = TextEditingController();
  String? _usernameError;
  bool _isCheckingUsername = false;

  Future<void> _validateUsername(String? value) async {
    if (value == null || value.isEmpty) {
      setState(() {
        _usernameError = 'Vänligen ange ditt användarnamn';
      });
      return;
    }

    setState(() {
      _isCheckingUsername = true; // Visa t.ex. en laddningsindikator
      _usernameError = null; // Återställ tidigare fel
    });

    bool isTaken = await isUsernameTaken(value);

    setState(() {
      _isCheckingUsername = false; // Dölj laddningsindikatorn
      if (isTaken) {
        _usernameError = 'Användarnamnet är upptaget';
      } else {
        _usernameError = null; // Användarnamnet är ledigt
      }
    });

    // Efter validering, trigga om valideringen för att visa eventuellt felmeddelande
    _formKey.currentState?.validate();
  }

  Future<http.Response> saveUsername(String username) async {
    final response = await authHttpRequest(
      context: context,
      url: 'https://group-1-15.pvt.dsv.su.se/api/users/username/$username',
      method: 'PATCH',
    );

    return response;
  }

  void handleSaveUsername(String username) async {
    final http.Response response = await saveUsername(username);

    if (response.statusCode == 201) {
      print('Användaruppgifter skickade och sparade!');
      print('Svar från server: ${response.body}');
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => NavigationControllerPage(user: widget.user)),
      );
    } else {
      print('Fel vid sparande av användaruppgifter. Statuskod: ${response.statusCode}');
      print('Svar från server: ${response.body}');
      // Hantera ett felaktigt svar, t.ex., visa ett felmeddelande för användaren
    }
  }

  Future<bool> isUsernameTaken(String username) async {
    final response = await authHttpRequest(
      context: context,
      url: 'http://10.0.2.2:8080/api/users/username/$username',
      method: 'GET',
    );

    if (response.statusCode == 200) {
      print('Användarnamn uppptaget');
      return true;
    } else if (response.statusCode == 404) {
      print('Hittade ingen användare');
      return false;
    } else {
      print('Fel vid anrop till backend: ${response.statusCode} Body: ${response.body}');
      throw Exception('Fel vid anrop till backend: ${response.statusCode} Body: ${response.body}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Color(0xFFA800DB), Color(0xFFFF31E0)],
          ),
        ),
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Välkommen till!',
                  style: TextStyle(fontSize: 18.0, color: Colors.white), // Anpassa textfärgen för att synas bra mot bakgrunden
                ),
                SizedBox(height: 20),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      'Hop',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: const Color(0xFFFF5394),
                        fontSize: 60,
                        fontFamily: 'Poppins',
                        fontWeight: FontWeight.w700,
                        height: 0.27,
                        letterSpacing: 0.50,
                        shadows: const [
                          Shadow(
                              offset: Offset(0, 6),
                              blurRadius: 8,
                              color: Color(0x3F000000))
                        ],
                      ),
                    ),
                    const SizedBox(width: 0.50),
                    Text(
                      'Spot',
                      style: TextStyle(
                        color: const Color(0xFFFFC83B),
                        fontSize: 60,
                        fontFamily: 'Poppins',
                        fontWeight: FontWeight.w700,
                        height: 0.27,
                        letterSpacing: 0.50,
                        shadows: const [
                          Shadow(
                              offset: Offset(0, 6),
                              blurRadius: 8,
                              color: Color(0x3F000000))
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 200),
                Container(
                  padding: const EdgeInsets.all(16.0),
                  decoration: BoxDecoration(
                    color: Color(0x99FED3FF), 
                    borderRadius: BorderRadius.circular(20.0),
                    boxShadow: const [ 
                      BoxShadow(
                        color: Color(0x3F000000),
                        blurRadius: 9,
                        offset: Offset(0, 0),
                        spreadRadius: 0,
                      ),
                    ], 
                  ),
                  child: Form(
                    key: _formKey,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Container( // Wrapper runt TextFormField för skugga
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.0),
                          /*boxShadow: const [
                            BoxShadow(
                              color: Color(0x3F000000),
                              blurRadius: 4,
                              offset: Offset(0, 0),
                              spreadRadius: 0,
                            ),
                          ],*/
                        ),
                        child: TextFormField(
                          controller: _usernameController,
                          decoration: InputDecoration(
                            labelText: 'Användarnamn',
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(20.0),
                              borderSide: BorderSide.none, // Ta bort standardborder
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(20.0),
                              borderSide: BorderSide.none, // Ta bort standardborder
                            ),
                            labelStyle: TextStyle(color: Colors.black),
                            fillColor: Colors.white,
                            filled: true,
                            errorText: _usernameError, // Visa felmeddelandet här
                            suffixIcon: _isCheckingUsername
                              ? CircularProgressIndicator() // Visa laddningsindikator under kontroll
                              : null,
                          ),
                          style: TextStyle(color: Colors.black, fontFamily: 'Poppins'),
                          onChanged: (value) {
                            // Starta valideringen när användaren skriver
                            _validateUsername(value);
                          },
                          validator: (value) {
                            if (_usernameError != null) {
                              return _usernameError;
                            }
                            return null;
                          },
                        ),
                      ),
                      ],
                    ),
                  ),
                ),
                SizedBox(height: 200.0),
                ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      String username = _usernameController.text.trim();
                      print('Användarnamn: $username');
                      // Här kan du lägga till logik för att spara användarnamnet
                      // och eventuellt navigera vidare.
                      /*Map<String, dynamic> userCredentials = {
                        "googleID": widget.user?.id,
                        "fullName": widget.user?.displayName,
                        "username": username,
                        "email": widget.user?.email,
                      };*/
                      print('username to save: $username');
                      handleSaveUsername(username);
                    }
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFFFFC83B), // Anpassa knappfärgen så den syns
                    textStyle: const TextStyle(
                      fontFamily: 'Poppins',
                      fontSize: 18.0, // Justera fontstorleken om det behövs
                      color: Colors.black,
                    ),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0), // Behåll rundade hörn
                    ),
                    shadowColor: Color(0x3F000000), // Anpassa skuggfärg om du vill
                    elevation: 9,
                  ),
                  child: Text('Spara', style: TextStyle(color: Colors.black)),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}