import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../cubit/inspection_state.dart';

class FilterPanel extends StatelessWidget {
  final DeviceStatusTab selectedTab;
  final Map<DeviceStatusTab, int> tabCounts;
  final Function(DeviceStatusTab) onTabSelected;
  final List<int> selectedRoomIds;
  final Map<int, String> allRooms;
  final Function(int) onRoomToggle;

  const FilterPanel({
    super.key,
    required this.selectedTab,
    required this.tabCounts,
    required this.onTabSelected,
    required this.selectedRoomIds,
    required this.allRooms,
    required this.onRoomToggle,
  });

  @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: 32.h),
          _buildRoomSelector(),
        ],
      ),
    );
  }

  Widget _buildStatusTabs() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: DeviceStatusTab.values.map((tab) {
            final isSelected = selectedTab == tab;
            final count = tabCounts[tab] ?? 0;
            return Expanded(
              child: GestureDetector(
                onTap: () => onTabSelected(tab),
                child: Stack(
                  clipBehavior: Clip.none,
                  alignment: Alignment.center,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 8.h),
                      child: Text(
                        _getTabLabel(tab),
                        style: TextStyle(
                          fontSize: 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),
                        ),
                      ),
                    ),
                    if (count > 0)
                      Positioned(
                        top: 0,
                        right: -8.w,
                        child: Container(
                          width: 28.w,
                          height: 28.h,
                          decoration: BoxDecoration(
                            color: _getTabColor(tab),
                            borderRadius: BorderRadius.circular(12.r),
                          ),
                          child: Center(
                            child: Text(
                              count.toString(),
                              style: TextStyle(
                                fontSize: 20.sp,
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ),
                  ],
                ),
              ),
            );
          }).toList(),
        ),
        SizedBox(height: 12.h),
        Container(
          height: 4.h,
          width: double.infinity,
          color: const Color.fromRGBO(242, 243, 245, 1),
          child: Stack(
            children: [
              LayoutBuilder(
                builder: (context, constraints) {
                  final segmentWidth = constraints.maxWidth / DeviceStatusTab.values.length;
                  final selectedIndex = DeviceStatusTab.values.indexOf(selectedTab);
                  return AnimatedPositioned(
                    duration: const Duration(milliseconds: 200),
                    left: selectedIndex * segmentWidth,
                    width: segmentWidth,
                    child: Container(
                      height: 4.h,
                      color: const Color.fromRGBO(66, 165, 245, 1.0),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildRoomSelector() {
    final roomEntries = allRooms.entries.toList();
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '全部区域',
          style: TextStyle(
            fontSize: 28.sp,
            fontWeight: FontWeight.bold,
            color: const Color.fromRGBO(100, 116, 139, 1.0),
          ),
        ),
        SizedBox(height: 16.h),
        if (roomEntries.isEmpty)
          Text(
            '暂无房间数据',
            style: TextStyle(
              fontSize: 24.sp,
              color: const Color.fromRGBO(100, 116, 139, 0.6),
            ),
          )
        else
          Wrap(
            spacing: 5.w,
            runSpacing: 12.h,
            children: roomEntries.map((entry) {
              final isSelected = selectedRoomIds.contains(entry.key);
              return GestureDetector(
                onTap: () => onRoomToggle(entry.key),
                child: Container(
                  width: 120.w,
                  padding: EdgeInsets.symmetric(horizontal: 28.w, vertical: 12.h),
                  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(
                    entry.value,
                    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,
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
      ],
    );
  }

  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);
    }
  }
}