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

class AddStaffPage extends StatelessWidget {
  final String role; // 'admin' or 'service'
  const AddStaffPage({super.key, required this.role});

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

    const Color bgColor = Color(0xFF0D1117);
    const Color inputColor = Color(0xFF161B22);
    const Color accentColor = Color(0xFF00D4AA);

    return Scaffold(
      backgroundColor: bgColor,
      appBar: AppBar(
        title: Text(role == 'admin' ? "إضافة مدير جديد" : "إضافة موظف خدمة عملاء"),
        backgroundColor: bgColor,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Form(
          key: controller.formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildSectionTitle("المعلومات الأساسية"),
              const SizedBox(height: 16),
              _buildTextField(
                controller: controller.nameController,
                label: "الاسم الكامل",
                icon: Icons.person_outline,
                fillColor: inputColor,
              ),
              const SizedBox(height: 16),
              _buildTextField(
                controller: controller.phoneController,
                label: "رقم الهاتف",
                icon: Icons.phone_android_outlined,
                fillColor: inputColor,
                keyboardType: TextInputType.phone,
              ),
              const SizedBox(height: 16),
              _buildTextField(
                controller: controller.emailController,
                label: "البريد الإلكتروني",
                icon: Icons.email_outlined,
                fillColor: inputColor,
                keyboardType: TextInputType.emailAddress,
              ),
              const SizedBox(height: 16),
              _buildTextField(
                controller: controller.passwordController,
                label: "كلمة المرور",
                icon: Icons.lock_outline,
                fillColor: inputColor,
                obscureText: true,
              ),
              const SizedBox(height: 24),
              _buildSectionTitle("معلومات إضافية"),
              const SizedBox(height: 16),
              Row(
                children: [
                  Expanded(
                    child: _buildDropdown(
                      label: "الجنس",
                      value: controller.selectedGender,
                      items: ['Male', 'Female'],
                      onChanged: (val) => controller.selectedGender = val!,
                      fillColor: inputColor,
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: _buildTextField(
                      controller: controller.birthdateController,
                      label: "تاريخ الميلاد",
                      icon: Icons.calendar_today_outlined,
                      fillColor: inputColor,
                      hint: "YYYY-MM-DD",
                    ),
                  ),
                ],
              ),
              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: accentColor,
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                    ),
                    child: controller.isLoading
                        ? const CircularProgressIndicator(color: Colors.white)
                        : Text(
                            "حفظ البيانات",
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: bgColor,
                            ),
                          ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Text(
      title,
      style: const TextStyle(
        color: Color(0xFF7D8590),
        fontSize: 13,
        fontWeight: FontWeight.bold,
        letterSpacing: 1.2,
      ),
    );
  }

  Widget _buildTextField({
    required TextEditingController controller,
    required String label,
    required IconData icon,
    required Color fillColor,
    String? hint,
    bool obscureText = false,
    TextInputType keyboardType = TextInputType.text,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: fillColor,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.white.withOpacity(0.05)),
      ),
      child: TextFormField(
        controller: controller,
        obscureText: obscureText,
        keyboardType: keyboardType,
        style: const TextStyle(color: Colors.white),
        decoration: InputDecoration(
          labelText: label,
          hintText: hint,
          hintStyle: const TextStyle(color: Colors.white24),
          labelStyle: const TextStyle(color: Colors.white54),
          prefixIcon: Icon(icon, color: Colors.white38),
          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 Color fillColor,
  }) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: fillColor,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.white.withOpacity(0.05)),
      ),
      child: DropdownButtonFormField<String>(
        value: value,
        dropdownColor: fillColor,
        style: const TextStyle(color: Colors.white),
        decoration: InputDecoration(
          labelText: label,
          labelStyle: const TextStyle(color: Colors.white54),
          border: InputBorder.none,
        ),
        items: items.map((e) => DropdownMenuItem(value: e, child: Text(e))).toList(),
        onChanged: onChanged,
      ),
    );
  }
}