import 'dart:async';
import 'package:flutter/material.dart';
import '/theme/app_theme.dart';
import '/widgets/logo_widget.dart';
import '/screens/home_screen.dart';
import 'package:flutter_otp_text_field/flutter_otp_text_field.dart'; // Correct import for the package

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

  @override
  State<VerificationScreen> createState() => _VerificationScreenState();
}

class _VerificationScreenState extends State<VerificationScreen> {
  late Timer _timer;
  int _start = 59; // Timer duration in seconds
  String _otpCode = "";

  @override
  void initState() {
    super.initState();
    startTimer();
    // Simulate receiving OTP
    print("Simulated OTP for ${widget.phoneNumber}: 123456");
  }

  void startTimer() {
    _start = 59; // Reset timer
    _timer = Timer.periodic(const Duration(seconds: 1), (Timer timer) {
      if (_start == 0) {
        setState(() {
          timer.cancel();
        });
      } else {
        setState(() {
          _start--;
        });
      }
    });
  }

  void _verifyOtp() {
    // Basic OTP check, in a real app, this would be an API call
    if (_otpCode == "123456" || _otpCode.length == 6) {
      // Allowing any 6 digit for demo
      Navigator.pushReplacement(
        // Use pushReplacement to not go back to OTP screen
        context,
        MaterialPageRoute(
          builder:
              (context) => HomeScreen(
                phoneNumber: widget.phoneNumber,
                userName: "Thereza",
              ), // Passing username
        ),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text("Invalid OTP. Please try again.")),
      );
    }
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Card(
                  elevation: 5,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15.0),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(24.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        const AmazonsLogo(),
                        const SizedBox(height: 30),
                        Text(
                          "Enter verification code sent via SMS",
                          textAlign: TextAlign.center,
                          style: Theme.of(
                            context,
                          ).textTheme.bodyLarge?.copyWith(fontSize: 16),
                        ),
                        const SizedBox(height: 20),
                        OtpTextField(
                          numberOfFields: 6,
                          borderColor: AppColors.primaryBlue,
                          focusedBorderColor: AppColors.amazonsOrange,
                          showFieldAsBox: true,
                          fieldWidth: 45,
                          textStyle: const TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                          onCodeChanged: (String code) {
                            //handle validation or checks here if necessary
                          },
                          onSubmit: (String verificationCode) {
                            setState(() {
                              _otpCode = verificationCode;
                            });
                            _verifyOtp();
                          }, // end onSubmit
                        ),
                        const SizedBox(height: 25),
                        SizedBox(
                          width: double.infinity,
                          child: ElevatedButton(
                            onPressed: _verifyOtp,
                            child: const Text("Verify"),
                          ),
                        ),
                        const SizedBox(height: 20),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Resend code in: ",
                              style: Theme.of(context).textTheme.bodyMedium,
                            ),
                            Text(
                              "0:${_start.toString().padLeft(2, '0')} seconds",
                              style: Theme.of(
                                context,
                              ).textTheme.bodyMedium?.copyWith(
                                color: AppColors.primaryBlue,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                        if (_start == 0)
                          TextButton(
                            onPressed: () {
                              // Resend OTP logic here
                              ScaffoldMessenger.of(context).showSnackBar(
                                const SnackBar(
                                  content: Text("OTP Resent (simulated)"),
                                ),
                              );
                              startTimer(); // Restart timer
                            },
                            child: const Text("Resend OTP"),
                          ),
                        const SizedBox(height: 30),
                        Text(
                          "Customer Service",
                          style: Theme.of(
                            context,
                          ).textTheme.titleLarge?.copyWith(fontSize: 16),
                        ),
                        const SizedBox(height: 5),
                        Text(
                          "0702026544 | 0790882866",
                          style: Theme.of(
                            context,
                          ).textTheme.bodyMedium?.copyWith(
                            color: AppColors.primaryBlue,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}