import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:on_field_work/controller/attendance/attendance_screen_controller.dart';
import 'package:on_field_work/helpers/utils/date_time_utils.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_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/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;

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

      if (employees.isEmpty) {
        return const Center(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Text("No Employees Assigned"),
          ),
        );
      }

      return ListView.builder(
        itemCount: employees.length + 1,
        padding: MySpacing.only(bottom: 80),
        itemBuilder: (context, index) {
          if (index == 0) {
            return Padding(
              padding: const EdgeInsets.only(bottom: 12, top: 4),
              child: Row(
                children: [
                  MyText.bodySmall(
                    DateTimeUtils.formatDate(DateTime.now(), 'dd MMM yyyy'),
                    fontWeight: 600,
                    color: Colors.grey[700],
                  ),
                ],
              ),
            );
          }

          final employee = employees[index - 1];

          return Padding(
            padding: const EdgeInsets.only(bottom: 8),
            child: MyCard.bordered(
              paddingAll: 10,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // --- 1. Employee Info Row (Avatar, Name, Designation ONLY) ---
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      // Avatar
                      Avatar(
                        firstName: employee.firstName,
                        lastName: employee.lastName,
                        size: 30,
                      ),
                      MySpacing.width(10),

                      // Employee Details (Expanded to use remaining space)
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            MyText.titleSmall(employee.name,
                                fontWeight: 600, overflow: TextOverflow.ellipsis),
                            MyText.labelSmall(
                              employee.designation,
                              fontWeight: 500,
                              color: Colors.grey[600],
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ),
                      ),
                      
                      // Status Text (Added back for context)
                      if (employee.checkIn == null) 
                        MyText.bodySmall(
                          'Check In Pending',
                          fontWeight: 600,
                          color: Colors.red,
                        )
                      else if (employee.checkOut == null) 
                        MyText.bodySmall(
                          'Checked In',
                          fontWeight: 600,
                          color: Colors.green,
                        ),
                    ],
                  ),

                  // --- Separator before buttons ---
                  MySpacing.height(12),
                  
                  // --- 2. Action Buttons Row (Below main info) ---
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      AttendanceActionButton(
                        employee: employee,
                        attendanceController: controller,
                      ),
                      if (employee.checkIn != null) ...[
                        MySpacing.width(8),
                        AttendanceLogViewButton(
                          employee: employee,
                          attendanceController: controller,
                        ),
                      ],
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      );
    });
  }
}