<script setup lang="ts">
import { ref, watch } from 'vue';
import InputText from 'primevue/inputtext';
import Select from 'primevue/select';
import DatePicker from 'primevue/datepicker';
import BaseFormDialog from '@/core/components/BaseFormDialog.vue';
import type { Project } from '../project.types';

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

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

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

const typeOptions = [
  { label: 'EPC', value: 'EPC' },
  { label: 'PMC', value: 'PMC' },
  { label: 'FEED', value: 'FEED' },
  { label: 'Other', value: 'OTHER' },
];

const statusOptions = [
  { label: '진행중', value: 'ACTIVE' },
  { label: '종료', value: 'CLOSED' },
  { label: '보류', value: 'HOLD' },
];

watch(
  () => props.visible,
  (v) => {
    if (v) {
      form.value = props.project ? { ...props.project } : { status: 'ACTIVE' };
    }
  },
);

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

<template>
  <BaseFormDialog
    :visible="visible"
    :title="project?.id ? '프로젝트 수정' : '프로젝트 등록'"
    width="680px"
    :loading="loading"
    @update:visible="emit('update:visible', $event)"
    @submit="onSubmit"
  >
    <div class="form-grid">
      <div class="col-4">
        <div class="form-field">
          <label class="form-field__label form-field__label--required">프로젝트 코드</label>
          <InputText v-model="form.projectCode" placeholder="EPU-2025-001" fluid />
        </div>
      </div>
      <div class="col-8">
        <div class="form-field">
          <label class="form-field__label form-field__label--required">프로젝트명</label>
          <InputText v-model="form.name" placeholder="프로젝트명 입력" fluid />
        </div>
      </div>
      <div class="col-6">
        <div class="form-field">
          <label class="form-field__label form-field__label--required">유형</label>
          <Select v-model="form.projectType" :options="typeOptions" optionLabel="label" optionValue="value" placeholder="선택" fluid />
        </div>
      </div>
      <div class="col-6">
        <div class="form-field">
          <label class="form-field__label form-field__label--required">상태</label>
          <Select v-model="form.status" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="선택" fluid />
        </div>
      </div>
      <div class="col-6">
        <div class="form-field">
          <label class="form-field__label">시작일</label>
          <DatePicker :modelValue="form.startDate ? new Date(form.startDate) : null" dateFormat="yy-mm-dd" placeholder="YYYY-MM-DD" fluid @update:modelValue="form.startDate = $event ? ($event as Date).toISOString().slice(0, 10) : undefined" />
        </div>
      </div>
      <div class="col-6">
        <div class="form-field">
          <label class="form-field__label">종료일</label>
          <DatePicker :modelValue="form.endDate ? new Date(form.endDate) : null" dateFormat="yy-mm-dd" placeholder="YYYY-MM-DD" fluid @update:modelValue="form.endDate = $event ? ($event as Date).toISOString().slice(0, 10) : undefined" />
        </div>
      </div>
    </div>
  </BaseFormDialog>
</template>
