import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';
import 'package:sigap/src/features/auth/presentasion/controllers/signup/main/signup_with_role_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/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';
import 'package:sigap/src/utils/constants/sizes.dart';
import 'package:sigap/src/utils/helpers/helper_functions.dart';

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

  @override
  Widget build(BuildContext context) {
    final controller = Get.find<SignupWithRoleController>();
    final theme = Theme.of(context);
    final isDark = THelperFunctions.isDarkMode(context);

    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(TSizes.defaultSpace),
          child: Center(
            child: Container(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // Logo di dalam container form
                  Padding(
                    padding: const EdgeInsets.only(bottom: TSizes.lg),
                    child: Hero(
                      tag: 'app_logo',
                      child: SvgPicture.asset(
                        isDark ? TImages.darkAppBgLogo : TImages.lightAppBgLogo,
                        width: 100,
                        height: 100,
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                  _buildSignupForm(context, controller),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildSignupForm(
    BuildContext context,
    SignupWithRoleController controller,
  ) {
    final theme = Theme.of(context);

    final isDark = THelperFunctions.isDarkMode(context);

    return Form(
      key: controller.signupFormKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Create Your Account',
            style: theme.textTheme.headlineMedium?.copyWith(
              color: isDark ? TColors.light : TColors.dark,
            ),
          ),
          const SizedBox(height: TSizes.sm),
          Text(
            'Please fill in the details below to create your account',
            style: theme.textTheme.bodyMedium?.copyWith(
              color: isDark ? TColors.textSecondary : Colors.grey.shade600,
            ),
          ),
          const SizedBox(height: TSizes.spaceBtwSections),

          // Social Login Buttons
          _buildSocialLoginButtons(controller, isDark),

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

          const SizedBox(height: TSizes.spaceBtwItems),

          // Email field
          Obx(
            () => CustomTextField(
              label: 'Email',
              controller: controller.emailController,
              validator: controller.validateEmail,
              keyboardType: TextInputType.emailAddress,
              errorText: controller.emailError.value,
              textInputAction: TextInputAction.next,
              prefixIcon: const Icon(Icons.email_outlined),
              hintText: 'Enter your email',
            ),
          ),

          // Password field
          Obx(
            () => PasswordField(
              label: 'Password',
              controller: controller.passwordController,
              validator: controller.validatePassword,
              isVisible: controller.isPasswordVisible,
              errorText: controller.passwordError.value,
              onToggleVisibility: controller.togglePasswordVisibility,
              textInputAction: TextInputAction.next,
              prefixIcon: const Icon(Icons.lock_outlined),
              hintText: 'Enter your password',
            ),
          ),

          // Confirm password field
          Obx(
            () => PasswordField(
              label: 'Confirm Password',
              controller: controller.confirmPasswordController,
              validator: controller.validateConfirmPassword,
              isVisible: controller.isConfirmPasswordVisible,
              errorText: controller.confirmPasswordError.value,
              onToggleVisibility: controller.toggleConfirmPasswordVisibility,
              textInputAction: TextInputAction.done,
              prefixIcon: const Icon(Icons.lock_outlined),
              hintText: 'Confirm your password',
            ),
          ),

          // Privacy policy checkbox with theme-based styling
          Theme(
            data: Theme.of(context).copyWith(
              checkboxTheme: CheckboxThemeData(
                fillColor: WidgetStateProperty.resolveWith<Color>((
                  Set<WidgetState> states,
                ) {
                  return isDark ? Colors.grey.shade700 : Colors.grey.shade300;
                }),
              ),
            ),
            child: Row(
              children: [
                Obx(
                  () => Checkbox(
                    value: controller.privacyPolicy.value,
                    onChanged:
                        (value) => controller.privacyPolicy.value = value!,
                  ),
                ),
                Expanded(
                  child: Text(
                    'I agree to the Terms of Service and Privacy Policy',
                    style: theme.textTheme.bodySmall?.copyWith(
                      color:
                          isDark ? TColors.textSecondary : Colors.grey.shade700,
                    ),
                  ),
                ),
              ],
            ),
          ),

          const SizedBox(height: TSizes.spaceBtwItems),

          // Sign up button
          Obx(
            () => AuthButton(
              text: 'Sign Up',
              onPressed: () => controller.signUp(),
              isLoading: controller.isLoading.value,
            ),
          ),

          const SizedBox(height: TSizes.spaceBtwInputFields / 2),

          // Already have an account row
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Already have an account?',
                style: theme.textTheme.bodyMedium?.copyWith(
                  color: isDark ? TColors.textSecondary : Colors.grey.shade700,
                ),
              ),
              TextButton(
                onPressed: controller.goToSignIn,
                style: TextButton.styleFrom(
                  overlayColor: TColors.transparent,
                  foregroundColor:
                      isDark
                          ? TColors.light.withOpacity(0.8)
                          : TColors.primary.withOpacity(0.8),
                ),
                child: Text(
                  'Sign In',
                  style: theme.textTheme.labelSmall?.copyWith(
                    color:
                        isDark
                            ? TColors.light.withOpacity(0.8)
                            : TColors.primary.withOpacity(0.8),
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),

          // Add extra space at bottom for safety
          SizedBox(height: MediaQuery.of(context).padding.bottom + 16),
        ],
      ),
    );
  }

  Widget _buildSocialLoginButtons(
    SignupWithRoleController controller,

    bool isDark,
  ) {
    return Column(
      children: [
        // Google button
        Row(
          children: [
            // Google button
            Expanded(
              child: SocialButton(
                text: 'Google',
                iconImage: TImages.googleIcon,
                onPressed: () => controller.signInWithGoogle(),
                backgroundColor: isDark ? TColors.dark : Colors.white,
                foregroundColor: isDark ? TColors.white : TColors.dark,
                borderColor: isDark ? Colors.transparent : Colors.grey.shade300,
              ),
            ),
            const SizedBox(width: TSizes.sm),
            // Facebook button
            Expanded(
              child: SocialButton(
                text: 'Facebook',
                iconImage: TImages.facebookIcon,
                onPressed: () => controller.signInWithFacebook(),
                backgroundColor: isDark ? TColors.dark : Colors.white,
                foregroundColor: isDark ? TColors.white : TColors.dark,
                borderColor: isDark ? Colors.transparent : Colors.grey.shade300,
              ),
            ),
          ],
        ),

        const SizedBox(height: TSizes.spaceBtwItems),

        // Apple button (visible only on iOS)
        SocialButton(
          text: 'Continue with Apple',
          icon: Icon(
            FontAwesomeIcons.apple,
          ), // Use the correct FontAwesome apple icon
          onPressed: () => controller.signInWithApple(),
          backgroundColor: isDark ? Colors.white : Colors.black,
          foregroundColor: isDark ? Colors.black : Colors.white,
          isVisible: controller.isAppleSignInAvailable.value,
        ),

        if (controller.isAppleSignInAvailable.value)
          const SizedBox(height: TSizes.spaceBtwItems),
      ],
    );
  }
}
