import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:service/constant/colors.dart';
import 'package:service/controller/auth/register_controller.dart';
import 'package:service/views/widgets/my_textField.dart';

class RegisterPage extends StatelessWidget {
  const RegisterPage({super.key});

  @override
  Widget build(BuildContext context) {
    final RegisterController controller = Get.put(RegisterController());

    return Scaffold(
      backgroundColor: const Color(0xFFF8F9FD),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new, color: Colors.black87),
          onPressed: () => Get.back(),
        ),
        title: Text(
          'إنشاء حساب موظف'.tr,
          style: const TextStyle(color: Colors.black87, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
          child: Form(
            key: controller.formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                const Center(
                  child: Icon(
                    Icons.person_add_rounded,
                    size: 80,
                    color: AppColor.blueColor,
                  ),
                ),
                const SizedBox(height: 32),
                
                _buildFieldTitle('الاسم الأول'),
                MyTextForm(
                  controller: controller.firstName,
                  label: 'الاسم الأول',
                  hint: 'أدخل الاسم الأول',
                  type: TextInputType.name,
                ),
                const SizedBox(height: 16),

                _buildFieldTitle('الاسم الأخير'),
                MyTextForm(
                  controller: controller.lastName,
                  label: 'الاسم الأخير',
                  hint: 'أدخل الاسم الأخير',
                  type: TextInputType.name,
                ),
                const SizedBox(height: 16),

                _buildFieldTitle('البريد الإلكتروني'),
                MyTextForm(
                  controller: controller.email,
                  label: 'البريد الإلكتروني',
                  hint: 'example@mail.com',
                  type: TextInputType.emailAddress,
                ),
                const SizedBox(height: 16),

                _buildFieldTitle('رقم الهاتف'),
                MyTextForm(
                  controller: controller.phone,
                  label: 'رقم الهاتف',
                  hint: '09xxxxxxxx',
                  type: TextInputType.phone,
                ),
                const SizedBox(height: 16),

                _buildFieldTitle('كلمة المرور'),
                MyTextForm(
                  controller: controller.password,
                  label: 'كلمة المرور',
                  hint: '********',
                  type: TextInputType.visiblePassword,
                ),
                const SizedBox(height: 40),

                Obx(() => controller.isLoading.value
                    ? const Center(child: CircularProgressIndicator())
                    : Container(
                        height: 55,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(16),
                          gradient: const LinearGradient(
                            colors: [AppColor.blueColor, Color(0xFF1A237E)],
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                          ),
                          boxShadow: [
                            BoxShadow(
                              color: AppColor.blueColor.withOpacity(0.3),
                              blurRadius: 12,
                              offset: const Offset(0, 6),
                            ),
                          ],
                        ),
                        child: Material(
                          color: Colors.transparent,
                          child: InkWell(
                            borderRadius: BorderRadius.circular(16),
                            onTap: () => controller.register(),
                            child: const Center(
                              child: Text(
                                'تقديم طلب تسجيل',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                        ),
                      )),
                
                const SizedBox(height: 24),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'لديك حساب بالفعل؟ '.tr,
                      style: const TextStyle(color: Colors.grey),
                    ),
                    TextButton(
                      onPressed: () => Get.back(),
                      child: const Text(
                        'تسجيل الدخول',
                        style: TextStyle(
                          color: AppColor.blueColor,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 20),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildFieldTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0, right: 4.0),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 14,
          fontWeight: FontWeight.w600,
          color: Colors.black54,
        ),
      ),
    );
  }
}