import 'package:flutter/material.dart';
import 'package:flutter_lucide/flutter_lucide.dart';
import 'package:get/get.dart';
import 'package:marco/controller/dashboard/add_employee_controller.dart';
import 'package:marco/helpers/theme/app_theme.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
import 'package:marco/helpers/utils/my_shadow.dart';
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
import 'package:marco/helpers/widgets/my_button.dart';
import 'package:marco/helpers/widgets/my_card.dart';
import 'package:marco/helpers/widgets/my_flex.dart';
import 'package:marco/helpers/widgets/my_flex_item.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/my_text_style.dart';
import 'package:marco/view/layouts/layout.dart';

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

  @override
  State<AddEmployeeScreen> createState() => _AddEmployeeScreenState();
}

class _AddEmployeeScreenState extends State<AddEmployeeScreen> with UIMixin {
  final AddEmployeeController controller = Get.put(AddEmployeeController());

  @override
  Widget build(BuildContext context) {
    return Layout(
      child: GetBuilder<AddEmployeeController>(
        init: controller,
        tag: 'add_employee_controller',
        builder: (controller) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: MySpacing.x(flexSpacing),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    MyText.titleMedium(
                      "Add Employee",
                      fontSize: 18,
                      fontWeight: 600,
                    ),
                    MyBreadcrumb(
                      children: [
                        MyBreadcrumbItem(name: 'Employee'),
                        MyBreadcrumbItem(name: 'Add Employee'),
                      ],
                    ),
                  ],
                ),
              ),
              MySpacing.height(flexSpacing),
              Padding(
                padding: MySpacing.x(flexSpacing / 2),
                child: MyFlex(
                  children: [
                    MyFlexItem(sizes: "lg-8 md-12", child: detail()),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  Widget detail() {
    return Form(
      key: controller.basicValidator.formKey,
      child: MyCard.bordered(
        borderRadiusAll: 4,
        border: Border.all(color: Colors.grey.withOpacity(0.2)),
        shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
        paddingAll: 24,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Icon(LucideIcons.server, size: 16),
                MySpacing.width(12),
                MyText.titleMedium("General", fontWeight: 600),
              ],
            ),
            MySpacing.height(24),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MyText.labelMedium("First Name"),
                MySpacing.height(8),
                TextFormField(
                  validator: controller.basicValidator.getValidation('first_name'),
                  controller: controller.basicValidator.getController('first_name'),
                  keyboardType: TextInputType.name,
                  decoration: InputDecoration(
                    hintText: "eg: Jhon",
                    hintStyle: MyTextStyle.bodySmall(xMuted: true),
                    border: outlineInputBorder,
                    enabledBorder: outlineInputBorder,
                    focusedBorder: focusedInputBorder,
                    contentPadding: MySpacing.all(16),
                    isCollapsed: true,
                    floatingLabelBehavior: FloatingLabelBehavior.never,
                  ),
                ),
                MySpacing.height(24),
                MyText.labelMedium("Last Name"),
                MySpacing.height(8),
                TextFormField(
                  validator: controller.basicValidator.getValidation('last_name'),
                  controller: controller.basicValidator.getController('last_name'),
                  keyboardType: TextInputType.name,
                  decoration: InputDecoration(
                    hintText: "eg: Doe",
                    hintStyle: MyTextStyle.bodySmall(xMuted: true),
                    border: outlineInputBorder,
                    enabledBorder: outlineInputBorder,
                    focusedBorder: focusedInputBorder,
                    contentPadding: MySpacing.all(16),
                    isCollapsed: true,
                    floatingLabelBehavior: FloatingLabelBehavior.never,
                  ),
                ),
                MySpacing.height(24),
                MyText.labelMedium("Phone Number"),
                MySpacing.height(8),
                TextFormField(
                  validator: controller.basicValidator.getValidation('phone_number'),
                  controller: controller.basicValidator.getController('phone_number'),
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    hintText: "eg: +91 9876543210",
                    hintStyle: MyTextStyle.bodySmall(xMuted: true),
                    border: outlineInputBorder,
                    enabledBorder: outlineInputBorder,
                    focusedBorder: focusedInputBorder,
                    contentPadding: MySpacing.all(16),
                    isCollapsed: true,
                    floatingLabelBehavior: FloatingLabelBehavior.never,
                  ),
                ),
                MySpacing.height(24),
                MyFlex(contentPadding: false, children: [
                  MyFlexItem(
                    sizes: 'lg-6 md-12',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        MyText.labelMedium("Select Gender"),
                        MySpacing.height(8),
                        DropdownButtonFormField<Gender>(
                          value: controller.selectedGender,
                          dropdownColor: contentTheme.background,
                          menuMaxHeight: 200,
                          isDense: true,
                          items: Gender.values.map((gender) {
                            return DropdownMenuItem<Gender>(
                              value: gender,
                              child: MyText.labelMedium(
                                gender.name[0].toUpperCase() + gender.name.substring(1),
                              ),
                            );
                          }).toList(),
                          icon: const Icon(Icons.expand_more, size: 20),
                          decoration: InputDecoration(
                            hintText: "Select Gender",
                            hintStyle: MyTextStyle.bodySmall(xMuted: true),
                            border: outlineInputBorder,
                            enabledBorder: outlineInputBorder,
                            focusedBorder: focusedInputBorder,
                            contentPadding: MySpacing.all(14),
                            isCollapsed: true,
                            floatingLabelBehavior: FloatingLabelBehavior.never,
                          ),
                          onChanged: controller.onGenderSelected,
                        ),
                      ],
                    ),
                  ),
                ]),
                MySpacing.height(24),
                MyFlex(contentPadding: false, children: [
                  MyFlexItem(
                    sizes: 'lg-6 md-12',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        MyText.labelMedium("Select Role"),
                        MySpacing.height(8),
                        DropdownButtonFormField<String>(
                          value: controller.selectedRoleId,
                          dropdownColor: contentTheme.background,
                          decoration: InputDecoration(
                            hintText: "Select Role",
                            hintStyle: MyTextStyle.bodySmall(xMuted: true),
                            border: outlineInputBorder,
                            enabledBorder: outlineInputBorder,
                            focusedBorder: focusedInputBorder,
                            contentPadding: MySpacing.all(14),
                            isCollapsed: true,
                            floatingLabelBehavior: FloatingLabelBehavior.never,
                          ),
                          icon: const Icon(Icons.expand_more, size: 20),
                          isDense: true,
                          items: controller.roles.map((role) {
                            return DropdownMenuItem<String>(
                              value: role['id'],
                              child: Text(role['name']),
                            );
                          }).toList(),
                          onChanged: controller.onRoleSelected,
                        ),
                      ],
                    ),
                  ),
                ]),
                MySpacing.height(24),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    MyButton.text(
                      onPressed: () {
                        Get.back();
                      },
                      padding: MySpacing.xy(20, 16),
                      splashColor: contentTheme.secondary.withValues(alpha: 0.1),
                      child: MyText.bodySmall('Cancel'),
                    ),
                    MySpacing.width(12),
                    MyButton(
                      onPressed: () async {
                        if (controller.basicValidator.validateForm()) {
                          await controller.createEmployees();
                        }
                      },
                      elevation: 0,
                      padding: MySpacing.xy(20, 16),
                      backgroundColor: contentTheme.primary,
                      borderRadiusAll: AppStyle.buttonRadius.medium,
                      child: MyText.bodySmall(
                        'Save',
                        color: contentTheme.onPrimary,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}