import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';

/// A widget that displays the daily coverage metrics.
class CoverageWidget extends StatelessWidget {

  /// Creates a [CoverageWidget].
  const CoverageWidget({
    super.key,
    this.totalNeeded = 0,
    this.totalConfirmed = 0,
    this.coveragePercent = 0,
    this.subtitle,
  });
  /// The total number of shifts needed.
  final int totalNeeded;

  /// The number of confirmed shifts.
  final int totalConfirmed;

  /// The percentage of coverage (0-100).
  final int coveragePercent;

  /// Optional subtitle for the section.
  final String? subtitle;

  @override
  Widget build(BuildContext context) {
    Color backgroundColor;
    Color textColor;

    if (coveragePercent == 100) {
      backgroundColor = UiColors.tagActive;
      textColor = UiColors.textSuccess;
    } else if (coveragePercent >= 40) {
      backgroundColor = UiColors.tagPending;
      textColor = UiColors.textWarning;
    } else {
      backgroundColor = UiColors.tagError;
      textColor = UiColors.textError;
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(
              t.client_home.dashboard.todays_coverage,
              style: UiTypography.footnote1b.copyWith(
                color: UiColors.textPrimary,
                letterSpacing: 0.5,
              ),
            ),
            if (totalNeeded > 0 || totalConfirmed > 0 || coveragePercent > 0)
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: UiConstants.space2,
                  vertical:
                      2, // 2px is not in metrics, using hardcoded for small tweaks or space0/space1
                ),
                decoration: BoxDecoration(
                  color: backgroundColor,
                  borderRadius: UiConstants.radiusLg,
                ),
                  child: Text(
                  t.client_home.dashboard.percent_covered(percent: coveragePercent),
                  style: UiTypography.footnote2b.copyWith(color: textColor),
                ),
              ),
          ],
        ),
        if (subtitle != null) ...<Widget>[
          Text(subtitle!, style: UiTypography.body2r.textSecondary),
        ],
        const SizedBox(height: UiConstants.space6),
        Row(
          children: <Widget>[
            Expanded(
              child: _MetricCard(
                icon: UiIcons.target,
                iconColor: UiColors.primary,
                label: t.client_home.dashboard.metric_needed,
                value: '$totalNeeded',
              ),
            ),
            const SizedBox(width: UiConstants.space2),
            if (totalConfirmed != 0)
              Expanded(
                child: _MetricCard(
                  icon: UiIcons.success,
                  iconColor: UiColors.iconSuccess,
                  label: t.client_home.dashboard.metric_filled,
                  value: '$totalConfirmed',
                  valueColor: UiColors.textSuccess,
                ),
              ),
            const SizedBox(width: UiConstants.space2),
            Expanded(
              child: _MetricCard(
                icon: UiIcons.error,
                iconColor: UiColors.iconError,
                label: t.client_home.dashboard.metric_open,
                value: '${totalNeeded - totalConfirmed}',
                valueColor: UiColors.textError,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

class _MetricCard extends StatelessWidget {

  const _MetricCard({
    required this.icon,
    required this.iconColor,
    required this.label,
    required this.value,
    this.valueColor,
  });
  final IconData icon;
  final Color iconColor;
  final String label;
  final String value;
  final Color? valueColor;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(UiConstants.space2 + 2), // 10px
      decoration: BoxDecoration(
        color: UiColors.cardViewBackground,
        borderRadius: UiConstants.radiusLg,
        border: Border.all(color: UiColors.border),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: UiColors.black.withValues(alpha: 0.02),
            blurRadius: 2,
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            children: <Widget>[
              Icon(icon, size: 14, color: iconColor),
              const SizedBox(width: 6), // 6px
              Text(
                label,
                style: UiTypography.footnote2m.copyWith(
                  color: UiColors.textSecondary,
                ),
              ),
            ],
          ),
          const SizedBox(width: 6), // 6px
          Text(
            value,
            style: UiTypography.headline3m.copyWith(
              color: valueColor ?? UiColors.textPrimary,
              fontWeight:
                  FontWeight.bold, // header3 is usually bold, but ensuring
            ),
          ),
        ],
      ),
    );
  }
}
