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 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: -18.h,
                        child: Container(
                          constraints: BoxConstraints(
                            minWidth: 32.w,
                            minHeight: 32.w,
                          ),
                          padding:
                              EdgeInsets.symmetric(horizontal: 6.w),
                          decoration: BoxDecoration(
                            color: _getTabColor(tab),
                            shape: BoxShape.circle,
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            count.toString(),
                            style: TextStyle(
                              fontSize: 14.sp, 
                              color: Colors.white,
                              height: 1.0,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  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(),
    );
  }

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