import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/controller/attendance/attendance_screen_controller.dart';
import 'package:marco/helpers/utils/date_time_utils.dart';
import 'package:marco/helpers/widgets/avatar.dart';
import 'package:marco/helpers/widgets/my_card.dart';
import 'package:marco/helpers/widgets/my_container.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/my_custom_skeleton.dart';
import 'package:marco/model/attendance/log_details_view.dart';
import 'package:marco/model/attendance/attendence_action_button.dart';

class TodaysAttendanceTab extends StatelessWidget {
  final AttendanceController controller;

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

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

      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
            child: Row(
              children: [
                Expanded(
                  child:
                      MyText.titleMedium("Today's Attendance", fontWeight: 600),
                ),
                MyText.bodySmall(
                  DateTimeUtils.formatDate(DateTime.now(), 'dd MMM yyyy'),
                  fontWeight: 600,
                  color: Colors.grey[700],
                ),
              ],
            ),
          ),
          if (isLoading)
            SkeletonLoaders.employeeListSkeletonLoader()
          else if (employees.isEmpty)
            const SizedBox(
                height: 120,
                child: Center(child: Text("No Employees Assigned")))
          else
            MyCard.bordered(
              paddingAll: 8,
              child: Column(
                children: List.generate(employees.length, (index) {
                  final employee = employees[index];
                  return Column(
                    children: [
                      MyContainer(
                        paddingAll: 5,
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Avatar(
                                firstName: employee.firstName,
                                lastName: employee.lastName,
                                size: 31),
                            MySpacing.width(16),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Wrap(
                                    spacing: 6,
                                    children: [
                                      MyText.bodyMedium(employee.name,
                                          fontWeight: 600),
                                      MyText.bodySmall(
                                          '(${employee.designation})',
                                          fontWeight: 600,
                                          color: Colors.grey[700]),
                                    ],
                                  ),
                                  MySpacing.height(8),
                                  if (employee.checkIn != null ||
                                      employee.checkOut != null)
                                    Row(
                                      children: [
                                        if (employee.checkIn != null)
                                          Row(
                                            children: [
                                              const Icon(
                                                  Icons.arrow_circle_right,
                                                  size: 16,
                                                  color: Colors.green),
                                              MySpacing.width(4),
                                              Text(DateTimeUtils.formatDate(
                                                  employee.checkIn!,
                                                  'hh:mm a')),
                                            ],
                                          ),
                                        if (employee.checkOut != null) ...[
                                          MySpacing.width(16),
                                          const Icon(Icons.arrow_circle_left,
                                              size: 16, color: Colors.red),
                                          MySpacing.width(4),
                                          Text(DateTimeUtils.formatDate(
                                              employee.checkOut!, 'hh:mm a')),
                                        ],
                                      ],
                                    ),
                                  MySpacing.height(12),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      AttendanceActionButton(
                                        employee: employee,
                                        attendanceController: controller,
                                      ),
                                      if (employee.checkIn != null) ...[
                                        MySpacing.width(8),
                                        AttendanceLogViewButton(
                                          employee: employee,
                                          attendanceController: controller,
                                        ),
                                      ],
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      if (index != employees.length - 1)
                        Divider(color: Colors.grey.withOpacity(0.3)),
                    ],
                  );
                }),
              ),
            ),
        ],
      );
    });
  }
}