import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:supplier_new/orders/unloading_inprogress.dart';

import '../common/settings.dart';
import 'all_orders.dart';

class UnloadArrivalScreen extends StatefulWidget {

  var details;

  UnloadArrivalScreen({
    this.details
  });
  @override
  State<UnloadArrivalScreen> createState() => _UnloadArrivalScreenState();
}

class _UnloadArrivalScreenState extends State<UnloadArrivalScreen> with TickerProviderStateMixin{
  final _c1 = TextEditingController();
  final _c2 = TextEditingController();
  final _c3 = TextEditingController();
  final _c4 = TextEditingController();

  final _f1 = FocusNode();
  final _f2 = FocusNode();
  final _f3 = FocusNode();
  final _f4 = FocusNode();

  bool get _otpReady =>
      _c1.text.isNotEmpty &&
          _c2.text.isNotEmpty &&
          _c3.text.isNotEmpty &&
          _c4.text.isNotEmpty;

  late AnimationController _shakeController;
  late Animation<double> _offsetAnimation;
  bool _isOtpComplete = false;

  void _checkOtpFilled() {
    setState(() {
      _isOtpComplete =
          _c1.text.isNotEmpty &&
              _c2.text.isNotEmpty &&
              _c3.text.isNotEmpty &&
              _c4.text.isNotEmpty;
    });
  }

  @override
  void dispose() {
    _c1.dispose();
    _c2.dispose();
    _c3.dispose();
    _c4.dispose();
    _f1.dispose();
    _f2.dispose();
    _f3.dispose();
    _f4.dispose();
    _shakeController.dispose();
    super.dispose();
  }
  @override
  void initState() {
    super.initState();

    _shakeController = AnimationController(
      duration: const Duration(milliseconds: 450),
      vsync: this,
    );

    _offsetAnimation = Tween(begin: 0.0, end: 15.0)
        .chain(CurveTween(curve: Curves.elasticIn))
        .animate(_shakeController);
  }


  void _onDigit({
    required String value,
    required FocusNode current,
    FocusNode? next,
    FocusNode? prev,
  }) {
    if (value.length == 1 && next != null) {
      next.requestFocus();
    } else if (value.isEmpty && prev != null) {
      prev.requestFocus();
    }
    setState(() {});
  }

  InputDecoration _otpDecoration(bool focused) => InputDecoration(
    counterText: '',
    contentPadding: const EdgeInsets.symmetric(vertical: 14),
    filled: true,
    fillColor: Colors.white,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: const BorderSide(color: Color(0xFFE0E0E0)),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: const BorderSide(color: Colors.black, width: 1.2),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return
      WillPopScope(
          onWillPop: () async {
            Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(builder: (_) => AllOrders(navigationFrom:"")),
                  (route) => false,
            );
            return false;},
          child:Scaffold(
            backgroundColor: Colors.white,
            appBar: AppSettings.appBarWithNotificationIcon(widget.details.building_name, widget.details.type_of_water, widget.details.capacity, context),

            body: Stack(
              children: [
                // Map background
                Positioned.fill(
                  child: Image.asset(
                    'images/google_maps.png', // make sure this exists & is declared in pubspec.yaml
                    fit: BoxFit.cover,
                  ),
                ),

                // Success text
                Positioned(
                  left: 16,
                  right: 16,
                  top: 8,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 24, left: 8),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('You have reached!',
                            style: fontTextStyle(
                                20, const Color(0xFF101214), FontWeight.w600)),
                        const SizedBox(height: 4),
                        Text('Hurray! You are on-time.',
                            style: fontTextStyle(
                                16, const Color(0xFF0A9E04), FontWeight.w500)),
                      ],
                    ),
                  ),
                ),

                // Center card (nudged up)
                Align(
                  alignment: const Alignment(0, -0.6),
                  child: Container(
                    width: MediaQuery.of(context).size.width * 0.86,
                    padding: const EdgeInsets.fromLTRB(16, 18, 16, 16),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(16),
                      boxShadow: const [
                        BoxShadow(
                            color: Colors.black12,
                            blurRadius: 10,
                            offset: Offset(0, 4))
                      ],
                    ),
                    child: widget.details.tank_name!=''?Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(widget.details.tank_name!=''?"Unload Water in":'The user hasn’t selected a tank. Please ask the user to select one.',
                            textAlign: TextAlign.center,
                            style: fontTextStyle(
                                16, const Color(0xFF939495), FontWeight.w500)),
                        const SizedBox(height: 4),
                        Visibility(
                          visible: widget.details.tank_name!='',
                          child:  Text(widget.details.tank_name,
                              style: fontTextStyle(
                                  20, const Color(0xFF101214), FontWeight.w600)),),

                        const SizedBox(height: 14),

                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text('Enter OTP to Start Unloading',
                                style: fontTextStyle(14, const Color(0xFF646566),
                                    FontWeight.w500)),
                            const SizedBox(width: 6),
                            Icon(Icons.help_outline,
                                size: 16, color: Colors.grey.shade600),
                          ],
                        ),

                        const SizedBox(height: 14),

                        // OTP boxes
                        AnimatedBuilder(
                          animation: _shakeController,
                          builder: (context, child) {
                            return Transform.translate(
                              offset: Offset(_offsetAnimation.value, 0),
                              child: child,
                            );
                          },
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              _OtpBox(
                                controller: _c1,
                                focusNode: _f1,
                                onChanged: (v){
                                  _onDigit(value: v, current: _f1, next: _f2);
                                  _checkOtpFilled();
                                },
                                //onChanged: (v) => _onDigit(value: v, current: _f1, next: _f2),
                                decoration: _otpDecoration(_f1.hasFocus),
                              ),
                              _OtpBox(
                                controller: _c2,
                                focusNode: _f2,
                                onChanged: (v){
                                  _onDigit(value: v, current: _f2, next: _f3, prev: _f1);
                                  _checkOtpFilled();
                                },
                                decoration: _otpDecoration(_f2.hasFocus),
                              ),
                              _OtpBox(
                                controller: _c3,
                                focusNode: _f3,
                                onChanged: (v){
                                  _onDigit(value: v, current: _f3, next: _f4, prev: _f2);
                                  _checkOtpFilled();
                                },
                                decoration: _otpDecoration(_f3.hasFocus),
                              ),
                              _OtpBox(
                                controller: _c4,
                                focusNode: _f4,
                                onChanged: (v){
                                  _onDigit(value: v, current: _f4, prev: _f3);
                                  _checkOtpFilled();
                                },
                                decoration: _otpDecoration(_f4.hasFocus),
                              ),
                            ],
                          ),
                        ),


                        const SizedBox(height: 16),

                        // Continue button -> navigate to UnloadingInProgressScreen
                        SizedBox(
                          width: double.infinity,
                          height: 48,
                          child: ElevatedButton(
                            onPressed: _isOtpComplete ? () async {
                              if (!_otpReady) return;

                              AppSettings.preLoaderDialog(context);

                              bool isOnline = await AppSettings.internetConnectivity();
                              if (!isOnline) {
                                Navigator.of(context, rootNavigator: true).pop();
                                AppSettings.longFailedToast("Please Check Internet");
                                return;
                              }

                              // Combine OTP
                              final otp = "${_c1.text}${_c2.text}${_c3.text}${_c4.text}";

                              var payload = {
                                "action": "start",
                                "percentage": "100",
                                "otp": otp,
                              };

                              // 🔥 Call API
                              var response = await AppSettings.verifyUnloadStartOTP(
                                  widget.details.bookingid,
                                  payload
                              );

                              Navigator.of(context, rootNavigator: true).pop(); // CLOSE LOADER

                              if (response.isNotEmpty) {
                                // Decode JSON
                                var json = jsonDecode(response);

                                if (json["status_code"] == 200) {
                                  // OTP VERIFIED → NAVIGATE
                                  FocusScope.of(context).unfocus();
                                  await Future.delayed(const Duration(milliseconds: 100));
                                  Navigator.pushAndRemoveUntil(
                                    context,
                                    MaterialPageRoute(builder: (_) => UnloadingInProgressScreen(details: widget.details)),
                                        (route) => false,
                                  );
                                } else {

                                  _shakeController.forward(from: 0);      // 🔥 SHAKES OTP BOXES
                                  Future.delayed(const Duration(milliseconds: 300), () {
                                    _c1.clear();
                                    _c2.clear();
                                    _c3.clear();
                                    _c4.clear();

                                    _f1.requestFocus();     // Move focus back to first box
                                    _checkOtpFilled();       // Disable button again
                                  });
                                  AppSettings.longFailedToast(json["msg"] ?? "Invalid OTP");
                                  return;
                                }
                              } else {
                                AppSettings.longFailedToast("Something went wrong");
                              }
                            } : null,
                            style: ButtonStyle(
                              backgroundColor:
                              MaterialStateProperty.resolveWith((_) => Colors.black),
                              foregroundColor:
                              MaterialStateProperty.resolveWith((_) => Colors.white),
                              shape: MaterialStateProperty.all(
                                RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(28)),
                              ),
                            ),
                            child: Text('Continue',
                                style: fontTextStyle(
                                    16, const Color(0xFFFFFFFF), FontWeight.w400)),
                          ),
                        ),
                      ],
                    ):
                    Text(widget.details.tank_name!=''?"Unload Water in":'The user hasn’t selected a tank. Please ask the user to select one.',
                        textAlign: TextAlign.center,
                        style: fontTextStyle(
                            16, const Color(0xFF939495), FontWeight.w500)),
                  ),
                ),
              ],
            ),
          ));
  }
}

class _OtpBox extends StatelessWidget {
  final TextEditingController controller;
  final FocusNode focusNode;
  final ValueChanged<String> onChanged;
  final InputDecoration decoration;

  const _OtpBox({
    required this.controller,
    required this.focusNode,
    required this.onChanged,
    required this.decoration,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 54,
      child: TextField(
        controller: controller,
        focusNode: focusNode,
        textAlign: TextAlign.center,
        keyboardType: TextInputType.number,
        maxLength: 1,
        inputFormatters: [FilteringTextInputFormatter.digitsOnly],
        decoration: decoration,
        onChanged: onChanged,
      ),
    );
  }
}
