import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_tabler_icons/flutter_tabler_icons.dart';
import 'package:get/get.dart';
import 'package:sigap/src/features/auth/presentasion/controllers/signin/signin_controller.dart';
import 'package:sigap/src/features/auth/presentasion/widgets/auth_button.dart';
import 'package:sigap/src/features/auth/presentasion/widgets/auth_divider.dart';
import 'package:sigap/src/features/auth/presentasion/widgets/auth_header.dart';
import 'package:sigap/src/features/auth/presentasion/widgets/password_field.dart';
import 'package:sigap/src/features/auth/presentasion/widgets/social_button.dart';
import 'package:sigap/src/shared/widgets/text/custom_text_field.dart';
import 'package:sigap/src/utils/constants/colors.dart';
import 'package:sigap/src/utils/constants/image_strings.dart'; // Added for logo image
import 'package:sigap/src/utils/helpers/helper_functions.dart';
import 'package:sigap/src/utils/validators/validation.dart';

class SignInScreen extends StatelessWidget {
  const SignInScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // Init form key
    final formKey = GlobalKey<FormState>();

    // Get the controller - use Get.put to ensure it's initialized
    final controller = Get.find<SignInController>();

    // Check if dark mode is enabled
    final isDarkMode = THelperFunctions.isDarkMode(context);

    return Scaffold(
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(24.0),
              child: Form(
                key: formKey,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    // Logo centered at the top
                    SvgPicture.asset(
                      TImages.lightAppBgLogo,
                      height: 100,
                      width: 100,
                    ),
                    const SizedBox(height: 16),

                    // Header centered
                    const AuthHeader(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      title: 'Welcome Back',
                      subtitle: 'Sign in to your account to continue',
                    ),

                    const SizedBox(height: 24),

                    // Email field with icon
                    Obx(
                      () => CustomTextField(
                        label: 'Email',
                        controller: controller.email,
                        validator: TValidators.validateEmail,
                        keyboardType: TextInputType.emailAddress,
                        errorText: controller.emailError.value,
                        textInputAction: TextInputAction.next,
                        prefixIcon: const Icon(TablerIcons.mail, size: 20),
                        hintText: 'Enter your email address',
                      ),
                    ),

                    // Password field with icon
                    Obx(
                      () => PasswordField(
                        label: 'Password',
                        controller: controller.password,
                        validator: TValidators.validatePassword,
                        isVisible: controller.isPasswordVisible,
                        errorText: controller.passwordError.value,
                        onToggleVisibility: controller.togglePasswordVisibility,
                        prefixIcon: const Icon(TablerIcons.lock, size: 20),
                        hintText: 'Enter your password',
                      ),
                    ),

                    // Forgot password
                    Align(
                      alignment: Alignment.centerRight,
                      child: TextButton(
                        onPressed: controller.goToForgotPassword,
                        child: Text(
                          'Forgot Password?',
                          style: TextStyle(
                            color: Theme.of(context).primaryColor,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ),

                    const SizedBox(height: 16),

                    // Sign in button
                    Obx(
                      () => AuthButton(
                        text: 'Sign In',
                        onPressed: () => controller.signIn(formKey),
                        isLoading: controller.isLoading.value,
                      ),
                    ),

                    const SizedBox(height: 16),

                    // Biometric Sign In Button (shown only if available)
                    Obx(() {
                      return controller.isBiometricAvailable.value
                          ? ElevatedButton.icon(
                            onPressed: controller.signInWithBiometrics,
                            style: ElevatedButton.styleFrom(
                              backgroundColor:
                                  isDarkMode ? TColors.primary : TColors.accent,
                              foregroundColor:
                                  Theme.of(context).primaryColor,
                              elevation: 0,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(30),
                              ),
                              padding: const EdgeInsets.symmetric(vertical: 12),
                              minimumSize: const Size(double.infinity, 0),
                            ),
                            icon: const Icon(TablerIcons.fingerprint),
                            label: const Text('Sign In with Biometrics'),
                          )
                          : const SizedBox.shrink();
                    }),

                    const SizedBox(height: 24),

                    // Or divider
                    const AuthDivider(text: 'OR'),

                    const SizedBox(height: 24),

                    // Social sign in buttons - Row of social icons
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        // Google Sign In
                        Expanded(
                          child: SocialButton(
                            shapeType: SocialButtonShapeType.circular,
                            icon: const Icon(
                              TablerIcons.brand_google,
                              color: Colors.white,
                              size: 20,
                            ),
                            backgroundColor: const Color(0xFFDB4437),
                            foregroundColor: Colors.white,
                            onPressed: () => controller.googleSignIn(),
                          ),
                        ),

                        const SizedBox(width: 0),

                        // GitHub Sign In
                        Expanded(
                          child: SocialButton(
                            shapeType: SocialButtonShapeType.circular,
                            icon: const Icon(
                              TablerIcons.brand_apple,
                              color: Colors.white,
                              size: 20,
                            ),
                            backgroundColor: const Color(0xFF333333),
                            foregroundColor: Colors.white,
                            onPressed: () => controller.appleSignIn(),
                          ),
                        ),

                        const SizedBox(width: 0),

                        // Facebook Sign In
                        Expanded(
                          child: SocialButton(
                            shapeType: SocialButtonShapeType.circular,
                            icon: const Icon(
                              TablerIcons.brand_facebook,
                              color: Colors.white,
                              size: 20,
                            ),
                            backgroundColor: const Color(0xFF1877F2),
                            foregroundColor: Colors.white,
                            onPressed: () => controller.facebookSignIn(),
                          ),
                        ),
                      ],
                    ),

                    const SizedBox(height: 16),

                    // Don't have an account
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          'Don\'t have an account?',
                          // Use theme color for text
                          style: TextStyle(color: Theme.of(context).hintColor),
                        ),
                        TextButton(
                          onPressed: controller.goToSignUp,
                          child: Text(
                            'Sign Up',
                            style: TextStyle(
                              color: Theme.of(context).primaryColor,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
