import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/theme/colors.dart';

import '../../../core/constants/assets.dart';
import '../../../core/routes/app_routes.dart';
import '../../../core/utils/app_toast.dart';
import '../../../core/utils/size_config.dart';
import '../../../view_models/auth_view_model.dart';
import '../strings/login_strings.dart';
import '../widgets/widgets.dart';

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

  @override
  State<LoginTabletPage> createState() => _LoginTabletPageState();
}

class _LoginTabletPageState extends State<LoginTabletPage> {
  late final AuthViewModel viewModel;

  @override
  void initState() {
    super.initState();
    viewModel = context.read<AuthViewModel>();
    viewModel.addListener(_viewModelListener);
  }

  void _viewModelListener() {
    if (viewModel.loggedInUser != null) {
      Router.neglect(context, () => const HomeRouteData().go(context));
    }
    if (viewModel.errorMessage != null) {
      AppToast.error(context, viewModel.errorMessage!);
    }
  }

  @override
  void dispose() {
    viewModel.removeListener(_viewModelListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.backgroundColor,
      body: Center(
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
          child: SizedBox(
            width: 364.0.w(),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 22.0.w()),
                  child: SvgPicture.asset(
                    AssetsManager.logoBig,
                    width: double.infinity,
                    height: 50.0.h(),
                  ),
                ),
                SizedBox(height: 72.0.h()),
                const LoginTitle(),
                SizedBox(height: 40.0.h()),
                LoginTextField(
                  controller: viewModel.usernameController,
                  focusNode: viewModel.usernameFocus,
                  label: LoginStrings.usernameLabel,
                  iconPath: AssetsManager.userIcon,
                  fieldHeight: 60.0.h(),
                  borderRedus: 12,
                  prefixIconPadding: 4.0.w(),
                ),
                SizedBox(height: 24.0.h()),
                Selector<AuthViewModel, bool>(
                  selector: (_, vm) => vm.obscurePassword,
                  builder: (_, obscurePassword, __) {
                    return LoginTextField(
                      controller: viewModel.passwordController,
                      focusNode: viewModel.passwordFocus,
                      label: LoginStrings.passwordLabel,
                      iconPath: AssetsManager.passwordIcon,
                      isPassword: true,
                      obscureText: obscurePassword,
                      onToggleVisibility: viewModel.togglePasswordVisibility,
                    );
                  },
                ),
                SizedBox(height: 70.0.h()),

                /// ✅ Only this part rebuilds now
                Selector<AuthViewModel, bool>(
                  selector: (_, vm) => vm.isLoading,
                  builder: (_, isLoading, __) {
                    return Selector<AuthViewModel, bool>(
                      selector: (_, vm) => vm.isLoginEnabled,
                      builder: (_, isEnabled, __) {
                        if (isLoading) {
                          return BaseButton(
                            isEnabled: false,
                            onPressed: null,
                            isLoading: true,
                            textColor: AppColors.white,
                          );
                        }

                        return BaseButton(
                          isEnabled: isEnabled,
                          onPressed:
                              isEnabled
                                  ? () async {
                                    await viewModel.login();
                                  }
                                  : null,
                        );
                      },
                    );
                  },
                ),
                SizedBox(height: 30.0.h()),
                TextButton(
                  onPressed: () {
                    const ForgotPasswordRouteData().push(context);
                  },
                  child: Text(
                    LoginStrings.forgotPassword,
                    style: TextStyle(
                      fontSize: 14.0.sp(),
                      fontWeight: FontWeight.w500,
                      color: AppColors.mainBlue,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}