import 'package:flutter/material.dart';

import 'package:pshared/models/payment/methods/data.dart';
import 'package:pshared/models/payment/type.dart';
import 'package:pshared/models/recipient/payment_method_draft.dart';

import 'package:pweb/pages/payment_methods/form.dart';
import 'package:pweb/pages/payment_methods/icon.dart';
import 'package:pweb/widgets/dialogs/confirmation_dialog.dart';

import 'package:pweb/generated/i18n/app_localizations.dart';


class PaymentMethodPanel extends StatelessWidget {
  final PaymentType selectedType;
  final int selectedIndex;
  final List<RecipientMethodDraft> entries;
  final ValueChanged<int> onRemove;
  final void Function(int, PaymentMethodData) onChanged;

  final double padding;

  const PaymentMethodPanel({
    super.key,
    required this.selectedType,
    required this.selectedIndex,
    required this.entries,
    required this.onRemove,
    required this.onChanged,
    this.padding = 16,
  });

  Future<void> _confirmDelete(BuildContext context, VoidCallback onConfirmed) async {
    final l10n = AppLocalizations.of(context)!;
    final confirmed = await showConfirmationDialog(
      context: context,
      title: l10n.delete,
      message: l10n.deletePaymentConfirmation,
      confirmLabel: l10n.delete,
    );
    if (confirmed) {
      onConfirmed();
    }
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final l10n = AppLocalizations.of(context)!;
    final label = l10n.paymentMethodDetails;
    final entry = selectedIndex >= 0 && selectedIndex < entries.length
        ? entries[selectedIndex]
        : null;

    return AnimatedContainer(
      duration: const Duration(milliseconds: 3000),
      padding: EdgeInsets.all(padding),
      decoration: BoxDecoration(
        color: theme.colorScheme.onSecondary,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: theme.colorScheme.onSurface.withAlpha(30)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(
                iconForPaymentType(selectedType),
                size: 18,
                color: theme.colorScheme.primary,
              ),
              const SizedBox(width: 8),
              Expanded(
                child: Text(
                  label,
                  style: theme.textTheme.titleSmall?.copyWith(
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              if (entry != null)
                TextButton.icon(
                  onPressed: () => _confirmDelete(context, () => onRemove(selectedIndex)),
                  icon: Icon(Icons.delete, color: theme.colorScheme.error),
                  label: Text(
                    l10n.delete,
                    style: TextStyle(color: theme.colorScheme.error),
                  ),
                ),
            ],
          ),
          const SizedBox(height: 12),
          if (entry != null)
            PaymentMethodForm(
              key: ValueKey('${selectedType.name}-${entry.existing?.id ?? selectedIndex}-form'),
              selectedType: selectedType,
              initialData: entry.data,
              onChanged: (data) {
                if (data == null) return;
                onChanged(selectedIndex, data);
              },
            ),
        ],
      ),
    );
  }
}
