import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../controllers/login_controller.dart';
import '../../widgets/my_form_field.dart';

class LoginPage extends GetView<LoginController> {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    var logCtrl = controller;
    var displaySize = MediaQuery.of(context).size;
    return PopScope(
      canPop: false,
      child: SafeArea(
        child: Scaffold(
          body: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/img/gasolineGuru.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            // Optional: Für besseren Kontrast Inhalt leicht abdunkeln
            child: Container(
              color: Colors.black.withValues(alpha: 0.25),
              child: Center(
                child: SizedBox(
                  width: displaySize.width * 2 / 3,
                  child: Form(
                    key: logCtrl.formKey,
                    child: SingleChildScrollView(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(
                            Icons.local_gas_station,
                            size: 100,
                            color: Colors.grey.shade300,
                          ),
                          const SizedBox(height: 20),
                          _eMailForm(logCtrl),
                          const SizedBox(height: 20),
                          _passwdForm(logCtrl),
                          SizedBox(height: 20),
                          Obx(
                            () => !logCtrl.isLogIn.value
                                ? SizedBox.shrink()
                                : _nameForm(logCtrl),
                          ),
                          SizedBox(height: 20),
                          ElevatedButton(
                            onPressed: () async {
                              if (logCtrl.formKey.currentState!.validate()) {
                                if (!logCtrl.isLogIn.value) {
                                  await logCtrl.login();
                                } else {
                                  await logCtrl.register();
                                }
                              }
                            },
                            child: Obx(
                              () => Text(
                                !logCtrl.isLogIn.value ? 'Login' : 'Register',
                              ),
                            ),
                          ),
                          const SizedBox(height: 20),
                          TextButton(
                            onPressed: () {
                              logCtrl.isLogIn.value = !logCtrl.isLogIn.value;
                            },
                            child: Obx(
                              () => Text(
                                !logCtrl.isLogIn.value
                                    ? 'No account? Register'
                                    : 'Already have an account? Login',
                                style: TextStyle(color: Colors.grey.shade300),
                              ),
                            ),
                          ),

                          // Hier können Sie Ihre Login-Felder hinzufügen
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  MyFormField _passwdForm(LoginController logCtrl) {
    return MyFormField(
      userController: logCtrl.passwordController,
      validator: (String? value) => logCtrl.passwordValidator(value) as String?,
      labelText: 'Password',
      filled: true,
      fillColor: Colors.grey.shade300,
      keyboardType: TextInputType.visiblePassword,
    );
  }

  MyFormField _eMailForm(LoginController logCtrl) {
    return MyFormField(
      userController: logCtrl.mailController,
      validator: (String? value) => logCtrl.emailValidator(value) as String?,
      labelText: 'E-Mail',
      filled: true,
      fillColor: Colors.grey.shade300,
      keyboardType: TextInputType.emailAddress,
    );
  }

  _nameForm(LoginController logCtrl) {
    return MyFormField(
      userController: logCtrl.nameController,
      validator: (String? value) => logCtrl.nameValidator(value) as String?,
      labelText: 'Name',
      filled: true,
      fillColor: Colors.grey.shade300,
      keyboardType: TextInputType.name,
    );
  }
}