<script setup lang="ts">
import { ref, watch, computed, defineProps, defineEmits } from "vue";

const props = defineProps<{
  modelValue: boolean;
  mode: "create" | "edit" | "clone";
  selectedData: any;
  workflowList: string[];
  executionTypes: string[];
}>();

const emit = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
  (e: "save", payload: any): void;
}>();

// 로컬 state
const internalWorkflow = ref(props.selectedData?.workflow || "");
const internalExecType = ref(props.selectedData?.execType || "");
const internalName = ref(props.selectedData?.name || "");
const internalDesc = ref(props.selectedData?.description || "");
const internalExperiment = ref(props.selectedData?.experiment || "");

// 다이얼로그 열릴 때 복사
watch(
  () => props.modelValue,
  (open) => {
    if (open && props.selectedData) {
      internalWorkflow.value = props.selectedData.workflow;
      internalExecType.value = props.selectedData.execType;
      internalName.value = props.selectedData.name;
      internalDesc.value = props.selectedData.description;
      internalExperiment.value = props.selectedData.experiment;
    }
  },
);

// 다이얼로그 타이틀
const dialogTitle = computed(() => {
  if (props.mode === "create") return "Create Execution";
  if (props.mode === "edit") return "Edit Execution";
  return "Clone Execution";
});

function onSave() {
  emit("save", {
    workflow: internalWorkflow.value,
    execType: internalExecType.value,
    name: internalName.value,
    description: internalDesc.value,
    experiment: internalExperiment.value,
  });
  emit("update:modelValue", false);
}
function onClose() {
  emit("update:modelValue", false);
}
</script>

<template>
  <v-card class="rounded-lg overflow-hidden">
    <v-card-title
      class="text-white font-weight-bold text-h6"
      style="background-color: #1976d2"
      >{{ dialogTitle }}</v-card-title
    >

    <!-- 본문 -->
    <v-card-text class="white--text pa-6">
      <!-- Workflow Information 헤더 -->
      <v-card-subtitle class="white--text mb-4"
        >Workflow Information</v-card-subtitle
      >

      <v-row dense class="mb-6">
        <v-col cols="6">
          <div class="text-subtitle-2 font-weight-medium mb-2 text-white">
            Select Workflow
          </div>
          <v-select
            v-model="internalWorkflow"
            :items="workflowList"
            dense
            hide-details
            outlined
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
        <v-col cols="6">
          <div class="text-subtitle-2 font-weight-medium mb-2 text-white">
            Execution Type
          </div>
          <v-select
            v-model="internalExecType"
            :items="executionTypes"
            dense
            hide-details
            outlined
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
      </v-row>

      <!-- Execution Name -->
      <v-row dense class="mb-6">
        <v-col cols="12">
          <div class="text-subtitle-2 font-weight-medium mb-2 text-white">
            Execution Type
          </div>

          <v-text-field
            v-model="internalName"
            dense
            hide-details
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
      </v-row>

      <!-- Description -->
      <v-row dense class="mb-6">
        <v-col cols="12">
          <div class="text-subtitle-2 font-weight-medium mb-2 text-white">
            Description
          </div>

          <v-text-field
            v-model="internalName"
            dense
            hide-details
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
      </v-row>

      <!-- Experiment -->
      <v-row dense class="mb-6">
        <v-col cols="12">
          <div class="text-subtitle-2 font-weight-medium mb-2 text-white">
            Experiment
          </div>

          <v-text-field
            v-model="internalName"
            dense
            hide-details
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
      </v-row>
    </v-card-text>

    <!-- 액션 -->
    <v-card-actions class="justify-end pa-4">
      <v-btn color="success" @click="onSave">Start</v-btn>
      <v-btn text class="white--text" @click="onClose">Close</v-btn>
    </v-card-actions>
  </v-card>
</template>
