import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import '../../../l10n/app_localizations.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();

  late String accountType;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        accountType = AppLocalizations.of(context).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: [
              Expanded(
                child: Text(
                  AppLocalizations.of(context).beneficiaryAdded,
                  style: TextStyle(color: Theme.of(context).dialogBackgroundColor),
                ),
              ),
              TextButton(
                onPressed: () {
                  // Navigate to Payment Screen or do something
                },
                style: TextButton.styleFrom(foregroundColor: Colors.blue[200]),
                child: Text(AppLocalizations.of(context).payNow),
              ),
              IconButton(
                icon: const Icon(Icons.close, color: Colors.white),
                onPressed: () {
                  ScaffoldMessenger.of(context).hideCurrentSnackBar();
                },
              ),
            ],
          ),
        ),
      );
    }
  }

  void _validateIFSC() async {
    final ifsc = ifscController.text.trim().toUpperCase();

    // 🔹 Format check
    final isValidFormat = RegExp(r'^[A-Z]{4}0[A-Z0-9]{6}$').hasMatch(ifsc);
    if (!isValidFormat) {
      bankNameController.clear();
      branchNameController.clear();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(AppLocalizations.of(context).invalidIfscFormat)),
      );
      return;
    }
    await Future.delayed(
      const Duration(seconds: 2),
    ); //Mock delay for 2 sec to imitate api call
    // 🔹 Mock IFSC lookup (you can replace this with API)
    const mockIfscData = {
      'KCCB0001234': {
        'bank': 'Kangra Central Co-operative Bank',
        'branch': 'Dharamshala',
      },
      'SBIN0004567': {
        'bank': 'State Bank of India',
        'branch': 'Connaught Place',
      },
    };

    if (mockIfscData.containsKey(ifsc)) {
      final data = mockIfscData[ifsc]!;
      bankNameController.text = data['bank']!;
      branchNameController.text = data['branch']!;
    } else {
      bankNameController.clear();
      branchNameController.clear();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(AppLocalizations.of(context).noIfscDetails)),
      );
    }

    /*
  🔸 Optional: Use real IFSC API like:
  final response = await http.get(Uri.parse('https://ifsc.razorpay.com/$ifsc'));
  if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      bankNameController.text = data['BANK'];
      branchNameController.text = data['BRANCH'];
  }
  */
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Symbols.arrow_back_ios_new),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: Text(
          AppLocalizations.of(context).addBeneficiary,
          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: InputDecoration(
                            labelText: AppLocalizations.of(
                              context,
                            ).accountNumber,
                            // prefixIcon: Icon(Icons.person),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Theme.of(context).scaffoldBackgroundColor,
                            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 AppLocalizations.of(
                                context,
                              ).enterValidAccountNumber;
                            }
                            return null;
                          },
                        ),
                        const SizedBox(height: 24),
                        // Confirm Account Number
                        TextFormField(
                          controller: confirmAccountNumberController,
                          decoration: InputDecoration(
                            labelText: AppLocalizations.of(
                              context,
                            ).confirmAccountNumber,
                            // prefixIcon: Icon(Icons.person),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Theme.of(context).scaffoldBackgroundColor,
                            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 AppLocalizations.of(
                                context,
                              ).reenterAccountNumber;
                            }
                            if (value != accountNumberController.text) {
                              return AppLocalizations.of(
                                context,
                              ).accountMismatch;
                            }
                            return null;
                          },
                        ),
                        const SizedBox(height: 24),
                        TextFormField(
                          controller: nameController,
                          decoration: InputDecoration(
                            labelText: AppLocalizations.of(context).name,
                            // prefixIcon: Icon(Icons.person),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Theme.of(context).dialogBackgroundColor,
                            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
                              ? AppLocalizations.of(context).nameRequired
                              : 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),
                        // 🔹 IFSC Code Field
                        TextFormField(
                          controller: ifscController,
                          decoration: InputDecoration(
                            labelText: AppLocalizations.of(context).ifscCode,
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Theme.of(context).scaffoldBackgroundColor,
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: Colors.black,
                                width: 2,
                              ),
                            ),
                          ),
                          textCapitalization: TextCapitalization.characters,
                          textInputAction: TextInputAction.next,
                          onFieldSubmitted: (_) {
                            _validateIFSC();
                          },
                          onChanged: (value) {
                            final trimmed = value.trim().toUpperCase();
                            if (trimmed.length < 11) {
                              // clear bank/branch if backspace or changed
                              bankNameController.clear();
                              branchNameController.clear();
                            }
                          },
                          validator: (value) {
                            final pattern = RegExp(r'^[A-Z]{4}0[A-Z0-9]{6}$');
                            if (value == null || value.trim().isEmpty) {
                              return AppLocalizations.of(context).enterIfsc;
                            } else if (!pattern.hasMatch(
                              value.trim().toUpperCase(),
                            )) {
                              return AppLocalizations.of(
                                context,
                              ).invalidIfscFormat;
                            }
                            return null;
                          },
                        ),

                        const SizedBox(height: 24),
                        // 🔹 Bank Name (Disabled)
                        TextFormField(
                          controller: bankNameController,
                          enabled: false, // changed from readOnly to disabled
                          decoration: InputDecoration(
                            labelText: AppLocalizations.of(context).bankName,
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Theme.of(context).dialogBackgroundColor, // disabled color
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: Colors.black,
                                width: 2,
                              ),
                            ),
                          ),
                        ),

                        const SizedBox(height: 24),
                        // 🔹 Branch Name (Disabled)
                        TextFormField(
                          controller: branchNameController,
                          enabled: false, // changed from readOnly to disabled
                          decoration: InputDecoration(
                            labelText: AppLocalizations.of(context).branchName,
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Theme.of(context).dialogBackgroundColor,
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: Colors.black,
                                width: 2,
                              ),
                            ),
                          ),
                        ),

                        const SizedBox(height: 24),
                        // 🔹 Account Type Dropdown
                        DropdownButtonFormField<String>(
                          value: accountType,
                          decoration: InputDecoration(
                            labelText: AppLocalizations.of(context).accountType,
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Theme.of(context).scaffoldBackgroundColor,
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: Colors.black,
                                width: 2,
                              ),
                            ),
                          ),
                          items:
                              [
                                    AppLocalizations.of(context).savings,
                                    AppLocalizations.of(context).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: InputDecoration(
                            labelText: AppLocalizations.of(context).phone,
                            prefixIcon: Icon(Icons.phone),
                            border: OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor: Theme.of(context).scaffoldBackgroundColor,
                            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
                              ? AppLocalizations.of(context).enterValidPhone
                              : 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: Theme.of(context).primaryColorDark,
                      foregroundColor: Theme.of(context).scaffoldBackgroundColor,
                    ),
                    child: Text(AppLocalizations.of(context).validateAndAdd),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}