import 'package:flutter/material.dart';

class LoadingScreen extends StatefulWidget {
  final String message;
  final bool showLogo;
  
  const LoadingScreen({
    super.key,
    this.message = 'Loading...',
    this.showLogo = true,
  });

  @override
  State<LoadingScreen> createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0A0E27),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (widget.showLogo) ...[
              // App logo with fade animation
              FadeTransition(
                opacity: _animation,
                child: Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(
                      color: const Color(0xFF50E3C2),
                      width: 2,
                    ),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(18),
                    child: Image.asset(
                      'assets/logo.png',
                      fit: BoxFit.cover,
                      errorBuilder: (context, error, stackTrace) {
                        return Container(
                          color: const Color(0xFF1A1F3A),
                          child: const Icon(
                            Icons.currency_exchange,
                            color: Color(0xFF50E3C2),
                            size: 60,
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 32),
              // App title
              const Text(
                'rmtPocketWatcher',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'monospace',
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                'Lambda Banking Conglomerate',
                style: TextStyle(
                  color: Color(0xFF888888),
                  fontSize: 14,
                  fontFamily: 'monospace',
                ),
              ),
              const SizedBox(height: 48),
            ],
            // Loading indicator
            Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                border: Border.all(
                  color: const Color(0xFF50E3C2).withOpacity(0.3),
                  width: 2,
                ),
              ),
              child: const CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF50E3C2)),
                strokeWidth: 3,
              ),
            ),
            const SizedBox(height: 24),
            // Loading message
            Text(
              widget.message,
              style: const TextStyle(
                color: Color(0xFF888888),
                fontSize: 16,
                fontFamily: 'monospace',
              ),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 8),
            // Animated dots
            AnimatedBuilder(
              animation: _controller,
              builder: (context, child) {
                return Text(
                  '●' * ((_controller.value * 3).floor() + 1).clamp(1, 3),
                  style: const TextStyle(
                    color: Color(0xFF50E3C2),
                    fontSize: 20,
                    fontFamily: 'monospace',
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

// Splash screen for app startup
class SplashScreen extends StatefulWidget {
  final VoidCallback onInitializationComplete;
  
  const SplashScreen({
    super.key,
    required this.onInitializationComplete,
  });

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  String _currentMessage = 'Initializing...';
  
  @override
  void initState() {
    super.initState();
    _initializeApp();
  }

  Future<void> _initializeApp() async {
    // Simulate initialization steps
    setState(() => _currentMessage = 'Loading configuration...');
    await Future.delayed(const Duration(milliseconds: 800));
    
    setState(() => _currentMessage = 'Connecting to services...');
    await Future.delayed(const Duration(milliseconds: 600));
    
    setState(() => _currentMessage = 'Setting up notifications...');
    await Future.delayed(const Duration(milliseconds: 400));
    
    setState(() => _currentMessage = 'Ready!');
    await Future.delayed(const Duration(milliseconds: 300));
    
    widget.onInitializationComplete();
  }

  @override
  Widget build(BuildContext context) {
    return LoadingScreen(
      message: _currentMessage,
      showLogo: true,
    );
  }
}