import 'package:flutter/material.dart';
import 'package:kmobile/api/services/limit_service.dart';
import '../../../di/injection.dart';
import '../../../l10n/app_localizations.dart';

class ChangeLimitOTPScreen extends StatefulWidget {
  final String newLimit;
  final String mobileNumber;

  // ignore: use_key_in_widget_constructors
  const ChangeLimitOTPScreen({
    required this.newLimit,
    required this.mobileNumber,
  });

  @override
  State<ChangeLimitOTPScreen> createState() => _ChangeLimitOTPScreenState();
}

class _ChangeLimitOTPScreenState extends State<ChangeLimitOTPScreen> {
  bool _isLoading = true;
  final TextEditingController otpController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // Simulate OTP sending delay
    Future.delayed(const Duration(seconds: 2), () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  final limitService = getIt<LimitService>();
  Future<void> _validateOTP() async {
    try {
      await limitService.validateOtp(
        otp: otpController.text,
        mobileNumber: widget.mobileNumber,
      );

      // If OTP is valid, then change the limit
      limitService.editLimit(
        double.parse(widget.newLimit),
      );

      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text("Limit has been Changed"),
      ));

      // Navigate back to profile or login
      Navigator.of(context).popUntil((route) => route.isFirst);
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(AppLocalizations.of(context).invalidOtp)),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(AppLocalizations.of(context).otpVerification)),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: _isLoading
                ? const Center(child: CircularProgressIndicator())
                : Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        AppLocalizations.of(context).otpSent,
                        textAlign: TextAlign.center,
                        style: const TextStyle(fontSize: 16),
                      ),
                      const SizedBox(height: 24),
                      TextFormField(
                        controller: otpController,
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          labelText: AppLocalizations.of(context).enterOTP,
                          border: const OutlineInputBorder(),
                        ),
                      ),
                      const SizedBox(height: 24),
                      SizedBox(
                        width: double.infinity,
                        child: ElevatedButton(
                          onPressed: _validateOTP,
                          style: ElevatedButton.styleFrom(
                            padding: const EdgeInsets.symmetric(vertical: 16),
                          ),
                          child: Text(AppLocalizations.of(context).validateOTP),
                        ),
                      ),
                    ],
                  ),
          ),
          IgnorePointer(
            child: Center(
              child: Opacity(
                opacity: 0.07, // Reduced opacity
                child: ClipOval(
                  child: Image.asset(
                    'assets/images/logo.png',
                    width: 200, // Adjust size as needed
                    height: 200, // Adjust size as needed
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}