import 'dart:async';
import 'package:coda_project/screens/auth_screen.dart';
import 'package:flutter/material.dart';
import '../widgets/onboarding_page.dart';
import '../widgets/onboarding_button.dart';

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

  @override
  State<OnboardingScreen> createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  final PageController controller = PageController();
  int index = 0;

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

    // auto slide
    Timer.periodic(const Duration(seconds: 4), (timer) {
      if (!mounted) return;
      int next = index == 1 ? 0 : index + 1;

      controller.animateToPage(
        next,
        duration: const Duration(milliseconds: 600),
        curve: Curves.easeInOut,
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          /// BACKGROUND GRADIENT (base layer)
          Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [0.0, 0.45, 0.75, 1.0],
                colors: [
                  Color(0xFF2E2E2E),
                  Color(0xFF00271D),
                  Color(0xFF005841),
                  Color.fromARGB(176, 62, 254, 203),
                ],
              ),
            ),
          ),

          /// BLURRED CIRCLE (subtle rounded glow)
          Positioned(
            bottom: -120,
            left: -60,
            right: -60,
            child: Container(
              height: 300,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Color.fromARGB(
                  0,
                  62,
                  254,
                  203,
                ), // same green with opacity
                boxShadow: [
                  BoxShadow(
                    color: Color.fromARGB(
                      69,
                      62,
                      254,
                      142,
                    ), // stronger outer glow
                    blurRadius: 60,
                    spreadRadius: 100,
                  ),
                ],
              ),
            ),
          ),

          Column(
            children: [
              const SizedBox(height: 70),
              Image.asset("assets/images/logo2.png", width: 200),

              /// PAGEVIEW (SVG + TEXT ONLY)
              Expanded(
                child: PageView(
                  physics: BouncingScrollPhysics(),
                  controller: controller,
                  onPageChanged: (i) => setState(() => index = i),
                  children: const [
                    OnboardingPage(
                      imagePath: "assets/images/Onboarding1.svg",
                      text:
                          "سجل دخولك وخروجك بسهولة وتابع دوامك\nيومياً بدون تعقيد",
                    ),
                    OnboardingPage(
                      imagePath: "assets/images/Onboarding2.svg",
                      text:
                          "اعرف تفاصيل راتبك وقدّم طلب الإجازة\nوتابع حالته بكل شفافية",
                    ),
                  ],
                ),
              ),

              Padding(
                padding: const EdgeInsets.only(bottom: 40),
                child: OnboardingButton(
                  text: "تسجيل دخول",
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => const AuthScreen(),
                      ),
                    );
                  },
                ),
              ),

              /// DOTS INDICATOR
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(2, (i) {
                  bool active = i == index;
                  return AnimatedContainer(
                    duration: const Duration(milliseconds: 300),
                    margin: const EdgeInsets.symmetric(horizontal: 4),
                    width: 10,
                    height: 10,
                    decoration: BoxDecoration(
                      color: active ? Colors.white : Colors.white60,
                      borderRadius: BorderRadius.circular(50),
                    ),
                  );
                }),
              ),

              const SizedBox(height: 100),
            ],
          ),
        ],
      ),
    );
  }
}