import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:krow_core/core.dart';
import 'coverage_calendar_selector.dart';

/// Header widget for the coverage page.
///
/// Displays:
/// - Back button and title
/// - Refresh button
/// - Calendar date selector
/// - Coverage summary statistics
class CoverageHeader extends StatelessWidget {
  /// Creates a [CoverageHeader].
  const CoverageHeader({
    required this.selectedDate,
    required this.coveragePercent,
    required this.totalConfirmed,
    required this.totalNeeded,
    required this.onDateSelected,
    required this.onRefresh,
    super.key,
  });

  /// The currently selected date.
  final DateTime selectedDate;

  /// The coverage percentage.
  final int coveragePercent;

  /// The total number of confirmed workers.
  final int totalConfirmed;

  /// The total number of workers needed.
  final int totalNeeded;

  /// Callback when a date is selected.
  final ValueChanged<DateTime> onDateSelected;

  /// Callback when refresh is requested.
  final VoidCallback onRefresh;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(
        top: UiConstants.space14,
        left: UiConstants.space5,
        right: UiConstants.space5,
        bottom: UiConstants.space6,
      ),
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: <Color>[
            UiColors.primary,
            UiColors.primary,
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: () => Modular.to.toClientHome(),
                    child: Container(
                      width: UiConstants.space10,
                      height: UiConstants.space10,
                      decoration: BoxDecoration(
                        color: UiColors.primaryForeground.withValues(alpha: 0.2),
                        shape: BoxShape.circle,
                      ),
                      child: const Icon(
                        UiIcons.arrowLeft,
                        color: UiColors.primaryForeground,
                        size: UiConstants.space5,
                      ),
                    ),
                  ),
                  const SizedBox(width: UiConstants.space3),
                  Text(
                    'Daily Coverage',
                    style: UiTypography.title1m.copyWith(
                      color: UiColors.primaryForeground,
                    ),
                  ),
                ],
              ),
              Container(
                width: UiConstants.space8,
                height: UiConstants.space8,
                decoration: BoxDecoration(
                  color: UiColors.transparent,
                  borderRadius: UiConstants.radiusMd,
                ),
                child: IconButton(
                  onPressed: onRefresh,
                  icon: const Icon(
                    UiIcons.rotateCcw,
                    color: UiColors.primaryForeground,
                    size: UiConstants.space4,
                  ),
                  padding: EdgeInsets.zero,
                  constraints: const BoxConstraints(),
                  style: IconButton.styleFrom(
                    hoverColor: UiColors.primaryForeground.withValues(alpha: 0.2),
                    shape: RoundedRectangleBorder(
                      borderRadius: UiConstants.radiusMd,
                    ),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: UiConstants.space4),
          CoverageCalendarSelector(
            selectedDate: selectedDate,
            onDateSelected: onDateSelected,
          ),
          const SizedBox(height: UiConstants.space4),
          Container(
            padding: const EdgeInsets.all(UiConstants.space4),
            decoration: BoxDecoration(
              color: UiColors.primaryForeground.withValues(alpha: 0.1),
              borderRadius: UiConstants.radiusLg,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Coverage Status',
                      style: UiTypography.body2r.copyWith(
                        color: UiColors.primaryForeground.withValues(alpha: 0.7),
                      ),
                    ),
                    Text(
                      '$coveragePercent%',
                      style: UiTypography.display1b.copyWith(
                        color: UiColors.primaryForeground,
                      ),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Text(
                      'Workers',
                      style: UiTypography.body2r.copyWith(
                        color: UiColors.primaryForeground.withValues(alpha: 0.7),
                      ),
                    ),
                    Text(
                      '$totalConfirmed/$totalNeeded',
                      style: UiTypography.title2m.copyWith(
                        color: UiColors.primaryForeground,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
