import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/access_management/bloc/access_bloc.dart';
import 'package:syncrow_web/pages/access_management/bloc/access_event.dart';
import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
import 'package:syncrow_web/pages/common/custom_table.dart';
import 'package:syncrow_web/pages/common/date_time_widget.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/constants/const.dart';
import 'package:syncrow_web/utils/style.dart';
import 'package:syncrow_web/web_layout/web_scaffold.dart';

class AccessManagementPage extends StatelessWidget {
  const AccessManagementPage({super.key});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return WebScaffold(
      enableMenuSideba: false,
      appBarTitle: Row(
        children: [
          Text(
            'Access Management',
            style: Theme.of(context).textTheme.headlineLarge,
          )
        ],
      ),
      appBarBody: [
        Text(
          'Physical Access',
          style: Theme.of(context)
              .textTheme
              .headlineMedium!
              .copyWith(color: Colors.white),
        ),
      ],
      scaffoldBody: BlocProvider(
        create: (BuildContext context) => AccessBloc()..add(FetchTableData()),
        child: BlocConsumer<AccessBloc, AccessState>(
          listener: (context, state) {},
          builder: (context, state) {
            final accessBloc = BlocProvider.of<AccessBloc>(context);
            final filteredData = accessBloc.filteredData;

            return state is AccessLoaded
                ? const Center(child: CircularProgressIndicator())
                : CustomScrollView(
                    slivers: [
                      SliverToBoxAdapter(
                        child: Padding(
                          padding: const EdgeInsets.all(30),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              _buildTabSelector(context, accessBloc, size),
                              const SizedBox(height: 20),
                              _buildSearchFilters(context, accessBloc, size),
                              const SizedBox(height: 20),
                              _buildActionButtons(context, accessBloc, size),
                              const SizedBox(height: 20),
                            ],
                          ),
                        ),
                      ),
                      SliverFillRemaining(
                        child: DynamicTable(
                          isEmpty: filteredData.isEmpty,
                          withCheckBox: false,
                          size: size,
                          cellDecoration: containerDecoration,
                          headers: const [
                            'Name',
                            'Access Type',
                            'Access Period',
                            'Accessible Device',
                            'Authorizer',
                            'Authorization Date & Time',
                            'Access Status'
                          ],
                          data: filteredData.map((item) {
                            return [
                              item.passwordName.toString(),
                              item.passwordType.value,
                              ('${accessBloc.timestampToDate(item.effectiveTime)} - ${accessBloc.timestampToDate(item.invalidTime)}'),
                              item.deviceUuid.toString(),
                              '',
                              '',
                              item.passwordStatus.value
                            ];
                          }).toList(),
                        ),
                      ),
                    ],
                  );
          },
        ),
      ),
    );
  }

  Widget _buildTabSelector(
      BuildContext context, AccessBloc accessBloc, Size size) {
    return Container(
      decoration: containerDecoration,
      height: size.height * 0.05,
      child: Flexible(
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: accessBloc.tabs.length,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            final isSelected = index == accessBloc.selectedIndex;
            return InkWell(
              onTap: () {
                accessBloc.add(TabChangedEvent(index));
              },
              child: Container(
                decoration: BoxDecoration(
                  color: ColorsManager.boxColor,
                  border: Border.all(
                    color: isSelected ? Colors.blue : Colors.transparent,
                    width: 2.0,
                  ),
                  borderRadius: index == 0
                      ? const BorderRadius.only(
                          topLeft: Radius.circular(10),
                          bottomLeft: Radius.circular(10))
                      : index == accessBloc.tabs.length - 1
                          ? const BorderRadius.only(
                              topRight: Radius.circular(10),
                              bottomRight: Radius.circular(10))
                          : null,
                ),
                padding: const EdgeInsets.only(left: 10, right: 10),
                child: Center(
                  child: Text(
                    accessBloc.tabs[index],
                    style: TextStyle(
                      color: isSelected ? Colors.blue : Colors.black,
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget _buildSearchFilters(
      BuildContext context, AccessBloc accessBloc, Size size) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.end,
      textBaseline: TextBaseline.ideographic,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              'Name',
              style: Theme.of(context)
                  .textTheme
                  .bodySmall!
                  .copyWith(color: Colors.black, fontSize: 13),
            ),
            const SizedBox(height: 5),
            Container(
              height: 43,
              width: size.width * 0.15,
              decoration: containerDecoration,
              child: TextFormField(
                controller: accessBloc.passwordName,
                style: const TextStyle(color: Colors.black),
                decoration:
                    textBoxDecoration()!.copyWith(hintText: 'Please enter'),
              ),
            ),
          ],
        ),
        const SizedBox(width: 15),
        DateTimeWebWidget(
          icon: Assets.calendarIcon,
          isRequired: false,
          title: 'Access Time',
          size: size,
          endTime: () {
            accessBloc.add(SelectTime(context: context, isStart: false));
          },
          startTime: () {
            accessBloc.add(SelectTime(context: context, isStart: true));
          },
          firstString: accessBloc.startTime,
          secondString: accessBloc.endTime,
        ),
        const SizedBox(width: 15),
        SizedBox(
          height: 45,
          width: size.width * 0.06,
          child: Container(
            decoration: containerDecoration,
            child: DefaultButton(
              onPressed: () {
                accessBloc.add(FilterDataEvent(
                  selectedTabIndex:
                      accessBloc.selectedIndex, // Pass the selected tab index
                  passwordName: accessBloc.passwordName.text.toLowerCase(),
                  startTime: accessBloc.effectiveTimeTimeStamp,
                  endTime: accessBloc.expirationTimeTimeStamp,
                ));
              },
              borderRadius: 9,
              child: const Text('Search'),
            ),
          ),
        ),
        const SizedBox(width: 10),
        SizedBox(
          height: 45,
          width: size.width * 0.06,
          child: Container(
            decoration: containerDecoration,
            child: DefaultButton(
              onPressed: () {
                accessBloc.add(ResetSearch());
              },
              backgroundColor: ColorsManager.whiteColors,
              borderRadius: 9,
              child: Text(
                'Reset',
                style: Theme.of(context)
                    .textTheme
                    .bodySmall!
                    .copyWith(color: Colors.black),
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildActionButtons(
      BuildContext context, AccessBloc accessBloc, Size size) {
    return Wrap(
      children: [
        Container(
          width: size.width * 0.15,
          decoration: containerDecoration,
          child: DefaultButton(
            onPressed: () {
              showDialog(
                context: context,
                barrierDismissible: false,
                builder: (BuildContext context) {
                  return const VisitorPasswordDialog();
                },
              ).then((v) {
                if (v != null) {
                  accessBloc.add(FetchTableData());
                }
              });
            },
            borderRadius: 8,
            child: const Text('+    Create Visitor Password '),
          ),
        ),
        const SizedBox(width: 10),
        Container(
          width: size.width * 0.12,
          decoration: containerDecoration,
          child: DefaultButton(
            borderRadius: 8,
            backgroundColor: ColorsManager.whiteColors,
            child: Text(
              'Admin Password',
              style: Theme.of(context)
                  .textTheme
                  .bodySmall!
                  .copyWith(color: Colors.black),
            ),
          ),
        )
      ],
    );
  }
}