1356/lifetimer/lib/features/onboarding/presentation/onboarding_intro_screen.dart

// ignore_for_file: deprecated_member_use

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/widgets/app_scaffold.dart';
import '../../../core/widgets/primary_button.dart';
import '../application/onboarding_controller.dart';

class OnboardingIntroScreen extends ConsumerWidget {
  const OnboardingIntroScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final controller = ref.watch(onboardingControllerProvider.notifier);
    
    return AppScaffold(
      body: SafeArea(
        child: Column(
          children: [
            // Progress indicator and back button
            Padding(
              padding: const EdgeInsets.all(24.0),
              child: Row(
                children: [
                  IconButton(
                    onPressed: () {
                      // Can't go back from intro, go to auth choice
                      context.push('/auth-choice');
                    },
                    icon: const Icon(Icons.arrow_back),
                  ),
                  Expanded(
                    child: LinearProgressIndicator(
                      value: 1 / 3, // Step 1 of 3
                      backgroundColor: Theme.of(context).colorScheme.surfaceContainerHighest,
                      valueColor: AlwaysStoppedAnimation<Color>(
                        Theme.of(context).colorScheme.primary,
                      ),
                    ),
                  ),
                  const SizedBox(width: 48), // Balance the back button
                ],
              ),
            ),
            // Scrollable content
            Expanded(
              child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(horizontal: 24.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    const SizedBox(height: 16),
                    const Icon(
                      Icons.timer_outlined,
                      size: 64,
                      color: null,
                    ),
                    const SizedBox(height: 20),
                    Text(
                      'Welcome to LifeTimer',
                      style: Theme.of(context).textTheme.headlineLarge?.copyWith(
                        fontWeight: FontWeight.bold,
                      ),
                      textAlign: TextAlign.center,
                    ),
                    const SizedBox(height: 10),
                    Text(
                      'Your 1356-day journey starts here.\nCreate your bucket list and begin your countdown.',
                      style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                        color: Theme.of(context).colorScheme.onSurface.withOpacity(0.8),
                        height: 1.5,
                      ),
                      textAlign: TextAlign.center,
                    ),
                    const SizedBox(height: 24),
                    const _FeatureCard(
                      icon: Icons.flag,
                      title: 'Set Your Goals',
                      description: 'Create a bucket list of 1-20 meaningful goals',
                    ),
                    const SizedBox(height: 10),
                    const _FeatureCard(
                      icon: Icons.lock_clock,
                      title: 'Fixed Timeline',
                      description: '1356 days to achieve everything - no extensions',
                    ),
                    const SizedBox(height: 10),
                    const _FeatureCard(
                      icon: Icons.trending_up,
                      title: 'Track Progress',
                      description: 'Watch yourself grow day by day',
                    ),
                    const SizedBox(height: 32),
                    PrimaryButton(
                      onPressed: () {
                        controller.completeStep('intro');
                        context.push('/onboarding/how-it-works');
                      },
                      text: 'Get Started',
                    ),
                    const SizedBox(height: 10),
                    TextButton(
                      onPressed: () async {
                        await controller.skipOnboarding();
                        if (context.mounted) {
                          context.push('/home');
                        }
                      },
                      child: const Text('Skip onboarding'),
                    ),
                    const SizedBox(height: 20),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _FeatureCard extends StatelessWidget {
  final IconData icon;
  final String title;
  final String description;

  const _FeatureCard({
    required this.icon,
    required this.title,
    required this.description,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: Theme.of(context).colorScheme.outline.withOpacity(0.2),
        ),
      ),
      child: Row(
        children: [
          Icon(
            icon,
            color: Theme.of(context).colorScheme.primary,
            size: 32,
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  description,
                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                    color: Theme.of(context).colorScheme.onSurface.withOpacity(0.7),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}