import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart'; // Hiển thị HTML
import 'package:get/get.dart';
import 'package:mypoint_flutter_app/base/base_response_model.dart';
import '../../base/base_screen.dart';
import '../../base/basic_state.dart';
import '../../configs/constants.dart';
import '../../resouce/base_color.dart';
import '../login/login_screen.dart';
import '../otp/otp_screen.dart';
import '../signup/signup_otp_repository.dart';
import 'model/check_phone_response_model.dart';
import 'onboarding_view_model.dart';

class OnboardingScreen extends BaseScreen {
  const OnboardingScreen({super.key});

  @override
  State<OnboardingScreen> createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends BaseState<OnboardingScreen> with BasicState {
  final OnboardingViewModel _viewModel = Get.find<OnboardingViewModel>();

  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _viewModel.fetchOnboardingContent();
    _viewModel.checkPhoneRes.listen((response) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        hideKeyboard();
        // Get.to(() => const LoginScreen());
        Get.to(() => OtpScreen(
          repository: SignUpOtpRepository(_viewModel.phoneNumber.value),
        ));
      });
      // _handleResponseCheckPhoneNumber(response.data);
      // _handleResponseError(response);
    });
  }

  void _handleResponseError(BaseResponseModel<CheckPhoneResponseModel>? response) {
    if (response?.isSuccess ?? false) return;
    var errorCode = response?.errorCode ?? "";
    var errorMessage = response?.errorMessage ?? Constants.commonError;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      showAlertError(errorMessage);
      if (errorCode == ErrorCodes.deviceLock) {
        // show alert error popupErrorCSKH
        return;
      }
      //show alert error popupError
    });
  }

  void _handleResponseCheckPhoneNumber(CheckPhoneResponseModel? response) {
    if (response == null) return;
    if (response.requireRecaptcha == true) {
      // show Captcha
      return;
    }
    if ((response.mfaToken ?? "").isNotEmpty) {
      // show OTP
      return;
    }
    if (response.nextAction == "login") {
      return;
    }
    if (response.nextAction == "signup") {
      return;
    }
  }

  @override
  Widget createBody() {
    final double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    return GestureDetector(
      onTap: hideKeyboard,
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
          children: [
            /// 📌 Hiển thị background từ API (hoặc ảnh mặc định)
            Obx(
              () => Positioned.fill(
                child:
                    _viewModel.url.isNotEmpty
                        ? Image.network(_viewModel.url, fit: BoxFit.cover)
                        : Image.asset("assets/images/bg_onboarding.png", fit: BoxFit.cover),
              ),
            ),

            /// 📌 Nội dung chính
            SafeArea(
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Spacer(),
                  // Expanded(child: Container()),
                  AnimatedContainer(
                    duration: const Duration(milliseconds: 300),
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
                    child: SingleChildScrollView(
                      keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
                      physics: BouncingScrollPhysics(),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          /// 📌 Tiêu đề (Hiển thị nội dung HTML từ API hoặc mặc định)
                          Obx(
                            () => Visibility(
                              visible: !_focusNode.hasFocus,
                              child: HtmlWidget(
                                _viewModel.content.isNotEmpty
                                    ? _viewModel.content
                                    : """<h4 style="color: white;">Tiêu điểm dễ - Trừ tiền mê</h4>
                                       <p style="color: white;">Đừng bỏ lỡ cơ hội tích tới 30% tất cả giao dịch viễn thông 
                                       của các nhà mạng và đổi phiếu giảm giá tại hơn 200 thương hiệu được yêu thích nhất.</p>""",
                                textStyle: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                          const SizedBox(height: 16),

                          /// 📌 Ô nhập số điện thoại
                          TextField(
                            inputFormatters: [
                              LengthLimitingTextInputFormatter(10)
                            ],
                            // maxLength: 10,
                            focusNode: _focusNode,
                            keyboardType: TextInputType.phone,
                            style: const TextStyle(color: BaseColor.second600),
                            decoration: InputDecoration(
                              filled: true,
                              fillColor: Colors.white,
                              hintText: "Nhập số điện thoại",
                              hintStyle: const TextStyle(color: Colors.grey),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10),
                                borderSide: BorderSide.none,
                              ),
                              prefixIcon: const Icon(Icons.phone, color: Color(0xFF9DA4AE))
                            ),
                            onChanged: _viewModel.updatePhoneNumber,
                          ),
                          const SizedBox(height: 16),

                          /// 📌 Nút Tiếp Tục
                          Obx(
                            () => SizedBox(
                              width: double.infinity,
                              child: ElevatedButton(
                                onPressed:
                                    _viewModel.isButtonEnabled
                                        ? () {
                                         _viewModel.checkPhoneNumber();
                                        }
                                        : null,
                                style: ElevatedButton.styleFrom(
                                  padding: const EdgeInsets.symmetric(vertical: 15),
                                  backgroundColor: _viewModel.isButtonEnabled ? Colors.white : Colors.white54,
                                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                                ),
                                child: Text(
                                  "Tiếp tục",
                                  style: TextStyle(
                                    color: _viewModel.isButtonEnabled ? BaseColor.second600 : BaseColor.second400,
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(height: 16),
                          /// 📌 Checkbox + Điều khoản sử dụng + Chính sách bảo mật
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Obx(
                                () => Checkbox(
                                  value: _viewModel.isChecked.value,
                                  onChanged: _viewModel.toggleCheckbox,
                                  activeColor: Colors.white,
                                  checkColor: Colors.red,
                                  side: const BorderSide(color: Colors.white, width: 2),
                                ),
                              ),
                              Expanded(
                                child: RichText(
                                  text: TextSpan(
                                    style: const TextStyle(color: Colors.white, fontSize: 14),
                                    children: [
                                      const TextSpan(text: "Bằng việc tiếp tục, bạn đã đọc và đồng ý với "),
                                      WidgetSpan(
                                        child: GestureDetector(
                                          onTap: () => debugPrint("Điều khoản sử dụng"),
                                          child: const Text(
                                            "Điều khoản sử dụng",
                                            style: TextStyle(
                                              decoration: TextDecoration.underline,
                                              decorationColor: Colors.white,
                                              decorationThickness: 2,
                                              color: Colors.white,
                                            ),
                                          ),
                                        ),
                                      ),
                                      const TextSpan(text: " và "),
                                      WidgetSpan(
                                        child: GestureDetector(
                                          onTap: () => debugPrint("Chính sách bảo mật"),
                                          child: const Text(
                                            "Chính sách bảo mật",
                                            style: TextStyle(
                                              decoration: TextDecoration.underline,
                                              decorationColor: Colors.white,
                                              decorationThickness: 2,
                                              color: Colors.white,
                                            ),
                                          ),
                                        ),
                                      ),
                                      const TextSpan(text: " của MyPoint"),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 0),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
