import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sigap/src/features/auth/presentasion/controllers/signup/step/selfie-verification/face_liveness_detection_controller.dart';
import 'package:sigap/src/features/auth/presentasion/controllers/signup/step/selfie-verification/selfie_verification_controller.dart';

/// Shows the debug panel for liveness detection
void showLivenessDebugPanel(
  BuildContext context,
  FaceLivenessController controller,
  SelfieVerificationController? selfieController,
) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
    ),
    builder:
        (context) => LivenessDebugPanel(
          controller: controller,
          selfieController: selfieController,
        ),
  );
}

class LivenessDebugPanel extends StatelessWidget {
  final FaceLivenessController controller;
  final SelfieVerificationController? selfieController;

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      height: MediaQuery.of(context).size.height * 0.8,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Liveness Detection Debug Panel',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              IconButton(
                icon: Icon(Icons.close),
                onPressed: () => Navigator.pop(context),
              ),
            ],
          ),
          Divider(),
          Expanded(
            child: SingleChildScrollView(
              child: Obx(
                () => Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Status section
                    Text(
                      'Camera & Detection Status',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                    SizedBox(height: 8),
                    _debugItem(
                      'Camera Controller',
                      '${controller.cameraController?.value.isInitialized}',
                    ),
                    _debugItem('Status', '${controller.status.value}'),
                    _debugItem(
                      'Face In Frame',
                      '${controller.isFaceInFrame.value}',
                    ),
                    _debugItem('Face Left', '${controller.isFaceLeft}'),
                    _debugItem('Face Right', '${controller.isFaceRight}'),
                    _debugItem('Eyes Open', '${controller.isEyeOpen}'),
                    _debugItem('Smiled', '${controller.isSmiled}'),
                    _debugItem(
                      'Ready For Photo',
                      '${controller.isFaceReadyForPhoto.value}',
                    ),
                    _debugItem('Captured', '${controller.isCaptured}'),
                    _debugItem(
                      'Steps Completed',
                      '${controller.successfulSteps.length}',
                    ),
                    _debugItem('Steps', '${controller.successfulSteps}'),

                    Divider(),
                    Text(
                      'Selfie Controller',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                    SizedBox(height: 8),
                    _debugItem('Found', '${selfieController != null}'),

                    if (selfieController != null) ...[
                      _debugItem(
                        'Is Performing Check',
                        '${selfieController?.isPerformingLivenessCheck.value}',
                      ),
                      _debugItem(
                        'Is Selfie Valid',
                        '${selfieController?.isSelfieValid.value}',
                      ),
                      _debugItem(
                        'Has Confirmed Selfie',
                        '${selfieController?.hasConfirmedSelfie.value}',
                      ),
                      _debugItem(
                        'Liveness Passed',
                        '${selfieController?.isLivenessCheckPassed.value}',
                      ),
                    ],

                    Divider(),
                    _buildQuickActionsSection(context),

                    SizedBox(height: 16),
                    // Additional test connection button
                    if (selfieController != null &&
                        controller.capturedImage != null)
                      OutlinedButton.icon(
                        icon: Icon(Icons.link),
                        label: Text('Test Connection to Selfie Controller'),
                        onPressed: () {
                          selfieController?.selfieImage.value =
                              controller.capturedImage;
                          Navigator.pop(context);
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(
                              content: Text(
                                'Test data sent to SelfieVerificationController',
                              ),
                            ),
                          );
                        },
                      ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // Quick actions section
  Widget _buildQuickActionsSection(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.amber.shade50,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: Colors.amber.shade200),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Quick Actions',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 16,
              color: Colors.amber.shade800,
            ),
          ),
          SizedBox(height: 12),
          Text(
            'Use these actions to bypass steps or debug issues:',
            style: TextStyle(fontSize: 14, color: Colors.black87),
          ),
          SizedBox(height: 16),

          // Button group - layout for buttons
          GridView.count(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 2.5,
            children: [
              // Skip all steps button
              ElevatedButton.icon(
                icon: Icon(Icons.skip_next, color: Colors.white, size: 18),
                label: Text(
                  'Skip All Steps',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 13,
                  ),
                ),
                onPressed: () {
                  // controller.skipAllVerificationSteps();
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Skipping all steps'),
                      backgroundColor: Colors.green,
                    ),
                  );
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),

              // Force next step button
              ElevatedButton.icon(
                icon: Icon(Icons.arrow_forward, color: Colors.white, size: 18),
                label: Text(
                  'Next Step',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 13,
                  ),
                ),
                onPressed: () {
                  // controller.forceAdvanceToNextStep();
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Forced next step'),
                      backgroundColor: Colors.amber,
                    ),
                  );
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.amber,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),

              // Force capture button
              ElevatedButton.icon(
                icon: Icon(Icons.camera, color: Colors.white, size: 18),
                label: Text(
                  'Force Capture',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 13,
                  ),
                ),
                onPressed: () {
                  if (controller.cameraController != null &&
                      controller.cameraController!.value.isInitialized) {
                    controller.forceCaptureImage();
                    Navigator.pop(context);
                  } else {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Camera not ready'),
                        backgroundColor: Colors.red,
                      ),
                    );
                  }
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),

              // Reset process button
              ElevatedButton.icon(
                icon: Icon(Icons.refresh, color: Colors.white, size: 18),
                label: Text(
                  'Reset Process',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 13,
                  ),
                ),
                onPressed: () {
                  controller.handleCancellation();
                  Navigator.pop(context);
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Process reset'),
                      backgroundColor: Colors.red,
                    ),
                  );
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.red,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  // Debug list item
  Widget _debugItem(String label, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Row(
        children: [
          Text('$label: ', style: TextStyle(fontWeight: FontWeight.w500)),
          Expanded(child: Text(value, style: TextStyle(color: Colors.blue))),
        ],
      ),
    );
  }
}
