import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../core/theme/app_theme.dart';
import '../cubit/auth_cubit.dart';
import '../cubit/auth_state.dart';

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

  @override
  State<PhoneAuthScreen> createState() => _PhoneAuthScreenState();
}

class _PhoneAuthScreenState extends State<PhoneAuthScreen> {
  final _phoneController = TextEditingController();
  final _otpController = TextEditingController();
  final _nameController = TextEditingController();
  bool _isOtpStage = false;

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

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xFF0B1120), Color(0xFF020617)],
            ),
          ),
          child: SafeArea(
            child: Center(
              child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(horizontal: 28),
                child: BlocConsumer<AuthCubit, AuthState>(
                  listener: (context, state) {
                    if (state is AuthOtpSent) {
                      setState(() {
                        _isOtpStage = true;
                        if (state.mockOtp != null) {
                          _otpController.text = state.mockOtp!;
                        }
                      });
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(
                          content: Text('تم إرسال رمز التحقق عبر واتساب / الرسائل القصيرة.'),
                          backgroundColor: AppTheme.emeraldGreen,
                        ),
                      );
                    } else if (state is AuthFailure) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text(state.errorMessage),
                          backgroundColor: AppTheme.crimsonRed,
                        ),
                      );
                    }
                  },
                  builder: (context, state) {
                    final isLoading = state is AuthLoading;

                    return Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        // Uruk Prize Emblem / Emblem Placeholder
                        Container(
                          width: 90,
                          height: 90,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(color: AppTheme.goldAccent, width: 2),
                            boxShadow: [
                              BoxShadow(
                                color: AppTheme.goldAccent.withOpacity(0.25),
                                blurRadius: 20,
                                spreadRadius: 3,
                              ),
                            ],
                          ),
                          child: const Center(
                            child: Icon(
                              Icons.workspace_premium,
                              color: AppTheme.goldAccent,
                              size: 46,
                            ),
                          ),
                        ),
                        const SizedBox(height: 20),

                        const Text(
                          'جائزة أوروك الدولية',
                          style: TextStyle(
                            color: AppTheme.goldLight,
                            fontSize: 26,
                            fontWeight: FontWeight.bold,
                            letterSpacing: 0.5,
                          ),
                        ),
                        const SizedBox(height: 6),
                        const Text(
                          'الهوية الرقمية الموحدة للمزايا الصحية والتدريبية',
                          style: TextStyle(
                            color: AppTheme.textMuted,
                            fontSize: 14,
                          ),
                          textAlign: TextAlign.center,
                        ),
                        const SizedBox(height: 36),

                        if (!_isOtpStage) ...[
                          // Full Name
                          TextField(
                            controller: _nameController,
                            style: const TextStyle(color: Colors.white),
                            decoration: InputDecoration(
                              labelText: 'الاسم الكامل',
                              labelStyle: const TextStyle(color: AppTheme.textMuted),
                              prefixIcon: const Icon(Icons.person, color: AppTheme.goldAccent),
                              filled: true,
                              fillColor: AppTheme.cardDark,
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(12),
                                borderSide: BorderSide.none,
                              ),
                            ),
                          ),
                          const SizedBox(height: 16),

                          // Phone Number
                          TextField(
                            controller: _phoneController,
                            keyboardType: TextInputType.phone,
                            textDirection: TextDirection.ltr,
                            style: const TextStyle(color: Colors.white),
                            decoration: InputDecoration(
                              labelText: 'رقم الهاتف (مع الرمز الدولي)',
                              labelStyle: const TextStyle(color: AppTheme.textMuted),
                              hintText: '+964 770 000 0000',
                              hintStyle: const TextStyle(color: Colors.white24),
                              prefixIcon: const Icon(Icons.phone_android, color: AppTheme.goldAccent),
                              filled: true,
                              fillColor: AppTheme.cardDark,
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(12),
                                borderSide: BorderSide.none,
                              ),
                            ),
                          ),
                          const SizedBox(height: 24),

                          SizedBox(
                            width: double.infinity,
                            height: 52,
                            child: ElevatedButton(
                              onPressed: isLoading
                                  ? null
                                  : () {
                                      final phone = _phoneController.text.trim();
                                      if (phone.isNotEmpty) {
                                        context.read<AuthCubit>().requestOtp(phone);
                                      }
                                    },
                              child: isLoading
                                  ? const CircularProgressIndicator(color: AppTheme.primaryDark)
                                  : const Text('إرسال رمز التحقق'),
                            ),
                          ),
                        ] else ...[
                          // OTP Input
                          TextField(
                            controller: _otpController,
                            keyboardType: TextInputType.number,
                            textAlign: TextAlign.center,
                            maxLength: 6,
                            style: const TextStyle(
                              color: AppTheme.goldLight,
                              fontSize: 24,
                              letterSpacing: 10,
                              fontWeight: FontWeight.bold,
                            ),
                            decoration: InputDecoration(
                              labelText: 'رمز التحقق السري (OTP)',
                              labelStyle: const TextStyle(color: AppTheme.textMuted),
                              counterText: '',
                              filled: true,
                              fillColor: AppTheme.cardDark,
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(12),
                                borderSide: BorderSide.none,
                              ),
                            ),
                          ),
                          const SizedBox(height: 12),
                          Text(
                            'تم الإرسال إلى ${_phoneController.text}',
                            style: const TextStyle(color: AppTheme.textMuted, fontSize: 13),
                          ),
                          const SizedBox(height: 24),

                          SizedBox(
                            width: double.infinity,
                            height: 52,
                            child: ElevatedButton(
                              onPressed: isLoading
                                  ? null
                                  : () {
                                      final otp = _otpController.text.trim();
                                      if (otp.length == 6) {
                                        context.read<AuthCubit>().verifyOtpAndBindDevice(
                                              phone: _phoneController.text.trim(),
                                              otp: otp,
                                              fullName: _nameController.text.trim(),
                                            );
                                      }
                                    },
                              child: isLoading
                                  ? const CircularProgressIndicator(color: AppTheme.primaryDark)
                                  : const Text('تأكيد الدخول وربط الجهاز'),
                            ),
                          ),
                          const SizedBox(height: 14),
                          TextButton(
                            onPressed: () => setState(() => _isOtpStage = false),
                            child: const Text(
                              'تعديل رقم الهاتف',
                              style: TextStyle(color: AppTheme.goldAccent),
                            ),
                          ),
                        ],
                      ],
                    );
                  },
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}