import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../controllers/intro_controller/intro_screen_controller.dart';

class IntroScreenView extends StatelessWidget {
  IntroScreenView({super.key});

  final IntroScreenController controller = Get.find<IntroScreenController>();

  @override
  Widget build(BuildContext context) {
    return GetBuilder<IntroScreenController>(
      builder: (controller) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: SafeArea(
            top: false,
            child: Stack(
              children: [
                PageView.builder(
                  controller: controller.pageController,
                  onPageChanged: controller.onPageChanged,
                  itemCount: controller.slides.length,
                  itemBuilder: (context, index) {
                    return _IntroPage(slide: controller.slides[index]);
                  },
                ),
                // Bottom Controls
                Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: _BottomControls(controller: controller),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class _IntroPage extends StatelessWidget {
  final IntroSlide slide;
  const _IntroPage({required this.slide});

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

    return Column(
      children: [
        // Image Section with organic shape background
        Expanded(
          flex: 6,
          child: Stack(
            children: [
              // Background blob
              Positioned.fill(
                child: CustomPaint(
                  painter: _BlobPainter(color: slide.bgColor),
                ),
              ),
              // Decorative circles
              Positioned(
                top: 60,
                right: 30,
                child: _FloatingCircle(size: 20, color: slide.accentColor.withOpacity(0.5)),
              ),
              Positioned(
                top: 120,
                left: 20,
                child: _FloatingCircle(size: 12, color: slide.accentColor.withOpacity(0.35)),
              ),
              Positioned(
                bottom: 80,
                right: 50,
                child: _FloatingCircle(size: 16, color: slide.bgColor.withOpacity(0.8)),
              ),
              // Main image
              Center(
                child: Padding(
                  padding: const EdgeInsets.only(top: 60, bottom: 20),
                  child: Hero(
                    tag: slide.imageAsset,
                    child: Image.asset(
                      slide.imageAsset,
                      height: size.height * 0.38,
                      fit: BoxFit.contain,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        // Text Section
        Expanded(
          flex: 4,
          child: Padding(
            padding: const EdgeInsets.fromLTRB(32, 24, 32, 100),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Accent chip
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
                  decoration: BoxDecoration(
                    color: slide.accentColor.withOpacity(0.12),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Text(
                    slide.chipLabel,
                    style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w600,
                      color: slide.accentColor,
                      letterSpacing: 0.8,
                    ),
                  ),
                ),
                const SizedBox(height: 14),
                Text(
                  slide.title,
                  style: const TextStyle(
                    fontSize: 28,
                    fontWeight: FontWeight.w800,
                    color: Color(0xFF1A1A2E),
                    height: 1.2,
                    letterSpacing: -0.5,
                  ),
                ),
                const SizedBox(height: 12),
                Text(
                  slide.description,
                  style: const TextStyle(
                    fontSize: 15,
                    color: Color(0xFF6B7280),
                    height: 1.6,
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

class _BottomControls extends StatelessWidget {
  final IntroScreenController controller;
  const _BottomControls({required this.controller});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.fromLTRB(28, 16, 28, 36),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.white.withOpacity(0), Colors.white, Colors.white],
          stops: const [0, 0.3, 1],
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // Page indicators
          Row(
            children: List.generate(
              controller.slides.length,
                  (index) => AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut,
                margin: const EdgeInsets.only(right: 6),
                height: 8,
                width: controller.currentPage == index ? 24 : 8,
                decoration: BoxDecoration(
                  color: controller.currentPage == index
                      ? controller.slides[controller.currentPage].accentColor
                      : const Color(0xFFD1D5DB),
                  borderRadius: BorderRadius.circular(4),
                ),
              ),
            ),
          ),
          // Action button
          GestureDetector(
            onTap: controller.isLastPage ? controller.onDonePress : controller.nextPage,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              width: controller.isLastPage ? 140 : 56,
              height: 56,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    controller.slides[controller.currentPage].accentColor,
                    controller.slides[controller.currentPage].accentColor.withGreen(
                      (controller.slides[controller.currentPage].accentColor.green + 30).clamp(0, 255),
                    ),
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.circular(28),
                boxShadow: [
                  BoxShadow(
                    color: controller.slides[controller.currentPage].accentColor.withOpacity(0.35),
                    blurRadius: 16,
                    offset: const Offset(0, 6),
                  ),
                ],
              ),
              child: controller.isLastPage
                  ? const Center(
                child: Text(
                  "Get Started",
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w700,
                    fontSize: 15,
                  ),
                ),
              )
                  : const Icon(Icons.arrow_forward_rounded, color: Colors.white, size: 24),
            ),
          ),
        ],
      ),
    );
  }
}

class _FloatingCircle extends StatelessWidget {
  final double size;
  final Color color;
  const _FloatingCircle({required this.size, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(color: color, shape: BoxShape.circle),
    );
  }
}

class _BlobPainter extends CustomPainter {
  final Color color;
  _BlobPainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    final path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height * 0.75);
    path.quadraticBezierTo(size.width * 0.75, size.height * 0.95, size.width * 0.5, size.height * 0.88);
    path.quadraticBezierTo(size.width * 0.25, size.height * 0.80, 0, size.height * 0.92);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(_BlobPainter oldDelegate) => oldDelegate.color != color;
}