import 'dart:math';
import 'package:flutter/material.dart';

class WaitingScreen extends StatefulWidget {
  const WaitingScreen({super.key});

  @override
  State<WaitingScreen> createState() => _WaitingScreenState();
}

class _WaitingScreenState extends State<WaitingScreen>
    with SingleTickerProviderStateMixin {
  late final AnimationController _ctrl;
  late final Animation<double> _anim;

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

    _ctrl = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 1200));

    _anim = Tween<double>(begin: 0.0, end: pi).animate(
        CurvedAnimation(parent: _ctrl, curve: Curves.easeInOut));

    _ctrl.repeat();
  }

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }

  Matrix4 _buildTransform(double value) {
    return Matrix4.identity()
      ..setEntry(3, 2, 0.001)
      ..rotateX(value);
  }

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

    /// ⭐ Universal scaling factor for responsiveness
    final scale = (width / 390).clamp(0.85, 1.3);

    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            /// BACK BUTTON
            Positioned(
              top: 12 * scale,
              left: 12 * scale,
              child: GestureDetector(
                onTap: () => Navigator.pop(context),
                child: Container(
                  height: 42 * scale,
                  width: 42 * scale,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                      colors: [
                        Color(0xFF0D47A1),
                        Color(0xFF6A1B9A),
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                  child: Icon(Icons.arrow_back,
                      color: Colors.white, size: 20 * scale),
                ),
              ),
            ),

            /// MAIN WHITE BOX
            Center(
              child: Container(
                width: width * 0.90,
                padding: EdgeInsets.symmetric(
                    horizontal: 20 * scale, vertical: 30 * scale),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(16 * scale),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.10),
                      blurRadius: 14 * scale,
                      offset: Offset(0, 4 * scale),
                    ),
                  ],
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    /// FLIPPING ICON
                    SizedBox(
                      height: 92 * scale,
                      child: AnimatedBuilder(
                        animation: _anim,
                        builder: (context, child) {
                          final angle = _anim.value;
                          final isBack = angle > (pi / 2);

                          return Transform(
                            transform: _buildTransform(angle),
                            alignment: Alignment.center,
                            child: Transform(
                              transform: isBack
                                  ? Matrix4.rotationY(pi)
                                  : Matrix4.identity(),
                              alignment: Alignment.center,
                              child: child,
                            ),
                          );
                        },
                        child: Icon(
                          Icons.hourglass_top,
                          size: 72 * scale,
                          color: Colors.indigo,
                        ),
                      ),
                    ),

                    SizedBox(height: 16 * scale),

                    Text(
                      "Request Submitted",
                      style: TextStyle(
                          fontSize: 22 * scale,
                          fontWeight: FontWeight.w600),
                      textAlign: TextAlign.center,
                    ),

                    SizedBox(height: 10 * scale),

                    Text(
                      "Signup request submitted successfully.",
                      style: TextStyle(
                          fontSize: 18 * scale,
                          fontWeight: FontWeight.w500),
                      textAlign: TextAlign.center,
                    ),

                    SizedBox(height: 8 * scale),

                    Text(
                      "Please wait up to 24 hours for admin approval. You will receive an email once approved.",
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 14 * scale),
                    ),

                    SizedBox(height: 24 * scale),

                    /// BUTTON WITH GRADIENT WRAPPER
                    Container(
                      decoration: BoxDecoration(
                        gradient: const LinearGradient(
                          colors: [
                            Color(0xFF0D47A1),
                            Color(0xFF6A1B9A),
                          ],
                        ),
                        borderRadius: BorderRadius.circular(12 * scale),
                      ),
                      child: ElevatedButton(
                        onPressed: () {
                          Navigator.of(context)
                              .popUntil((route) => route.isFirst);
                        },
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.transparent,
                          shadowColor: Colors.transparent,
                          foregroundColor: Colors.white,
                          padding: EdgeInsets.symmetric(
                              horizontal: 20 * scale,
                              vertical: 14 * scale),
                          shape: RoundedRectangleBorder(
                            borderRadius:
                            BorderRadius.circular(12 * scale),
                          ),
                        ),
                        child: Text(
                          "Back to Home",
                          style: TextStyle(fontSize: 16 * scale),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}