import 'package:flutter/material.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';

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

  @override
  State<AccountStatementScreen> createState() => _AccountStatementScreen();
}

class _AccountStatementScreen extends State<AccountStatementScreen>{
  DateTimeRange? selectedDateRange;
  final _amountRangeController = TextEditingController(text: "100-500");
  final transactions = [
    {"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹133.98", "type": "Cr", "time": "21-02-2024 13:09:30"},
    {"desc": "Mobile recharge", "amount": "-₹299.00", "type": "Dr", "time": "21-02-2024 13:09:30"},
    {"desc": "NEFT received from Jaya Saha", "amount": "+₹987.80", "type": "Cr", "time": "21-02-2024 13:09:30"},
    {"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹100.00", "type": "Cr", "time": "21-02-2024 13:09:30"},
    {"desc": "Transfer From ICICI Bank subsidy", "amount": "-₹100.00", "type": "Dr", "time": "21-02-2024 13:09:30"},
    {"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹100.00", "type": "Cr", "time": "21-02-2024 13:09:30"},
    {"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹100.00", "type": "Cr", "time": "21-02-2024 13:09:30"},
  ];

  Future<void> _selectDateRange(BuildContext context) async {
    final DateTime now = DateTime.now();

    final DateTimeRange? picked = await showDateRangePicker(
      context: context,
      firstDate: DateTime(2023),
      lastDate: now, // disables future dates
      initialDateRange: selectedDateRange ??
          DateTimeRange(start: now.subtract(const Duration(days: 7)), end: now),
    );

    if (picked != null) {
      setState(() {
        selectedDateRange = picked;
      });
    }
  }

  String _formatDate(DateTime date) {
    return "${date.day.toString().padLeft(2, '0')}-"
        "${date.month.toString().padLeft(2, '0')}-"
        "${date.year}";
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(icon: const Icon(Symbols.arrow_back_ios_new),
          onPressed: () {
            Navigator.pop(context);
          },),
        title: const Text('Account Statement', style: TextStyle(color: Colors.black,
            fontWeight: FontWeight.w500),),
        centerTitle: false,
        actions: const [
          Padding(
            padding: EdgeInsets.only(right: 10.0),
            child: CircleAvatar(
              backgroundImage: AssetImage('assets/images/avatar.jpg'), // Replace with your image
              radius: 20,
            ),
          ),
        ],
      ),

      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Filters', style: TextStyle(fontSize: 17),),
            const SizedBox(height: 15,),
            Row(
              children: [
                Expanded(child: _buildDateRangeSelector()),
                const SizedBox(width: 10),
                Expanded(child: _buildFilterBox("100-500")),
              ],
            ),
            const SizedBox(height: 35),
            Expanded(
              child: ListView.builder(
                itemCount: transactions.length,
                itemBuilder: (context, index) {
                  final txn = transactions[index];
                  return _buildTransactionTile(txn);
                },
              ),
            ),
          ],
        ),
      ),

    );
  }

  Widget _buildDateRangeSelector() {
    String label = "Select Date";
    if (selectedDateRange != null) {
      final from = _formatDate(selectedDateRange!.start);
      final to = _formatDate(selectedDateRange!.end);
      label = "$from - $to";
    }

    return GestureDetector(
      onTap: () => _selectDateRange(context),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Expanded(child: Text(label, style: const TextStyle(fontSize: 16))),
            const Icon(Icons.calendar_today),
          ],
        ),
      ),
    );
  }

  Widget _buildFilterBox(String text) {
    return TextFormField(
      controller: _amountRangeController,
      decoration: const InputDecoration(
        labelText: 'Amount Range',
        // prefixIcon: Icon(Icons.person),
        border: OutlineInputBorder(),
        isDense: true,
        filled: true,
        fillColor: Colors.white,
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.black),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.black, width: 2),
        ),
      ),
      keyboardType: TextInputType.number,
      textInputAction: TextInputAction.next,
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter amount range';
        }
        return null;
      },
    );
  }

  Widget _buildTransactionTile(Map<String, String> txn) {
    final isCredit = txn['type'] == "Cr";
    final amountColor = isCredit ? Colors.green : Colors.red;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(txn['time']!, style: const TextStyle(color: Colors.grey)),
        const SizedBox(height: 4),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(child: Text(txn['desc']!, style: const TextStyle(fontSize: 16))),
            Text(
              "${txn['amount']} ${txn['type']}",
              style: TextStyle(color: amountColor, fontWeight: FontWeight.bold),
            ),
          ],
        ),
        const SizedBox(height: 25),
      ],
    );
  }
}