import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sigap/src/features/auth/presentasion/controllers/signup/step/identity-verification/identity_verification_controller.dart';
import 'package:sigap/src/features/auth/presentasion/controllers/signup/step/selfie-verification/facial_verification_controller.dart';
import 'package:sigap/src/shared/widgets/form/form_section_header.dart';
import 'package:sigap/src/shared/widgets/form/verification_status.dart';
import 'package:sigap/src/shared/widgets/info/tips_container.dart';
import 'package:sigap/src/shared/widgets/verification/validation_message_card.dart';
import 'package:sigap/src/utils/constants/colors.dart';
import 'package:sigap/src/utils/constants/sizes.dart';

class FaceVerificationSection extends StatelessWidget {
  final IdentityVerificationController controller;

  const FaceVerificationSection({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const FormSectionHeader(
          title: 'Face Verification',
          subtitle: 'Verify that your face matches with your ID card photo',
        ),

        // Face Verification Status
        Obx(
          () => VerificationStatus(
            isVerifying: controller.isVerifyingFace.value,
            verifyingMessage: 'Comparing face with ID photo...',
          ),
        ),

        // Face match verification button
        _buildFaceVerificationButton(context),

        // Face Verification Message
        Obx(
          () =>
              controller.faceVerificationMessage.value.isNotEmpty
                  ? Padding(
                    padding: const EdgeInsets.symmetric(
                      vertical: TSizes.spaceBtwItems,
                    ),
                    child: ValidationMessageCard(
                      message: controller.faceVerificationMessage.value,
                      isValid: controller.isFaceVerified.value,
                      hasConfirmed: false,
                    ),
                  )
                  : const SizedBox.shrink(),
        ),

        // Development mode indicator
        if (FacialVerificationService.instance.skipFaceVerification)
          _buildDevelopmentModeIndicator(context),

        const SizedBox(height: TSizes.spaceBtwItems),

        // Tips for face verification using TipsContainer
        _buildTipsContainer(context),
      ],
    );
  }

  Widget _buildTipsContainer(BuildContext context) {
    return TipsContainer(
      title: 'Face Verification Tips:',
      tips: [
        'Make sure your face is clearly visible in both ID and selfie',
        'Good lighting is essential for accurate matching',
        'Keep a neutral expression, similar to your ID photo',
        'Remove glasses and face coverings',
        'Face the camera directly without tilting your head',
      ],
       
    );
  }

  Widget _buildFaceVerificationButton(BuildContext context) {
    return Obx(
      () => ElevatedButton.icon(
        onPressed:
            controller.isVerifyingFace.value || controller.isFaceVerified.value
                ? null
                : () => controller.verifyFaceMatch(),
        icon: const Icon(Icons.face_retouching_natural),
        label: Text(
          controller.isFaceVerified.value
              ? 'Face Verified Successfully'
              : 'Verify Face Match',
        ),
        style: ElevatedButton.styleFrom(
          backgroundColor:
              controller.isFaceVerified.value
                  ? TColors.success
                  : Theme.of(context).primaryColor,
          foregroundColor: Colors.white,
          minimumSize: const Size(double.infinity, TSizes.buttonHeight),
          disabledBackgroundColor:
              controller.isFaceVerified.value
                  ? TColors.success.withOpacity(0.7)
                  : null,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(TSizes.buttonRadius),
          ),
          elevation: 0,
        ),
      ),
    );
  }

  Widget _buildDevelopmentModeIndicator(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: TSizes.spaceBtwItems),
      padding: const EdgeInsets.all(TSizes.sm),
      decoration: BoxDecoration(
        color: Colors.amber.shade100,
        borderRadius: BorderRadius.circular(TSizes.borderRadiusSm),
        border: Border.all(color: Colors.amber),
      ),
      child: Row(
        children: [
          Icon(Icons.code, color: Colors.amber.shade800, size: TSizes.iconSm),
          const SizedBox(width: TSizes.xs),
          Expanded(
            child: Text(
              'Development mode: Face verification is skipped',
              style: Theme.of(
                context,
              ).textTheme.bodySmall?.copyWith(color: Colors.amber.shade900),
            ),
          ),
        ],
      ),
    );
  }
}
