import 'package:flutter/material.dart';
import 'package:badges/badges.dart' as badges; // Make sure to add badges package in pubspec.yaml
import 'package:pshared/models/payment/status.dart';
import 'package:pshared/utils/localization.dart';
import 'package:pweb/generated/i18n/app_localizations.dart';

class OperationFilters extends StatelessWidget {
  final DateTimeRange? selectedRange;
  final Set<String> selectedStatuses;
  final VoidCallback onPickRange;
  final VoidCallback onApply;
  final ValueChanged<String> onToggleStatus;

  const OperationFilters({
    super.key,
    required this.selectedRange,
    required this.selectedStatuses,
    required this.onPickRange,
    required this.onApply,
    required this.onToggleStatus,
  });

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;

    return Card(
      margin: const EdgeInsets.all(16),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      elevation: 2,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              l10n.filters,
              style: Theme.of(context).textTheme.bodyLarge,
            ),
            const SizedBox(height: 12),
            GestureDetector(
              onTap: onPickRange,
              child: Row(
                children: [
                  Icon(Icons.date_range_outlined, color: Theme.of(context).primaryColor),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      selectedRange == null
                          ? l10n.selectPeriod
                          : '${dateToLocalFormat(context, selectedRange!.start)} – ${dateToLocalFormat(context, selectedRange!.end)}',
                      style: TextStyle(
                        color: selectedRange == null
                            ? Colors.grey
                            : Colors.black87,
                      ),
                    ),
                  ),
                  Icon(Icons.keyboard_arrow_down, color: Colors.grey),
                ],
              ),
            ),
            const SizedBox(height: 16),
            Wrap(
              spacing: 12,
              runSpacing: 8,
              children: [
                OperationStatus.success.localized(context), 
                OperationStatus.processing.localized(context), 
                OperationStatus.error.localized(context),
              ].map((status) {
                final isSelected = selectedStatuses.contains(status);
                return GestureDetector(
                  onTap: () => onToggleStatus(status),
                  child: badges.Badge(
                    badgeAnimation: badges.BadgeAnimation.fade(),
                    badgeStyle: badges.BadgeStyle(
                      shape: badges.BadgeShape.square,
                      badgeColor: isSelected
                          ? Theme.of(context).primaryColor
                          : Colors.grey.shade300,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    badgeContent: Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 8,
                        vertical: 4,
                      ),
                      child: Text(
                        l10n.status(status),
                        style: TextStyle(
                          color: isSelected ? Colors.white : Colors.black87,
                          fontSize: 14,
                        ),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
            const SizedBox(height: 24),
            Align(
              alignment: Alignment.centerRight,
              child: ElevatedButton(
                onPressed: onApply,
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 24,
                    vertical: 12,
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                child: Text(l10n.apply),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
