import 'dart:math';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:siro_rider/constant/style.dart';
import 'package:siro_rider/constant/box_name.dart';
import 'package:siro_rider/main.dart';

import 'controller/home/splash_screen_controlle.dart';

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

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

    // ألوان الـ colorize — سيان كهربائي → أبيض → ذهبي عنبري
    const colorizeColors = [
      Color(0xFF1DA1F2),
      Colors.white,
      Color(0xFFFFB700),
      Color(0xFF1DA1F2),
    ];

    return SafeArea(
      child: Scaffold(
        backgroundColor: const Color(0xFF060B18),
        body: Stack(
          children: [
            // ── طبقة الشبكة الهندسية ──────────────────────────────────
            Positioned.fill(
              child: CustomPaint(painter: _GridPainter()),
            ),

            // ── توهج سماوي — أعلى اليمين ─────────────────────────────
            Positioned(
              top: -size.height * 0.18,
              right: -size.width * 0.25,
              child: Container(
                width: size.width * 0.85,
                height: size.width * 0.85,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  gradient: RadialGradient(colors: [
                    const Color(0xFF1DA1F2).withOpacity(0.11),
                    Colors.transparent,
                  ]),
                ),
              ),
            ),

            // ── توهج أزرق غامق — أسفل اليسار ────────────────────────
            Positioned(
              bottom: -size.height * 0.12,
              left: -size.width * 0.22,
              child: Container(
                width: size.width * 0.75,
                height: size.width * 0.75,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  gradient: RadialGradient(colors: [
                    const Color(0xFF0052FF).withOpacity(0.09),
                    Colors.transparent,
                  ]),
                ),
              ),
            ),

            // ── المحتوى الرئيسي ───────────────────────────────────────
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // ── حلقات مدارية + اسم التطبيق ───────────────────
                  FadeTransition(
                    opacity: controller.titleFadeAnimation,
                    child: ScaleTransition(
                      scale: controller.titleScaleAnimation,
                      child: SizedBox(
                        width: 220,
                        height: 220,
                        child: Stack(
                          alignment: Alignment.center,
                          children: [
                            // الحلقة الخارجية — تدور ببطء
                            AnimatedBuilder(
                              animation: controller.orbitAnimation,
                              builder: (_, __) => Transform.rotate(
                                angle: controller.orbitAnimation.value * 2 * pi,
                                child: CustomPaint(
                                  painter: _OrbitalRingPainter(
                                    radius: 100,
                                    dotColor: const Color(0xFF1DA1F2),
                                    lineOpacity: 0.22,
                                    dotSize: 5.5,
                                  ),
                                  size: const Size(220, 220),
                                ),
                              ),
                            ),
                            // الحلقة الداخلية — تدور عكسياً
                            AnimatedBuilder(
                              animation: controller.orbitAnimation,
                              builder: (_, __) => Transform.rotate(
                                angle: -controller.orbitAnimation.value *
                                    2 *
                                    pi *
                                    0.65,
                                child: CustomPaint(
                                  painter: _OrbitalRingPainter(
                                    radius: 73,
                                    dotColor: const Color(0xFFFFB700),
                                    lineOpacity: 0.14,
                                    dotSize: 4,
                                    dashCount: 20,
                                  ),
                                  size: const Size(220, 220),
                                ),
                              ),
                            ),
                            // النقطة المركزية المضيئة
                            AnimatedBuilder(
                              animation: controller.glowAnimation,
                              builder: (_, __) => Container(
                                width: 8,
                                height: 8,
                                decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: const Color(0xFF1DA1F2),
                                  boxShadow: [
                                    BoxShadow(
                                      color: const Color(0xFF1DA1F2)
                                          .withOpacity(0.25 +
                                              controller.glowAnimation.value *
                                                  0.35),
                                      blurRadius: 20 +
                                          controller.glowAnimation.value * 20,
                                      spreadRadius: 4,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            // ── اسم "Siro" مع توهج متنفّس ─────────
                            AnimatedBuilder(
                              animation: controller.glowAnimation,
                              builder: (_, child) => Container(
                                decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  boxShadow: [
                                    BoxShadow(
                                      color: const Color(0xFF1DA1F2)
                                          .withOpacity(0.08 +
                                              controller.glowAnimation.value *
                                                  0.10),
                                      blurRadius: 40 +
                                          controller.glowAnimation.value * 25,
                                      spreadRadius: 0,
                                    ),
                                  ],
                                ),
                                child: child,
                              ),
                              child: AnimatedTextKit(
                                animatedTexts: [
                                  ColorizeAnimatedText(
                                    'Siro',
                                    textStyle: const TextStyle(
                                      fontSize: 38,
                                      fontWeight: FontWeight.w800,
                                      letterSpacing: 3,
                                      height: 1,
                                    ),
                                    colors: colorizeColors,
                                    speed: const Duration(milliseconds: 380),
                                  ),
                                ],
                                isRepeatingAnimation: false,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),

                  const SizedBox(height: 28),

                  // ── شريحة "AI-Powered" + الشعار النصي ───────────────
                  FadeTransition(
                    opacity: controller.taglineFadeAnimation,
                    child: SlideTransition(
                      position: controller.taglineSlideAnimation,
                      child: Column(
                        children: [
                          // شريحة الذكاء الاصطناعي
                          Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 14, vertical: 5),
                            decoration: BoxDecoration(
                              border: Border.all(
                                color:
                                    const Color(0xFF1DA1F2).withOpacity(0.35),
                                width: 1,
                              ),
                              borderRadius: BorderRadius.circular(20),
                              color: const Color(0xFF1DA1F2).withOpacity(0.06),
                            ),
                            child: Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                // نقطة نبضية
                                AnimatedBuilder(
                                  animation: controller.glowAnimation,
                                  builder: (_, __) => Container(
                                    width: 6,
                                    height: 6,
                                    decoration: BoxDecoration(
                                      shape: BoxShape.circle,
                                      color: const Color(0xFF1DA1F2)
                                          .withOpacity(0.5 +
                                              controller.glowAnimation.value *
                                                  0.5),
                                      boxShadow: [
                                        BoxShadow(
                                          color: const Color(0xFF1DA1F2)
                                              .withOpacity(controller
                                                      .glowAnimation.value *
                                                  0.6),
                                          blurRadius: 6,
                                          spreadRadius: 1,
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                const SizedBox(width: 8),
                                Text(
                                  'AI-Powered Mobility',
                                  style: TextStyle(
                                    fontSize: 11,
                                    fontWeight: FontWeight.w600,
                                    color: const Color(0xFF1DA1F2)
                                        .withOpacity(0.85),
                                    letterSpacing: 1.4,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(height: 16),
                          // الشعار النصي
                          Text(
                            'Your Journey Begins Here'.tr,
                            style: AppStyle.title.copyWith(
                              color: const Color(0xFF7A8FA8),
                              fontSize: 14,
                              letterSpacing: 0.6,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),

            // ── القسم السفلي: شريط التقدم + الإصدار ─────────────────
            Align(
              alignment: Alignment.bottomCenter,
              child: FadeTransition(
                opacity: controller.footerFadeAnimation,
                child: Padding(
                  padding:
                      const EdgeInsets.only(bottom: 44, left: 36, right: 36),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      // شريط تقدم رفيع مضيء
                      Obx(() => _GlowProgressBar(
                            value: controller.progress.value,
                          )),
                      const SizedBox(height: 18),
                      // معلومات الإصدار
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'SIRO',
                            style: TextStyle(
                              fontSize: 9.5,
                              fontWeight: FontWeight.w700,
                              color: Colors.white.withOpacity(0.18),
                              letterSpacing: 3.5,
                            ),
                          ),
                          Text(
                            'v${box.read(BoxName.packagInfo) ?? '1.0.0'}',
                            style: TextStyle(
                              fontSize: 9.5,
                              fontWeight: FontWeight.w500,
                              color: Colors.white.withOpacity(0.18),
                              letterSpacing: 1,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// ── شريط التقدم المضيء ─────────────────────────────────────────────────────
class _GlowProgressBar extends StatelessWidget {
  final double value;
  const _GlowProgressBar({required this.value});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // المسار
        Container(
          height: 2,
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.07),
            borderRadius: BorderRadius.circular(2),
          ),
        ),
        // الملء المضيء
        FractionallySizedBox(
          widthFactor: value.clamp(0.0, 1.0),
          child: Container(
            height: 2,
            decoration: BoxDecoration(
              gradient: const LinearGradient(colors: [
                Color(0xFF0052FF),
                Color(0xFF1DA1F2),
              ]),
              borderRadius: BorderRadius.circular(2),
              boxShadow: [
                BoxShadow(
                  color: const Color(0xFF1DA1F2).withOpacity(0.55),
                  blurRadius: 8,
                  spreadRadius: 1,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

// ── رسّام الشبكة الهندسية ─────────────────────────────────────────────────
class _GridPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final linePaint = Paint()
      ..color = const Color(0xFF1DA1F2).withOpacity(0.04)
      ..strokeWidth = 0.5;

    const spacing = 36.0;

    for (double y = 0; y < size.height; y += spacing) {
      canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint);
    }
    for (double x = 0; x < size.width; x += spacing) {
      canvas.drawLine(Offset(x, 0), Offset(x, size.height), linePaint);
    }

    // نقاط التقاطع
    final dotPaint = Paint()
      ..color = const Color(0xFF1DA1F2).withOpacity(0.07)
      ..style = PaintingStyle.fill;

    for (double y = 0; y < size.height; y += spacing) {
      for (double x = 0; x < size.width; x += spacing) {
        canvas.drawCircle(Offset(x, y), 0.9, dotPaint);
      }
    }
  }

  @override
  bool shouldRepaint(_GridPainter old) => false;
}

// ── رسّام الحلقة المدارية ─────────────────────────────────────────────────
class _OrbitalRingPainter extends CustomPainter {
  final double radius;
  final Color dotColor;
  final double lineOpacity;
  final double dotSize;
  final int dashCount;

  const _OrbitalRingPainter({
    this.radius = 95,
    this.dotColor = const Color(0xFF1DA1F2),
    this.lineOpacity = 0.25,
    this.dotSize = 5.5,
    this.dashCount = 0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);

    if (dashCount > 0) {
      // حلقة متقطعة (dashed)
      final dashPaint = Paint()
        ..color = const Color(0xFF1DA1F2).withOpacity(lineOpacity)
        ..strokeWidth = 1
        ..style = PaintingStyle.stroke
        ..strokeCap = StrokeCap.round;

      const dashAngle = 2 * pi / 40;
      final gapRatio = 0.45;

      for (int i = 0; i < dashCount; i++) {
        final startAngle = i * (2 * pi / dashCount);
        final sweepAngle = (2 * pi / dashCount) * (1 - gapRatio);
        canvas.drawArc(
          Rect.fromCircle(center: center, radius: radius),
          startAngle,
          sweepAngle,
          false,
          dashPaint,
        );
      }
    } else {
      // حلقة متصلة
      final ringPaint = Paint()
        ..color = const Color(0xFF1DA1F2).withOpacity(lineOpacity)
        ..strokeWidth = 1
        ..style = PaintingStyle.stroke;
      canvas.drawCircle(center, radius, ringPaint);
    }

    // النقطة البراقة — دائماً في القمة (before rotation)
    final dotPos = Offset(center.dx, center.dy - radius);

    // توهج خلف النقطة
    final glowPaint = Paint()
      ..color = dotColor.withOpacity(0.35)
      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 9);
    canvas.drawCircle(dotPos, dotSize + 2, glowPaint);

    // النقطة نفسها
    final dotPaint = Paint()
      ..color = dotColor
      ..style = PaintingStyle.fill;
    canvas.drawCircle(dotPos, dotSize, dotPaint);
  }

  @override
  bool shouldRepaint(_OrbitalRingPainter old) => false;
}
