import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../controller/admin/staff_controller.dart';

class AddStaffPage extends StatelessWidget {
  final String role;
  const AddStaffPage({super.key, required this.role});

  @override
  Widget build(BuildContext context) {
    final cs = Theme.of(context).colorScheme;
    final controller = Get.put(StaffController());
    controller.selectedRole = role;

    return Scaffold(
      backgroundColor: cs.surface,
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.fromLTRB(16, 50, 16, 16),
            child: Row(
              children: [
                GestureDetector(
                  onTap: () => Get.back(),
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: cs.surfaceContainerHighest,
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: cs.outline),
                    ),
                    child: Icon(Icons.arrow_back_ios_new_rounded, color: cs.onSurfaceVariant, size: 16),
                  ),
                ),
                const SizedBox(width: 12),
                Text(role == 'admin' ? "إضافة مدير جديد" : "إضافة موظف خدمة عملاء", style: TextStyle(color: cs.onSurface, fontSize: 18, fontWeight: FontWeight.w700)),
              ],
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(24),
              child: Form(
                key: controller.formKey,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildSectionTitle("المعلومات الأساسية", cs),
                    const SizedBox(height: 16),
                    _buildTextField(
                      controller: controller.nameController,
                      label: "الاسم الكامل",
                      icon: Icons.person_outline,
                      cs: cs,
                    ),
                    const SizedBox(height: 16),
                    _buildTextField(
                      controller: controller.phoneController,
                      label: "رقم الهاتف",
                      icon: Icons.phone_android_outlined,
                      cs: cs,
                      keyboardType: TextInputType.phone,
                    ),
                    const SizedBox(height: 16),
                    _buildTextField(
                      controller: controller.emailController,
                      label: "البريد الإلكتروني",
                      icon: Icons.email_outlined,
                      cs: cs,
                      keyboardType: TextInputType.emailAddress,
                    ),
                    const SizedBox(height: 16),
                    _buildTextField(
                      controller: controller.passwordController,
                      label: "كلمة المرور",
                      icon: Icons.lock_outline,
                      cs: cs,
                      obscureText: true,
                    ),
                    const SizedBox(height: 24),
                    _buildSectionTitle("معلومات إضافية", cs),
                    const SizedBox(height: 16),
                    Row(
                      children: [
                        Expanded(
                          child: _buildDropdown(
                            label: "الجنس",
                            value: controller.selectedGender,
                            items: ['Male', 'Female'],
                            onChanged: (val) => controller.selectedGender = val!,
                            cs: cs,
                          ),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: _buildTextField(
                            controller: controller.birthdateController,
                            label: "تاريخ الميلاد",
                            icon: Icons.calendar_today_outlined,
                            cs: cs,
                            hint: "YYYY-MM-DD",
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 16),
                    _buildDropdown(
                      label: "البلد",
                      value: controller.selectedCountry,
                      items: const ['Jordan', 'Syria', 'Egypt'],
                      onChanged: (val) => controller.selectedCountry = val!,
                      cs: cs,
                    ),
                    const SizedBox(height: 40),
                    GetBuilder<StaffController>(
                      builder: (controller) => SizedBox(
                        width: double.infinity,
                        height: 56,
                        child: ElevatedButton(
                          onPressed: controller.isLoading ? null : () => controller.registerStaff(),
                          style: ElevatedButton.styleFrom(
                            backgroundColor: cs.primary,
                            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                          ),
                          child: controller.isLoading
                              ? CircularProgressIndicator(color: cs.onPrimary)
                              : Text(
                                  "حفظ البيانات",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold,
                                    color: cs.onPrimary,
                                  ),
                                ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title, ColorScheme cs) {
    return Text(
      title,
      style: TextStyle(
        color: cs.onSurfaceVariant,
        fontSize: 13,
        fontWeight: FontWeight.bold,
        letterSpacing: 1.2,
      ),
    );
  }

  Widget _buildTextField({
    required TextEditingController controller,
    required String label,
    required IconData icon,
    required ColorScheme cs,
    String? hint,
    bool obscureText = false,
    TextInputType keyboardType = TextInputType.text,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: cs.surfaceContainerHighest,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: cs.outline.withValues(alpha: 0.1)),
      ),
      child: TextFormField(
        controller: controller,
        obscureText: obscureText,
        keyboardType: keyboardType,
        style: TextStyle(color: cs.onSurface),
        decoration: InputDecoration(
          labelText: label,
          hintText: hint,
          hintStyle: TextStyle(color: cs.onSurface.withValues(alpha: 0.24)),
          labelStyle: TextStyle(color: cs.onSurfaceVariant),
          prefixIcon: Icon(icon, color: cs.onSurfaceVariant),
          border: InputBorder.none,
          contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        ),
        validator: (val) => val == null || val.isEmpty ? "هذا الحقل مطلوب" : null,
      ),
    );
  }

  Widget _buildDropdown({
    required String label,
    required String value,
    required List<String> items,
    required Function(String?) onChanged,
    required ColorScheme cs,
  }) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: cs.surfaceContainerHighest,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: cs.outline.withValues(alpha: 0.1)),
      ),
      child: DropdownButtonFormField<String>(
        initialValue: value,
        dropdownColor: cs.surfaceContainerHighest,
        style: TextStyle(color: cs.onSurface),
        decoration: InputDecoration(
          labelText: label,
          labelStyle: TextStyle(color: cs.onSurfaceVariant),
          border: InputBorder.none,
        ),
        items: items.map((e) => DropdownMenuItem(value: e, child: Text(e))).toList(),
        onChanged: onChanged,
      ),
    );
  }
}