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

import 'package:get/get.dart';
import 'package:sefer_driver/controller/auth/captin/login_captin_controller.dart';

// --- Placeholder Imports ---
// Assuming these files exist in your project structure.
import '../../../constant/box_name.dart';
import '../../../constant/colors.dart';
import '../../../controller/auth/captin/phone_helper_controller.dart';
import '../../../controller/local/phone_intel/intl_phone_field.dart';
import '../../../main.dart';
import '../../../print.dart';
// Assuming you have an AppColor class defined in your project.
// import 'path/to/your/app_color.dart';

/// A visually revamped authentication screen with a light, glassy effect,
/// themed for the driver application using a green primary color.
class AuthScreen extends StatelessWidget {
  final String title;
  final String subtitle;
  final Widget form;

  const AuthScreen({
    super.key,
    required this.title,
    required this.subtitle,
    required this.form,
  });

  /// Shows a dialog for testers to log in using email and password.
  void _showTesterLoginDialog(
      BuildContext context, LoginDriverController controller) {
    final testerEmailController = TextEditingController();
    final testerPasswordController = TextEditingController();
    final testerFormKey = GlobalKey<FormState>();

    showDialog(
      context: context,
      barrierDismissible: true,
      builder: (BuildContext dialogContext) {
        return BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: AlertDialog(
            backgroundColor: Colors.white.withOpacity(0.85),
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
            title: const Text(
              'App Tester Login',
              textAlign: TextAlign.center,
              style:
                  TextStyle(fontWeight: FontWeight.bold, color: Colors.black87),
            ),
            content: Form(
              key: testerFormKey,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  TextFormField(
                    controller: testerEmailController,
                    keyboardType: TextInputType.emailAddress,
                    style: const TextStyle(color: Colors.black),
                    decoration: InputDecoration(
                      labelText: 'Email',
                      prefixIcon: const Icon(Icons.email_outlined),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: const BorderSide(
                            color: AppColor.greenColor, width: 2),
                      ),
                    ),
                    validator: (value) => value == null || !value.contains('@')
                        ? 'Enter a valid email'.tr
                        : null,
                  ),
                  const SizedBox(height: 16),
                  TextFormField(
                    controller: testerPasswordController,
                    obscureText: true,
                    style: const TextStyle(color: Colors.black),
                    decoration: InputDecoration(
                      labelText: 'Password',
                      prefixIcon: const Icon(Icons.lock_outline),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: const BorderSide(
                            color: AppColor.greenColor, width: 2),
                      ),
                    ),
                    validator: (value) => value == null || value.isEmpty
                        ? 'Enter a password'
                        : null,
                  ),
                ],
              ),
            ),
            actions: [
              TextButton(
                child: const Text('Cancel'),
                onPressed: () => Navigator.of(dialogContext).pop(),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: AppColor.greenColor,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                child:
                    const Text('Login', style: TextStyle(color: Colors.white)),
                onPressed: () {
                  if (testerFormKey.currentState!.validate()) {
                    controller.logintest(
                      testerPasswordController.text.trim(),
                      testerEmailController.text.trim(),
                    );
                    Navigator.of(dialogContext).pop();
                  }
                },
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    // Controller for the driver's login logic
    final loginController = Get.put(LoginDriverController());

    return Scaffold(
      body: Container(
        // NEW: Light and airy gradient with green accents
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.white,
              Colors.green.shade50,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: Stack(
          children: [
            // Subtle background shapes with the new primary color
            Positioned(
              top: -80,
              left: -100,
              child: Container(
                width: 250,
                height: 250,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: AppColor.greenColor.withOpacity(0.1),
                ),
              ),
            ),
            Positioned(
              bottom: -120,
              right: -150,
              child: Container(
                width: 350,
                height: 350,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: AppColor.greenColor.withOpacity(0.15),
                ),
              ),
            ),
            Center(
              child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(horizontal: 24.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // GestureDetector for tester login
                    GestureDetector(
                      onLongPress: () {
                        _showTesterLoginDialog(context, loginController);
                      },
                      child: Container(
                        padding: const EdgeInsets.all(12),
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.white.withOpacity(0.5),
                            border: Border.all(
                                color: Colors.white.withOpacity(0.8), width: 2),
                            boxShadow: [
                              BoxShadow(
                                  color: Colors.black.withOpacity(0.05),
                                  blurRadius: 10,
                                  spreadRadius: 5)
                            ]),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(50),
                            child: Image.asset('assets/images/logo.gif',
                                height: 100)),
                      ),
                    ),
                    const SizedBox(height: 20),
                    Text(
                      title,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.bold,
                          color: Colors.black87),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      subtitle,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 16,
                        color: Colors.black54,
                      ),
                    ),
                    const SizedBox(height: 30),

                    // Glassmorphism Container for the form with a whiter look
                    ClipRRect(
                      borderRadius: BorderRadius.circular(25.0),
                      child: BackdropFilter(
                        filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
                        child: Container(
                          padding: const EdgeInsets.all(24.0),
                          decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.6),
                            borderRadius: BorderRadius.circular(25.0),
                            border: Border.all(
                              color: Colors.white.withOpacity(0.8),
                              width: 1.5,
                            ),
                          ),
                          child: form,
                        ),
                      ),
                    ),
                    const SizedBox(height: 20),
                    // Button for app testers, adapted to the light theme
                    Material(
                      color: Colors.black.withOpacity(0.05),
                      borderRadius: BorderRadius.circular(12),
                      child: InkWell(
                        onTap: () =>
                            _showTesterLoginDialog(context, loginController),
                        borderRadius: BorderRadius.circular(12),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              vertical: 10, horizontal: 16),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(Icons.admin_panel_settings_outlined,
                                  color: Colors.black.withOpacity(0.6)),
                              const SizedBox(width: 8),
                              Text(
                                'For App Reviewers / Testers',
                                style: TextStyle(
                                  color: Colors.black.withOpacity(0.6),
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// --- UI Screens ---

class PhoneNumberScreen extends StatefulWidget {
  const PhoneNumberScreen({super.key});
  @override
  State<PhoneNumberScreen> createState() => _PhoneNumberScreenState();
}

class _PhoneNumberScreenState extends State<PhoneNumberScreen> {
  final _phoneController = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  bool _isLoading = false;

  void _submit() async {
    if (_formKey.currentState!.validate()) {
      setState(() => _isLoading = true);
      final rawPhone = _phoneController.text.trim().replaceFirst('+', '');
      final success = await PhoneAuthHelper.sendOtp(rawPhone);
      if (success && mounted) {
        // Get.to(() => OtpVerificationScreen(phoneNumber: rawPhone));
        await PhoneAuthHelper.verifyOtp(rawPhone);
      }
      if (mounted) setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return AuthScreen(
      title: 'welcome to intaleq'.tr,
      subtitle: 'login or register subtitle'.tr,
      form: Form(
        key: _formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Enter your phone number'.tr,
              style: TextStyle(color: Colors.black87, fontSize: 16),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 20),
            IntlPhoneField(
              showCountryFlag: false,
              searchText: 'Search country'.tr,
              languageCode: 'ar',
              style: const TextStyle(color: Colors.black),
              dropdownTextStyle: const TextStyle(color: Colors.black87),
              decoration: InputDecoration(
                labelText: 'Phone Number'.tr,
                hintText: 'witout zero'.tr,
                labelStyle: const TextStyle(color: Colors.black54),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12),
                  borderSide: BorderSide(color: Colors.black.withOpacity(0.1)),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12),
                  borderSide:
                      const BorderSide(color: AppColor.greenColor, width: 2),
                ),
              ),
              initialCountryCode: 'SY',
              onChanged: (phone) {
                _phoneController.text = phone.completeNumber;
              },
              validator: (phone) {
                if (phone == null || phone.number.isEmpty) {
                  return 'Please enter your phone number'.tr;
                } // Check if the number is a Syrian number
                if (phone.countryISOCode != 'SY') {
                  return 'Only Syrian phone numbers are allowed'.tr;
                }
                // Check if the national number part starts with '0'
                if (phone.completeNumber.startsWith('96309') ||
                    phone.completeNumber.startsWith('+9630') ||
                    phone.completeNumber.startsWith('09')) {
                  return 'Please enter the number without the leading 0'.tr;
                }
                if (phone.completeNumber.length < 10) {
                  return 'Phone number seems too short'.tr;
                }
                return null;
              },
            ),
            const SizedBox(height: 24),
            _isLoading
                ? const CircularProgressIndicator(color: AppColor.greenColor)
                : SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: _submit,
                      style: ElevatedButton.styleFrom(
                        backgroundColor: AppColor.greenColor,
                        padding: const EdgeInsets.symmetric(vertical: 16),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12)),
                      ),
                      child: Text(
                        'send otp button'.tr,
                        style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                    ),
                  ),
          ],
        ),
      ),
    );
  }
}

class OtpVerificationScreen extends StatefulWidget {
  final String phoneNumber;
  const OtpVerificationScreen({super.key, required this.phoneNumber});
  @override
  State<OtpVerificationScreen> createState() => _OtpVerificationScreenState();
}

class _OtpVerificationScreenState extends State<OtpVerificationScreen> {
  final _formKey = GlobalKey<FormState>();
  final _otpController = TextEditingController();
  bool _isLoading = false;

  void _submit() async {
    if (_formKey.currentState!.validate()) {
      setState(() => _isLoading = true);
      await PhoneAuthHelper.verifyOtp(widget.phoneNumber);
      if (mounted) setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return AuthScreen(
      title: 'verify your number title'.tr,
      subtitle:
          'otp sent subtitle'.trParams({'phoneNumber': widget.phoneNumber}),
      form: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text(
            'Enter the 5-digit code',
            style: TextStyle(color: Colors.black87, fontSize: 16),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 20),
          Form(
            key: _formKey,
            child: TextFormField(
              controller: _otpController,
              textAlign: TextAlign.center,
              keyboardType: TextInputType.number,
              maxLength: 5,
              style: const TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.bold,
                color: Colors.black87,
                letterSpacing: 18,
              ),
              decoration: InputDecoration(
                counterText: "",
                hintText: '-----',
                hintStyle: TextStyle(
                    color: Colors.black.withOpacity(0.2),
                    letterSpacing: 18,
                    fontSize: 28),
                border: InputBorder.none,
                contentPadding: const EdgeInsets.symmetric(vertical: 10),
              ),
              validator: (v) => v == null || v.length < 5 ? '' : null,
            ),
          ),
          const SizedBox(height: 30),
          _isLoading
              ? const CircularProgressIndicator(color: AppColor.greenColor)
              : SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: _submit,
                    style: ElevatedButton.styleFrom(
                      backgroundColor: AppColor.greenColor,
                      padding: const EdgeInsets.symmetric(vertical: 16),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12)),
                    ),
                    child: Text(
                      'verify and continue button'.tr,
                      style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: Colors.white),
                    ),
                  ),
                ),
        ],
      ),
    );
  }
}

class RegistrationScreen extends StatefulWidget {
  final String phoneNumber;
  const RegistrationScreen({super.key, required this.phoneNumber});
  @override
  State<RegistrationScreen> createState() => _RegistrationScreenState();
}

class _RegistrationScreenState extends State<RegistrationScreen> {
  final _formKey = GlobalKey<FormState>();
  final _firstNameController = TextEditingController();
  final _lastNameController = TextEditingController();
  final _emailController = TextEditingController();
  bool _isLoading = false;

  void _submit() async {
    if (_formKey.currentState!.validate()) {
      setState(() => _isLoading = true);
      await PhoneAuthHelper.registerUser(
        phoneNumber: widget.phoneNumber,
        firstName: _firstNameController.text.trim(),
        lastName: _lastNameController.text.trim(),
        email: _emailController.text.trim(),
      );
      if (mounted) setState(() => _isLoading = false);
    }
  }

  Widget _buildTextFormField({
    required TextEditingController controller,
    required String label,
    TextInputType keyboardType = TextInputType.text,
    String? Function(String?)? validator,
  }) {
    return TextFormField(
      controller: controller,
      style: const TextStyle(color: Colors.black87),
      decoration: InputDecoration(
        labelText: label,
        labelStyle: const TextStyle(color: Colors.black54),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: BorderSide(color: Colors.black.withOpacity(0.1)),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: AppColor.greenColor, width: 2),
        ),
      ),
      keyboardType: keyboardType,
      validator: validator,
    );
  }

  @override
  Widget build(BuildContext context) {
    return AuthScreen(
      title: 'one last step title'.tr,
      subtitle: 'complete profile subtitle'.tr,
      form: Form(
        key: _formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            _buildTextFormField(
              controller: _firstNameController,
              label: 'first name label'.tr,
              validator: (v) => v!.isEmpty ? 'first name required'.tr : null,
            ),
            const SizedBox(height: 16),
            _buildTextFormField(
              controller: _lastNameController,
              label: 'last name label'.tr,
              validator: (v) => v!.isEmpty ? 'last name required'.tr : null,
            ),
            const SizedBox(height: 16),
            _buildTextFormField(
              controller: _emailController,
              label: 'email optional label'.tr,
              keyboardType: TextInputType.emailAddress,
            ),
            const SizedBox(height: 24),
            _isLoading
                ? const CircularProgressIndicator(color: AppColor.greenColor)
                : SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: _submit,
                      style: ElevatedButton.styleFrom(
                        backgroundColor: AppColor.greenColor,
                        padding: const EdgeInsets.symmetric(vertical: 16),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12)),
                      ),
                      child: Text(
                        'complete registration button'.tr,
                        style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                    ),
                  ),
          ],
        ),
      ),
    );
  }
}