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_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/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, // +1 for header
        padding: MySpacing.only(
            bottom: 80), // Adjusted padding to add spacing at the bottom
        itemBuilder: (context, index) {
          // --- Header Row ---
          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: 12),
            child: MyCard.bordered(
              paddingAll: 12,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 1. Employee Info Row
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Avatar(
                        firstName: employee.firstName,
                        lastName: employee.lastName,
                        size: 35,
                      ),
                      MySpacing.width(16),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            MyText.titleMedium(employee.name, fontWeight: 600),
                            MySpacing.height(2),
                            MyText.bodySmall(
                              employee.designation,
                              fontWeight: 500,
                              color: Colors.grey[600],
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),

                  // Separator
                  if (employee.checkIn != null || employee.checkOut != null)
                    const Divider(height: 24),

                  // 2. Attendance Time Details Row
                  if (employee.checkIn != null || employee.checkOut != null)
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        // Check-in Time
                        _buildLogTime(
                          icon: Icons.login,
                          color: Colors.green,
                          label: 'Check-in',
                          time: employee.checkIn,
                        ),

                        // Check-out Time
                        _buildLogTime(
                          icon: Icons.logout,
                          color: Colors.red,
                          label: 'Check-out',
                          time: employee.checkOut,
                        ),
                      ],
                    ),

                  // 3. Action Buttons Row
                  MySpacing.height(16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      AttendanceActionButton(
                        employee: employee,
                        attendanceController: controller,
                      ),
                      if (employee.checkIn != null) ...[
                        MySpacing.width(8),
                        AttendanceLogViewButton(
                          employee: employee,
                          attendanceController: controller,
                        ),
                      ],
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      );
    });
  }

  // Helper function to build a cleaner log time widget
  Widget _buildLogTime({
    required IconData icon,
    required Color color,
    required String label,
    required DateTime? time,
  }) {
    if (time == null) {
      return MyContainer(
        padding: MySpacing.xy(12, 6),
        borderRadiusAll: 5,
        color: Colors.grey[100],
        child: Row(
          children: [
            Icon(icon, size: 16, color: Colors.grey),
            MySpacing.width(6),
            MyText.bodySmall('$label: **N/A**',
                fontWeight: 600, color: Colors.grey),
          ],
        ),
      );
    }
    return MyContainer(
      padding: MySpacing.xy(12, 6),
      borderRadiusAll: 6,
      color: color.withOpacity(0.1),
      child: Row(
        children: [
          Icon(icon, size: 16, color: color),
          MySpacing.width(6),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MyText.labelSmall(label, color: color, fontWeight: 600),
              MyText.bodyMedium(
                DateTimeUtils.formatDate(time, 'hh:mm a'),
                fontWeight: 600,
                color: Colors.black87,
              ),
            ],
          ),
        ],
      ),
    );
  }
}