flutterApp/lib/features/home/presentation/widgets/ImmersionHeader.dart

import 'package:cc_ui_kit/cc_ui_kit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:maibu_satabot_v2/features/devices/domain/entities/device_entity.dart';

import '../../../../core/app/app_user_cubit.dart';
import '../../../../core/router/route_paths.dart';
import '../../../devices/presentation/bloc/devices_cubit.dart';
import '../../../devices/presentation/bloc/devices_state.dart';
// 导入你的主题文件以获取 offWhite
// import 'package:maibu_satabot_v2/core/theme/app_theme.dart';

class ImmersionHeader extends StatelessWidget {
  final DeviceEntity device;
  const ImmersionHeader({super.key, required this.device});

  String _formatName(String name, {int keepLength = 20}) {
    if (name.length <= keepLength) return name;
    return name.substring(name.length - keepLength);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 310,
      // 1. 修改这里：去掉 color: Colors.white，改用透明或背景色
      decoration: const BoxDecoration(
        color: Colors.transparent, // 设为透明，直接透出 Scaffold 的 offWhite
      ),
      child: Stack(
        children: [
          // 背景文字占位 (SataBot)
          Positioned(
            top: 130,
            left: 0,
            right: 0,
            child: Text(
              'SataBot',
              textAlign: TextAlign.center,
              style: GoogleFonts.roboto(
                fontSize: 80,
                fontWeight: FontWeight.w900,
                // 2. 既然背景变深了，背景字可以稍微再淡一点点
                color: Colors.black.withOpacity(0.08),
              ),
            ),
          ),

          // 机器大图
          Transform.translate(
            offset: const Offset(30, 80), // 正数向右移动（例如 20 像素），负数向左
            child: Center(child: Image.asset('assets/images/car.png', width: 330, height: 190, fit: BoxFit.contain)),
          ),

          // 顶部状态信息
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 10),
              child: Row(
                // 1. 依然保持顶部对齐
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // --- 左侧：标题 + 进度条 + 状态标签 (封装成一个 Column) ---
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min, // 尽可能收缩高度
                      children: [
                        // 设备名称和电量
                        Text(_formatName(device.displayName), style: GoogleFonts.roboto(fontSize: 22, fontWeight: FontWeight.w900)),
                        const SizedBox(height: 4),
                        Row(
                          children: [
                            Text('${device.onlineStatus == 1 ? "100" : "--"} %', style: GoogleFonts.roboto(fontSize: 24, fontWeight: FontWeight.w900)),
                            const Icon(Icons.chevron_right, size: 20, color: Colors.grey),
                          ],
                        ),

                        const SizedBox(height: 8),

                        // 2. 进度条现在紧跟在电量下面，不会被右侧挤走
                        _buildProgressBar(),

                        const SizedBox(height: 12),

                        // 3. 状态标签也紧跟其后
                        _buildStatusTag(device.isOnline),
                      ],
                    ),
                  ),

                  // --- 右侧：图标栏 ---
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      _buildCircleIcon(Icons.sync, () {
                        // 1. 触发 Cubit 请求最新设备列表
                        // 假设你的 username 存储在 AuthCubit 或类似的全局状态中
                        final username = context.read<AppUserCubit>().state.user?.username ?? "";
                        context.read<DevicesCubit>().fetchAllDevices(username);

                        // 2. 弹出窗口（窗口内部会根据状态显示转圈或列表）
                        _showDeviceSwitcher(context);
                      }),
                      const SizedBox(height: 20), // 这里你改大的间距，只会让两个图标拉开
                      _buildCircleIcon(Icons.bluetooth, null, isAccent: true),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStatusTag(bool isOnline) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
      decoration: BoxDecoration(
        // 在 offWhite 背景下，标签用纯白色会显得更精致
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.02), blurRadius: 4)],
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          CircleAvatar(radius: 3, backgroundColor: isOnline ? Colors.green : Colors.grey),
          const SizedBox(width: 6),
          Text(isOnline ? "在线" : "离线", style: const TextStyle(fontSize: 12, color: Colors.black54)),
        ],
      ),
    );
  }

  // 辅助方法：进度条
  Widget _buildProgressBar() {
    return Container(
      width: 120,
      height: 6,
      decoration: BoxDecoration(color: Colors.blueAccent, borderRadius: BorderRadius.circular(5)),
    );
  }

  Widget _buildCircleIcon(
    IconData icon,
    VoidCallback? voidCallback, { // 将回调函数放在这里
    bool isAccent = false,
  }) {
    return GestureDetector(
      onTap: voidCallback, // 绑定点击事件
      child: Container(
        padding: const EdgeInsets.all(8),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: isAccent ? Colors.blue.withOpacity(0.1) : Colors.white,
          boxShadow: [
            if (!isAccent)
              BoxShadow(
                color: Colors.black.withOpacity(0.02),
                blurRadius: 4,
                offset: const Offset(0, 2), // 稍微增加偏移感
              ),
          ],
        ),
        child: Icon(icon, size: 30, color: isAccent ? Colors.blue : Colors.black54),
      ),
    );
  }

  /// 设备切换窗口
  void _showDeviceSwitcher(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      useRootNavigator: true, // 💡 解决被三段导航栏遮挡的问题
      backgroundColor: Colors.transparent,
      builder: (modalContext) {
        return Container(
          height: MediaQuery.of(context).size.height * 0.75,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
          ),
          child: Column(
            children: [
              // 优化的控制条
              Container(
                margin: const EdgeInsets.symmetric(vertical: 12),
                width: 36,
                height: 5,
                decoration: BoxDecoration(color: Colors.grey[300], borderRadius: BorderRadius.circular(10)),
              ),
              const Text("切换设备", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
              const SizedBox(height: 10),
              Container(height: 0.5, margin: const EdgeInsets.symmetric(horizontal: 20), color: Colors.grey.withOpacity(0.1)),

              // 💡 动态内容区
              Expanded(
                child: BlocBuilder<DevicesCubit, DevicesState>(
                  builder: (context, state) {
                    // 1. 如果正在加载（查询或切换中），显示转圈
                    if (state.isLoading) {
                      return Center(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            const CircularProgressIndicator(color: Colors.blue),
                            const SizedBox(height: 16),
                            Text("加载中...", style: TextStyle(color: Colors.grey[600])),
                          ],
                        ),
                      );
                    }

                    // 2. 列表展示
                    if (state.devices.isEmpty) {
                      return const Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.description_outlined, size: 60, color: Colors.grey),
                            SizedBox(height: 16),
                            Text('暂无设备', style: TextStyle(fontSize: 16, color: Colors.grey)),
                          ],
                        ),
                      );
                    }

                    return ListView.builder(
                      // 💡 底部留出安全距离，防止最后一条滚不上来
                      padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom + 20, top: 10),
                      itemCount: state.devices.length,
                      itemBuilder: (context, index) {
                        // 传入当前选中的 ID 方便做 UI 区分
                        final isSelected = state.selectedDevice?.deviceName == state.devices[index].deviceName;
                        return _buildDeviceItem(state.devices[index], context, isSelected);
                      },
                    );
                  },
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildDeviceItem(DeviceEntity device, BuildContext context, bool isSelected) {
    return GestureDetector(
      onTap: () {
        print("跳转到详情页: ${device.deviceAlias}");
        // TODO: Navigator.push(...)
      },
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.white,
          // 💡 如果是当前选中设备，边框颜色略深
          border: Border.all(color: isSelected ? Colors.blue.withOpacity(0.5) : Colors.grey.withOpacity(0.3), width: isSelected ? 1.5 : 1),
          borderRadius: BorderRadius.circular(12),
          boxShadow: [if (isSelected) BoxShadow(color: Colors.blue.withOpacity(0.05), blurRadius: 4)],
        ),
        child: Row(
          children: [
            // 设备图片
            Transform.translate(offset: const Offset(10, 0), child: Image.asset('assets/images/car.png', width: 100, height: 80)),
            const SizedBox(width: 12),
            // 设备信息
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Icon(Icons.circle, color: device.isOnline ? Colors.green : Colors.grey, size: 12),
                      const SizedBox(width: 4),
                      Flexible(
                        child: Text(
                          (device.deviceAlias?.trim() ?? '').isEmpty ? '未知设备' : device.deviceAlias!,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                          // 关键属性：处理文本溢出
                          maxLines: 2, // 最多显示2行
                          overflow: TextOverflow.ellipsis, // 超出显示省略号
                          softWrap: true, // 允许换行
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 6),
                  const Text("点击查看详情", style: TextStyle(color: Colors.grey, fontSize: 12)),
                ],
              ),
            ),
            // 按钮组
            Column(
              children: [
                CCPrimaryImageButton(
                  onPressed: isSelected
                      ? null
                      : () async {
                          // 💡 执行切换逻辑
                          await context.read<DevicesCubit>().switchDevice(device);
                          // 切换成功后，UI 会自动更新（因为 BlocBuilder 在监听），我们可以关闭弹窗
                          if (context.mounted) {
                            Navigator.pop(context);
                          }
                        },
                  text: isSelected ? "使用中" : "切换",
                  width: 80,
                  height: 30,
                  fontSize: 14,
                  // 如果是当前设备，按钮颜色变灰
                  backgroundColor: isSelected ? Colors.grey : Colors.black,
                ),
                const SizedBox(height: 8),
                CCPrimaryButton(
                  onPressed: () {
                    context.push(RoutePaths.machineDetails, extra: device); // 把当前点击的这个设备对象传过去
                    print("通过按钮进入详情，设备名称：$device");
                  },

                  text: "详情",
                  width: 80,
                  height: 30,
                  fontSize: 14,
                  backgroundColor: Colors.white,
                  textColor: Colors.black,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}