import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gen_rentals/Screens/DashboardScreen.dart';
import 'package:provider/provider.dart';
import '../../Notifier/RentalContactProvider .dart';
import '../../Utility/AdvancedSnackbar.dart';
import '../../Utility/CustomSnackbar.dart';
import '../../Utility/SharedpreferencesService.dart';

class OtpScreen extends StatefulWidget {
  final String mob; // phone number

  const OtpScreen({
    super.key,
    required this.mob,
  });

  @override
  State<OtpScreen> createState() => _OtpScreenState();
}

class _OtpScreenState extends State<OtpScreen> {
  final prefs = SharedPreferencesService.instance;
  final List<TextEditingController> _controllers =
  List.generate(4, (_) => TextEditingController());
  final List<FocusNode> _focusNodes = List.generate(4, (_) => FocusNode());
  bool _isValid = false;
  bool _isVerifying = false;
  bool _isResending = false;
  int _secondsRemaining = 22;

  @override
  void initState() {
    super.initState();
    _startTimer();
  }

  @override
  void dispose() {
    for (var controller in _controllers) {
      controller.dispose();
    }
    for (var focusNode in _focusNodes) {
      focusNode.dispose();
    }
    super.dispose();
  }

  void _startTimer() {
    Future.doWhile(() async {
      if (_secondsRemaining > 0) {
        await Future.delayed(const Duration(seconds: 1));
        if (mounted) {
          setState(() => _secondsRemaining--);
        }
        return true;
      }
      return false;
    });
  }

  void _onOtpChange() {
    final otp = _controllers.map((c) => c.text).join();
    setState(() {
      _isValid = otp.length == 4 && RegExp(r'^[0-9]{4}$').hasMatch(otp);
    });
  }

  Future<void> _verifyOtp() async {
    final rentalProvider = Provider.of<RentalProvider>(context, listen: false);
    final enteredOtp = _controllers.map((c) => c.text).join();

    setState(() => _isVerifying = true);

    try {
      // Remove .toString() since enteredOtp is already a string
      await rentalProvider.fetchMobileOtp(widget.mob, enteredOtp);

      if (rentalProvider.otpResponse != null) {
        if (rentalProvider.otpResponse?.error == "0") {
          // ✅ OTP verified successfully
          if (!mounted) return;

          AnimatedSnackBar.success(
            context: context,
            title: "Success",
            message: rentalProvider.otpResponse?.message ?? "OTP Verified Successfully!",
          );

          // Saving staff id after verification
          // Added null check for accId
          if (rentalProvider.otpResponse?.accId != null) {
            await prefs.saveString("accId", rentalProvider.otpResponse!.accId!);
            await prefs.saveString("session_id", rentalProvider.otpResponse!.sessionId!);
            await prefs.saveString("mob_number", widget.mob);
          }

          // Navigate to dashboard
          Navigator.pushReplacement(
            context,
            PageRouteBuilder(
              pageBuilder: (_, __, ___) => DashboardScreen(accId: rentalProvider.otpResponse!.accId!, sessionId: rentalProvider.otpResponse!.sessionId.toString(),),
              transitionsBuilder: (_, animation, __, child) {
                return FadeTransition(
                  opacity: animation,
                  child: child,
                );
              },
              transitionDuration: const Duration(milliseconds: 800),
            ),
          );
        } else {
          // ❌ Invalid OTP
          CustomSnackBar.showError(
            context: context,
            title: "Error",
            message: rentalProvider.otpResponse?.errorMsg ??
                rentalProvider.otpResponse?.message ??
                "Invalid OTP. Please try again.",
          );
        }
      } else {
        // ❌ API Error - Response is null
        CustomSnackBar.showError(
          context: context,
          title: "Error",
          message: "Failed to verify OTP. Please try again.",
        );
      }
    } catch (e) {
      // ❌ Network Error
      CustomSnackBar.showError(
        context: context,
        title: "Network Error",
        message: e.toString(),
      );
    } finally {
      if (mounted) setState(() => _isVerifying = false);
    }
  }

  /// 🔁 Resend OTP Function
  Future<void> _resendOtp(BuildContext context) async {
    setState(() => _isResending = true);

    try {
      final rentalProvider = Provider.of<RentalProvider>(context, listen: false);

      // Call the mobile API again to get new OTP
      await rentalProvider.fetchRentalMobile(widget.mob);

      if (rentalProvider.response != null && rentalProvider.response?.error == "0") {
        // ✅ Successfully resent OTP
        AnimatedSnackBar.success(
          context: context,
          title: "OTP Sent",
          message: rentalProvider.response?.message ?? "OTP has been sent to your mobile number.",
        );

        // Reset timer and clear fields
        setState(() {
          _secondsRemaining = 22;
        });

        // Clear previous OTP fields
        for (var controller in _controllers) {
          controller.clear();
        }
        setState(() {
          _isValid = false;
        });

        // Restart timer
        _startTimer();

      } else {
        // ❌ Failed to resend OTP
        CustomSnackBar.showWarning(
          context: context,
          title: "Error",
          message: rentalProvider.response?.errorMsg ??
              rentalProvider.response?.message ??
              "Failed to resend OTP",
        );
      }
    } catch (e) {
      CustomSnackBar.showError(
        context: context,
        title: "Network Error",
        message: e.toString(),
      );
    } finally {
      if (mounted) setState(() => _isResending = false);
    }
  }

  Widget _buildOtpField(int index) {
    return SizedBox(
      width: 60,
      height: 60,
      child: TextField(
        controller: _controllers[index],
        focusNode: _focusNodes[index],
        keyboardType: TextInputType.number,
        textAlign: TextAlign.center,
        maxLength: 1,
        style: const TextStyle(
          fontSize: 24,
          color: Colors.black,
          fontWeight: FontWeight.w600,
        ),
        decoration: InputDecoration(
          counterText: "",
          filled: true,
          fillColor: Colors.white,
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(60),
            borderSide: BorderSide(color: Colors.grey.withOpacity(0.5), width: 1),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(60),
            borderSide: const BorderSide(color: Color(0xFF008CDE), width: 2),
          ),
        ),
        onChanged: (value) {
          _onOtpChange();
          if (value.isNotEmpty && index < 3) {
            FocusScope.of(context).requestFocus(_focusNodes[index + 1]);
          } else if (value.isEmpty && index > 0) {
            FocusScope.of(context).requestFocus(_focusNodes[index - 1]);
          }
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        Navigator.pop(context);
        return false; // Prevents app from closing
      },
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        body: GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Stack(
            children: [
              // Background image
              Positioned.fill(
                child: Image.asset(
                  'assets/images/login_background.png',
                  fit: BoxFit.cover,
                ),
              ),

              // Overlay
              Positioned.fill(
                child: Container(color: Colors.black.withOpacity(0.5)),
              ),

              // Gradient overlay
              Positioned.fill(
                child: Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.transparent, Colors.black54, Colors.black87],
                    ),
                  ),
                ),
              ),

              // Foreground content
              SingleChildScrollView(
                padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom + 20,
                ),
                child: ConstrainedBox(
                  constraints:
                  BoxConstraints(minHeight: MediaQuery.of(context).size.height),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      const SizedBox(height: 40),
                      const Padding(
                        padding: EdgeInsets.symmetric(horizontal: 24),
                        child: Text(
                          "Rental Power,\nManaged in a Tap",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: "Poppins",
                            color: Colors.white,
                            fontSize: 32,
                            fontWeight: FontWeight.w500,
                            height: 1.3,
                          ),
                        ),
                      ),
                      const SizedBox(height: 40),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 24),
                        child: Text(
                          "Enter the OTP sent to +91 ${widget.mob}",
                          textAlign: TextAlign.center,
                          style: const TextStyle(
                            fontFamily: "Poppins",
                            color: Colors.white70,
                            fontSize: 14,
                          ),
                        ),
                      ),
                      const SizedBox(height: 30),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 24),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: List.generate(4, _buildOtpField),
                        ),
                      ),
                      const SizedBox(height: 20),

                      // Resend OTP
                      TextButton(
                        onPressed: _secondsRemaining == 0 && !_isResending
                            ? () => _resendOtp(context)
                            : null,
                        child: _isResending
                            ? const SizedBox(
                          width: 20,
                          height: 20,
                          child: CircularProgressIndicator(
                            strokeWidth: 2,
                            color: Colors.white,
                          ),
                        )
                            : Text(
                          _secondsRemaining == 0
                              ? "Resend OTP"
                              : "Resend OTP in $_secondsRemaining s",
                          style: TextStyle(
                            color: _secondsRemaining == 0
                                ? const Color(0xFF008CDE)
                                : Colors.white70,
                            fontSize: 14,
                            decorationColor: Color(0xFF008CDE),
                            decoration: _secondsRemaining == 0
                                ? TextDecoration.underline
                                : TextDecoration.none,
                          ),
                        ),
                      ),

                      const SizedBox(height: 30),

                      // Continue Button
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 24),
                        child: SizedBox(
                          width: double.infinity,
                          child: ElevatedButton(
                            onPressed: _isValid && !_isVerifying ? _verifyOtp : null,
                            style: ElevatedButton.styleFrom(
                              backgroundColor: _isValid
                                  ? const Color(0xFF008CDE)
                                  : const Color(0xFF266E99),
                              foregroundColor: Colors.white,
                              disabledBackgroundColor: const Color(0xFF266E99),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(30),
                              ),
                              padding: const EdgeInsets.symmetric(vertical: 16),
                            ),
                            child: _isVerifying
                                ? const SizedBox(
                              width: 22,
                              height: 22,
                              child: CircularProgressIndicator(
                                strokeWidth: 2,
                                color: Colors.white,
                              ),
                            )
                                : Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 22),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    "Continue",
                                    style: TextStyle(
                                      fontFamily: "Poppins",
                                      color: _isValid
                                          ? Colors.white
                                          : const Color(0xFF03456C),
                                      fontSize: 16,
                                    ),
                                  ),
                                  SvgPicture.asset(
                                    "assets/svg/continue_ic.svg",
                                    color: _isValid
                                        ? Colors.white
                                        : const Color(0xFF03456C),
                                    height: 25,
                                    width: 25,
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(height: 40),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
