<template>
  <div>
    <DefaultHeaderPage
      :title="isEdit ? 'Editar Usuário' : 'Cadastro de Usuário'"
    />

    <div class="q-pa-md">
      <q-form ref="formRef">
        <div class="column justify-center items-center q-mb-lg">
          <AvatarImageComponent
            ref="avatarRef"
            @update:file="(f) => (avatarFile = f)"
          />

          <div class="row full-width q-mt-md q-col-gutter-sm">
            <StateSelect
              v-model="form.state"
              class="col-6"
              outlined
              label="Estado / UF"
              :initial-id="editStateId"
            />

            <UnitSelect
              v-model="form.unit"
              class="col-6"
              outlined
              label="Unidade"
              :initial-id="editUnitId"
            />

            <UserTypeSelect
              v-model="form.user_type"
              class="col-6"
              outlined
              label="Tipo de Usuário"
              :rules="[inputRules.required]"
            />

            <DefaultInput
              v-model="form.cpf"
              label="CPF"
              class="col-6"
              outlined
              mask="###.###.###-##"
              :rules="[inputRules.cpf]"
            />

            <DefaultInput
              v-model="form.name"
              label="Nome"
              class="col-6"
              outlined
              :rules="[inputRules.required]"
            />

            <DefaultInput
              v-model="form.email"
              label="E-mail"
              class="col-6"
              outlined
              type="email"
              :rules="[inputRules.required, inputRules.email]"
            />

            <DefaultInput
              v-model="form.password"
              label="Senha"
              class="col-6"
              outlined
              :type="showPassword ? 'text' : 'password'"
              :rules="
                isEdit
                  ? [(v) => !v || v.length >= 8 || 'Mínimo 8 caracteres']
                  : [inputRules.required, inputRules.min(8)]
              "
            >
              <template #append>
                <q-icon
                  :name="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
                  class="cursor-pointer"
                  color="secondary"
                  @click="showPassword = !showPassword"
                />
              </template>
            </DefaultInput>

            <DefaultInput
              v-model="form.password_confirmation"
              label="Repetir Senha"
              class="col-6"
              outlined
              :type="showPasswordConfirm ? 'text' : 'password'"
              :rules="
                isEdit
                  ? [
                      (v) =>
                        !form.password ||
                        v === form.password ||
                        'Senhas não conferem',
                    ]
                  : [
                      inputRules.required,
                      inputRules.samePassword(form.password),
                    ]
              "
            >
              <template #append>
                <q-icon
                  :name="showPasswordConfirm ? 'mdi-eye-off' : 'mdi-eye'"
                  class="cursor-pointer"
                  color="secondary"
                  @click="showPasswordConfirm = !showPasswordConfirm"
                />
              </template>
            </DefaultInput>

            <div v-if="isEdit" class="col-12 text-caption text-grey-6">
              Deixe os campos de senha em branco para manter a senha atual.
            </div>

            <div class="col-6 flex items-center">
              <q-btn
                label="Gerar senha segura"
                icon="mdi-thumb-up-outline"
                color="primary"
                @click="generatePassword"
              />
            </div>
          </div>

          <div class="row justify-end q-mt-md full-width">
            <q-btn
              label="SALVAR"
              icon-right="mdi-check"
              color="primary"
              :loading="loading"
              @click="onSave"
            />
          </div>
        </div>
      </q-form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import AvatarImageComponent from "src/components/shared/AvatarImageComponent.vue";
import StateSelect from "src/components/selects/StateSelect.vue";
import UnitSelect from "src/components/selects/UnitSelect.vue";
import UserTypeSelect from "src/components/selects/UserTypeSelect.vue";
import { useInputRules } from "src/composables/useInputRules";
import { useSubmitHandler } from "src/composables/useSubmitHandler";
import { createUser, updateUser, getUserById } from "src/api/user";

const router = useRouter();
const route = useRoute();
const { inputRules } = useInputRules();

const formRef = ref(null);
const avatarRef = ref(null);
const avatarFile = ref(null);

const showPassword = ref(false);
const showPasswordConfirm = ref(false);

const editStateId = ref(null);
const editUnitId = ref(null);

const isEdit = computed(() => !!route.params.id);

const form = ref({
  state: null,
  unit: null,
  user_type: null,
  cpf: null,
  name: null,
  email: null,
  password: null,
  password_confirmation: null,
});

const { loading, execute } = useSubmitHandler({
  formRef,
  onSuccess: () => {
    router.push({ name: "UserPage" });
  },
});

onMounted(async () => {
  if (!isEdit.value) return;
  try {
    const user = await getUserById(route.params.id);
    form.value.name = user.name;
    form.value.email = user.email;
    form.value.cpf = user.cpf;
    form.value.user_type = user.user_type;
    editStateId.value = user.state_id ?? null;
    editUnitId.value = user.unit_id ?? null;
    if (user.avatar_url) {
      avatarRef.value?.setImageUrl(user.avatar_url);
    }
  } catch (error) {
    console.error("Failed to load user:", error);
  }
});

function buildFormData() {
  const fd = new FormData();

  if (avatarFile.value) fd.append("avatar", avatarFile.value);
  if (form.value.state?.value) fd.append("state_id", form.value.state.value);
  if (form.value.unit?.value) fd.append("unit_id", form.value.unit.value);
  if (form.value.user_type) fd.append("user_type", form.value.user_type);
  if (form.value.cpf) fd.append("cpf", form.value.cpf);

  fd.append("name", form.value.name ?? "");
  fd.append("email", form.value.email ?? "");
  fd.append("password", form.value.password ?? "");

  return fd;
}

function buildUpdateData() {
  const fd = new FormData();
  fd.append("_method", "PUT");

  if (avatarFile.value) fd.append("avatar", avatarFile.value);
  if (form.value.state?.value) fd.append("state_id", form.value.state.value);
  if (form.value.unit?.value) fd.append("unit_id", form.value.unit.value);
  if (form.value.user_type) fd.append("user_type", form.value.user_type);
  if (form.value.cpf) fd.append("cpf", form.value.cpf);
  if (form.value.name) fd.append("name", form.value.name);
  if (form.value.email) fd.append("email", form.value.email);
  if (form.value.password) fd.append("password", form.value.password);

  return fd;
}

async function onSave() {
  if (isEdit.value) {
    await execute(() => updateUser(buildUpdateData(), route.params.id));
  } else {
    await execute(() => createUser(buildFormData()));
  }
}

function generatePassword() {
  const chars =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%";
  const password = Array.from({ length: 12 }, () =>
    chars.charAt(Math.floor(Math.random() * chars.length)),
  ).join("");
  form.value.password = password;
  form.value.password_confirmation = password;
}
</script>
