import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:frontend/config/apiUrl.dart';
import 'package:http/http.dart' as http;
import 'package:go_router/go_router.dart';
import 'package:shared_preferences/shared_preferences.dart';

class LoginWidget extends StatefulWidget {
  final bool isDesktop;
  final bool isTablet;

  const LoginWidget({Key? key, required this.isDesktop, required this.isTablet})
      : super(key: key);

  @override
  _LoginWidgetState createState() => _LoginWidgetState();
}

enum LoginStep { login, forgotEmail, otpReset }

class _LoginWidgetState extends State<LoginWidget> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _otpController = TextEditingController();
  final TextEditingController _newPasswordController = TextEditingController();
  final TextEditingController _confirmPasswordController =
      TextEditingController();
  bool _obscureText = true;
  bool _isForgotPassword = false;
  bool _showOtpResetFields = false;
  // 🔹 Login Step Enum and State Variable
  LoginStep _loginStep = LoginStep.login;

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    _otpController.dispose();
    _newPasswordController.dispose();
    _confirmPasswordController.dispose();
    super.dispose();
  }

  Future<void> storeUserDetails(String token) async {
    try {
      final parts = token.split('.');
      if (parts.length != 3) throw Exception('Invalid token format');

      final payload = json
          .decode(utf8.decode(base64Url.decode(base64Url.normalize(parts[1]))));

      final userData = payload['data'];

      final prefs = await SharedPreferences.getInstance();
      await prefs.setString('auth_token', token);
      await prefs.setString(
          'user_data', jsonEncode(userData)); // Store full user data

      if (userData != null) {
        final pref = await SharedPreferences.getInstance();
        await pref.setString('auth_token', token);
        await pref.setString('user_data', jsonEncode(userData));
      }
    } catch (e) {
      print('Error decoding token: $e');
    }
  }

  Future<void> _login(BuildContext context) async {
    if (_formKey.currentState!.validate()) {
      const String url = '$apiUrl/auth/login';

      try {
        final response = await http.post(
          Uri.parse(url),
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          },
          body: jsonEncode({
            'email': _emailController.text.trim(),
            'password': _passwordController.text.trim(),
          }),
        );

        if (response.statusCode == 200) {
          final data = jsonDecode(response.body);
          print("data- $data");

          final token = data['token']; // Assuming the token is in response
          // final userId = data['user_id'].toString();

          await storeUserDetails(token);

          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text("Login Successful"),
              backgroundColor: Colors.green, // Set background to green
            ),
          );
          context.go('/listPlan'); // Navigate to home
        } else {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
                content: Text(
                    "Login Failed: ${jsonDecode(response.body)['message']}")),
          );
        }
      } catch (e) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("Error: $e")),
        );
      }
    }
  }

  Future<void> _handleSubmit(BuildContext context) async {
    print('2');
    if (!_formKey.currentState!.validate()) return;
    print('3');
    if (_isForgotPassword && !_showOtpResetFields) {
      print('11');
      // Step 1: Send OTP
      final url = '$apiUrl/forgotPassword/verifyUser';
      try {
        final response = await http.post(
          Uri.parse(url),
          headers: {'Content-Type': 'application/json'},
          body: jsonEncode({'email': _emailController.text.trim()}),
        );

        if (response.statusCode == 200) {
          setState(() => _showOtpResetFields = true);
          setState(() {
            _isForgotPassword = false;
            _showOtpResetFields = true;
            // _clearAllFields();
          });
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text("OTP sent to your email")),
          );
        } else {
          print(response);
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
                content:
                    Text("${jsonDecode(response.body)['messages']['error']}")),
          );
        }
      } catch (e) {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text("Error: $e")));
      }
    } else if (!_isForgotPassword && _showOtpResetFields) {
      print('22');
      // Step 2: Verify OTP & Reset Password
      final url = '$apiUrl/forgotPassword/changePassword';
      try {
        print('21');
        final response = await http.post(
          Uri.parse(url),
          headers: {'Content-Type': 'application/json'},
          body: jsonEncode({
            'email': _emailController.text.trim(),
            'otp': _otpController.text.trim(),
            'new_password': _newPasswordController.text.trim(),
            'confirm_password': _confirmPasswordController.text.trim(),
          }),
        );

        if (response.statusCode == 200) {
          print('22');
          setState(() {
            _isForgotPassword = false;
            _showOtpResetFields = false;
            _clearAllFields();
          });
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text("Password reset successfully")),
          );
        } else {
          print('23');
          print('otp wrong');
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
                content: Text(
                    "Reset failed: ${jsonDecode(response.body)['message']}")),
          );
        }
      } catch (e) {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text("Error: $e")));
      }
    } else {
      // Login flow
      _login(context);
    }
  }

  void _clearAllFields() {
    _emailController.clear();
    _passwordController.clear();
    _otpController.clear();
    _newPasswordController.clear();
    _confirmPasswordController.clear();
  }

  void _onSubmit(BuildContext context) async {
    if (_formKey.currentState!.validate()) {
      if (!_isForgotPassword && !_showOtpResetFields) {
        await _login(context);
      } else {
        print('1');
        _handleSubmit(context);
      }
    }
  }

  @override

  ///  Layout
  Widget build(BuildContext context) {
    double formWidth = widget.isTablet ? 400 : 300;

    return Container(
      color: Color(0xFF114D8B),
      padding: const EdgeInsets.all(20),
      child: Row(
        children: [
          if (widget.isDesktop)
            Expanded(
              flex: 2,
              child: Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('assets/images/login/login_img1.png'),
                      fit: BoxFit.fill
                      // fit: BoxFit.cover, // or BoxFit.contain, BoxFit.fill, etc.
                      ),
                  color: Colors.blueAccent,
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(25), // Rounded top-left corner
                    bottomRight:
                        Radius.circular(25), // Rounded bottom-left corner
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(left: 30),
                  child: Align(
                      alignment: Alignment.topLeft,
                      child: Image.asset(
                        'assets/images/login/TravelSpendsLogo1.png',
                        width: 200, // Optional: control size
                        height: 100,
                        fit: BoxFit.contain,
                      )),
                ),
              ),
            ),
          Expanded(
            flex: 1,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(25), // Rounded top-left corner
                  bottomLeft: Radius.circular(25), // Rounded bottom-left corner
                ),
              ),
              child: Center(
                child: Padding(
                  padding: const EdgeInsets.all(40),
                  child: _buildForm(width: formWidth), // Fixed form width
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  ///  **Reusable Login Form**
  Widget _buildForm({required double width}) {
    return SizedBox(
      width: width,
      child: Form(
        key: _formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              "Sign In",
              style: TextStyle(
                  fontSize: 26,
                  fontFamily: "Nunito",
                  fontWeight: FontWeight.w600,
                  color: Color(0xFF212121)),
            ),
            const SizedBox(height: 2),
            const Text(
              "Welcome To TravelSpends",
              style: TextStyle(
                  fontSize: 11,
                  fontFamily: "Nunito",
                  fontWeight: FontWeight.w400,
                  color: Color(0xFF212121)),
            ),
            const SizedBox(height: 18),

            ///  **Email Field**
            if (!_isForgotPassword && !_showOtpResetFields) ...[
              _buildLabel("Email Address"),
              TextFormField(
                controller: _emailController,
                style: TextStyle(
                    fontFamily: "Archivo",
                    fontWeight: FontWeight.w600,
                    fontSize: 11),
                decoration:
                    _inputDecoration("Enter your email address").copyWith(
                  prefixIcon: Icon(
                    Icons.email_outlined,
                    size: 16,
                  ),
                ),
                validator: (value) =>
                    value == null || value.isEmpty ? 'Required Email' : null,
              ),

              const SizedBox(height: 16),

              ///  **Password Field**
              _buildLabel("Password"),
              TextFormField(
                controller: _passwordController,
                style: TextStyle(
                    fontFamily: "Archivo",
                    fontWeight: FontWeight.w600,
                    fontSize: 11),
                obscureText: _obscureText,
                decoration: _inputDecoration("Enter your password").copyWith(
                  prefixIcon: Icon(
                    Icons.key,
                    size: 16,
                  ),
                  suffixIcon: IconButton(
                    icon: Icon(
                      _obscureText ? Icons.visibility_off : Icons.visibility,
                      color: Color(0xFF12B24B),
                      size: 16,
                    ),
                    onPressed: () =>
                        setState(() => _obscureText = !_obscureText),
                  ),
                ),
                validator: (value) =>
                    value == null || value.isEmpty ? 'Required Password' : null,
              ),

              const SizedBox(height: 20),

              /// **Login Button**
              Row(
                children: [
                  Expanded(
                    child: ElevatedButton(
                      onPressed: () => _login(context),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Color(0xFF12B24B), // Button color
                        foregroundColor: Colors.white, // Text color
                        padding: const EdgeInsets.symmetric(
                            horizontal: 24, vertical: 12),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(18)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 24, vertical: 10),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text(
                              "Sign In",
                              style: TextStyle(
                                  fontFamily: "Nunito",
                                  fontWeight: FontWeight.w800,
                                  fontSize: 15),
                            ),
                            SizedBox(
                              width: 3,
                            ),
                            Icon(
                              Icons.arrow_forward_sharp,
                              color: Colors.white,
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ] else if (_isForgotPassword && !_showOtpResetFields) ...[
              _buildLabel("Email Address"),
              TextFormField(
                controller: _emailController,
                style: TextStyle(
                    fontFamily: "Archivo",
                    fontWeight: FontWeight.w600,
                    fontSize: 11),
                decoration:
                    _inputDecoration("Enter your email address").copyWith(
                  prefixIcon: Icon(
                    Icons.email_outlined,
                    size: 16,
                  ),
                ),
                validator: (value) =>
                    value == null || value.isEmpty ? 'Required Email' : null,
              ),
              const SizedBox(height: 20),
              Row(
                children: [
                  Expanded(
                    child: ElevatedButton(
                      onPressed: () => _onSubmit(context),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Color(0xFF12B24B), // Button color
                        foregroundColor: Colors.white, // Text color
                        padding: const EdgeInsets.symmetric(
                            horizontal: 24, vertical: 12),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(18)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 24, vertical: 10),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text(
                              "Submit",
                              style: TextStyle(
                                  fontFamily: "Nunito",
                                  fontWeight: FontWeight.w800,
                                  fontSize: 15),
                            ),
                            SizedBox(
                              width: 3,
                            ),
                            Icon(
                              Icons.arrow_forward_sharp,
                              color: Colors.white,
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ] else ...[
              _buildLabel("Email Address"),
              TextFormField(
                controller: _emailController,
                readOnly: true,
                style: TextStyle(
                    fontFamily: "Archivo",
                    fontWeight: FontWeight.w600,
                    fontSize: 11),
                decoration:
                    _inputDecoration("Enter your email address").copyWith(
                  prefixIcon: Icon(
                    Icons.email_outlined,
                    size: 16,
                  ),
                ),
                validator: (value) =>
                    value == null || value.isEmpty ? 'Required Email' : null,
              ),
              const SizedBox(height: 16),
              _buildLabel("OTP"),
              TextFormField(
                controller: _otpController,
                style: TextStyle(
                    fontFamily: "Archivo",
                    fontWeight: FontWeight.w600,
                    fontSize: 11),
                decoration: _inputDecoration("Enter your OTP").copyWith(
                  prefixIcon: Icon(
                    Icons.email_outlined,
                    size: 16,
                  ),
                ),
                validator: (value) =>
                    value == null || value.isEmpty ? 'Required OTP' : null,
              ),
              const SizedBox(height: 16),
              _buildLabel("New Password"),
              TextFormField(
                controller: _newPasswordController,
                style: TextStyle(
                    fontFamily: "Archivo",
                    fontWeight: FontWeight.w600,
                    fontSize: 11),
                obscureText: _obscureText,
                decoration:
                    _inputDecoration("Enter your new password").copyWith(
                  prefixIcon: Icon(
                    Icons.key,
                    size: 16,
                  ),
                  suffixIcon: IconButton(
                    icon: Icon(
                      _obscureText ? Icons.visibility_off : Icons.visibility,
                      color: Color(0xFF12B24B),
                      size: 16,
                    ),
                    onPressed: () =>
                        setState(() => _obscureText = !_obscureText),
                  ),
                ),
                validator: (value) => value == null || value.isEmpty
                    ? 'Required New Password'
                    : null,
              ),
              const SizedBox(height: 16),
              _buildLabel("Confirm Password"),
              TextFormField(
                controller: _confirmPasswordController,
                style: TextStyle(
                    fontFamily: "Archivo",
                    fontWeight: FontWeight.w600,
                    fontSize: 11),
                obscureText: _obscureText,
                decoration:
                    _inputDecoration("Enter your confirm password").copyWith(
                  prefixIcon: Icon(
                    Icons.key,
                    size: 16,
                  ),
                  suffixIcon: IconButton(
                    icon: Icon(
                      _obscureText ? Icons.visibility_off : Icons.visibility,
                      color: Color(0xFF12B24B),
                      size: 16,
                    ),
                    onPressed: () =>
                        setState(() => _obscureText = !_obscureText),
                  ),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Required New Password';
                  }
                  if (value != _newPasswordController.text) {
                    return 'Passwords do not match';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
              Row(
                children: [
                  Expanded(
                    child: ElevatedButton(
                      onPressed: () {
                        if (!_formKey.currentState!.validate()) return;
                        setState(() {
                          _isForgotPassword = false;
                          _showOtpResetFields = true;
                          _passwordController.clear();
                        });
                        _onSubmit(context);
                      },
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Color(0xFF12B24B), // Button color
                        foregroundColor: Colors.white, // Text color
                        padding: const EdgeInsets.symmetric(
                            horizontal: 24, vertical: 12),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(18)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 24, vertical: 10),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text(
                              "Submit",
                              style: TextStyle(
                                  fontFamily: "Nunito",
                                  fontWeight: FontWeight.w800,
                                  fontSize: 15),
                            ),
                            SizedBox(
                              width: 3,
                            ),
                            Icon(
                              Icons.arrow_forward_sharp,
                              color: Colors.white,
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
            const SizedBox(height: 20),
            if (!_isForgotPassword && !_showOtpResetFields)
              Center(
                child: TextButton(
                  onPressed: () {
                    setState(() {
                      _isForgotPassword = true;
                      _showOtpResetFields = false;
                      _passwordController.clear();
                    });
                  },
                  child: Text(
                    "Forgot Password",
                    style: TextStyle(
                      fontSize: 11,
                      fontWeight: FontWeight.w300,
                      fontFamily: "Nunito",
                      color: Color(0xFF212121), // Text color
                      decoration:
                          TextDecoration.underline, // Underline the text
                    ),
                  ),
                ),
              ),
            if (_isForgotPassword || _showOtpResetFields)
              Center(
                child: TextButton(
                  onPressed: () {
                    setState(() {
                      _isForgotPassword = false;
                      _showOtpResetFields = false;
                      _clearAllFields();
                    });
                  },
                  child: Text(
                    "Back to Login",
                    style: TextStyle(
                      fontSize: 11,
                      fontWeight: FontWeight.w300,
                      fontFamily: "Nunito",
                      color: Color(0xFF212121), // Text color
                      decoration:
                          TextDecoration.underline, // Underline the text
                    ),
                  ),
                ),
              ),

            const SizedBox(height: 20),
            if (!_isForgotPassword && !_showOtpResetFields)
              Container(
                width: 45, // Adjust size
                height: 45,
                decoration: BoxDecoration(
                  // Background color
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.all(Radius.circular(15)),
                  border: Border.all(
                      color: Color(0xFF9E9DBD), width: 1), // Grey outline
                ),

                child: Center(
                    child: Image.asset(
                  'assets/images/login/VectorG.png',
                  width: 20, // Optional: control size
                  height: 10,
                  fit: BoxFit.contain,
                )),
              ),
          ],
        ),
      ),
    );
  }

  ///  **Reusable Label Widget**
  Widget _buildLabel(String text) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Padding(
        padding: const EdgeInsets.only(bottom: 8),
        child: Text(
          text,
          style: const TextStyle(
              fontSize: 11,
              fontWeight: FontWeight.w700,
              fontFamily: "Nunito",
              color: Color(0xFF212121)),
        ),
      ),
    );
  }

  ///  **Reusable Input Decoration**
  InputDecoration _inputDecoration(String hint) {
    return InputDecoration(
      labelText: hint,
      floatingLabelBehavior: FloatingLabelBehavior.never,
      contentPadding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 0.0),
      filled: true,
      fillColor: Colors.white,
      labelStyle: TextStyle(fontSize: 11, color: Colors.grey),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(18),
        borderSide: BorderSide(
          color: Color(0xFF212121), // Border color
          width: 1, // Optional: adjust the width of the border
        ),
      ),
    );
  }
}