<template>
  <div class="nav-pane">
    <!-- Clusters Section -->
    <div class="nav-section">
      <div class="section-header">
        <span class="section-title">CLUSTERS</span>
      </div>
      <ClusterList 
        :clusters="clusters"
        :selectedCluster="selectedCluster"
        @select-cluster="handleClusterSelect"
      />
    </div>

    <div class="nav-section" v-if="selectedCluster">
      <div class="section-header">
        <span class="section-title">WORKLOADS</span>
      </div>
      <div class="section-content">
        <div 
          :class="['nav-item', { active: selectedResource === 'deployments' }]"
          @click="selectResource('deployments')"
        >
          <i class="fas fa-cubes"></i>
          Deployments
        </div>
        <div 
          :class="['nav-item', { active: selectedResource === 'statefulsets' }]"
          @click="selectResource('statefulsets')"
        >
          <i class="fas fa-cubes"></i>
          StatefulSets
        </div>
        <div 
          :class="['nav-item', { active: selectedResource === 'pods' }]"
          @click="selectResource('pods')"
        >
          <i class="fas fa-cube"></i>
          Pods
        </div>
      </div>
    </div>

    <div class="nav-section" v-if="selectedCluster">
      <div class="section-header">
        <span class="section-title">CONFIGURATION</span>
      </div>
      <div class="section-content">
        <div 
          :class="['nav-item', { active: selectedResource === 'namespaces' }]"
          @click="selectResource('namespaces')"
        >
          <i class="fas fa-cubes"></i>
          Namespaces
        </div>
        <div 
          :class="['nav-item', { active: selectedResource === 'configmaps' }]"
          @click="selectResource('configmaps')"
        >
          <i class="fas fa-cubes"></i>
          ConfigMaps
        </div>
        <div 
          :class="['nav-item', { active: selectedResource === 'secrets' }]"
          @click="selectResource('secrets')"
        >
          <i class="fas fa-cubes"></i>
          Secrets
        </div>
      </div>
    </div>

    <div class="nav-section" v-if="selectedCluster">
      <div class="section-header">
        <span class="section-title">NETWORKING</span>
      </div>
      <div class="section-content">
        <div 
          :class="['nav-item', { active: selectedResource === 'ingresses' }]"
          @click="selectResource('ingresses')"
        >
          <i class="fas fa-cubes"></i>
          Ingress
        </div>
      </div>
    </div>

    <div class="nav-section" v-if="selectedCluster">
      <div class="section-header">
        <span class="section-title">STORAGE</span>
      </div>
      <div class="section-content">
        <div 
          :class="['nav-item', { active: selectedResource === 'persistentvolumeclaims' }]"
          @click="selectResource('persistentvolumeclaims')"
        >
          <i class="fas fa-cubes"></i>
          Volume Claims
        </div>
      </div>
      <div class="section-content">
        <div 
          :class="['nav-item', { active: selectedResource === 'persistentVolumes' }]"
          @click="selectResource('persistentVolumes')"
        >
          <i class="fas fa-cubes"></i>
          Volumes
        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { KubernetesCluster } from '../types/kubernetes';
import ClusterList from './ClusterList.vue';

export default defineComponent({
  name: 'NavigationPane',

  components: {
    ClusterList
  },

  props: {
    clusters: {
      type: Array as PropType<KubernetesCluster[]>,
      required: true,
      default: () => []
    },
    selectedCluster: {
      type: Object as PropType<KubernetesCluster | null>,
      required: false,
      default: null
    },
    selectedResource: {
      type: String as PropType<String | null>,
      required: false,
      default: null
    }
  },
  emits: ['select-cluster', 'select-resource'],
  methods: {
    handleClusterSelect(cluster: KubernetesCluster) {
      this.$emit('select-cluster', cluster);
    },

    selectResource(resource: string) {
      this.$emit('select-resource', resource);
    }
  }
});
</script>

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