<script setup lang="ts">
import { ref, watch } from 'vue';
import InputText from 'primevue/inputtext';
import Select from 'primevue/select';
import MultiSelect from 'primevue/multiselect';
import ToggleSwitch from 'primevue/toggleswitch';
import BaseFormDialog from '@/core/components/BaseFormDialog.vue';
import { ROLES } from '@/core/constants/app.constants';
import type { User } from '../user.types';

const props = defineProps<{
  visible: boolean;
  user: Partial<User> | null;
  loading?: boolean;
}>();

const emit = defineEmits<{
  'update:visible': [value: boolean];
  save: [data: Partial<User>];
}>();

const form = ref<Partial<User>>({});

const roleOptions = Object.values(ROLES).map((r) => ({ label: r, value: r }));
const disciplineOptions = [
  'Piping', 'Electrical', 'Instrument', 'Civil', 'Structural',
  'Mechanical', 'Process', 'HSE', 'QA/QC', 'Other',
].map((d) => ({ label: d, value: d }));

watch(
  () => props.visible,
  (v) => {
    if (v) {
      form.value = props.user ? { ...props.user } : { roles: [], isActive: true };
    }
  },
);

function onSubmit() {
  emit('save', { ...form.value });
}
</script>

<template>
  <BaseFormDialog
    :visible="visible"
    :title="user?.id ? '사용자 수정' : '사용자 등록'"
    width="680px"
    :loading="loading"
    @update:visible="emit('update:visible', $event)"
    @submit="onSubmit"
  >
    <div class="form-grid">
      <div class="col-6">
        <div class="form-field">
          <label class="form-field__label form-field__label--required">이름</label>
          <InputText v-model="form.fullName" placeholder="홍길동" fluid />
        </div>
      </div>
      <div class="col-6">
        <div class="form-field">
          <label class="form-field__label form-field__label--required">이메일</label>
          <InputText v-model="form.email" type="email" placeholder="user@hanwha.com" fluid />
        </div>
      </div>
      <div class="col-4">
        <div class="form-field">
          <label class="form-field__label">사번</label>
          <InputText v-model="form.employeeId" placeholder="EMP001" fluid />
        </div>
      </div>
      <div class="col-4">
        <div class="form-field">
          <label class="form-field__label">부서</label>
          <InputText v-model="form.department" placeholder="배관설계팀" fluid />
        </div>
      </div>
      <div class="col-4">
        <div class="form-field">
          <label class="form-field__label">Discipline</label>
          <Select
            v-model="form.discipline"
            :options="disciplineOptions"
            optionLabel="label"
            optionValue="value"
            placeholder="선택"
            fluid
          />
        </div>
      </div>
      <div class="col-12">
        <div class="form-field">
          <label class="form-field__label form-field__label--required">역할</label>
          <MultiSelect
            v-model="form.roles"
            :options="roleOptions"
            optionLabel="label"
            optionValue="value"
            placeholder="역할 선택"
            display="chip"
            fluid
          />
        </div>
      </div>
      <div class="col-12" v-if="user?.id">
        <div class="form-field">
          <label class="form-field__label">활성 상태</label>
          <ToggleSwitch v-model="form.isActive" />
        </div>
      </div>
    </div>
  </BaseFormDialog>
</template>
