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

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

  @override
  State<GetStartedBackground> createState() => _GetStartedBackgroundState();
}

class _GetStartedBackgroundState extends State<GetStartedBackground> {
  bool _hasError = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          const SizedBox(height: UiConstants.space8),
          // Logo
          Image.asset(
            UiImageAssets.logoBlue,
            height: UiConstants.space10,
          ),
          Expanded(
            child: Center(
              child: Container(
                width: 288,
                height: 288,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: UiColors.foreground.withValues(alpha: 0.05),
                ),
                padding: const EdgeInsets.all(UiConstants.space2),
                child: ClipOval(
                  child: Stack(
                    fit: StackFit.expand,
                    children: [
                      // Layer 1: The Fallback Logo (Always visible until image loads)
                      Padding(
                        padding: const EdgeInsets.all(UiConstants.space12),
                        child: Image.asset(UiImageAssets.logoBlue),
                      ),
                      
                      // Layer 2: The Network Image (Only visible on success)
                      if (!_hasError)
                        Image.network(
                          'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?w=400&h=400&fit=crop&crop=faces',
                          fit: BoxFit.cover,
                          frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
                            if (wasSynchronouslyLoaded) return child;
                            // Only animate opacity if we have a frame
                            return AnimatedOpacity(
                              opacity: frame == null ? 0 : 1,
                              duration: const Duration(milliseconds: 300),
                              child: child,
                            );
                          },
                          loadingBuilder: (context, child, loadingProgress) {
                            // While loading, show nothing (transparent) so layer 1 shows
                            if (loadingProgress == null) return child;
                            return const SizedBox.shrink();
                          },
                          errorBuilder: (context, error, stackTrace) {
                            // On error, show nothing (transparent) so layer 1 shows
                            // Also schedule a state update to prevent retries if needed
                            WidgetsBinding.instance.addPostFrameCallback((_) {
                              if (mounted && !_hasError) {
                                setState(() {
                                  _hasError = true;
                                });
                              }
                            });
                            return const SizedBox.shrink();
                          },
                        ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          // Pagination dots (Visual only)
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: UiConstants.space6,
                height: UiConstants.space2,
                decoration: BoxDecoration(
                  color: UiColors.primary,
                  borderRadius: UiConstants.radiusSm,
                ),
              ),
              const SizedBox(width: UiConstants.space2),
              Container(
                width: 8,
                height: 8,
                decoration: BoxDecoration(
                  color: UiColors.primary.withValues(alpha: 0.2),
                  borderRadius: UiConstants.radiusSm,
                ),
              ),
              const SizedBox(width: UiConstants.space2),
              Container(
                width: UiConstants.space2,
                height: UiConstants.space2,
                decoration: BoxDecoration(
                  color: UiColors.primary.withValues(alpha: 0.2),
                  borderRadius: UiConstants.radiusSm,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
