import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../core/l10n/app_localizations.dart';
import '../../core/theme/app_theme.dart';

class LoginScreen extends ConsumerStatefulWidget {
  const LoginScreen({super.key});

  @override
  ConsumerState<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends ConsumerState<LoginScreen> {
  final _phoneController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

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

  @override
  Widget build(BuildContext context) {
    final l = AppLocalizations.of(context);
    final size = MediaQuery.sizeOf(context);

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 28),
          child: SizedBox(
            height: size.height - MediaQuery.paddingOf(context).top - MediaQuery.paddingOf(context).bottom,
            child: Form(
              key: _formKey,
              child: Column(
                children: [
                  const Spacer(flex: 2),
                  // Logo
                  Container(
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          AppTheme.primaryColor,
                          AppTheme.primaryColor.withValues(alpha: 0.8),
                        ],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                      borderRadius: BorderRadius.circular(28),
                      boxShadow: [
                        BoxShadow(
                          color: AppTheme.primaryColor.withValues(alpha: 0.3),
                          blurRadius: 20,
                          offset: const Offset(0, 8),
                        ),
                      ],
                    ),
                    child: const Icon(Icons.sports_soccer, size: 48, color: Colors.white),
                  )
                      .animate()
                      .scale(begin: const Offset(0.6, 0.6), end: const Offset(1, 1), duration: 600.ms, curve: Curves.easeOutBack)
                      .fadeIn(duration: 400.ms),
                  const SizedBox(height: 32),
                  // Title
                  Text(
                    l.t('welcome_back'),
                    style: const TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
                  ).animate(delay: 200.ms).fadeIn(duration: 500.ms).slideY(begin: 0.2, end: 0),
                  const SizedBox(height: 8),
                  Text(
                    l.t('enter_phone'),
                    style: TextStyle(fontSize: 15, color: Colors.grey.shade500),
                  ).animate(delay: 300.ms).fadeIn(duration: 500.ms),
                  const SizedBox(height: 48),
                  // Phone input
                  Directionality(
                    textDirection: TextDirection.ltr,
                    child: TextFormField(
                      controller: _phoneController,
                      keyboardType: TextInputType.phone,
                      textDirection: TextDirection.ltr,
                      inputFormatters: [
                        FilteringTextInputFormatter.allow(RegExp(r'[0-9+]')),
                        LengthLimitingTextInputFormatter(15),
                      ],
                      style: const TextStyle(fontSize: 18, letterSpacing: 1),
                      decoration: InputDecoration(
                        hintText: '+201XXXXXXXXX',
                        prefixIcon: Container(
                          padding: const EdgeInsets.all(12),
                          child: const Text('🇪🇬', style: TextStyle(fontSize: 24)),
                        ),
                      ),
                      validator: (v) {
                        if (v == null || v.isEmpty) return '';
                        if (v.length < 10) return '';
                        return null;
                      },
                    ),
                  ).animate(delay: 400.ms).fadeIn(duration: 500.ms).slideY(begin: 0.1, end: 0),
                  const SizedBox(height: 24),
                  // Submit button
                  SizedBox(
                    width: double.infinity,
                    height: 56,
                    child: ElevatedButton(
                      onPressed: _submit,
                      child: Text(l.t('send_otp'), style: const TextStyle(fontSize: 17)),
                    ),
                  ).animate(delay: 500.ms).fadeIn(duration: 500.ms).slideY(begin: 0.1, end: 0),
                  const SizedBox(height: 20),
                  // Pre-register link
                  TextButton(
                    onPressed: () => context.push('/register'),
                    child: Text(
                      l.t('pre_register'),
                      style: TextStyle(
                        color: AppTheme.primaryColor,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ).animate(delay: 600.ms).fadeIn(duration: 400.ms),
                  const Spacer(flex: 3),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  void _submit() {
    if (!_formKey.currentState!.validate()) return;
    final phone = _phoneController.text.trim();
    context.push('/auth/otp', extra: phone);
  }
}
