import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smart_hotel_app/models/bo/inspection_room_bo.dart';
import '../cubit/inspection_state.dart';

class FilterPanel extends StatelessWidget {
  final DeviceStatusTab selectedTab;
  final Map<DeviceStatusTab, int> tabCounts;
  final Function(DeviceStatusTab) onTabSelected;
  final int selectedAreaIndex;
  final int? selectedRoomId;
  final List<InspectionRoomGroupsBO> roomGroups;
  final Function(int) onAreaSelected;
  final Function(int) onRoomSelected;

  const FilterPanel({
    super.key,
    required this.selectedTab,
    required this.tabCounts,
    required this.onTabSelected,
    required this.selectedAreaIndex,
    required this.selectedRoomId,
    required this.roomGroups,
    required this.onAreaSelected,
    required this.onRoomSelected,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20.r),
      ),
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 24.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildStatusTabs(),
          SizedBox(height: 16.h),
          Divider(
            height: 0.5.h,
            color: const Color.fromRGBO(100, 116, 139, 0.2),
            thickness: 0.5,
          ),
          SizedBox(height: 16.h),
          _buildAreaTabs(),
          SizedBox(height: 16.h),
          _buildRoomSelector(),
        ],
      ),
    );
  }

  Widget _buildStatusTabs() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: DeviceStatusTab.values.map((tab) {
        final isSelected = selectedTab == tab;
        final count = tabCounts[tab] ?? 0;
        return Expanded(
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () => onTabSelected(tab),
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 8.h),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Stack(
                    clipBehavior: Clip.none,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(right: 16.w),
                        child: Text(
                          _getTabLabel(tab),
                          style: TextStyle(
                            fontSize: isSelected ? 32.sp : 28.sp,
                            fontWeight: isSelected
                                ? FontWeight.bold
                                : FontWeight.normal,
                            color: isSelected
                                ? const Color.fromRGBO(66, 165, 245, 1.0)
                                : const Color.fromRGBO(100, 116, 139, 1.0),
                            height: 1.0,
                          ),
                        ),
                      ),
                      Positioned(
                        top: -20.h,
                        right: -25.w,
                        child: Container(
                          constraints: BoxConstraints(
                            minWidth: 36.w,
                            minHeight: 36.w,
                          ),
                          padding: EdgeInsets.symmetric(horizontal: 15.w),
                          decoration: BoxDecoration(
                            color: _getTabColor(tab),
                            shape: BoxShape.circle,
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            count.toString(),
                            style: TextStyle(
                              fontSize: 14.sp,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 12.h),
                  AnimatedContainer(
                    duration: const Duration(milliseconds: 200),
                    height: 4.h,
                    width: isSelected ? 48.w : 0,
                    decoration: BoxDecoration(
                      color: const Color.fromRGBO(66, 165, 245, 1.0),
                      borderRadius: BorderRadius.circular(2.r),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }).toList(),
    );
  }

  /// 区域切换 tab
  Widget _buildAreaTabs() {
    if (roomGroups.isEmpty) {
      return const SizedBox.shrink();
    }
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: roomGroups.asMap().entries.map((entry) {
          final index = entry.key;
          final group = entry.value;
          final isSelected = index == selectedAreaIndex;
          return GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () => onAreaSelected(index),
            child: Container(
              width: 100.w,
              height: 40.h,
              alignment: Alignment.center,
              margin: EdgeInsets.only(right: 16.w),
              decoration: BoxDecoration(
                color: isSelected
                    ? const Color.fromRGBO(235, 244, 255, 1.0)
                    : const Color.fromRGBO(238, 238, 238, 1.0),
                borderRadius: BorderRadius.circular(8.r),
                border: isSelected
                    ? Border.all(
                        color: const Color.fromRGBO(66, 165, 245, 1.0),
                        width: 1.w,
                      )
                    : null,
              ),
              child: Text(
                group.areaTypeName,
                style: TextStyle(
                  fontSize: 24.sp,
                  fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
                  color: isSelected
                      ? const Color.fromRGBO(66, 165, 245, 1.0)
                      : const Color.fromRGBO(100, 116, 139, 1.0),
                ),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

  /// 当前选中区域的房间 GridView
  Widget _buildRoomSelector() {
    if (roomGroups.isEmpty || selectedAreaIndex >= roomGroups.length) {
      return Text(
        '暂无房间数据',
        style: TextStyle(
          fontSize: 24.sp,
          color: const Color.fromRGBO(100, 116, 139, 0.6),
        ),
      );
    }

    final rooms = roomGroups[selectedAreaIndex].rooms;

    if (rooms.isEmpty) {
      return Text(
        '暂无房间数据',
        style: TextStyle(
          fontSize: 24.sp,
          color: const Color.fromRGBO(100, 116, 139, 0.6),
        ),
      );
    }

    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        childAspectRatio: 50 / 30,
        crossAxisSpacing: 12.w,
        mainAxisSpacing: 12.h,
      ),
      itemCount: rooms.length,
      itemBuilder: (context, index) {
        final room = rooms[index];
        final isSelected = room.roomId == selectedRoomId;
        return GestureDetector(
          onTap: () => onRoomSelected(room.roomId),
          child: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.symmetric(horizontal: 5.w),
            decoration: BoxDecoration(
              color: isSelected
                  ? const Color.fromRGBO(235, 244, 255, 1.0)
                  : Colors.white,
              borderRadius: BorderRadius.circular(12.r),
              border: Border.all(
                color: isSelected
                    ? const Color.fromRGBO(66, 165, 245, 1.0)
                    : const Color.fromRGBO(200, 208, 220, 1.0),
                width: 1.w,
              ),
            ),
            child: Text(
              room.roomNumber,
              style: TextStyle(
                fontSize: 24.sp,
                color: isSelected
                    ? const Color.fromRGBO(66, 165, 245, 1.0)
                    : const Color.fromRGBO(100, 116, 139, 1.0),
                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
              ),
              textAlign: TextAlign.center,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        );
      },
    );
  }

  String _getTabLabel(DeviceStatusTab tab) {
    switch (tab) {
      case DeviceStatusTab.total:
        return '总计';
      case DeviceStatusTab.on:
        return '开启';
      // case DeviceStatusTab.off:
      //   return '关闭';
      case DeviceStatusTab.offline:
        return '离线';
      case DeviceStatusTab.alarm:
        return '告警';
      case DeviceStatusTab.fault:
        return '故障';
    }
  }

  Color _getTabColor(DeviceStatusTab tab) {
    switch (tab) {
      case DeviceStatusTab.total:
        return const Color.fromRGBO(66, 165, 245, 1.0);
      case DeviceStatusTab.on:
        return const Color.fromRGBO(26, 188, 156, 1.0);
      // case DeviceStatusTab.off:
      //   return const Color.fromRGBO(200, 208, 220, 1.0);
      case DeviceStatusTab.offline:
        return const Color.fromRGBO(100, 116, 139, 1.0);
      case DeviceStatusTab.alarm:
        return const Color.fromRGBO(247, 184, 75, 1.0);
      case DeviceStatusTab.fault:
        return const Color.fromRGBO(239, 68, 68, 1.0);
    }
  }
}
