import '../../../l10n/app_localizations.dart';

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

class QuickPayOutsideBankScreen extends StatefulWidget {
  final String debitAccount;
  const QuickPayOutsideBankScreen({super.key, required this.debitAccount});

  @override
  State<QuickPayOutsideBankScreen> createState() =>
      _QuickPayOutsideBankScreen();
}

class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
  final _formKey = GlobalKey<FormState>();

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

  //String accountType = 'Savings';
  late String accountType;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        accountType = AppLocalizations.of(context).savings;
      });
    });
  }

  //final List<String> transactionModes = ['NEFT', 'RTGS', 'IMPS'];
  List<String> transactionModes(BuildContext context) {
    return [
      AppLocalizations.of(context).neft,
      AppLocalizations.of(context).rtgs,
      AppLocalizations.of(context).imps,
    ];
  }

  int selectedTransactionIndex = 0;

  @override
  void dispose() {
    // Dispose controllers
    accountNumberController.dispose();
    confirmAccountNumberController.dispose();
    nameController.dispose();
    bankNameController.dispose();
    branchNameController.dispose();
    ifscController.dispose();
    phoneController.dispose();
    amountController.dispose();
    super.dispose();
  }

  @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).quickPayOutsideBank,
          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: Padding(
        padding: const EdgeInsets.all(12),
        child: Form(
          key: _formKey,
          child: ListView(
            children: [
              const SizedBox(height: 10),
              Row(
                children: [
                  Text(AppLocalizations.of(context).debitFrom),
                  Text(
                    widget.debitAccount,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 20),
              TextFormField(
                decoration: InputDecoration(
                  labelText: AppLocalizations.of(context).accountNumber,
                  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),
                  ),
                ),
                controller: accountNumberController,
                keyboardType: TextInputType.number,
                obscureText: true,
                textInputAction: TextInputAction.next,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return AppLocalizations.of(context).accountNumberRequired;
                  } else if (value.length != 11) {
                    return AppLocalizations.of(context).validAccountNumber;
                  }
                  return null;
                },
              ),
              const SizedBox(height: 24),
              TextFormField(
                controller: confirmAccountNumberController,
                decoration: InputDecoration(
                  labelText: AppLocalizations.of(context).confirmAccountNumber,
                  // 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 AppLocalizations.of(context).reenterAccountNumber;
                  }
                  if (value != accountNumberController.text) {
                    return AppLocalizations.of(context).accountMismatch;
                  }
                  return null;
                },
              ),
              const SizedBox(height: 25),
              TextFormField(
                decoration: InputDecoration(
                  labelText: AppLocalizations.of(context).name,
                  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),
                  ),
                ),
                controller: nameController,
                keyboardType: TextInputType.name,
                textInputAction: TextInputAction.next,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return AppLocalizations.of(context).nameRequired;
                  }
                  return null;
                },
              ),
              const SizedBox(height: 25),
              TextFormField(
                decoration: InputDecoration(
                  labelText: AppLocalizations.of(context).bankName,
                  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),
                  ),
                ),
                controller: bankNameController,
                textInputAction: TextInputAction.next,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return AppLocalizations.of(context).bankNameRequired;
                  }
                  return null;
                },
              ),
              const SizedBox(height: 25),
              TextFormField(
                decoration: InputDecoration(
                  labelText: AppLocalizations.of(context).branchName,
                  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),
                  ),
                ),
                controller: branchNameController,
                textInputAction: TextInputAction.next,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return AppLocalizations.of(context).branchNameRequired;
                  }
                  return null;
                },
              ),
              const SizedBox(height: 25),
              Row(
                children: [
                  Expanded(
                    child: TextFormField(
                      decoration: InputDecoration(
                        labelText: AppLocalizations.of(context).ifscCode,
                        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),
                        ),
                      ),
                      controller: ifscController,
                      textInputAction: TextInputAction.next,
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return AppLocalizations.of(context).ifscRequired;
                        }
                        return null;
                      },
                    ),
                  ),
                  const SizedBox(width: 10),
                  Expanded(
                    child: DropdownButtonFormField<String>(
                      value: accountType,
                      decoration: InputDecoration(
                        labelText: AppLocalizations.of(context).accountType,
                        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:
                          [
                                AppLocalizations.of(context).savings,
                                AppLocalizations.of(context).current,
                              ]
                              .map(
                                (e) =>
                                    DropdownMenuItem(value: e, child: Text(e)),
                              )
                              .toList(),
                      onChanged: (value) => setState(() {
                        accountType = value!;
                      }),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 25),
              Row(
                children: [
                  Expanded(
                    child: TextFormField(
                      controller: phoneController,
                      keyboardType: TextInputType.phone,
                      decoration: InputDecoration(
                        labelText: AppLocalizations.of(context).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.next,
                      validator: (value) => value == null || value.isEmpty
                          ? AppLocalizations.of(context).phoneRequired
                          : null,
                    ),
                  ),
                  const SizedBox(width: 10),
                  Expanded(
                    child: TextFormField(
                      decoration: InputDecoration(
                        labelText: AppLocalizations.of(context).amount,
                        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),
                        ),
                      ),
                      controller: amountController,
                      keyboardType: TextInputType.number,
                      textInputAction: TextInputAction.next,
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return AppLocalizations.of(context).amountRequired;
                        }
                        final amount = double.tryParse(value);
                        if (amount == null || amount <= 0) {
                          return AppLocalizations.of(context).validAmount;
                        }
                        return null;
                      },
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 30),
              Row(
                children: [
                  Text(
                    AppLocalizations.of(context).transactionMode,
                    style: TextStyle(fontWeight: FontWeight.w500),
                  ),
                  const SizedBox(width: 12),
                  Expanded(child: buildTransactionModeSelector()),
                ],
              ),
              const SizedBox(height: 45),
              Align(
                alignment: Alignment.center,
                child: SwipeButton.expand(
                  thumb: const Icon(Icons.arrow_forward, color: Colors.white),
                  activeThumbColor: Colors.blue[900],
                  activeTrackColor: Colors.blue.shade100,
                  borderRadius: BorderRadius.circular(30),
                  height: 56,
                  child: Text(
                    AppLocalizations.of(context).swipeToPay,
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                  ),
                  onSwipe: () {
                    if (_formKey.currentState!.validate()) {
                      // Perform payment logic
                      final selectedMode = transactionModes(
                        context,
                      )[selectedTransactionIndex];
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text(
                            '${AppLocalizations.of(context).payingVia} $selectedMode...',
                          ),
                        ),
                      );
                      // Navigator.push(
                      //     context,
                      //     MaterialPageRoute(
                      //         builder: (context) =>
                      //             const TransactionPinScreen(
                      //               transactionData: {},
                      //               transactionCode: 'PAYMENT',
                      //             )));
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildTransactionModeSelector() {
    return Container(
      padding: const EdgeInsets.all(4),
      child: Row(
        children: List.generate(transactionModes(context).length, (index) {
          bool isSelected = selectedTransactionIndex == index;
          return Expanded(
            child: GestureDetector(
              onTap: () {
                setState(() => selectedTransactionIndex = index);
              },
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 4),
                padding: const EdgeInsets.symmetric(vertical: 5),
                decoration: BoxDecoration(
                  color: isSelected ? Colors.blue[200] : Colors.white,
                  borderRadius: BorderRadius.circular(5),
                  border: Border.all(
                    color: isSelected ? Colors.blue : Colors.grey,
                    width: isSelected ? 0 : 1.2,
                  ),
                ),
                alignment: Alignment.center,
                child: Text(
                  transactionModes(context)[index],
                  style: const TextStyle(color: Colors.black),
                ),
              ),
            ),
          );
        }),
      ),
    );
  }
}
