import 'dart:ui';
import 'package:flutter/material.dart';

import 'package:doormile/main.dart';
import 'package:doormile/core/theme/app_colors.dart';
import 'package:doormile/core/theme/app_theme.dart';
import 'package:doormile/core/widgets/common.dart';
import 'package:doormile/core/widgets/logo.dart';

class _Slide {
  final IconData icon;
  final Color tint;
  final String title;
  final String body;
  final bool ev;
  const _Slide(this.icon, this.tint, this.title, this.body, {this.ev = false});
}

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

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

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

  static const _slides = [
    _Slide(Icons.touch_app_rounded, AppColors.primary, 'Send a parcel in one touch',
        'No forms, no waiting. Tap, confirm, done.'),
    _Slide(Icons.map_rounded, AppColors.secondary, 'Watch every mile, live',
        'Origin to hub to your doorstep — real-time, always.'),
    _Slide(Icons.electric_moped_rounded, AppColors.tertiary, 'EV-first, on time, every time',
        '99% on-time, powered by MileTruth AI.',
        ev: true),
  ];

  void _next() {
    if (_index < _slides.length - 1) {
      _controller.nextPage(
          duration: const Duration(milliseconds: 350), curve: Curves.easeOut);
    } else {
      Navigator.pushReplacementNamed(context, Routes.login);
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final isLast = _index == _slides.length - 1;
    return Scaffold(
      backgroundColor: AppColors.surface,
      body: AppBackground(
        child: SafeArea(
          child: Column(
          children: [
            // Header
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const DoormileMark(size: 36),
                  AnimatedOpacity(
                    opacity: isLast ? 0 : 1,
                    duration: const Duration(milliseconds: 200),
                    child: TextButton(
                      onPressed: isLast
                          ? null
                          : () => Navigator.pushReplacementNamed(context, Routes.login),
                      child: Text('Skip',
                          style: AppTheme.labelMd.copyWith(color: AppColors.onSurfaceVariant)),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: PageView.builder(
                controller: _controller,
                onPageChanged: (i) => setState(() => _index = i),
                itemCount: _slides.length,
                itemBuilder: (context, i) => _SlideView(slide: _slides[i]),
              ),
            ),
            // Dots
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(_slides.length, (i) {
                final active = i == _index;
                return AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  margin: const EdgeInsets.symmetric(horizontal: 4),
                  height: 8,
                  width: active ? 24 : 8,
                  decoration: BoxDecoration(
                    color: active ? AppColors.primary : AppColors.outlineVariant,
                    borderRadius: BorderRadius.circular(999),
                  ),
                );
              }),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 28, 16, 24),
              child: PrimaryButton(
                label: isLast ? 'Get Started' : 'Next',
                onPressed: _next,
              ),
            ),
          ],
          ),
        ),
      ),
    );
  }
}

class _SlideView extends StatelessWidget {
  final _Slide slide;
  const _SlideView({required this.slide});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 340, maxHeight: 340),
            child: AspectRatio(
              aspectRatio: 1,
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      slide.tint.withValues(alpha: 0.15),
                      slide.tint.withValues(alpha: 0.02),
                    ],
                  ),
                  borderRadius: BorderRadius.circular(36),
                  boxShadow: [
                    BoxShadow(
                      color: slide.tint.withValues(alpha: 0.1),
                      blurRadius: 40,
                      offset: const Offset(0, 20),
                    ),
                  ],
                  border: Border.all(color: Colors.white.withValues(alpha: 0.8), width: 2),
                ),
                child: Stack(
                  clipBehavior: Clip.none,
                  children: [
                    // Decorative abstract shapes
                    Positioned(
                      top: 20,
                      left: -10,
                      child: Container(
                        width: 100,
                        height: 100,
                        decoration: BoxDecoration(
                          color: slide.tint.withValues(alpha: 0.1),
                          shape: BoxShape.circle,
                        ),
                      ),
                    ),
                    Positioned(
                      right: -30,
                      bottom: -20,
                      child: Icon(
                        Icons.blur_on,
                        size: 160,
                        color: slide.tint.withValues(alpha: 0.1),
                      ),
                    ),
                    // Main Icon Glassmorphism Container
                    Center(
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(40),
                        child: BackdropFilter(
                          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                          child: Container(
                            width: 160,
                            height: 160,
                            decoration: BoxDecoration(
                              color: Colors.white.withValues(alpha: 0.4),
                              borderRadius: BorderRadius.circular(40),
                              border: Border.all(color: Colors.white.withValues(alpha: 0.6)),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.black.withValues(alpha: 0.05),
                                  blurRadius: 20,
                                ),
                              ],
                            ),
                            child: Icon(slide.icon, size: 80, color: slide.tint),
                          ),
                        ),
                      ),
                    ),
                    // EV badge
                    if (slide.ev)
                      Positioned(
                        top: 24,
                        right: 24,
                        child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(20),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withValues(alpha: 0.05),
                                blurRadius: 10,
                                offset: const Offset(0, 4),
                              ),
                            ],
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(Icons.eco, color: AppColors.tertiary, size: 16),
                              const SizedBox(width: 6),
                              Text(
                                'EV-Powered',
                                style: TextStyle(
                                  color: AppColors.tertiary,
                                  fontSize: 12,
                                  fontWeight: FontWeight.bold,
                                  fontFamily: AppTheme.fontFamily,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                  ],
                ),
              ),
            ),
          ),
          const SizedBox(height: 40),
          Text(slide.title, textAlign: TextAlign.center, style: AppTheme.headlineLg),
          const SizedBox(height: 8),
          Text(slide.body,
              textAlign: TextAlign.center,
              style: AppTheme.bodyLg.copyWith(color: AppColors.onSurfaceVariant)),
        ],
      ),
    );
  }
}
