import 'package:flutter/material.dart';
import 'package:kmobile/features/fund_transfer/screens/transaction_success_screen.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';

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

  @override
  State<TransactionPinScreen> createState() => _TransactionPinScreen();
}

class _TransactionPinScreen extends State<TransactionPinScreen> {
  final List<String> _pin = [];

  void _onKeyPressed(String value) {
    setState(() {
      if (value == 'back') {
        if (_pin.isNotEmpty) _pin.removeLast();
      } else if (_pin.length < 6) {
        _pin.add(value);
      }
    });
  }

  Widget _buildPinIndicators() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(6, (index) {
        return Container(
          margin: const EdgeInsets.symmetric(horizontal: 8),
          width: 20,
          height: 20,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.blue, width: 2),
            color: index < _pin.length ? Colors.blue : Colors.transparent,
          ),
        );
      }),
    );
  }

  Widget _buildKey(String label, {IconData? icon}) {
    return Expanded(
      child: InkWell(
        onTap: () {
          if (label == 'back') {
            _onKeyPressed('back');
          } else if (label == 'done') {
            // Handle submit if needed
            if (_pin.length == 6) {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const TransactionSuccessScreen()));
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text("Please enter a 6-digit TPIN")),
              );
            }
          } else {
            _onKeyPressed(label);
          }
        },
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: Center(
            child: icon != null
                ? Icon(icon, size: 28)
                : Text(label, style: const TextStyle(fontSize: 24)),
          ),
        ),
      ),
    );
  }

  Widget _buildKeypad() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Row(children: [_buildKey('1'), _buildKey('2'), _buildKey('3')]),
        Row(children: [_buildKey('4'), _buildKey('5'), _buildKey('6')]),
        Row(children: [_buildKey('7'), _buildKey('8'), _buildKey('9')]),
        Row(children: [
          _buildKey('done', icon: Icons.check),
          _buildKey('0'),
          _buildKey('back', icon: Icons.backspace_outlined),
        ]),
      ],
    );
  }

  @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(
          'TPIN',
          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.only(bottom: 20.0),
        child: Column(
          children: [
            const Spacer(),
            const Text(
              'Enter Your TPIN',
              style: TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 20),
            _buildPinIndicators(),
            const Spacer(),
            _buildKeypad(),
          ],
        ),
      ),
    );
  }

}