import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';

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

  @override
  State<AddBeneficiaryScreen> createState() => _AddBeneficiaryScreen();
}

class _AddBeneficiaryScreen extends State<AddBeneficiaryScreen>{
  final _formKey = GlobalKey<FormState>();

  final TextEditingController accountNumberController = TextEditingController();
  final TextEditingController confirmAccountNumberController = TextEditingController();
  final TextEditingController nameController = TextEditingController();
  final TextEditingController bankNameController = TextEditingController();
  final TextEditingController branchNameController = TextEditingController();
  final TextEditingController ifscController = TextEditingController();
  final TextEditingController phoneController = TextEditingController();

  String accountType = 'Savings';
  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      // Handle successful submission
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          backgroundColor: Colors.grey[900],
          behavior: SnackBarBehavior.floating,
          margin: const EdgeInsets.all(12),
          duration: const Duration(seconds: 5),
          content: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Expanded(
                child: Text(
                  'Beneficiary added successfully',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              TextButton(
                onPressed: () {
                  // Navigate to Payment Screen or do something
                },
                style: TextButton.styleFrom(
                  foregroundColor: Colors.blue[200],
                ),
                child: const Text('Pay Now'),
              ),
              IconButton(
                icon: const Icon(Icons.close, color: Colors.white),
                onPressed: () {
                  ScaffoldMessenger.of(context).hideCurrentSnackBar();
                },
              ),
            ],
          ),
        ),
      );
    }
  }

  @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('Add Beneficiary', style: TextStyle(color: Colors.black,
            fontWeight: FontWeight.w500),),
        centerTitle: false,
        actions:  [
          Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: CircleAvatar(
                  backgroundColor: Colors.grey[200],
                  radius: 20,
                  child: SvgPicture.asset(
                    'assets/images/avatar_male.svg',
                    width: 40,
                    height: 40,
                    fit: BoxFit.cover,
                  ),
                ),
          ),
        ],
      ),

      body: SafeArea(
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              Expanded(
                child: SingleChildScrollView(
                  physics: const AlwaysScrollableScrollPhysics(),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Column(
                      children: [
                        TextFormField(
                          controller: accountNumberController,
                          decoration: const InputDecoration(
                            labelText: 'Account Number',
                            // prefixIcon: Icon(Icons.person),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Colors.white,
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black, width: 2),
                            ),
                          ),
                          obscureText: true,
                          keyboardType: TextInputType.number,
                          textInputAction: TextInputAction.next,
                          validator: (value) {
                            if (value == null || value.length < 10) {
                              return "Enter a valid account number";
                            }
                            return null;
                          },
                        ),
                        const SizedBox(height: 24),
                        // Confirm Account Number
                        TextFormField(
                          controller: confirmAccountNumberController,
                          decoration: const InputDecoration(
                            labelText: 'Confirm Account Number',
                            // prefixIcon: Icon(Icons.person),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Colors.white,
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black, width: 2),
                            ),
                          ),
                          keyboardType: TextInputType.number,
                          textInputAction: TextInputAction.next,
                          validator: (value) {
                            if (value == null || value.isEmpty) {
                              return 'Re-enter account number';
                            }
                            if (value != accountNumberController.text) {
                              return 'Account numbers do not match';
                            }
                            return null;
                          },
                        ),
                        const SizedBox(height: 24),
                        TextFormField(
                          controller: nameController,
                          decoration: const InputDecoration(
                            labelText: 'Name',
                            // prefixIcon: Icon(Icons.person),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Colors.white,
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black, width: 2),
                            ),
                          ),
                          textInputAction: TextInputAction.next,
                          validator: (value) =>
                          value == null || value.isEmpty ? "Name is required" : null,
                        ),
                        const SizedBox(height: 24),
                        TextFormField(
                          controller: bankNameController,
                          decoration: const InputDecoration(
                            labelText: 'Beneficiary Bank Name',
                            // prefixIcon: Icon(Icons.person),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Colors.white,
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black, width: 2),
                            ),
                          ),
                          textInputAction: TextInputAction.next,
                          validator: (value) =>
                          value == null || value.isEmpty ? "Bank name is required" : null,
                        ),
                        const SizedBox(height: 24),
                        TextFormField(
                          controller: branchNameController,
                          decoration: const InputDecoration(
                            labelText: 'Branch Name',
                            // prefixIcon: Icon(Icons.person),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Colors.white,
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black, width: 2),
                            ),
                          ),
                          textInputAction: TextInputAction.next,
                          validator: (value) =>
                          value == null || value.isEmpty ? "Branch name is required" : null,
                        ),
                        const SizedBox(height: 24),
                        Row(
                          children: [
                            Expanded(
                              flex: 2,
                              child: TextFormField(
                                controller: ifscController,
                                decoration: const InputDecoration(
                                  labelText: 'IFSC Code',
                                  // prefixIcon: Icon(Icons.person),
                                  border: OutlineInputBorder(),
                                  isDense: true,
                                  filled: true,
                                  fillColor: Colors.white,
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: BorderSide(color: Colors.black),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(color: Colors.black, width: 2),
                                  ),
                                ),
                                textInputAction: TextInputAction.next,
                                validator: (value) => value == null || value.length < 5
                                    ? "Enter a valid IFSC"
                                    : null,
                              ),
                            ),
                            const SizedBox(width: 16),
                            Expanded(
                              flex: 2,
                              child: DropdownButtonFormField<String>(
                                value: accountType,
                                decoration: const InputDecoration(
                                  labelText: 'Account Type',
                                  // prefixIcon: Icon(Icons.person),
                                  border: OutlineInputBorder(),
                                  isDense: true,
                                  filled: true,
                                  fillColor: Colors.white,
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: BorderSide(color: Colors.black),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(color: Colors.black, width: 2),
                                  ),
                                ),
                      
                                items: ['Savings', 'Current']
                                    .map((type) => DropdownMenuItem(
                                  value: type,
                                  child: Text(type),
                                ))
                                    .toList(),
                                onChanged: (value) {
                                  setState(() {
                                    accountType = value!;
                                  });
                                },
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(height: 24),
                        TextFormField(
                          controller: phoneController,
                          keyboardType: TextInputType.phone,
                          decoration: const InputDecoration(
                            labelText: 'Phone',
                              prefixIcon: Icon(Icons.phone),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Colors.white,
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black, width: 2),
                            ),
                          ),
                          textInputAction: TextInputAction.done,
                          validator: (value) =>
                          value == null || value.length != 10 ? "Enter a valid phone" : null,
                        ),
                        const SizedBox(height: 35),
                      ],
                    ),
                  ),
                ),
              ),
              
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: SizedBox(
                    width: 250,
                    child: ElevatedButton(
                      onPressed: _submitForm,
                      style: ElevatedButton.styleFrom(
                        shape: const StadiumBorder(),
                        padding: const EdgeInsets.symmetric(vertical: 16),
                        backgroundColor: Colors.blue[900],
                        foregroundColor: Colors.white,
                      ),
                      child: const Text("Add"),
                    ),
                  ),
              ),
              
            ],
          ),
        ),
      ),
    );
  }

}