import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/core/extension/build_context_x.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/common/custom_table.dart';
import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
import 'package:syncrow_web/pages/device_managment/bloc/device_managment_bloc.dart';
import 'package:syncrow_web/pages/device_managment/models/devices_model.dart';
import 'package:syncrow_web/pages/device_managment/widgets/device_search_filters.dart';
import 'package:syncrow_web/utils/format_date_time.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
import 'package:syncrow_web/utils/style.dart';

class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
  const DeviceManagementBody({super.key, required this.devices});

  final List<AllDevicesModel> devices;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<DeviceManagementBloc, DeviceManagementState>(
      builder: (context, state) {
        List<AllDevicesModel> devicesToShow = [];
        int selectedIndex = 0;
        int onlineCount = 0;
        int offlineCount = 0;
        int lowBatteryCount = 0;

        if (state is DeviceManagementLoaded) {
          devicesToShow = state.devices;
          selectedIndex = state.selectedIndex;
          onlineCount = state.onlineCount;
          offlineCount = state.offlineCount;
          lowBatteryCount = state.lowBatteryCount;
        } else if (state is DeviceManagementFiltered) {
          devicesToShow = state.filteredDevices;
          selectedIndex = state.selectedIndex;
          onlineCount = state.onlineCount;
          offlineCount = state.offlineCount;
          lowBatteryCount = state.lowBatteryCount;
        }

        // Create tab labels with counts
        final tabs = [
          'All (${devices.length})',
          'Online ($onlineCount)',
          'Offline ($offlineCount)',
          'Low Battery ($lowBatteryCount)',
        ];

        return Container(
          padding: const EdgeInsets.all(30),
          height: context.screenHeight,
          width: context.screenWidth,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              FilterWidget(
                size: MediaQuery.of(context).size,
                tabs: tabs,
                selectedIndex: selectedIndex,
                onTabChanged: (index) {
                  context
                      .read<DeviceManagementBloc>()
                      .add(SelectedFilterChanged(index));
                },
              ),
              const SizedBox(
                height: 20,
              ),
              const DeviceSearchFilters(),
              const SizedBox(
                height: 12,
              ),
              Container(
                height: 43,
                width: 100,
                decoration: containerDecoration,
                child: Center(
                  child: DefaultButton(
                    onPressed: () {},
                    borderRadius: 9,
                    child: const Text('Control'),
                  ),
                ),
              ),
              const SizedBox(
                height: 12,
              ),
              Expanded(
                child: DynamicTable(
                  cellDecoration: containerDecoration,
                  selectAll: (p0) {
                    // visitorBloc.selectedDeviceIds.clear();
                    // for (var item in state.data) {
                    //   visitorBloc.add(SelectDeviceEvent(item.uuid));
                    // }
                  },
                  onRowCheckboxChanged: (index, isSelected) {
                    // final deviceId = state.data[index].uuid;
                    // visitorBloc.add(SelectDeviceEvent(deviceId));
                  },
                  withCheckBox: true,
                  size: context.screenSize,
                  headers: const [
                    'Device Name',
                    'Product Name',
                    'Device ID',
                    'Unit Name',
                    'Room',
                    'Battery Level',
                    'Installation Date and Time',
                    'Status',
                    'Last Offline Date and Time',
                  ],
                  data: devicesToShow.map((device) {
                    return [
                      device.categoryName ?? '',
                      device.name ?? '',
                      device.uuid ?? '',
                      device.unit?.name ?? '',
                      device.room?.name ?? '',
                      device.batteryLevel?.toString() ?? '',
                      formatDateTime(DateTime.fromMillisecondsSinceEpoch(
                          device.createTime ?? 0)),
                      device.online == true ? 'Online' : 'Offline',
                      formatDateTime(DateTime.fromMillisecondsSinceEpoch(
                          device.updateTime ?? 0)),
                    ];
                  }).toList(),
                  isEmpty: devicesToShow.isEmpty,
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}