import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';
import 'package:sigap/src/features/onboarding/presentasion/controllers/onboarding_controller.dart';
import 'package:sigap/src/utils/constants/image_strings.dart';
import 'package:sigap/src/utils/constants/sizes.dart';
import 'package:sigap/src/utils/helpers/helper_functions.dart';

class WelcomeScreen extends StatelessWidget {
  const WelcomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = Get.find<OnboardingController>();
    final theme = Theme.of(context);
    final size = MediaQuery.of(context).size;
    final isSmallScreen = size.height < 700;

    bool isDark = THelperFunctions.isDarkMode(context);

    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(TSizes.lg),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: TSizes.xl),
              // Logo section
              Hero(
                tag: 'app_logo',
                child: Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: theme.primaryColor.withOpacity(0.1),
                    shape: BoxShape.circle,
                  ),
                  child: SvgPicture.asset(
                    isDark ? TImages.darkAppBgLogo : TImages.lightAppBgLogo,
                    fit: BoxFit.contain,
                    height: isSmallScreen ? 60 : 80,
                  ),
                ),
              ),
              SizedBox(height: isSmallScreen ? TSizes.lg : TSizes.xl + 8),

              // Title and description
              Text(
                'Welcome to GIS Crime Cluster',
                textAlign: TextAlign.center,
                style: theme.textTheme.headlineMedium,
              ),
              SizedBox(height: isSmallScreen ? TSizes.sm : TSizes.md),
              Text(
                'Visualize crime patterns and enhance safety across Jember Regency with our data-driven GIS application',
                textAlign: TextAlign.center,
                style: theme.textTheme.bodyMedium?.copyWith(height: 1.5),
              ),

              // Top flexible space
              const Spacer(flex: 1),

              // Map image - now positioned in the middle
              FadeTransition(
                opacity: controller.fadeAnimation,
                child: Lottie.asset(
                  isDark
                      ? TImages.worldMapMarqueeDark
                      : TImages.worldMapMarquee,
                  fit: BoxFit.contain,
                  height: isSmallScreen ? 160 : 200,
                  repeat: true,
                  animate: true,
                  frameRate: FrameRate(60),
                ),
              ),

              // Bottom flexible space
              const Spacer(flex: 1),

              // Get Started button
              SizedBox(
                width: double.infinity,
                height: 56,
                child: ElevatedButton(
                  onPressed: controller.getStarted,
                  style: theme.elevatedButtonTheme.style,
                  child: Text('Perform Location Check'),
                ),
              ),
              SizedBox(height: isSmallScreen ? TSizes.lg : TSizes.xl),
              Text(
                'By continuing, We will check your location for our security purposes. Please ensure your location services are enabled.',
                textAlign: TextAlign.center,
                style: theme.textTheme.labelMedium,
              ),
              const SizedBox(height: TSizes.md),
            ],
          ),
        ),
      ),
    );
  }
}
