import 'dart:io';

import 'package:appframe/bloc/web_cubit.dart';
import 'package:appframe/config/env_config.dart';
import 'package:appframe/config/locator.dart';
import 'package:appframe/config/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' hide MessageHandler;
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  Widget build(BuildContext buildContext) {
    final Map<String, dynamic>? extraData = GoRouterState.of(buildContext).extra as Map<String, dynamic>?;

    var loginOpFlag = true;

    var visitor = extraData?['visitor'];
    var sessionCode = extraData?['sessionCode'];
    var userCode = extraData?['userCode'];
    var classCode = extraData?['classCode'];
    var userType = extraData?['userType'];
    var stuId = extraData?['stuId'];
    var targetUrl = extraData?['targetUrl'];

    if (sessionCode == null || sessionCode == '') {
      loginOpFlag = false;

      var sharedPreferences = getIt.get<SharedPreferences>();
      visitor = sharedPreferences.getInt('auth_visitor');
      sessionCode = sharedPreferences.getString('auth_sessionCode');
      userCode = sharedPreferences.getString('auth_userCode');
      classCode = sharedPreferences.getString('auth_classCode');
      userType = sharedPreferences.getInt('auth_userType');
      stuId = sharedPreferences.getString('auth_stuId');
    }

    return BlocProvider(
      create: (context) {
        final webCubit = WebCubit(
          WebState(
            loginOpFlag: loginOpFlag,
            visitor: visitor,
            sessionCode: sessionCode,
            userCode: userCode,
            classCode: classCode,
            userType: userType,
            stuId: stuId,
            targetUrl: targetUrl,
          ),
        );
        return webCubit;
      },
      child: BlocConsumer<WebCubit, WebState>(
        builder: (ctx, state) {
          final scaffold = Scaffold(
            appBar: state.showAppBar ? _buildAppBar(ctx, state) : null,
            body: Stack(
              children: [
                state.isUpgrading
                    ? _buildLoadingView(ctx, message: '资源更新中...')
                    : (state.loaded
                        ? WebViewWidget(controller: ctx.read<WebCubit>().controller)
                        : _buildLoadingView(ctx)),
                // 连续点击退出登录的隐形热区（左上角 60x60）
                // 用于 H5 因 JS 异常无响应时的兜底退出机制
                // 使用 Listener 而非 GestureDetector：避免 Android 端 WebView 平台视图
                // 在手势竞技场中抢占 onTap，导致点击不生效。
                // Positioned(
                //   left: 0,
                //   top: 0,
                //   width: 80,
                //   height: 80,
                //   child: Listener(
                //     behavior: HitTestBehavior.opaque,
                //     onPointerDown: (_) {
                //       final triggered = ctx.read<WebCubit>().onQuickLogoutTap();
                //       if (triggered) {
                //         _showQuickLogoutDialog(ctx);
                //       }
                //     },
                //     child: const SizedBox.expand(),
                //   ),
                // ),
              ],
            ),
            bottomNavigationBar: state.showBottomNavBar
                ? BottomNavigationBar(
                    type: BottomNavigationBarType.fixed,
                    currentIndex: state.selectedIndex,
                    selectedItemColor: Color(0xFF7691fa),
                    unselectedItemColor: Color(0xFF969799),
                    onTap: (index) {
                      // 更新选中索引
                      ctx.read<WebCubit>().updateSelectedIndex(index);
                      // 根据 index 执行相应的操作
                    },
                    items: const [
                      BottomNavigationBarItem(
                        icon: Icon(Icons.home, size: 32),
                        label: '我的班级',
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.contact_page, size: 32),
                        label: '通讯录',
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.find_in_page, size: 32),
                        label: '发现',
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.person, size: 32),
                        label: '我的',
                      ),
                    ],
                  )
                : null,
          );

          // 当 AppBar 隐藏时，通过 _StatusBarStyleApplier 直接调用
          // SystemChrome.setSystemUIOverlayStyle 设置状态栏样式。
          // 不使用 AnnotatedRegion 包裹 Scaffold，因为其 layer 直接位于
          // WebView 平台视图上方，H5 <video> 全屏时 layer tree 变化会
          // 触发 setSystemUIOverlayStyle 重新执行，修改 decorView 的
          // systemUiVisibility flag，与 WebView 全屏管理产生冲突导致卡死。
          // 当 AppBar 显示时，由 AppBar.systemOverlayStyle 通过其内部
          // AnnotatedRegion 局部覆盖状态栏样式（位于 appBar 插槽内，
          // 不在 WebView 所在层级，不会干扰全屏）。
          final child = _StatusBarStyleApplier(
            showAppBar: state.showAppBar,
            statusBarColor: state.statusBarColor,
            child: scaffold,
          );


          // ios 不使用 PopScope
          if (Platform.isIOS) {
            return child;
          }

          return PopScope(
            canPop: false,
            onPopInvokedWithResult: (didPop, result) {
              if (didPop) {
                return;
              }
              ctx.read<WebCubit>().handleBack();
            },
            child: child,
          );
        },
        listener: (context, state) {
          if (state.microphonePermissionFlag) {
            context.read<WebCubit>().handleMicrophonePermission(context);
          } else if (state.suggestUpgrade) {
            context.read<WebCubit>().suggestUpgrade(context);
          } else if (state.orientationCmdFlag) {
            context.read<WebCubit>().getOrientation(context);
          } else if (state.windowInfoCmdFlag) {
            context.read<WebCubit>().getWindowInfo(context);
          } else if (state.chooseImageCmdFlag) {
            context.read<WebCubit>().chooseImage(context);
          } else if (state.chooseVideoCmdFlag) {
            context.read<WebCubit>().chooseVideo(context);
          } else if (state.wechatQrBindCmdFlag) {
            context.read<WebCubit>().showWechatQrBindDialog(context);
          } else if (state.suggestAppUpgrade) {
            context.read<WebCubit>().suggestAppUpdate(context);
          }
        },
      ),
    );
  }

  Widget _buildLoadingView(
    BuildContext context, {
    String message = '加载中...',
    Color textColor = const Color(0xFF333333),
  }) {
    final screenWidth = MediaQuery.sizeOf(context).width;
    // 设计稿尺寸：356dp × 564dp
    const designWidth = 356.0;
    const designHeight = 564.0;
    final scale = screenWidth / designWidth;
    final heightScale = MediaQuery.sizeOf(context).height / designHeight;
    final sloganWidth = 230.0 * scale;
    final brandWidth = 170.0 * scale;
    final sloganTopPadding = 140.0 * scale;
    final loadingSpacing = 60.0 * heightScale;
    final brandBottomPadding = 40.0 * heightScale;

    return SizedBox.expand(
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.only(top: sloganTopPadding),
            child: Image.asset(
              'assets/images/login_v3/index_slogan.png',
              width: sloganWidth,
            ),
          ),
          SizedBox(height: loadingSpacing),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const SizedBox(
                width: 24,
                height: 24,
                child: CircularProgressIndicator(
                  color: Color(0xFF7691fa),
                  strokeWidth: 3,
                ),
              ),
              const SizedBox(height: 16),
              Text(
                message,
                style: TextStyle(
                  fontSize: 14,
                  color: textColor,
                  height: null,
                  fontWeight: FontWeight.normal,
                ),
              ),
            ],
          ),
          const Spacer(),
          Padding(
            padding: EdgeInsets.only(bottom: brandBottomPadding),
            child: Image.asset(
              'assets/images/login_v3/index_brand.png',
              width: brandWidth,
            ),
          ),
        ],
      ),
    );
  }

  AppBar _buildAppBar(BuildContext ctx, WebState state) {
    return AppBar(
      title: EnvConfig.isDev()
          ? Text(state.title + state.testMsg, style: TextStyle(color: Color(state.titleColor), fontSize: 16))
          : Text(state.title, style: TextStyle(color: Color(state.titleColor), fontSize: 16)),
      centerTitle: true,
      automaticallyImplyLeading: false,
      backgroundColor: Color(state.bgColor),
      systemOverlayStyle: _computeSystemOverlayStyle(state.statusBarColor),
      actionsIconTheme: IconThemeData(color: Color(state.titleColor)),
      leading: state.opIcon == 'back'
          ? IconButton(
              icon: Icon(Icons.arrow_back, color: Color(state.titleColor)),
              onPressed: () {
                ctx.read<WebCubit>().handleBack();
              },
            )
          : (state.opIcon == 'home'
              ? IconButton(
                  icon: Icon(Icons.home, color: Color(state.titleColor)),
                  onPressed: () {
                    ctx.read<WebCubit>().handleHome();
                  },
                )
              : null),
      actions: [
        state.setting
            ? IconButton(
                icon: const Icon(Icons.settings),
                onPressed: () {
                  router.push('/setting');
                },
              )
            : const SizedBox.shrink(),
      ],
      toolbarHeight: 40.0,
    );
  }

  /// 连续点击达阈后弹出的退出登录确认对话框
  /// 样式参照 login_main_page_v3 中的 _showAgreementDialog
  Future<void> _showQuickLogoutDialog(BuildContext ctx) async {
    final webCubit = ctx.read<WebCubit>();
    final result = await showDialog(
      context: ctx,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(5),
            ),
          ),
          title: Text(
            '退出登录',
            style: TextStyle(
              fontSize: 17,
              color: Color(0xFF000000),
            ),
            textAlign: TextAlign.center,
          ),
          content: Text(
            '检测到连续点击了屏幕，是否退出登录？',
            style: TextStyle(color: Color(0xFF666666), fontSize: 14),
          ),
          actions: [
            Table(
              children: [
                TableRow(
                  children: [
                    TableCell(
                      child: TextButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        style: TextButton.styleFrom(
                          foregroundColor: Color(0xFF666666),
                          textStyle: TextStyle(fontSize: 17),
                          padding: EdgeInsets.zero,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.zero,
                          ),
                        ),
                        child: Text('取消'),
                      ),
                    ),
                    TableCell(
                      child: TextButton(
                        onPressed: () {
                          Navigator.of(context).pop('OK');
                        },
                        style: TextButton.styleFrom(
                          foregroundColor: Color(0xFF7691FA),
                          textStyle: TextStyle(fontSize: 17),
                          minimumSize: Size.fromHeight(40),
                          padding: EdgeInsets.zero,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.zero,
                          ),
                        ),
                        child: Text('确认'),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        );
      },
    );
    if (result != null) {
      webCubit.handleQuickLogout();
    }
  }
}

/// 根据 statusBarColor 计算状态栏文字和图标的颜色样式。
/// statusBarIconBrightness 用于 Android，statusBarBrightness 用于 iOS（两者取反）。
SystemUiOverlayStyle _computeSystemOverlayStyle(int colorValue) {
  final Color color = Color(colorValue);
  final Brightness iconBrightness =
      color.computeLuminance() > 0.5 ? Brightness.light : Brightness.dark;

  return SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: iconBrightness,
    statusBarBrightness:
        iconBrightness == Brightness.light ? Brightness.dark : Brightness.light,
  );
}

/// 当 AppBar 隐藏时，通过直接调用 SystemChrome.setSystemUIOverlayStyle
/// 设置状态栏样式，替代 AnnotatedRegion 包裹方案。
///
/// 不使用 AnnotatedRegion 的原因：包裹 Scaffold 的 AnnotatedRegion 其 layer
/// 直接位于 WebView 平台视图上方，H5 <video> 全屏时 layer tree 变化会触发
/// setSystemUIOverlayStyle 重新执行，修改 decorView 的 systemUiVisibility flag，
/// 与 WebView 全屏管理产生冲突导致画面卡死。
///
/// 本组件仅在 statusBarColor 实际变化或从“显示 AppBar”切换到“隐藏 AppBar”时，
/// 通过 addPostFrameCallback 在帧后调用 SystemChrome，避免在 paint 阶段干扰全屏。
/// 当 AppBar 显示时，由 AppBar.systemOverlayStyle 通过其内部 AnnotatedRegion 管理。
class _StatusBarStyleApplier extends StatefulWidget {
  final bool showAppBar;
  final int statusBarColor;
  final Widget child;

  const _StatusBarStyleApplier({
    required this.showAppBar,
    required this.statusBarColor,
    required this.child,
  });

  @override
  State<_StatusBarStyleApplier> createState() => _StatusBarStyleApplierState();
}

class _StatusBarStyleApplierState extends State<_StatusBarStyleApplier> {
  bool _lastShowAppBar = true;
  int? _lastAppliedColor;

  @override
  void initState() {
    super.initState();
    _maybeApplyStyle();
  }

  @override
  void didUpdateWidget(_StatusBarStyleApplier oldWidget) {
    super.didUpdateWidget(oldWidget);
    _maybeApplyStyle();
  }

  /// 当 AppBar 隐藏时，检查是否需要重新应用状态栏样式。
  /// 仅在 statusBarColor 变化或从“显示 AppBar”切换到“隐藏 AppBar”时触发，
  /// 避免在 H5 视频全屏期间产生不必要的 setSystemUIOverlayStyle 调用。
  void _maybeApplyStyle() {
    final shouldApply = !widget.showAppBar &&
        (widget.statusBarColor != _lastAppliedColor || _lastShowAppBar);

    _lastShowAppBar = widget.showAppBar;

    if (shouldApply) {
      _lastAppliedColor = widget.statusBarColor;
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (!mounted || widget.showAppBar) return;
        SystemChrome.setSystemUIOverlayStyle(
          _computeSystemOverlayStyle(widget.statusBarColor),
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) => widget.child;
}