kmobile/lib/features/auth/screens/mpin_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:kmobile/features/auth/controllers/auth_cubit.dart';
import 'package:kmobile/security/secure_storage.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import '../../../app.dart';

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

  @override
  MPinScreenState createState() => MPinScreenState();
}

class MPinScreenState extends State<MPinScreen> {
  List<String> mPin = [];

  void addDigit(String digit) {
    if (mPin.length < 4) {
      setState(() {
        mPin.add(digit);
      });
    }
  }

  void deleteDigit() {
    if (mPin.isNotEmpty) {
      setState(() {
        mPin.removeLast();
      });
    }
  }

  Widget buildMPinDots() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(4, (index) {
        return Container(
          margin: const EdgeInsets.all(8),
          width: 15,
          height: 15,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: index < mPin.length ? Colors.black : Colors.grey[400],
          ),
        );
      }),
    );
  }

  Widget buildNumberPad() {
    List<List<String>> keys = [
      ['1', '2', '3'],
      ['4', '5', '6'],
      ['7', '8', '9'],
      ['Enter', '0', '<']
    ];

    return Column(
      children: keys.map((row) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: row.map((key) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: GestureDetector(
                onTap: () async {
                  if (key == '<') {
                    deleteDigit();
                  } else if (key == 'Enter') {
                    if (mPin.length == 4) {
                      // String storedMpin = await SecureStorage().read("mpin");
                      // if(!mounted) return;
                      // if(storedMpin == mPin.join()) {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const NavigationScaffold()),
                        );
                      // }
                    } else {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text("Please enter 4 digits")),
                      );
                    }
                  } else if (key.isNotEmpty) {
                    addDigit(key);
                  }
                },
                child: Container(
                  width: 70,
                  height: 70,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.grey[200],
                  ),
                  alignment: Alignment.center,
                  child: key == 'Enter' ? const Icon(Symbols.check) : Text(
                    key == '<' ? '⌫' : key,
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: key == 'Enter' ?
                      FontWeight.normal : FontWeight.normal,
                      color: key == 'Enter' ? Colors.blue : Colors.black,
                    ),
                  ),
                ),
              ),
            );
          }).toList(),
        );
      }).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    final cubit = context.read<AuthCubit>();

    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            const Spacer(),
            // Logo
            const FlutterLogo(size: 100),
            const SizedBox(height: 20),
            const Text(
              "Enter your mPIN",
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
            ),
            const SizedBox(height: 20),
            buildMPinDots(),
            const Spacer(),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TextButton(onPressed: () {
                  cubit.authenticateBiometric();
                }, child: const Text("Try another way")),
                TextButton(onPressed: () {}, child: const Text("Register?")),
              ],
            ),
            buildNumberPad(),
            const Spacer(),
          ],
        ),
      ),
    );
  }
}