import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:sigap/src/features/onboarding/data/dummy/onboarding_dummy.dart';
import 'package:sigap/src/utils/constants/sizes.dart';
import 'package:sigap/src/utils/helpers/helper_functions.dart';

import '../../controllers/onboarding_controller.dart';

class OnboardingScreen extends StatelessWidget {
  const OnboardingScreen({super.key});
  @override
  Widget build(BuildContext context) {
    // Get the controller
    final controller = Get.find<OnboardingController>();

    // Tambahkan controller untuk PageView teks
    final textPageController = controller.textPageController;

    // Get screen dimensions for responsive design
    final size = MediaQuery.of(context).size;
    final isSmallScreen = size.height < 700;

    // Get Theme.of(context) data to apply consistent styling
    bool isDark = THelperFunctions.isDarkMode(context);

    return Scaffold(
      body: Stack(
        children: [
         
          // Top bar: indicator & skip
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: TSizes.md,
                vertical: TSizes.md,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // Dot indicators
                  Obx(
                    () => Row(
                      children: List.generate(
                        contents.length,
                        (index) => buildDot(
                          index,
                          controller.currentIndex.value,
                          Theme.of(context).primaryColor,
                          Theme.of(context).disabledColor,
                        ),
                      ),
                    ),
                  ),
                  TextButton(
                    onPressed: controller.skipOnboarding,
                    child: Text(
                      'Skip',
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        color: Theme.of(context).colorScheme.onSurfaceVariant,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          // Main content
          Column(
            children: [
              // Spacer for top bar
              SizedBox(height: size.height * 0.08),
              // Image in the center of gray area
              Expanded(
                flex: 5,
                child: PageView.builder(
                  controller: controller.pageController,
                  itemCount: contents.length,
                  onPageChanged: (i) {
                    controller.onPageChanged(i);
                    // Sinkronkan page pada textPageController
                    textPageController.jumpToPage(i);
                  },
                  itemBuilder: (_, i) {
                    return Center(
                      child: FadeTransition(
                        opacity: controller.fadeAnimation,
                        child: SlideTransition(
                          position: controller.slideAnimation,
                          child: SvgPicture.asset(
                            contents[i].image,
                            fit: BoxFit.contain,
                            height: isSmallScreen ? 200 : 300,
                            colorFilter:
                                isDark
                                    ? ColorFilter.mode(
                                      Theme.of(context).colorScheme.onSurface,
                                      BlendMode.srcIn,
                                    )
                                    : null,
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
              // White rounded bottom sheet tanpa tombol Next
              Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.surface,
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(32),
                    topRight: Radius.circular(32),
                  ),
                ),
                padding: const EdgeInsets.fromLTRB(24, 32, 24, 32),
                child: SizedBox(
                  height: isSmallScreen ? 172 : 212, // dikurangi tinggi tombol
                  child: PageView.builder(
                    
                    controller: textPageController,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: contents.length,
                    itemBuilder: (_, i) {
                      return Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          // Title
                          FadeTransition(
                            opacity: controller.fadeAnimation,
                            child: SlideTransition(
                              position: controller.slideAnimation,
                              child: Text(
                                contents[i].title,
                                textAlign: TextAlign.center,
                                style: Theme.of(context)
                                    .textTheme
                                    .headlineMedium
                                    ?.copyWith(fontWeight: FontWeight.w700),
                              ),
                            ),
                          ),
                          const SizedBox(height: 12),
                          // Description
                          FadeTransition(
                            opacity: controller.fadeAnimation,
                            child: SlideTransition(
                              position: controller.slideAnimation,
                              child: Text(
                                contents[i].description,
                                textAlign: TextAlign.center,
                                style: Theme.of(context).textTheme.bodyMedium,
                              ),
                            ),
                          ),
                          // Hapus SizedBox(height: 28) dan tombol Next dari sini
                        ],
                      );
                    },
                  ),
                ),
              ),
            ],
          ),
          // Tombol Next di posisi paling bawah
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(
                24,
                0,
                24,
                16,
              ), // kurangi bottom padding agar tidak terlalu mepet
              child: SafeArea(
                top: false,
                minimum: const EdgeInsets.only(
                  bottom: 8,
                ), // beri ruang ekstra agar tidak tertutup gesture bar
                child: SizedBox(
                  width: double.infinity,
                  height: 56, // tambah tinggi agar text tidak terpotong
                  child: ElevatedButton(
                    onPressed: controller.nextPage,
                    style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.symmetric(vertical: 16),
                      textStyle: Theme.of(context).textTheme.titleMedium,
                    ),
                    child: const Text('Next', overflow: TextOverflow.visible),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // Animated dot indicator
  Widget buildDot(
    int index,
    int currentIndex,
    Color activeColor,
    Color inactiveColor,
  ) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      margin: const EdgeInsets.only(right: 6),
      height: 6,
      width: currentIndex == index ? 22 : 10,
      decoration: BoxDecoration(
        color: currentIndex == index ? activeColor : inactiveColor,
        borderRadius: BorderRadius.circular(8),
      ),
    );
  }
}
