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

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

  @override
  State<FundTransferScreen> createState() => _FundTransferScreen();
}

class _FundTransferScreen extends State<FundTransferScreen> {
  String amount = "";

  void onKeyTap(String key) {
    setState(() {
      if (key == 'back') {
        if (amount.isNotEmpty) {
          amount = amount.substring(0, amount.length - 1);
        }
      } else if (key == 'done') {
        if (kDebugMode) {
          print('Amount entered: $amount');
        }
      } else {
        amount += key;
      }
    });
  }

  Widget buildKey(String value) {
    if (value == 'done') {
      return GestureDetector(
        onTap: () => onKeyTap(value),
        child: const Icon(Symbols.check, size: 30),
      );
    } else if (value == 'back') {
      return GestureDetector(
        onTap: () => onKeyTap(value),
        child: const Icon(Symbols.backspace, size: 30)
      );
    } else {
      return GestureDetector(
        onTap: () => onKeyTap(value),
        child: Center(
          child: Text(value,
              style: const TextStyle(fontSize: 24, color: Colors.black)),
        ),
      );
    }
  }

  final keys = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    'done',
    '0',
    'back',
  ];

  @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(
          'Fund Transfer',
          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.symmetric(horizontal: 24.0, vertical: 16.0),
        child: Column(
          children: [
            const SizedBox(height: 40),
            const Text('Enter Amount', style: TextStyle(fontSize: 20)),
            const SizedBox(height: 20),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
              decoration: BoxDecoration(
                color: Colors.grey.shade200,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Text(
                amount.isEmpty ? "0" : amount,
                style: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
              ),
            ),
            const SizedBox(height: 40),
            Expanded(
              child: GridView.builder(
                itemCount: keys.length,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  childAspectRatio: 1.2,
                  mainAxisSpacing: 12,
                  crossAxisSpacing: 12,
                ),
                itemBuilder: (_, index) => buildKey(keys[index]),
              ),
            ),
          ],
        ),
      ),
    );
  }
}