unionflow-mobile-apps/lib/features/onboarding/presentation/pages/subscription_summary_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../bloc/onboarding_bloc.dart';
import '../../data/models/souscription_status_model.dart';

/// Étape 3 — Récapitulatif avant paiement
class SubscriptionSummaryPage extends StatelessWidget {
  final SouscriptionStatusModel souscription;

  const SubscriptionSummaryPage({super.key, required this.souscription});

  static const _periodeLabels = {
    'MENSUEL': 'Mensuel',
    'TRIMESTRIEL': 'Trimestriel (–5%)',
    'SEMESTRIEL': 'Semestriel (–10%)',
    'ANNUEL': 'Annuel (–20%)',
  };

  static const _orgLabels = {
    'ASSOCIATION': 'Association / ONG locale',
    'MUTUELLE': 'Mutuelle',
    'COOPERATIVE': 'Coopérative / Microfinance',
    'FEDERATION': 'Fédération / Grande ONG',
  };

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final montant = souscription.montantTotal ?? 0;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Récapitulatif de la souscription'),
        automaticallyImplyLeading: false,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // En-tête
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [theme.primaryColor, theme.primaryColor.withOpacity(0.7)],
                ),
                borderRadius: BorderRadius.circular(16),
              ),
              child: Column(
                children: [
                  const Icon(Icons.receipt_long, color: Colors.white, size: 40),
                  const SizedBox(height: 8),
                  Text(
                    '${montant.toStringAsFixed(0)} FCFA',
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    'à régler par Wave Mobile Money',
                    style: TextStyle(color: Colors.white.withOpacity(0.85)),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 24),

            Text('Détails de votre souscription', style: theme.textTheme.titleMedium),
            const SizedBox(height: 12),

            _InfoRow(label: 'Organisation', value: souscription.organisationNom ?? '—'),
            _InfoRow(label: 'Formule', value: souscription.typeFormule),
            _InfoRow(label: 'Plage de membres', value: souscription.plageLibelle),
            _InfoRow(
              label: 'Période',
              value: _periodeLabels[souscription.typePeriode] ?? souscription.typePeriode,
            ),
            _InfoRow(
              label: 'Type d\'organisation',
              value: _orgLabels[souscription.typeOrganisation] ?? souscription.typeOrganisation,
            ),
            if (souscription.coefficientApplique != null)
              _InfoRow(
                label: 'Coefficient appliqué',
                value: '×${souscription.coefficientApplique!.toStringAsFixed(2)}',
              ),

            const Divider(height: 32),
            _InfoRow(
              label: 'Total à payer',
              value: '${montant.toStringAsFixed(0)} FCFA',
              bold: true,
            ),

            const SizedBox(height: 24),
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.blue[50],
                borderRadius: BorderRadius.circular(8),
              ),
              child: const Row(
                children: [
                  Icon(Icons.info_outline, color: Colors.blue, size: 20),
                  SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      'Vous allez être redirigé vers Wave pour effectuer le paiement. '
                      'Votre accès sera activé après validation par un administrateur.',
                      style: TextStyle(fontSize: 13, color: Colors.blue),
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 32),
          ],
        ),
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(16),
        child: ElevatedButton.icon(
          onPressed: () =>
              context.read<OnboardingBloc>().add(const OnboardingPaiementInitie()),
          icon: const Icon(Icons.payment),
          label: const Text('Payer avec Wave'),
          style: ElevatedButton.styleFrom(
            minimumSize: const Size.fromHeight(52),
            backgroundColor: const Color(0xFF00B9F1), // Couleur Wave
            foregroundColor: Colors.white,
          ),
        ),
      ),
    );
  }
}

class _InfoRow extends StatelessWidget {
  final String label;
  final String value;
  final bool bold;

  const _InfoRow({required this.label, required this.value, this.bold = false});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 160,
            child: Text(label,
                style: const TextStyle(color: Colors.grey, fontSize: 14)),
          ),
          Expanded(
            child: Text(
              value,
              style: TextStyle(
                fontWeight: bold ? FontWeight.bold : FontWeight.normal,
                fontSize: bold ? 16 : 14,
              ),
            ),
          ),
        ],
      ),
    );
  }
}