import 'package:flutter/material.dart';
 import 'package:kmobile/features/profile/tpin/change_tpin_otp_screen.dart';
 import 'package:kmobile/widgets/pin_input_field.dart'; // Use the new widget

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

   @override
   State<ChangeTpinScreen> createState() => _ChangeTpinScreenState();
 }

 class _ChangeTpinScreenState extends State<ChangeTpinScreen> {
   final _formKey = GlobalKey<FormState>();
   final _oldTpinController = TextEditingController();
   final _newTpinController = TextEditingController();
   final _confirmTpinController = TextEditingController();

   @override
   void dispose() {
     _oldTpinController.dispose();
     _newTpinController.dispose();
     _confirmTpinController.dispose();
     super.dispose();
   }

   void _handleChangeTpin() {
     if (_formKey.currentState!.validate()) {
       // TODO: Add API call to request OTP for TPIN change
       Navigator.of(context).push(
         MaterialPageRoute(
           builder: (context) => ChangeTpinOtpScreen(
             newTpin: _newTpinController.text,
           ),
         ),
       );
     }
   }

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: const Text('Change TPIN'),
       ),
       body: SingleChildScrollView(
         padding: const EdgeInsets.all(16.0),
         child: Form(
           key: _formKey,
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               const Text('Current TPIN'),
               const SizedBox(height: 8),
               PinInputField(
                 controller: _oldTpinController,
                 validator: (value) {
                   if (value == null || value.length != 6) {
                     return 'Please enter your 6-digit old TPIN';
                   }
                   return null;
                 },
               ),
               const SizedBox(height: 24),
               const Text('New TPIN'),
               const SizedBox(height: 8),
               PinInputField(
                 controller: _newTpinController,
                 validator: (value) {
                   if (value == null || value.length != 6) {
                     return 'Please enter a 6-digit new TPIN';
                   }
                   return null;
                 },
               ),
               const SizedBox(height: 24),
               const Text('Confirm New TPIN'),
               const SizedBox(height: 8),
               PinInputField(
                 controller: _confirmTpinController,
                 validator: (value) {
                   if (value == null || value.length != 6) {
                     return 'Please confirm your new TPIN';
                   }
                   if (value != _newTpinController.text) {
                     return 'TPINs do not match';
                   }
                   return null;
                 },
               ),
               const SizedBox(height: 32),
               ElevatedButton(
                 onPressed: _handleChangeTpin,
                 child: const Text('Proceed'),
               ),
             ],
           ),
         ),
       ),
     );
   }
 }