import 'package:flutter/material.dart';
import 'package:flutter_lucide/flutter_lucide.dart';
import 'package:get/get.dart';
import 'package:marco/controller/auth/login_controller.dart';
import 'package:marco/helpers/theme/app_theme.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
import 'package:marco/helpers/widgets/my_button.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/my_text_style.dart';
import 'package:marco/view/layouts/auth_layout.dart';
import 'package:marco/images.dart';

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

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> with UIMixin {
  late LoginController controller;

  @override
  void initState() {
    controller = Get.put(LoginController());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AuthLayout(
      child: GetBuilder<LoginController>(
        init: controller,
        tag: 'login_controller',
        builder: (controller) {
          return Form(
            key: controller.basicValidator.formKey,
            child: SingleChildScrollView(
              padding: MySpacing.xy(2, 40),
              child: Container(
                width: double.infinity,
                padding: MySpacing.all(24),
                decoration: BoxDecoration(
                  color: theme.colorScheme.primary.withOpacity(0.02),
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(
                    color: contentTheme.primary.withOpacity(0.5),
                  ),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    /// Logo
                    Center(
                      child: Image.asset(
                        Images.logoDark,
                        height: 120,
                        fit: BoxFit.contain,
                      ),
                    ),
                    MySpacing.height(20),

                    /// Welcome Text
                    Center(
                      child: MyText.bodyLarge("Welcome Back!", fontWeight: 600),
                    ),
                    MySpacing.height(4),
                    Center(
                      child: MyText.bodySmall("Please sign in to continue."),
                    ),
                    MySpacing.height(20),

                    /// Email Field
                    MyText.bodySmall("Email Address", fontWeight: 600),
                    MySpacing.height(8),
                    Material(
                      elevation: 2,
                      shadowColor: contentTheme.secondary.withAlpha(30),
                      borderRadius: BorderRadius.circular(12),
                      child: TextFormField(
                        validator:
                            controller.basicValidator.getValidation('username'),
                        controller:
                            controller.basicValidator.getController('username'),
                        keyboardType: TextInputType.emailAddress,
                        style: MyTextStyle.labelMedium(),
                        decoration: InputDecoration(
                          hintText: "Enter your email",
                          hintStyle: MyTextStyle.bodySmall(xMuted: true),
                          filled: true,
                          fillColor: theme.cardColor,
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(2),
                            borderSide: BorderSide.none,
                          ),
                          prefixIcon: const Icon(LucideIcons.mail, size: 18),
                          contentPadding: MySpacing.xy(12, 16),
                        ),
                      ),
                    ),
                    MySpacing.height(16),

                    /// Password Field Label
                    MyText.bodySmall("Password", fontWeight: 600),
                    MySpacing.height(8),
                    Material(
                      elevation: 2,
                      shadowColor: contentTheme.secondary.withAlpha(25),
                      borderRadius: BorderRadius.circular(12),
                      child: TextFormField(
                        validator:
                            controller.basicValidator.getValidation('password'),
                        controller:
                            controller.basicValidator.getController('password'),
                        keyboardType: TextInputType.visiblePassword,
                        obscureText: !controller.showPassword,
                        style: MyTextStyle.labelMedium(),
                        decoration: InputDecoration(
                          hintText: "Enter your password",
                          hintStyle: MyTextStyle.bodySmall(xMuted: true),
                          filled: true,
                          fillColor: theme.cardColor,
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(2),
                            borderSide: BorderSide.none,
                          ),
                          prefixIcon: const Icon(LucideIcons.lock, size: 18),
                          suffixIcon: InkWell(
                            onTap: controller.onChangeShowPassword,
                            child: Icon(
                              controller.showPassword
                                  ? LucideIcons.eye
                                  : LucideIcons.eye_off,
                              size: 18,
                            ),
                          ),
                          contentPadding: MySpacing.all(3),
                        ),
                      ),
                    ),

                    MySpacing.height(16),

                    /// Remember Me + Forgot Password
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        InkWell(
                          onTap: () => controller
                              .onChangeCheckBox(!controller.isChecked),
                          child: Row(
                            children: [
                              Checkbox(
                                onChanged: controller.onChangeCheckBox,
                                value: controller.isChecked,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(4),
                                ),
                                fillColor: WidgetStatePropertyAll(
                                    contentTheme.secondary),
                                checkColor: contentTheme.onPrimary,
                                visualDensity: getCompactDensity,
                                materialTapTargetSize:
                                    MaterialTapTargetSize.shrinkWrap,
                              ),
                              MySpacing.width(8),
                              MyText.bodySmall("Remember Me"),
                            ],
                          ),
                        ),
                        MyButton.text(
                          onPressed: controller.goToForgotPassword,
                          elevation: 0,
                          padding: MySpacing.xy(8, 0),
                          splashColor: contentTheme.secondary.withAlpha(36),
                          child: MyText.bodySmall(
                            'Forgot password?',
                            fontWeight: 600,
                            color: contentTheme.secondary,
                          ),
                        ),
                      ],
                    ),
                    MySpacing.height(28),

                    /// Login Button
                    Center(
                      child: MyButton.rounded(
                        onPressed: controller.onLogin,
                        elevation: 2,
                        padding: MySpacing.xy(24, 16),
                        borderRadiusAll: 16,
                        backgroundColor: contentTheme.primary,
                        child: MyText.labelMedium(
                          'Login',
                          fontWeight: 600,
                          color: contentTheme.onPrimary,
                        ),
                      ),
                    ),
                    MySpacing.height(16),

                    /// Register Link
                    Center(
                      child: MyButton.text(
                        onPressed: controller.gotoRegister,
                        elevation: 0,
                        padding: MySpacing.xy(12, 8),
                        splashColor: contentTheme.secondary.withAlpha(30),
                        child: MyText.bodySmall(
                          "Request a Demo",
                          color: contentTheme.secondary,
                          fontWeight: 600,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}