import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:kaer_with_panels/app/modules/kr_login/views/kr_login_view.dart';
import 'package:kaer_with_panels/app/common/app_run_data.dart';
import 'package:kaer_with_panels/app/routes/app_pages.dart';
import '../../../services/kr_subscribe_service.dart';
import '../controllers/kr_home_controller.dart';
import '../models/kr_home_views_status.dart';
import '../widgets/kr_home_map_view.dart';
import '../widgets/kr_subscribe_selector_view.dart';
import 'kr_home_bottom_panel.dart';
import 'kr_home_subscription_view.dart';

// 定义新的绿色
const Color krModernGreen = Color(0xFF00E52B);
const Color krModernGreenLight = Color(0xFF66FF85);
const Color krModernGreenDark = Color(0xFF00B322);

class KRHomeView extends GetView<KRHomeController> {
  const KRHomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      if (controller.kr_currentViewStatus.value ==
          KRHomeViewsStatus.kr_notLoggedIn) {
        return Scaffold(
          body: Stack(
            children: [
              // 地图视图
              const KRHomeMapView(),
              // 登录视图
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                child: Container(
                  clipBehavior: Clip.antiAlias,
                  decoration: BoxDecoration(
                    color: Theme.of(context).cardColor,
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.1),
                        spreadRadius: 0,
                        blurRadius: 10,
                        offset: const Offset(0, -2),
                      ),
                    ],
                  ),
                  child: const KRLoginView(),
                ),
              ),
            ],
          ),
        );
      }

      return Scaffold(
        backgroundColor: Theme.of(context).primaryColor,
        body: Stack(
          children: [
            // 地图视图
            const KRHomeMapView(),

            // 顶部工具栏
            Positioned(
              top: MediaQuery.of(context).padding.top + 16,
              left: 16,
              right: 16,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // 左侧状态组
                  Flexible(
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 12, vertical: 4),
                          height: 32,
                          decoration: BoxDecoration(
                            color: Theme.of(context).brightness ==
                                    Brightness.light
                                ? Theme.of(context).cardColor
                                : Theme.of(context).cardColor.withOpacity(0.8),
                            borderRadius: BorderRadius.circular(16),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.1),
                                blurRadius: 10,
                                offset: const Offset(0, 2),
                              ),
                            ],
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Container(
                                width: 6,
                                height: 6,
                                decoration: BoxDecoration(
                                  color: krModernGreen,
                                  shape: BoxShape.circle,
                                ),
                              ),
                              const SizedBox(width: 8),
                              Obx(() {
                                return Text(
                                  controller.kr_connectText.value,
                                  style: TextStyle(
                                    color: Theme.of(context).brightness ==
                                            Brightness.light
                                        ? Colors.black
                                        : Colors.white,
                                    fontSize: 12,
                                  ),
                                );
                              }),
                            ],
                          ),
                        ),
                        // 订阅视图
                        Obx(() {
                          if (!KRAppRunData().kr_isLogin.value) {
                            return const SizedBox.shrink();
                          }
                          final currentSubscribe = controller
                              .kr_subscribeService.kr_currentSubscribe.value;
                          if (currentSubscribe == null) {
                            return const SizedBox.shrink();
                          }

                          return Expanded(
                            child: GestureDetector(
                              onTap: () {
                                if (KRSubscribeService()
                                        .kr_currentStatus
                                        .value ==
                                    KRSubscribeServiceStatus.kr_loading) {
                                  return;
                                }
                                showDialog(
                                  context: context,
                                  barrierDismissible: false,
                                  builder: (context) => Dialog(
                                    backgroundColor: Colors.transparent,
                                    child: KRSubscribeSelectorView(),
                                  ),
                                );
                              },
                              child: Container(
                                margin:
                                    const EdgeInsets.only(left: 12, right: 12),
                                height: 32,
                                decoration: BoxDecoration(
                                  color: Theme.of(context).brightness ==
                                          Brightness.light
                                      ? Theme.of(context).cardColor
                                      : Theme.of(context)
                                          .cardColor
                                          .withOpacity(0.8),
                                  borderRadius: BorderRadius.circular(16),
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.black.withOpacity(0.1),
                                      blurRadius: 10,
                                      offset: const Offset(0, 2),
                                    ),
                                  ],
                                ),
                                child: const KRHomeSubscriptionView(),
                              ),
                            ),
                          );
                        }),
                      ],
                    ),
                  ),
                  // 右侧按钮组
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      // 消息按钮
                      Obx(() {
                        if (!KRAppRunData().kr_isLogin.value) {
                          return const SizedBox.shrink();
                        }
                        return Container(
                          width: 32,
                          height: 32,
                          margin: const EdgeInsets.only(right: 8),
                          decoration: BoxDecoration(
                            color: Theme.of(context).brightness ==
                                    Brightness.light
                                ? Theme.of(context).cardColor
                                : Theme.of(context).cardColor.withOpacity(0.8),
                            shape: BoxShape.circle,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.1),
                                blurRadius: 10,
                                offset: const Offset(0, 2),
                              ),
                            ],
                          ),
                          child: IconButton(
                            onPressed: () {
                              Get.toNamed(Routes.KR_MESSAGE);
                            },
                            icon: Icon(
                              Icons.notifications_outlined,
                              color: Theme.of(context).brightness ==
                                      Brightness.light
                                  ? Colors.blue
                                  : Theme.of(context)
                                      .textTheme
                                      .bodyMedium
                                      ?.color
                                      ?.withOpacity(0.8),
                              size: 16,
                            ),
                            padding: EdgeInsets.zero,
                            constraints: const BoxConstraints(),
                          ),
                        );
                      }),
                      // 刷新按钮
                      Obx(() {
                        if (!KRAppRunData().kr_isLogin.value) {
                          return const SizedBox.shrink();
                        }
                        return Container(
                          width: 32,
                          height: 32,
                          decoration: BoxDecoration(
                            color: Theme.of(context).brightness ==
                                    Brightness.light
                                ? Theme.of(context).cardColor
                                : Theme.of(context).cardColor.withOpacity(0.8),
                            shape: BoxShape.circle,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.1),
                                blurRadius: 10,
                                offset: const Offset(0, 2),
                              ),
                            ],
                          ),
                          child: IconButton(
                            onPressed: () {
                              controller.kr_refreshAll();
                            },
                            icon: Icon(
                              Icons.refresh,
                              color: Theme.of(context).brightness ==
                                      Brightness.light
                                  ? Colors.blue
                                  : Theme.of(context)
                                      .textTheme
                                      .bodyMedium
                                      ?.color
                                      ?.withOpacity(0.8),
                              size: 16,
                            ),
                            padding: EdgeInsets.zero,
                            constraints: const BoxConstraints(),
                          ),
                        );
                      }),
                    ],
                  ),
                ],
              ),
            ),

            // 底部面板
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: Obx(() {
                return AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                  height: controller.kr_bottomPanelHeight.value.w,
                  decoration: BoxDecoration(
                    color: Theme.of(context).primaryColor,
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.1),
                        spreadRadius: 0,
                        blurRadius: 10,
                        offset: const Offset(0, -2),
                      ),
                    ],
                  ),
                  child: const KRHomeBottomPanel(),
                );
              }),
            ),
          ],
        ),
      );
    });
  }

  Color _getTrafficColor(double percentage) {
    if (percentage >= 0.9) {
      return Colors.red;
    } else if (percentage >= 0.7) {
      return Colors.orange;
    } else {
      return krModernGreen;
    }
  }
}
