import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:marco/controller/auth/mpin_controller.dart';
import 'package:marco/helpers/widgets/my_button.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/images.dart';
import 'package:marco/helpers/services/storage/local_storage.dart';
import 'package:marco/helpers/services/api_endpoints.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';

class MPINAuthScreen extends StatefulWidget {
  const MPINAuthScreen({super.key});

  @override
  State<MPINAuthScreen> createState() => _MPINAuthScreenState();
}

class _MPINAuthScreenState extends State<MPINAuthScreen> with UIMixin {
  bool get _isBetaEnvironment => ApiEndpoints.baseUrl.contains("stage");
  @override
  void dispose() {
    Get.delete<MPINController>();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final MPINController controller = Get.put(MPINController());

    return Scaffold(
      backgroundColor: contentTheme.brandRed,
      body: SafeArea(
        child: LayoutBuilder(builder: (context, constraints) {
          return Column(
            children: [
              _buildHeader(),
              const SizedBox(height: 16),
              _buildWelcomeTextsAndChips(),
              const SizedBox(height: 16),
              Expanded(
                child: Container(
                  width: double.infinity,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius:
                        BorderRadius.vertical(top: Radius.circular(32)),
                  ),
                  child: SingleChildScrollView(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 24, vertical: 32),
                    child: ConstrainedBox(
                      constraints: BoxConstraints(
                          minHeight: constraints.maxHeight - 120),
                      child: Obx(() {
                        final isNewUser = controller.isNewUser.value;

                        return IntrinsicHeight(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              MyText.headlineSmall(
                                isNewUser ? 'Generate MPIN' : 'Enter MPIN',
                                fontWeight: 700,
                                color: Colors.black87,
                              ),
                              const SizedBox(height: 8),
                              MyText.bodyMedium(
                                isNewUser
                                    ? 'Set your 6-digit MPIN for quick login.'
                                    : 'Enter your 6-digit MPIN to continue.',
                                color: Colors.black54,
                                fontSize: 16,
                                textAlign: TextAlign.center,
                              ),
                              const SizedBox(height: 32),
                              _buildMPINForm(controller, isNewUser),
                              const SizedBox(height: 40),
                              _buildSubmitButton(controller, isNewUser),
                              const SizedBox(height: 24),
                              _buildFooterOptions(controller, isNewUser),
                              Padding(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 24),
                                child: Align(
                                  alignment: Alignment.centerLeft,
                                  child: TextButton.icon(
                                    onPressed: () async {
                                      await LocalStorage.logout();
                                    },
                                    icon: const Icon(Icons.arrow_back,
                                        color: Colors.white),
                                    label: MyText.bodyMedium(
                                      'Back to Home Page',
                                      color: Colors.white,
                                      fontWeight: 600,
                                      fontSize: 14,
                                    ),
                                    style: TextButton.styleFrom(
                                      foregroundColor: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        );
                      }),
                    ),
                  ),
                ),
              ),
            ],
          );
        }),
      ),
    );
  }

  Widget _buildWelcomeTextsAndChips() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        children: [
          MyText.headlineSmall(
            "Welcome to Marco",
            fontWeight: 700,
            color: Colors.white,
            textAlign: TextAlign.center,
            fontSize: 20,
          ),
          const SizedBox(height: 4),
          MyText.bodyMedium(
            "Streamline Project Management and Boost Productivity with Automation.",
            color: Colors.white70,
            fontSize: 14,
            textAlign: TextAlign.center,
          ),
          if (_isBetaEnvironment) ...[
            const SizedBox(height: 8),
            _buildBetaLabel(),
          ],
        ],
      ),
    );
  }

  Widget _buildBetaLabel() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
      decoration: BoxDecoration(
        color: Colors.orangeAccent,
        borderRadius: BorderRadius.circular(4),
      ),
      child: MyText.bodySmall(
        'BETA',
        color: Colors.white,
        fontWeight: 600,
        fontSize: 12,
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      padding: const EdgeInsets.all(12),
      margin: const EdgeInsets.symmetric(horizontal: 24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 6,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Image.asset(Images.logoDark, height: 70),
    );
  }

  Widget _buildMPINForm(MPINController controller, bool isNewUser) {
    return Form(
      key: controller.formKey,
      child: Column(
        children: [
          _buildDigitRow(controller, isRetype: false),
          if (isNewUser) ...[
            const SizedBox(height: 24),
            MyText.bodyMedium(
              'Retype MPIN',
              fontWeight: 600,
              color: Colors.black.withOpacity(0.6),
              fontSize: 14,
            ),
            const SizedBox(height: 8),
            _buildDigitRow(controller, isRetype: true),
          ],
        ],
      ),
    );
  }

  Widget _buildDigitRow(MPINController controller, {required bool isRetype}) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(6, (index) {
        return _buildDigitBox(controller, index, isRetype);
      }),
    );
  }

  Widget _buildDigitBox(MPINController controller, int index, bool isRetype) {
    final textController = isRetype
        ? controller.retypeControllers[index]
        : controller.digitControllers[index];
    final focusNode = isRetype
        ? controller.retypeFocusNodes[index]
        : controller.focusNodes[index];

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 6),
      width: 40,
      height: 55,
      child: TextFormField(
        controller: textController,
        focusNode: focusNode,
        obscureText: true,
        maxLength: 1,
        textAlign: TextAlign.center,
        style: const TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
          letterSpacing: 8,
        ),
        keyboardType: TextInputType.number,
        inputFormatters: [FilteringTextInputFormatter.digitsOnly],
        onChanged: (value) =>
            controller.onDigitChanged(value, index, isRetype: isRetype),
        decoration: InputDecoration(
          counterText: '',
          filled: true,
          fillColor: Colors.grey.shade100,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: BorderSide.none,
          ),
        ),
      ),
    );
  }

  Widget _buildSubmitButton(MPINController controller, bool isNewUser) {
    return Obx(() {
      return MyButton.rounded(
        onPressed: controller.isLoading.value ? null : controller.onSubmitMPIN,
        elevation: 2,
        padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
        borderRadiusAll: 10,
        backgroundColor: contentTheme.brandRed,
        child: controller.isLoading.value
            ? const SizedBox(
                height: 20,
                width: 20,
                child: CircularProgressIndicator(
                    color: Colors.white, strokeWidth: 2),
              )
            : MyText.bodyMedium(
                isNewUser ? 'Generate MPIN' : 'Submit MPIN',
                color: Colors.white,
                fontWeight: 700,
                fontSize: 16,
              ),
      );
    });
  }

  Widget _buildFooterOptions(MPINController controller, bool isNewUser) {
    return Column(
      children: [
        if (isNewUser)
          TextButton.icon(
            onPressed: controller.switchToEnterMPIN,
            icon: const Icon(Icons.arrow_back, size: 18, color: Colors.black87),
            label: MyText.bodyMedium(
              'Back to Enter MPIN',
              color: Colors.black87,
              fontWeight: 600,
              fontSize: 14,
            ),
          ),
        if (isNewUser)
          TextButton.icon(
            onPressed: () async {
              Get.delete<MPINController>();
              Get.toNamed('/dashboard');
            },
            icon:
                const Icon(Icons.arrow_back, size: 18, color: Colors.redAccent),
            label: MyText.bodyMedium(
              'Back to Home Page',
              color: contentTheme.brandRed,
              fontWeight: 600,
              fontSize: 14,
            ),
          ),
      ],
    );
  }
}