import 'package:flutter/material.dart';
import 'package:flutter_lucide/flutter_lucide.dart';
import 'package:get/get.dart';
import 'package:marco/helpers/theme/app_theme.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
import 'package:marco/helpers/utils/my_shadow.dart';
import 'package:marco/helpers/utils/utils.dart';
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
import 'package:marco/helpers/widgets/my_card.dart';
import 'package:marco/helpers/widgets/my_container.dart';
import 'package:marco/helpers/widgets/my_flex.dart';
import 'package:marco/helpers/widgets/my_flex_item.dart';
import 'package:marco/helpers/widgets/my_list_extension.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/view/layouts/layout.dart';
import 'package:marco/controller/dashboard/attendance_screen_controller.dart';

class AttendanceScreen extends StatefulWidget {
  const AttendanceScreen({super.key});

  @override
  State<AttendanceScreen> createState() => _AttendanceScreenState();
}

class _AttendanceScreenState extends State<AttendanceScreen> with UIMixin {
  AttendanceController attendanceController = Get.put(AttendanceController());

  @override
  Widget build(BuildContext context) {
    return Layout(
      child: GetBuilder(
        init: attendanceController,
        tag: 'attendance_dashboard_controller',
        builder: (controller) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: MySpacing.x(flexSpacing),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    MyText.titleMedium("Attendance",
                        fontSize: 18, fontWeight: 600),
                    MyBreadcrumb(
                      children: [
                        MyBreadcrumbItem(name: 'Dashboard'),
                        MyBreadcrumbItem(name: 'Attendance', active: true),
                      ],
                    ),
                  ],
                ),
              ),
              MySpacing.height(flexSpacing),
              Padding(
                padding: MySpacing.x(flexSpacing / 2),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    MySpacing.height(flexSpacing),
                    MyFlex(
                      children: [
                        MyFlexItem(child: attendanceTableCard()),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  Widget attendanceTableCard() {
    return MyCard.bordered(
      borderRadiusAll: 4,
      border: Border.all(color: Colors.grey.withAlpha(50)),
      shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
      paddingAll: 24,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: MyContainer.bordered(
                  padding: MySpacing.xy(8, 4),
                  child: PopupMenuButton<String>(
                    onSelected: (value) {
                      setState(() {
                        attendanceController.selectedProjectId = value;
                        attendanceController.fetchEmployeesByProject(value);
                      });
                    },
                    itemBuilder: (BuildContext context) {
                      return attendanceController.projects.map((project) {
                        return PopupMenuItem<String>(
                          value: project.id.toString(),
                          height: 32,
                          child: MyText.bodySmall(
                            project.name,
                            color: theme.colorScheme.onSurface,
                            fontWeight: 600,
                          ),
                        );
                      }).toList();
                    },
                    color: theme.cardTheme.color,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        MyText.labelSmall(
                          attendanceController.selectedProjectId != null
                              ? attendanceController.projects
                                      .firstWhereOrNull((proj) =>
                                          proj.id.toString() ==
                                          attendanceController
                                              .selectedProjectId)
                                      ?.name ??
                                  'Select a Project'
                              : 'Select a Project',
                          color: theme.colorScheme.onSurface,
                        ),
                        Icon(LucideIcons.chevron_down,
                            size: 16, color: theme.colorScheme.onSurface),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
          MySpacing.height(24),
          attendanceController.employees.isEmpty
              ? const Center(child: CircularProgressIndicator())
              : SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: DataTable(
                    sortAscending: true,
                    columnSpacing: 88,
                    onSelectAll: (_) => {},
                    headingRowColor: WidgetStatePropertyAll(
                        contentTheme.primary.withAlpha(40)),
                    dataRowMaxHeight: 60,
                    showBottomBorder: true,
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    border: TableBorder.all(
                      borderRadius: BorderRadius.circular(4),
                      style: BorderStyle.solid,
                      width: 0.4,
                      color: Colors.grey,
                    ),
                    columns: [
                      DataColumn(
                          label: MyText.labelLarge('ID',
                              color: contentTheme.primary)),
                      DataColumn(
                          label: MyText.labelLarge('Name',
                              color: contentTheme.primary)),
                      DataColumn(
                          label: MyText.labelLarge('Designation',
                              color: contentTheme.primary)),
                              DataColumn(
                          label: MyText.labelLarge('Check In',
                              color: contentTheme.primary)),
                              DataColumn(
                          label: MyText.labelLarge('Check Out',
                              color: contentTheme.primary)),
                               DataColumn(
                          label: MyText.labelLarge('Actions',
                              color: contentTheme.primary)),
                    ],
                    rows: attendanceController.employees
                        .mapIndexed((index, employee) => DataRow(cells: [
                              DataCell(MyText.bodyMedium(employee.id.toString(),
                                  fontWeight: 600)),
                              DataCell(MyText.bodyMedium(employee.name,
                                  fontWeight: 600)),
                              DataCell(MyText.bodyMedium(employee.designation,
                                  fontWeight: 600)),
                                    DataCell(MyText.bodyMedium(employee.checkIn,
                                  fontWeight: 600)),
                                    DataCell(MyText.bodyMedium(employee.checkOut,
                                  fontWeight: 600)),
                                  DataCell(MyText.bodyMedium(employee.actions.toString(),
                                  fontWeight: 600)),
                            ]))
                        .toList(),
                  ),
                ),
        ],
      ),
    );
  }
}