import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:sefer_driver/constant/colors.dart';
import 'package:sefer_driver/constant/style.dart'; // Assuming this has your text styles
import 'package:sefer_driver/views/widgets/mycircular.dart'; // Assuming this is your loading widget

import '../../../controller/payment/driver_payment_controller.dart';

class PaymentHistoryDriverPage extends StatelessWidget {
  const PaymentHistoryDriverPage({super.key});

  @override
  Widget build(BuildContext context) {
    // Initialize your controller
    Get.put(DriverWalletHistoryController());

    return Scaffold(
      appBar: AppBar(
        title: Text('Payment History'.tr),
        backgroundColor: Colors.white,
        elevation: 1,
      ),
      backgroundColor: Colors.grey[100],
      body: GetBuilder<DriverWalletHistoryController>(
        builder: (controller) {
          if (controller.isLoading) {
            // Using your custom loading indicator
            return const Center(child: MyCircularProgressIndicator());
          }

          if (controller.archive.isEmpty) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.account_balance_wallet_outlined,
                      size: 80, color: Colors.grey[400]),
                  const SizedBox(height: 16),
                  Text(
                    'No transactions yet'.tr,
                    style: Theme.of(context)
                        .textTheme
                        .headlineSmall
                        ?.copyWith(color: Colors.grey[600]),
                  ),
                ],
              ),
            );
          }

          return AnimationLimiter(
            child: ListView.builder(
              padding: const EdgeInsets.all(16.0),
              itemCount: controller.archive.length,
              itemBuilder: (BuildContext context, int index) {
                var transaction = controller.archive[index];

                return AnimationConfiguration.staggeredList(
                  position: index,
                  duration: const Duration(milliseconds: 375),
                  child: SlideAnimation(
                    verticalOffset: 50.0,
                    child: FadeInAnimation(
                      child: _TransactionCard(transaction: transaction),
                    ),
                  ),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

// A dedicated widget for displaying a single transaction with a modern UI.
class _TransactionCard extends StatelessWidget {
  final Map<String, dynamic> transaction;

  const _TransactionCard({required this.transaction});

  @override
  Widget build(BuildContext context) {
    // Safely parse the amount to avoid errors
    final double amount =
        double.tryParse(transaction['amount']?.toString() ?? '0') ?? 0;

    final bool isCredit = amount >= 0;

    final Color indicatorColor =
        isCredit ? AppColor.greenColor : AppColor.redColor;
    final IconData iconData =
        isCredit ? Icons.arrow_upward_rounded : Icons.arrow_downward_rounded;
    final String transactionType = (isCredit ? 'Credit'.tr : 'Debit'.tr).tr;

    return Card(
      elevation: 2,
      shadowColor: Colors.black.withOpacity(0.05),
      margin: const EdgeInsets.only(bottom: 12.0),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      clipBehavior: Clip.antiAlias, // Ensures the color bar is clipped neatly
      child: IntrinsicHeight(
        // Ensures the color bar and content have the same height
        child: Row(
          children: [
            // Left-side color indicator bar
            Container(width: 6, color: indicatorColor),

            Expanded(
              child: ListTile(
                leading: Icon(iconData, color: indicatorColor, size: 30),
                title: Text(
                  // Use .abs() to remove the negative sign from the display
                  '${amount.abs().toStringAsFixed(2)} ${'SYP'.tr}',
                  style: AppStyle.title.copyWith(
                    fontWeight: FontWeight.bold,
                    color: Colors.black87,
                  ),
                ),
                subtitle: Text(
                  transaction['created_at'] ?? 'No date',
                  style: AppStyle.title.copyWith(
                    fontSize: 12,
                    color: Colors.grey[600],
                  ),
                ),
                trailing: Text(
                  transactionType,
                  style: AppStyle.title.copyWith(
                    fontSize: 14,
                    color: indicatorColor,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
