import 'package:flutter/material.dart';
import '../widgets/rounded_input.dart';
import '../widgets/primary_button.dart';
import '../services/request_service.dart';
import 'waiting_screen.dart';

class OtpScreen extends StatefulWidget {
  final Map<String, dynamic> signupPayload;
  const OtpScreen({super.key, required this.signupPayload});

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

class _OtpScreenState extends State<OtpScreen> {
  final otpController = TextEditingController();
  bool verifying = false;

  static const String defaultOtp = '123456';

  void _verifyAndSubmit() async {
    final entered = otpController.text.trim();

    if (entered.length != 6) {
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text('Enter 6 digit OTP')));
      return;
    }

    if (entered != defaultOtp) {
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text('Invalid OTP')));
      return;
    }

    setState(() => verifying = true);
    final res = await RequestService(context).sendSignup(widget.signupPayload);
    setState(() => verifying = false);

    if (res['status'] == true || res['status'] == 'success') {
      Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (_) => const WaitingScreen()));
    } else {
      final message = res['message']?.toString() ?? 'Failed';
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text(message)));
    }
  }

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;

    /// 📌 Universal scale factor for responsiveness
    final scale = (width / 390).clamp(0.85, 1.25);

    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            /// 🔙 Back Button
            Positioned(
              top: 18 * scale,
              left: 18 * scale,
              child: GestureDetector(
                onTap: () => Navigator.pop(context),
                child: Container(
                  height: 42 * scale,
                  width: 42 * scale,
                  decoration: const BoxDecoration(
                    color: Colors.indigo,
                    shape: BoxShape.circle,
                  ),
                  child: Icon(Icons.arrow_back,
                      color: Colors.white, size: 22 * scale),
                ),
              ),
            ),

            /// 🟦 Center Card
            Center(
              child: Container(
                width: width * 0.90,
                padding: EdgeInsets.symmetric(
                    horizontal: 20 * scale, vertical: 28 * scale),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(16 * scale),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.08),
                      blurRadius: 12 * scale,
                      offset: Offset(0, 4 * scale),
                    ),
                  ],
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      "OTP Verification",
                      style: TextStyle(
                        fontSize: 22 * scale,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    SizedBox(height: 10 * scale),

                    Text(
                      "Enter the 6-digit OTP sent to your mobile/email.\n(Default OTP: 123456)",
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 13.5 * scale),
                    ),

                    SizedBox(height: 18 * scale),

                    RoundedInput(
                      controller: otpController,
                      hint: "Enter OTP",
                      keyboardType: TextInputType.number,
                    ),

                    SizedBox(height: 22 * scale),

                    PrimaryButton(
                      label: "Verify & Submit",
                      onTap: _verifyAndSubmit,
                      busy: verifying,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}