import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:on_field_work/controller/attendance/attendance_screen_controller.dart';
import 'package:on_field_work/helpers/widgets/avatar.dart';
import 'package:on_field_work/helpers/widgets/my_card.dart';
import 'package:on_field_work/helpers/widgets/my_container.dart';
import 'package:on_field_work/helpers/widgets/my_spacing.dart';
import 'package:on_field_work/helpers/widgets/my_text.dart';
import 'package:on_field_work/helpers/widgets/my_custom_skeleton.dart';
import 'package:on_field_work/model/attendance/log_details_view.dart';
import 'package:on_field_work/model/attendance/regualrize_action_button.dart';

class RegularizationRequestsTab extends StatelessWidget {
  final AttendanceController controller;

  const RegularizationRequestsTab({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      final isLoading = controller.isLoadingRegularizationLogs.value;
      final employees = controller.filteredRegularizationLogs;

      if (isLoading) {
        return SkeletonLoaders.employeeListSkeletonLoader();
      }

      if (employees.isEmpty) {
        return const SizedBox(
          height: 120,
          child: Center(
            child: Text("No Regularization Requests Found for this Project"),
          ),
        );
      }

      return ListView.builder(
        itemCount: employees.length,
        padding: MySpacing.only(bottom: 80),
        itemBuilder: (context, index) {
          final employee = employees[index]; // Corrected index

          return Padding(
            padding: const EdgeInsets.only(bottom: 12),
            child: MyCard.bordered(
              paddingAll: 8,
              child: Column(
                children: [
                  MyContainer(
                    paddingAll: 8,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Avatar(
                          firstName: employee.firstName,
                          lastName: employee.lastName,
                          size: 35,
                        ),
                        MySpacing.width(16),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                children: [
                                  Flexible(
                                    child: MyText.bodyMedium(
                                      employee.name,
                                      fontWeight: 600,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ),
                                  MySpacing.width(6),
                                  Flexible(
                                    child: MyText.bodySmall(
                                      '(${employee.role})',
                                      fontWeight: 600,
                                      overflow: TextOverflow.ellipsis,
                                      color: Colors.grey[700],
                                    ),
                                  ),
                                ],
                              ),
                              MySpacing.height(8),
                              if (employee.checkIn != null ||
                                  employee.checkOut != null)
                                Row(
                                  children: [
                                    if (employee.checkIn != null) ...[
                                      const Icon(Icons.arrow_circle_right,
                                          size: 16, color: Colors.green),
                                      MySpacing.width(4),
                                      MyText.bodySmall(
                                        DateFormat('hh:mm a')
                                            .format(employee.checkIn!),
                                        fontWeight: 600,
                                      ),
                                      MySpacing.width(16),
                                    ],
                                    if (employee.checkOut != null) ...[
                                      const Icon(Icons.arrow_circle_left,
                                          size: 16, color: Colors.red),
                                      MySpacing.width(4),
                                      MyText.bodySmall(
                                        DateFormat('hh:mm a')
                                            .format(employee.checkOut!),
                                        fontWeight: 600,
                                      ),
                                    ],
                                  ],
                                ),
                              MySpacing.height(12),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: [
                                  RegularizeActionButton(
                                    attendanceController: controller,
                                    log: employee,
                                    uniqueLogKey: employee.employeeId,
                                    action: ButtonActions.approve,
                                  ),
                                  const SizedBox(width: 8),
                                  RegularizeActionButton(
                                    attendanceController: controller,
                                    log: employee,
                                    uniqueLogKey: employee.employeeId,
                                    action: ButtonActions.reject,
                                  ),
                                  const SizedBox(width: 8),
                                  if (employee.checkIn != null)
                                    AttendanceLogViewButton(
                                      employee: employee,
                                      attendanceController: controller,
                                    ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
               
                ],
              ),
            ),
          );
        },
      );
    });
  }
}
