import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:intl/intl.dart';
import 'package:krow/core/application/common/str_extensions.dart';
import 'package:krow/core/data/models/staff/pivot.dart';
import 'package:krow/core/entity/staff_contact_entity.dart';
import 'package:krow/core/presentation/styles/kw_box_decorations.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_button.dart';
import 'package:krow/features/clock_manual/domain/bloc/clock_manual_bloc.dart';

class AssignedStaffManualItemWidget extends StatelessWidget {
  final StaffContact staffContact;

  final ValueNotifier<int> timer;

  const AssignedStaffManualItemWidget(
      {super.key, required this.staffContact, required this.timer});

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: timer,
      builder: (BuildContext context, int value, Widget? child) {
        return Container(
          padding: const EdgeInsets.all(12),
          margin: const EdgeInsets.only(bottom: 8),
          decoration: KwBoxDecorations.white8,
          child: Column(
            children: [
              _staffInfo(),
              const Gap(12),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(staffContact.status == PivotStatus.ongoing?'End Time': 'Start Time',
                      style: AppTextStyles.bodySmallReg
                          .copyWith(color: AppColors.blackGray)),
                  Text(
                    DateFormat('hh:mm a').format(
                        (staffContact.status == PivotStatus.ongoing
                                ? staffContact.parentPosition?.endTime
                                : staffContact.parentPosition?.startTime) ??
                            DateTime.now()),
                    style: AppTextStyles.bodySmallMed,
                  ),
                ],
              ),
              const Gap(12),
              if (staffContact.status == PivotStatus.confirmed && value <= 0)
                _buildClockIn(context),
              if (staffContact.status == PivotStatus.ongoing)
                _buildClockOut(context),
              if (value > 0) _buildCancel(context),
              if (kDebugMode) _buildCancel(context),
            ],
          ),
        );
      },
    );
  }

  KwButton _buildCancel(BuildContext context) {
    return KwButton.outlinedPrimary(
            onPressed: () {
              BlocProvider.of<ClockManualBloc>(context)
                  .add(CancelClockInManual(staffContact));
            },
            label: 'Click again to cancel (${timer.value}) ',
            height: 36)
        .copyWith(
            textColors: AppColors.blackGray,
            color: AppColors.grayWhite,
            isFilledOutlined: true,
            borderColor: AppColors.grayTintStroke,
            pressedColor: AppColors.grayWhite);
  }

  KwButton _buildClockIn(BuildContext context) {
    return KwButton.outlinedPrimary(
            onPressed: () {
              BlocProvider.of<ClockManualBloc>(context)
                  .add(ClockInManual(staffContact));
            },
            label: 'Clock In',
            height: 36)
        .copyWith(
            textColors: AppColors.statusSuccess,
            color: AppColors.tintGreen,
            isFilledOutlined: true,
            borderColor: AppColors.tintDarkGreen,
            pressedColor: AppColors.tintDarkGreen);
  }

  KwButton _buildClockOut(BuildContext context) {
    return KwButton.outlinedPrimary(
            onPressed: () {
              BlocProvider.of<ClockManualBloc>(context)
                  .add(ClockOutManual(staffContact));
            },
            label: 'Clock Out',
            height: 36)
        .copyWith(
            textColors: AppColors.statusError,
            color: AppColors.tintRed,
            isFilledOutlined: true,
            borderColor: AppColors.tintDarkRed,
            pressedColor: AppColors.tintDarkRed);
  }

  Row _staffInfo() {
    return Row(
      children: [
        if ((staffContact.photoUrl ?? '').isNotEmpty)
          CircleAvatar(
            radius: 18,
            backgroundImage: NetworkImage(staffContact.photoUrl ?? ''),
          ),
        const Gap(12),
        Flexible(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '${staffContact.firstName} ${staffContact.lastName}',
                overflow: TextOverflow.ellipsis,
                style: AppTextStyles.bodyMediumMed,
              ),
              const Gap(4),
              Text(
                staffContact.phoneNumber ?? '',
                style: AppTextStyles.bodySmallReg
                    .copyWith(color: AppColors.blackGray),
              ),
            ],
          ),
        ),
        const Gap(8),
        SizedBox(
          height: 40,
          child: Align(
            alignment: Alignment.topCenter,
            child: Container(
              height: 20,
              padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
              decoration: BoxDecoration(
                border: Border.all(
                  color: staffContact.status.getStatusBorderColor(),
                ),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                children: [
                  Container(
                    width: 6,
                    height: 6,
                    padding: const EdgeInsets.all(0),
                    decoration: BoxDecoration(
                      color: staffContact.status.getStatusTextColor(),
                      borderRadius: BorderRadius.circular(3),
                    ),
                  ),
                  const Gap(2),
                  Text(
                    staffContact.status.formattedName.capitalize(),
                    style: AppTextStyles.bodyTinyMed.copyWith(
                        color: staffContact.status.getStatusTextColor()),
                  )
                ],
              ),
            ),
          ),
        )
      ],
    );
  }
}
