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

      <div class="modal-body">
        <div v-if="error" class="error-message">{{ error }}</div>
        <div v-if="isLoading" class="loading-message">Loading pod YAML...</div>

        <div v-if="!isLoading" class="yaml-container">
          <textarea 
            v-model="yamlContent" 
            :disabled="isSubmitting"
            class="yaml-textarea"
          ></textarea>
        </div>
      </div>

      <div class="modal-footer">
        <button 
          class="cancel-button" 
          @click="closeModal"
          :disabled="isSubmitting"
        >
          Cancel
        </button>
        <button 
          class="update-button" 
          @click="updatePod"
          :disabled="isSubmitting || isLoading || !yamlContent.trim()"
        >
          {{ isSubmitting ? 'Updating...' : 'Update Pod' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { KubernetesPod } from '../types/kubernetes';
import { kubernetesService } from '../lib/kubernetes';
import { podJsonToYaml } from '../lib/lib';

export default defineComponent({
  name: 'EditPodYaml',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    pod: {
      type: Object as () => KubernetesPod | null,
      default: null
    },
    cluster: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      yamlContent: '',
      isLoading: false,
      isSubmitting: false,
      error: '',
      originalPodName: '',
      originalNamespace: ''
    }
  },
  watch: {
    show(newVal) {
      if (newVal && this.pod) {
        this.fetchPodYaml();
      } else {
        this.yamlContent = '';
        this.error = '';
      }
    }
  },
  methods: {
    closeModal() {
      if (!this.isSubmitting) {
        this.$emit('close');
      }
    },
    async fetchPodYaml() {
      if (!this.pod || !this.cluster) return;

      this.isLoading = true;
      this.error = '';

      this.originalPodName = this.pod.metadata.name;
      this.originalNamespace = this.pod.metadata.namespace;

      try {
        const response = await kubernetesService.getPod(
          this.cluster.contextName, 
          this.originalNamespace,
          this.originalPodName
        );
        if (response.success) {
          this.yamlContent = podJsonToYaml(response.data);
        } else {
          this.error = response.msg || 'Failed to fetch pod YAML';
        }
      } catch (err: any) {
        this.error = `Error fetching pod YAML: ${err.message || err}`;
      } finally {
        this.isLoading = false;
      }
    },
    async updatePod() {
      if (!this.pod || !this.cluster) return;

      this.isSubmitting = true;
      this.error = '';

      try {
        const response = await kubernetesService.updatePod(
          this.cluster.contextName,
          this.yamlContent,
          this.originalPodName,
          this.originalNamespace
        );

        if (response.success) {
          this.$emit('pod-updated', response);
          this.closeModal();
        } else {
          this.error = response.msg || 'Failed to update pod';
        }
      } catch (err: any) {
        this.error = `Failed to update pod: ${err.message || err}`;
      } finally {
        this.isSubmitting = false;
      }
    }
  }
});
</script>

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