/// This file defines the `BalancesTab` widget, which is responsible for displaying a list of user balances
/// in a group. Each balance is represented as a card, showing the user's name, the amount they have paid,
/// the amount they owe, and their overall balance status (to pay, to receive, or balanced).
///
/// The widget handles both light and dark themes and provides a fallback UI for empty balance lists.
library;

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../blocs/user/user_bloc.dart';
import '../../blocs/user/user_state.dart' as user_state;
import '../../models/expense.dart';
import '../../models/group.dart';
import '../../models/user_balance.dart';
import 'add_expense_dialog.dart';

/// A stateless widget that displays a list of user balances in a group.
///
/// The `BalancesTab` widget takes a list of `UserBalance` objects and renders them as cards in a scrollable list.
/// Each card provides detailed information about the user's financial status within the group.
///
/// If the list of balances is empty, a placeholder message is displayed.
class BalancesTab extends StatelessWidget {
  /// The list of user balances to display.
  final List<UserBalance> balances;

  /// The group associated with these balances.
  final Group group;

  /// Creates a `BalancesTab` widget.
  ///
  /// The [balances] parameter must not be null.
  const BalancesTab({super.key, required this.balances, required this.group});

  @override
  Widget build(BuildContext context) {
    // Check if the balances list is empty and display a placeholder message if true.
    if (balances.isEmpty) {
      return const Center(child: Text('Aucune balance à afficher'));
    }

    // Render the list of balances as a scrollable list.
    return ListView.builder(
      padding: const EdgeInsets.all(16),
      itemCount: balances.length,
      itemBuilder: (context, index) {
        final balance = balances[index];
        return _buildBalanceCard(context, balance);
      },
    );
  }

  /// Builds a card widget to display a single user's balance information.
  ///
  /// The card includes the user's name, their total paid and owed amounts, and their balance status.
  /// The card's appearance adapts to the app's current theme (light or dark).
  Widget _buildBalanceCard(BuildContext context, UserBalance balance) {
    // Determine if the app is in dark mode.
    final isDark = Theme.of(context).brightness == Brightness.dark;

    // Define variables for the balance's color, icon, and status text.
    Color balanceColor;
    IconData balanceIcon;
    String balanceText;

    // Determine the balance status and corresponding UI elements.
    if (balance.shouldReceive) {
      balanceColor = Colors.green;
      balanceIcon = Icons.arrow_downward;
      balanceText = 'À recevoir';
    } else if (balance.shouldPay) {
      balanceColor = Colors.red;
      balanceIcon = Icons.arrow_upward;
      balanceText = 'À payer';
    } else {
      balanceColor = Colors.grey;
      balanceIcon = Icons.check_circle;
      balanceText = 'Équilibré';
    }

    // Build and return the card widget.
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Row(
              children: [
                // Display the user's initial in a circular avatar.
                CircleAvatar(
                  radius: 24,
                  backgroundColor: isDark ? Colors.grey[800] : Colors.grey[200],
                  child: Text(
                    balance.userName.isNotEmpty
                        ? balance.userName[0].toUpperCase()
                        : '?',
                    style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                const SizedBox(width: 16),
                // Display the user's name and financial details.
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // User's name.
                      Text(
                        balance.userName,
                        style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 4),
                      // User's total paid and owed amounts.
                      Text(
                        'Payé: ${balance.totalPaid.toStringAsFixed(2)} € • Doit: ${balance.totalOwed.toStringAsFixed(2)} €',
                        style: TextStyle(
                          fontSize: 12,
                          color: isDark ? Colors.grey[400] : Colors.grey[600],
                        ),
                      ),
                    ],
                  ),
                ),
                // Display the user's balance status and amount.
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Row(
                      children: [
                        // Icon indicating the balance status.
                        Icon(balanceIcon, size: 16, color: balanceColor),
                        const SizedBox(width: 4),
                        // User's absolute balance amount.
                        Text(
                          '${balance.absoluteBalance.toStringAsFixed(2)} €',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            color: balanceColor,
                          ),
                        ),
                      ],
                    ),
                    // Text indicating the balance status (e.g., "À recevoir").
                    Text(
                      balanceText,
                      style: TextStyle(fontSize: 12, color: balanceColor),
                    ),
                  ],
                ),
              ],
            ),
            // "Rembourser" button (Only show if this user is owed money and current user is looking at list?
            // Wait, this list shows balances of everyone.
            // Requirement: "Il faut un bouton dans la page qui permet de régler l'argent qu'on doit à une certaine personne"
            // So if I look at "Alice", and Alice "shouldReceive" (is green), it implies the group owes Alice.
            // But does it mean *I* owe Alice?
            // The BalancesTab shows the *Group's* balances.
            // However, usually settlement is 1-on-1. The requirement says: "régler l'argent qu'on doit à une certaine personne".
            // If the user displayed here 'shouldReceive' money, it means they are owed money.
            // If I click 'Rembourser', it implies *I* am paying them.
            // This button should probably be available if the user on the card is POSITIVE (shouldReceive)
            // AND I am not that user.
            if (balance.shouldReceive) ...[
              const SizedBox(height: 12),
              SizedBox(
                width: double.infinity,
                child: OutlinedButton.icon(
                  onPressed: () => _showReimbursementDialog(context, balance),
                  icon: const Icon(Icons.monetization_on_outlined),
                  label: Text('Rembourser ${balance.userName}'),
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.green,
                    side: const BorderSide(color: Colors.green),
                  ),
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }

  void _showReimbursementDialog(
    BuildContext context,
    UserBalance payeeBalance,
  ) {
    final userState = context.read<UserBloc>().state;

    if (userState is! user_state.UserLoaded) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Erreur: utilisateur non connecté')),
      );
      return;
    }

    final currentUser = userState.user;

    // Prevent reimbursing yourself
    if (payeeBalance.userId == currentUser.id) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Vous ne pouvez pas vous rembourser vous-même'),
        ),
      );
      return;
    }

    showDialog(
      context: context,
      builder: (context) => AddExpenseDialog(
        group: group,
        currentUser: currentUser,
        initialCategory: ExpenseCategory.reimbursement,
        initialDescription: 'Remboursement',
        initialAmount: payeeBalance.absoluteBalance,
        initialSplits: {
          payeeBalance.userId: payeeBalance
              .absoluteBalance, // The payee receives the full amount (as split)
        },
      ),
    );
  }
}
