velocity-pay-flutter/lib/screens/history/history_screen.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:qpay/screens/transaction_controller.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:qpay/screens/history/history_controller.dart';
import 'package:timeago/timeago.dart' as timeago;

class HistoryScreen extends StatefulWidget {
  const HistoryScreen({super.key});

  @override
  State<HistoryScreen> createState() => _HistoryScreenState();
}

class _HistoryScreenState extends State<HistoryScreen>
    with TickerProviderStateMixin {
  late HistoryController controller;
  late SharedPreferences prefs;
  late AnimationController _controller;
  late TransactionController transactionController;

  final TextEditingController _searchController = TextEditingController();
  final Map<String, String> _queryParams = {};
  final List<Animation<Offset>> _alignListAnimations = [];

  @override
  void initState() {
    super.initState();
    controller = HistoryController(context);
    setupData();

    transactionController = Provider.of<TransactionController>(
      context,
      listen: false,
    );

    _controller = AnimationController(
      duration: const Duration(milliseconds: 600),
      vsync: this,
    )..forward();

    List tranListIndices = [0, 1];
    for (int i = 0; i < tranListIndices.length; i++) {
      _alignListAnimations.add(
        Tween<Offset>(begin: Offset(0, -0.25), end: Offset.zero).animate(
          CurvedAnimation(
            parent: _controller,
            curve: Interval(0.075 * i, 1.0, curve: Curves.easeOut),
          ),
        ),
      );
    }
  }

  void setupData() async {
    prefs = await SharedPreferences.getInstance();

    await controller.getTransactions({'userId': prefs.getString("userId")!});
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text(
              'History',
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            centerTitle: true,
          ),
          SliverToBoxAdapter(
            child: ListenableBuilder(
              listenable: controller,
              builder: (context, child) {
                return Container(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    children: [
                      _buildSearchField(controller),
                      if (controller.model.transactions.isEmpty)
                        Column(
                          children: [
                            SizedBox(height: 30),
                            Text(
                              'No transactions yet. Make a payment to see your recent activity.',
                              style: TextStyle(fontSize: 16),
                              textAlign: TextAlign.center,
                            ),
                          ],
                        ),
                      if (controller.model.transactions.isNotEmpty)
                        ListView(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          children: [
                            ...controller.model.transactions.map(
                              (e) => _buildTransactionItem(e, context),
                            ),
                          ],
                        ),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSearchField(HistoryController controller) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Expanded(
              child: TextFormField(
                textInputAction: TextInputAction.search,
                onFieldSubmitted: (value) {
                  _queryParams.clear();
                  setState(() {
                    _queryParams['creditAccount'] = _searchController.text;
                    _queryParams['creditEmail'] = _searchController.text;
                    _queryParams['creditPhone'] = _searchController.text;
                    _queryParams['creditName'] = _searchController.text;
                    _queryParams['billName'] = _searchController.text;
                    _queryParams['amount'] = _searchController.text;
                    _queryParams['userId'] = prefs.getString("userId")!;

                    controller.getTransactions(_queryParams);
                  });
                },
                controller: _searchController,
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  hintText: 'Search by name, account, email, phone',
                  focusedErrorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide(
                      color: Theme.of(context).colorScheme.secondary,
                    ),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide(
                      color: Theme.of(
                        context,
                      ).colorScheme.primary.withOpacity(0.2),
                    ),
                  ),
                  suffixIcon:
                      _searchController.text.isNotEmpty
                          ? IconButton(
                            onPressed: () {
                              _searchController.clear();
                              _queryParams.clear();
                              controller.getTransactions({
                                'userId': prefs.getString("userId")!,
                              });
                            },
                            icon: Icon(Icons.clear),
                            color: Theme.of(context).colorScheme.primary,
                          )
                          : null,
                ),
                onChanged: (value) {
                  // controller.updateCreditAccount(value);
                },
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter an amount';
                  }
                  if (double.tryParse(value) == null) {
                    return 'Please enter a valid amount';
                  }
                  return null;
                },
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildTransactionItem(Map<String, dynamic> e, BuildContext context) {
    return SlideTransition(
      position: _alignListAnimations[0],
      child: Skeletonizer(
        enabled: controller.model.isLoading,
        child: InkWell(
          customBorder: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          onTap: () {
            transactionController.updateReceiptData(e);
            context.push("/receipt");
          },
          child: ListTile(
            leading: Container(
              padding: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: Theme.of(
                  context,
                ).colorScheme.primary.withValues(alpha: 0.1),
                shape: BoxShape.circle,
              ),
              child: Image(
                image: AssetImage("assets/${e['paymentProcessorImage']}"),
              ),
            ),
            title: Row(
              children: [
                Text(
                  e['billName'],
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                SizedBox(width: 10),
                Icon(
                  e['status'] == 'SUCCESS'
                      ? Icons.check_circle
                      : e['status'] == 'PENDING'
                      ? Icons.pending
                      : Icons.cancel,
                  size: 16,
                  color:
                      e['status'] == 'SUCCESS'
                          ? Colors.green
                          : e['status'] == 'PENDING'
                          ? Colors.orange
                          : Colors.red,
                ),
              ],
            ),
            subtitle: Text(
              e['createdAt'] != null
                  ? timeago.format(DateTime.parse(e['createdAt']))
                  : '',
              style: TextStyle(fontSize: 12),
            ),
            trailing: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  e['amount'].toStringAsFixed(2),
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                ),
                Text(
                  e['totalAmount'].toStringAsFixed(2),
                  style: TextStyle(fontSize: 12),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}