import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:sysfarma_mobile/src/app/widgets/app_loader.dart';
import 'package:sysfarma_mobile/src/app/widgets/empty_state_panel.dart';
import 'package:sysfarma_mobile/src/core/theme/app_tokens.dart';
import 'package:sysfarma_mobile/src/features/yape_inbox/data/yape_inbox_providers.dart';

/// Historial informativo de pagos Yape/Plin detectados por el celular del
/// negocio. No vincula ni aplica automáticamente el pago a un comprobante.
class YapeInboxScreen extends ConsumerWidget {
  const YapeInboxScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final pending = ref.watch(yapeInboxProvider('pending'));

    return SafeArea(
      child: RefreshIndicator(
        onRefresh: () async => ref.invalidate(yapeInboxProvider('pending')),
        child: pending.when(
          loading: () => const Center(child: AppLoader()),
          error: (e, _) => ListView(
            padding: AppTokens.pagePadding,
            children: [
              EmptyStatePanel(
                  icon: Icons.wifi_off_rounded,
                  title: 'No se pudo cargar',
                  subtitle: '$e'),
            ],
          ),
          data: (rows) {
            if (rows.isEmpty) {
              return ListView(
                padding: AppTokens.pagePadding,
                children: const [
                  EmptyStatePanel(
                    icon: Icons.account_balance_wallet_outlined,
                    title: 'Sin pagos recibidos',
                    subtitle:
                        'Cuando llegue un Yape o Plin al celular del negocio, aparecerá aquí como alerta.',
                  ),
                ],
              );
            }

            return ListView.separated(
              padding: AppTokens.pagePadding,
              itemCount: rows.length,
              separatorBuilder: (_, __) => const SizedBox(height: 12),
              itemBuilder: (_, index) => _PaymentCard(row: rows[index]),
            );
          },
        ),
      ),
    );
  }
}

class _PaymentCard extends StatelessWidget {
  const _PaymentCard({required this.row});

  final ReceivedPaymentRow row;

  @override
  Widget build(BuildContext context) {
    final isPlin = row.provider == 'PLIN';
    final accent = isPlin ? const Color(0xFF0B5CD5) : const Color(0xFF742384);

    return Container(
      decoration: BoxDecoration(
        color: AppTokens.surface,
        borderRadius: BorderRadius.circular(AppTokens.radiusMedium),
        border: Border.all(color: AppTokens.border),
      ),
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                width: 44,
                height: 44,
                decoration: BoxDecoration(
                  color: accent.withValues(alpha: 0.12),
                  borderRadius: BorderRadius.circular(AppTokens.radiusSmall),
                ),
                child: Icon(Icons.south_west_rounded, color: accent),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      row.senderName?.isNotEmpty == true
                          ? row.senderName!
                          : 'Remitente desconocido',
                      style: const TextStyle(
                          fontWeight: FontWeight.w600,
                          color: AppTokens.textPrimary),
                    ),
                    const SizedBox(height: 2),
                    Text(
                      '${row.provider}${row.postedAt != null ? ' · ${row.postedAt}' : ''}',
                      style: const TextStyle(
                          fontSize: 12, color: AppTokens.textSecondary),
                    ),
                  ],
                ),
              ),
              Text('S/ ${row.amount.toStringAsFixed(2)}',
                  style: TextStyle(
                      fontWeight: FontWeight.w700,
                      fontSize: 18,
                      color: accent)),
            ],
          ),
          const SizedBox(height: 14),
          const Row(
            children: [
              Icon(Icons.notifications_active_outlined,
                  size: 18, color: AppTokens.success),
              SizedBox(width: 8),
              Expanded(
                child: Text(
                    'Pago recibido. Verifica la operación en Yape o Plin.',
                    style: TextStyle(
                        fontSize: 12, color: AppTokens.textSecondary)),
              ),
            ],
          ),
        ],
      ),
    );
  }
}