import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:sigap/src/features/auth/presentasion/controllers/email-verification/email_verification_controller.dart';
import 'package:sigap/src/features/auth/presentasion/widgets/auth_button.dart';
import 'package:sigap/src/features/auth/presentasion/widgets/auth_header.dart';
import 'package:sigap/src/features/auth/presentasion/widgets/otp_input_field.dart';
import 'package:sigap/src/utils/constants/colors.dart';

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

  @override
  Widget build(BuildContext context) {
    // Get the controller
    final controller = Get.find<EmailVerificationController>();


    // Set system overlay style
    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
      ),
    );

    return Scaffold(
      backgroundColor: TColors.light,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: TColors.textPrimary),
          onPressed: controller.goToSignIn,
        ),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(24.0),
            child: Obx(
              () =>
                  controller.isVerified.value
                      ? _buildVerifiedView()
                      : _buildVerificationForm(controller),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildVerificationForm(EmailVerificationController controller) {
    final isResendEnabled = controller.isResendEnabled.value;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // Header
        const AuthHeader(
          title: 'Email Verification',
          subtitle: 'Enter the 6-digit code sent to your email',
        ),

        const SizedBox(height: 32),

        // OTP input fields
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: List.generate(
            6,
            (index) => OtpInputField(
              controller: controller.otpControllers[index],
              focusNode: controller.focusNodes[index],
              autoFocus: index == 0,
              onChanged: (value) => controller.onOtpChanged(value, index),
            ),
          ),
        ),

        const SizedBox(height: 16),

        // Error message
        Obx(
          () =>
              controller.verificationError.value.isNotEmpty
                  ? Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Text(
                      controller.verificationError.value,
                      style: TextStyle(color: TColors.error, fontSize: 14),
                    ),
                  )
                  : const SizedBox.shrink(),
        ),

        const SizedBox(height: 32),

        // Verify button
        Obx(
          () => AuthButton(
            text: 'Verify',
            onPressed: controller.verifyOtp,
            isLoading: controller.isLoading.value,
          ),
        ),

        const SizedBox(height: 24),

        // Resend code
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Didn\'t receive the code?',
              style: TextStyle(color: TColors.textSecondary),
            ),
            Obx(
              () => TextButton(
                onPressed:
                    isResendEnabled
                        ? () => controller.resendCode
                        : null,
                child: Text(
                  isResendEnabled
                      ? 'Resend'
                      : 'Resend in ${controller.resendCountdown.value}s',
                  style: TextStyle(
                    color:
                        isResendEnabled
                            ? TColors.primary
                            : TColors.textSecondary,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildVerifiedView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const SizedBox(height: 32),

        // Success icon
        Icon(Icons.check_circle_outline, size: 80, color: TColors.success),

        const SizedBox(height: 24),

        // Success message
        Text(
          'Email Verified',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: TColors.textPrimary,
          ),
        ),

        const SizedBox(height: 16),

        Text(
          'Your email has been successfully verified. Please wait while we redirect you.',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 16, color: TColors.textSecondary),
        ),

        const SizedBox(height: 32),

        // Loading indicator
        CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation<Color>(TColors.primary),
        ),
      ],
    );
  }
}
