import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:kmobile/features/fund_transfer/screens/transaction_pin_screen.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');
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => const TransactionPinScreen()));
        }
      } 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: Column(
        children: [
          const Spacer(),
          const Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Debit from:'),
              Text(
                '0300015678903456',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
              )
            ],
          ),
          const SizedBox(height: 20),
          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 Spacer(),
          Container(
            padding: const EdgeInsets.all(16.0),
            color: Colors.white,
            child: GridView.count(
              crossAxisCount: 3,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              mainAxisSpacing: 12,
              crossAxisSpacing: 12,
              childAspectRatio: 1.2,
              children:
                keys.map((key) => buildKey(key)).toList(),
            ),
          ),
        ],
      ),
    );
  }
}