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

class LoginPage extends GetView<LoginController> {
  static const String namedRoute = '/login';
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    var loginCtrl = controller;

    // LayoutBuilder ermöglicht dynamische Anpassung an verschiedene Bildschirmgrößen.
    return SafeArea(
      child: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) {
            final bool isSmall = constraints.maxWidth < 600;
            final double cardWidth = isSmall
                ? constraints.maxWidth * 0.92
                : (constraints.maxWidth * 0.6).clamp(0, 900);
            return Stack(
              children: [
                // Hintergrundbild skaliert responsiv mit BoxFit.cover
                Positioned.fill(
                  child: Image.asset(
                    'img/backgroundLogoInternorm.jpg',
                    fit: BoxFit.cover,
                    alignment: Alignment.center,
                  ),
                ),
                // halbtransparente Ebene; Opazität an Bildschirmgröße anpassen
                Positioned.fill(
                  child: Container(
                    color: Colors.black.withAlpha(isSmall ? 50 : 100),
                  ),
                ),
                Center(
                  child: PopScope(
                    canPop: false,
                    child: SingleChildScrollView(
                      child: AnimatedContainer(
                        duration: const Duration(milliseconds: 250),
                        width: cardWidth,
                        padding: const EdgeInsets.all(40.0),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: const Color.fromARGB(223, 189, 189, 189),
                        ),
                        child: Column(
                          children: [
                            Container(
                              padding: const EdgeInsets.all(20),
                              decoration: BoxDecoration(
                                color: Colors.white.withAlpha(200),
                                borderRadius: BorderRadius.circular(100),
                              ),
                              child: Obx(
                                () => loginCtrl.isLoginScreen.value
                                    ? IconButton(
                                        onPressed: () => loginCtrl.logout(),
                                        icon: const Icon(Icons.login, size: 80),
                                        color: const Color.fromARGB(
                                          255,
                                          255,
                                          0,
                                          0,
                                        ),
                                      )
                                    : IconButton(
                                        onPressed: () => loginCtrl.logout(),
                                        icon: const Icon(
                                          Icons.app_registration,
                                          size: 80,
                                        ),
                                        color: const Color.fromARGB(
                                          255,
                                          255,
                                          0,
                                          0,
                                        ),
                                      ),
                              ),
                            ),
                            const SizedBox(height: 80),
                            Obx(
                              () => loginCtrl.isLoginScreen.value
                                  ? Text(
                                      loginCtrl.szHeaderLogin.value,
                                      style: Theme.of(
                                        context,
                                      ).textTheme.headlineMedium,
                                    )
                                  : Text(
                                      loginCtrl.szHeaderSignin.value,
                                      style: Theme.of(
                                        context,
                                      ).textTheme.headlineMedium,
                                    ),
                            ),
                            const SizedBox(height: 40),
                            Form(
                              key: loginCtrl.loginFormKey,
                              child: Column(
                                children: [
                                  Obx(
                                    () => loginCtrl.isLoginScreen.value
                                        ? const SizedBox.shrink()
                                        : _nameFormField(loginCtrl),
                                  ),
                                  const SizedBox(height: 20),
                                  _emailFormField(loginCtrl),
                                  const SizedBox(height: 20),
                                  _passwdFormField(loginCtrl),
                                  const SizedBox(height: 40),
                                  _logOrSignInButton(loginCtrl),
                                ],
                              ),
                            ),
                            const SizedBox(height: 10),
                            Obx(
                              () => loginCtrl.isLoginScreen.value
                                  ? TextButton(
                                      child: Text(
                                        'To Signin',
                                        style: TextStyle(
                                          color: Colors.blue.shade800,
                                        ),
                                      ),
                                      onPressed: () {
                                        loginCtrl.switchScreen();
                                      },
                                    )
                                  : TextButton(
                                      child: Text(
                                        'To Login',
                                        style: TextStyle(
                                          color: Colors.blue.shade800,
                                        ),
                                      ),
                                      onPressed: () {
                                        loginCtrl.switchScreen();
                                      },
                                    ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

  // Email Form Field
  TextFormField _emailFormField(LoginController loginCtrl) {
    return TextFormField(
      keyboardType: TextInputType.emailAddress,
      controller: loginCtrl.emailController,
      decoration: _formFieldDecoration('Email*'),
    );
  }

  // Password Form Field
  TextFormField _passwdFormField(LoginController loginCtrl) {
    return TextFormField(
      keyboardType: TextInputType.visiblePassword,
      controller: loginCtrl.passwordController,
      decoration: _formFieldDecoration('Password*'),
      obscureText: true,
    );
  }

  // Name Form Field
  TextFormField _nameFormField(LoginController loginCtrl) {
    return TextFormField(
      keyboardType: TextInputType.name,
      controller: loginCtrl.nameController,
      decoration: _formFieldDecoration('Name*'),
    );
  }

  //Form Field Decoration
  InputDecoration _formFieldDecoration(String labelText) {
    return InputDecoration(
      labelText: labelText,
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: const Color.fromARGB(255, 255, 0, 0)),
        borderRadius: BorderRadius.circular(5.0),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: const Color.fromARGB(255, 255, 0, 0)),
        borderRadius: BorderRadius.circular(5.0),
      ),
    );
  }

  ElevatedButton _logOrSignInButton(LoginController loginCtrl) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: const Color.fromARGB(255, 255, 0, 0),
        minimumSize: const Size(double.infinity, 50),
      ),
      onPressed: () {
        // Handle login or signin action
        loginCtrl.logOrSignIn();
      },
      child: Obx(
        () => loginCtrl.isLoginScreen.value
            ? const Text(
                'Login',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              )
            : const Text(
                'Signin',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
      ),
    );
  }
}