import 'package:flutter/material.dart';

/// Compact W / D / L pill row used on team cards and the detail header.
///
/// Win / loss / draw are universally readable colors, so they bypass the
/// color scheme and use semantic green / red / grey tints that remain stable
/// across light and dark themes.
class TeamRecordBadge extends StatelessWidget {
  const TeamRecordBadge({
    super.key,
    required this.wins,
    required this.draws,
    required this.losses,
    this.dense = false,
  });

  final int wins;
  final int draws;
  final int losses;

  /// Shrinks padding and font size for tight spaces (e.g. inside a card).
  final bool dense;

  @override
  Widget build(BuildContext context) {
    final spacing = dense ? 6.0 : 8.0;
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        _RecordChip(
          label: 'W',
          value: wins,
          color: Colors.green,
          dense: dense,
        ),
        SizedBox(width: spacing),
        _RecordChip(
          label: 'D',
          value: draws,
          color: Colors.grey,
          dense: dense,
        ),
        SizedBox(width: spacing),
        _RecordChip(
          label: 'L',
          value: losses,
          color: Colors.red,
          dense: dense,
        ),
      ],
    );
  }
}

class _RecordChip extends StatelessWidget {
  const _RecordChip({
    required this.label,
    required this.value,
    required this.color,
    required this.dense,
  });

  final String label;
  final int value;
  final MaterialColor color;
  final bool dense;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final isDark = theme.brightness == Brightness.dark;
    final tint = isDark ? color.shade200 : color.shade800;
    final bg = (isDark ? color.shade900 : color.shade100).withValues(
      alpha: isDark ? 0.45 : 1.0,
    );

    final hPad = dense ? 8.0 : 10.0;
    final vPad = dense ? 4.0 : 6.0;
    final fontSize = dense ? 11.0 : 12.5;

    return Container(
      padding: EdgeInsets.symmetric(horizontal: hPad, vertical: vPad),
      decoration: BoxDecoration(
        color: bg,
        borderRadius: BorderRadius.circular(999),
        border: Border.all(color: tint.withValues(alpha: 0.35)),
      ),
      child: Text(
        '$label: $value',
        style: TextStyle(
          color: tint,
          fontWeight: FontWeight.w700,
          fontSize: fontSize,
          letterSpacing: 0.3,
        ),
      ),
    );
  }
}
