import 'package:flutter/material.dart';
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<OperationStatus> selectedStatuses;
  final VoidCallback onPickRange;
  final ValueChanged<OperationStatus> onToggleStatus;
  final VoidCallback onClear;

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

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final theme = Theme.of(context);
    final hasActive = selectedRange != null || selectedStatuses.isNotEmpty;
    final periodLabel = selectedRange == null
        ? l10n.selectPeriod
        : '${dateToLocalFormat(context, selectedRange!.start)} – ${dateToLocalFormat(context, selectedRange!.end)}';

    return Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      elevation: 0,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text(
                  l10n.filters,
                  style: theme.textTheme.titleSmall?.copyWith(
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const Spacer(),
                if (hasActive)
                  TextButton.icon(
                    onPressed: onClear,
                    icon: const Icon(Icons.close, size: 16),
                    label: Text(l10n.reset),
                  ),
              ],
            ),
            const SizedBox(height: 10),
            OutlinedButton.icon(
              onPressed: onPickRange,
              icon: const Icon(Icons.date_range_outlined, size: 18),
              label: Text(periodLabel, overflow: TextOverflow.ellipsis),
              style: OutlinedButton.styleFrom(
                padding: const EdgeInsets.symmetric(
                  horizontal: 12,
                  vertical: 10,
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
            const SizedBox(height: 12),
            Wrap(
              spacing: 10,
              runSpacing: 8,
              children: OperationStatus.values.map((status) {
                final label = status.localized(context);
                final isSelected = selectedStatuses.contains(status);
                return FilterChip(
                  label: Text(l10n.status(label)),
                  selected: isSelected,
                  onSelected: (_) => onToggleStatus(status),
                  selectedColor: theme.colorScheme.primaryContainer,
                  checkmarkColor: theme.colorScheme.onPrimaryContainer,
                  labelStyle: theme.textTheme.bodySmall?.copyWith(
                    color: isSelected
                        ? theme.colorScheme.onPrimaryContainer
                        : theme.colorScheme.onSurface,
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                  side: BorderSide(
                    color: isSelected
                        ? theme.colorScheme.primaryContainer
                        : theme.dividerColor.withAlpha(60),
                  ),
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}
