import '../../../l10n/app_localizations.dart';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:kmobile/di/injection.dart';
import 'package:kmobile/features/auth/screens/mpin_screen.dart';
import 'package:kmobile/features/auth/screens/set_password_screen.dart';
import 'package:kmobile/security/secure_storage.dart';
import '../../../app.dart';
import '../controllers/auth_cubit.dart';
import '../controllers/auth_state.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

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

class LoginScreenState extends State<LoginScreen>
    with SingleTickerProviderStateMixin {
  final _formKey = GlobalKey<FormState>();
  final _customerNumberController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _obscurePassword = true;
  //bool _showWelcome = true;

  @override
  void dispose() {
    _customerNumberController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      context.read<AuthCubit>().login(
            _customerNumberController.text.trim(),
            _passwordController.text,
          );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(title: const Text('Login')),
      body: BlocConsumer<AuthCubit, AuthState>(
        listener: (context, state) async {
          if (state is Authenticated) {
            final storage = getIt<SecureStorage>();
            final mpin = await storage.read('mpin');
            if (!context.mounted) return;
            if (mpin == null) {
              Navigator.of(context).pushReplacement(
                MaterialPageRoute(
                  builder: (_) => MPinScreen(
                    mode: MPinMode.set,
                    onCompleted: (_) {
                      Navigator.of(
                        context,
                        rootNavigator: true,
                      ).pushReplacement(
                        MaterialPageRoute(
                          builder: (_) => const NavigationScaffold(),
                        ),
                      );
                    },
                  ),
                ),
              );
            } else {
              Navigator.of(context).pushReplacement(
                MaterialPageRoute(builder: (_) => const NavigationScaffold()),
              );
            }
          } else if (state is AuthError) {
            if (state.message == 'MIGRATED_USER_HAS_NO_PASSWORD') {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (_) => SetPasswordScreen(
                        customerNo: _customerNumberController.text.trim(),
                      )));
            } else {
              ScaffoldMessenger.of(context)
                  .showSnackBar(SnackBar(content: Text(state.message)));
            }
          }
        },
        builder: (context, state) {
          return Padding(
            padding: const EdgeInsets.all(24.0),
            child: Form(
              key: _formKey,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/images/logo.png',
                    width: 150,
                    height: 150,
                    errorBuilder: (context, error, stackTrace) {
                      return Icon(
                        Icons.account_balance,
                        size: 100,
                        color: Theme.of(context).primaryColor,
                      );
                    },
                  ),
                  const SizedBox(height: 16),
                  // Title
                  Text(
                    AppLocalizations.of(context).kccb,
                    style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                  const SizedBox(height: 48),

                  TextFormField(
                    controller: _customerNumberController,
                    decoration: InputDecoration(
                      labelText: AppLocalizations.of(context).customerNumber,
                      // prefixIcon: Icon(Icons.person),
                      border: const OutlineInputBorder(),
                      isDense: true,
                      filled: true,
                      fillColor: Theme.of(context).scaffoldBackgroundColor,
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Theme.of(context).colorScheme.outline),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Theme.of(context).colorScheme.primary,
                            width: 2),
                      ),
                    ),
                    keyboardType: TextInputType.number,
                    textInputAction: TextInputAction.next,
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return AppLocalizations.of(context).pleaseEnterUsername;
                      }
                      return null;
                    },
                  ),
                  const SizedBox(height: 24),
                  // Password
                  TextFormField(
                    controller: _passwordController,
                    obscureText: _obscurePassword,
                    textInputAction: TextInputAction.done,
                    onFieldSubmitted: (_) => _submitForm(),
                    decoration: InputDecoration(
                      labelText: AppLocalizations.of(context).password,
                      border: const OutlineInputBorder(),
                      isDense: true,
                      filled: true,
                      fillColor: Theme.of(context).scaffoldBackgroundColor,
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Theme.of(context).colorScheme.outline),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Theme.of(context).colorScheme.primary,
                            width: 2),
                      ),
                      suffixIcon: IconButton(
                        icon: Icon(
                          _obscurePassword
                              ? Icons.visibility
                              : Icons.visibility_off,
                        ),
                        onPressed: () {
                          setState(() {
                            _obscurePassword = !_obscurePassword;
                          });
                        },
                      ),
                    ),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return AppLocalizations.of(context).pleaseEnterPassword;
                      }
                      return null;
                    },
                  ),
                  const SizedBox(height: 24),
                  //Login Button
                  SizedBox(
                    width: 250,
                    child: ElevatedButton(
                      onPressed: state is AuthLoading ? null : _submitForm,
                      style: ElevatedButton.styleFrom(
                        shape: const StadiumBorder(),
                        padding: const EdgeInsets.symmetric(vertical: 16),
                        backgroundColor:
                            Theme.of(context).scaffoldBackgroundColor,
                        foregroundColor: Theme.of(context).primaryColorDark,
                        side: BorderSide(
                            color: Theme.of(context).colorScheme.outline,
                            width: 1),
                        elevation: 0,
                      ),
                      child: state is AuthLoading
                          ? const CircularProgressIndicator()
                          : Text(
                              AppLocalizations.of(context).login,
                              style: TextStyle(
                                  color: Theme.of(context)
                                      .colorScheme
                                      .onPrimaryContainer),
                            ),
                    ),
                  ),
                  const SizedBox(height: 15),

                  // Padding(
                  //   padding: const EdgeInsets.symmetric(vertical: 16),
                  //   child: Row(
                  //     children: [
                  //       const Expanded(child: Divider()),
                  //       Padding(
                  //         padding: const EdgeInsets.symmetric(horizontal: 8),
                  //         child: Text(AppLocalizations.of(context).or),
                  //       ),
                  //       //const Expanded(child: Divider()),
                  //     ],
                  //   ),
                  // ),

                  const SizedBox(height: 25),

                  // Register Button
                  // SizedBox(
                  //   width: 250,
                  //   child: ElevatedButton(
                  //     //disable until registration is implemented
                  //     onPressed: null,
                  //     style: OutlinedButton.styleFrom(
                  //       shape: const StadiumBorder(),
                  //       padding: const EdgeInsets.symmetric(vertical: 16),
                  //       backgroundColor: Theme.of(context).colorScheme.primary,
                  //       foregroundColor: Theme.of(context).colorScheme.onPrimary,
                  //     ),
                  //     child: Text(AppLocalizations.of(context).register,
                  //    style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),),
                  //   ),
                  // ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
