<!-- CreatePodYaml.vue -->
<template>
  <div v-if="show" class="modal-overlay" @click="closeModal">
    <div class="modal-content yaml-editor" @click.stop>
      <div class="modal-header">
        <h3>Create Pod from YAML</h3>
        <button class="close-button" @click="closeModal">×</button>
      </div>

      <div class="modal-body">
        <div v-if="error" class="error-message">{{ error }}</div>

        <div class="yaml-container">
          <textarea 
            v-model="yamlContent" 
            placeholder="Paste your Pod YAML definition here..."
            :disabled="isSubmitting"
            class="yaml-textarea"
          ></textarea>
        </div>
      </div>

      <div class="modal-footer">
        <button 
          class="cancel-button" 
          @click="closeModal"
          :disabled="isSubmitting"
        >
          Cancel
        </button>
        <button 
          class="create-button" 
          @click="createPodFromYaml"
          :disabled="isSubmitting || !yamlContent.trim()"
        >
          {{ isSubmitting ? 'Creating...' : 'Create Pod' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'CreatePodYaml',

  props: {
    show: {
      type: Boolean,
      default: false
    },
    namespace: {
      type: String,
      default: 'default'
    }
  },

  emits: ['create-pod'],

  data() {
    return {
      yamlContent: '',
      isSubmitting: false,
      error: ''
    }
  },
  methods: {
    closeModal() {
      if (!this.isSubmitting) {
        this.$emit('close')
      }
    },
    async createPodFromYaml() {
      this.isSubmitting = true;
      this.error = '';

      try {
        let opts = {
          yamlContent: this.yamlContent,
          isYaml: true
        }
        this.$emit('create-pod', opts);
        this.closeModal();
      } catch (err: any) {
        this.error = `Failed to create Pod: ${err.message || err}`;
      } finally {
        this.isSubmitting = false;
      }
    }
  }
});
</script>

<style src="@/assets/css/CreatePodYaml.css" scoped></style>