import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:go_router/go_router.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/buttons/default_button.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/text_field/custom_web_textfield.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/app_enum.dart';
import 'package:syncrow_web/utils/constants/routes_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: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Physical Access',
                style: Theme.of(context).textTheme.headlineMedium!.copyWith(color: Colors.white),
              ),
              Row(
                children: [
                  InkWell(
                    onTap: () {
                      context.go(RoutesConst.home);
                    },
                    child: SvgPicture.asset(
                      height: 20,
                      width: 20,
                      Assets.grid,
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  )
                ],
              ),
            ],
          ),
        ],
        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())
                      : Container(
                          padding: EdgeInsets.all(30),
                          height: size.height,
                          width: size.width,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Container(
                                decoration: containerDecoration,
                                height: size.height * 0.05,
                                child: Flexible(
                                  child: ListView.builder(
                                    scrollDirection: Axis.horizontal,
                                    itemCount: BlocProvider.of<AccessBloc>(context).tabs.length,
                                    shrinkWrap: true,
                                    itemBuilder: (context, index) {
                                      final isSelected = index ==
                                          BlocProvider.of<AccessBloc>(context).selectedIndex;
                                      return InkWell(
                                        onTap: () {
                                          BlocProvider.of<AccessBloc>(context)
                                              .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 == 3
                                                    ? const BorderRadius.only(
                                                        topRight: Radius.circular(10),
                                                        bottomRight: Radius.circular(10))
                                                    : null,
                                          ),
                                          padding: const EdgeInsets.only(left: 10, right: 10),
                                          child: Center(
                                            child: Text(
                                              BlocProvider.of<AccessBloc>(context).tabs[index],
                                              style: TextStyle(
                                                color: isSelected ? Colors.blue : Colors.black,
                                              ),
                                            ),
                                          ),
                                        ),
                                      );
                                    },
                                  ),
                                ),
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                              Row(
                                mainAxisSize: MainAxisSize.min,
                                crossAxisAlignment: CrossAxisAlignment.end,
                                textBaseline: TextBaseline.ideographic,
                                children: [
                                  Container(
                                    width: size.width * 0.15,
                                    child: CustomWebTextField(
                                      controller: accessBloc.passwordName,
                                      isRequired: true,
                                      textFieldName: 'Name',
                                      description: '',
                                    ),
                                  ),
                                  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: BlocProvider.of<AccessBloc>(context).startTime,
                                    secondString: BlocProvider.of<AccessBloc>(context).endTime,
                                  ),
                                  const SizedBox(
                                    width: 15,
                                  ),
                                  SizedBox(
                                    width: size.width * 0.06,
                                    child: Container(
                                        decoration: containerDecoration,
                                        child: DefaultButton(
                                            onPressed: () {
                                              accessBloc.add(FilterDataEvent(
                                                  selectedTabIndex: BlocProvider.of<AccessBloc>(
                                                          context)
                                                      .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(
                                    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),
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                              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),
                                          )))
                                ],
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                              Expanded(
                                  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(),
                              )
                                  // : const Center(child: CircularProgressIndicator()),
                                  )
                            ],
                          ),
                        );
                })));
  }
}