// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>
  <div>
    <!-- GPU Device Management Buttons (before tabs, for Host resource type only) -->
    <div
      v-if="resourceType === 'Host'"
      style="margin-bottom: 16px;"
    >
      <a-space wrap>
        <!-- GPU Device Discovery -->
        <a-popconfirm
          :title="$t('message.confirm.discover.gpu.devices')"
          @confirm="discoverGpuDevices"
          okText="Yes"
          cancelText="No"
        >
          <a-button type="default">
            {{ $t('label.discover.gpu.devices') }}
          </a-button>
        </a-popconfirm>

        <!-- Add GPU Device (Admin Only) -->
        <a-button
          v-if="isAdmin"
          type="primary"
          @click="showAddGpuDeviceModal"
        >
          {{ $t('label.gpu.devices.add') }}
        </a-button>
      </a-space>
    </div>

    <!-- For VMs: Show tabs only for admin, summary only for regular users -->
    <div v-if="resourceType === 'VirtualMachine' && !isAdmin">
      <!-- Summary only for non-admin users viewing VMs -->
      <GPUSummaryTab
        ref="summaryTabSimple"
        :resource="resource"
        :resourceType="resourceType"
        :loading="loading"
        @refresh="$emit('refresh')"
      />
    </div>

    <!-- For admins on VMs or all users on other resource types: Show tabs -->
    <a-tabs
      v-else
      defaultActiveKey="summary"
      :tabBarStyle="{ marginBottom: '16px' }"
    >
      <!-- Summary Tab -->
      <a-tab-pane
        key="summary"
        :tab="$t('label.gpu.summary')"
      >
        <GPUSummaryTab
          ref="summaryTab"
          :resource="resource"
          :resourceType="resourceType"
          :loading="loading"
          @refresh="$emit('refresh')"
        />
      </a-tab-pane>

      <!-- Devices Tab -->
      <a-tab-pane
        key="devices"
        :tab="$t('label.gpu.devices')"
      >
        <GPUDevicesTab
          ref="devicesTab"
          :resource="resource"
          :resourceType="resourceType"
          :loading="loading"
          @refresh="refresh(true)"
        />
      </a-tab-pane>
    </a-tabs>

    <!-- Add GPU Device Modal -->
    <a-modal
      :visible="addGpuDeviceModalVisible"
      :title="$t('label.gpu.devices.add')"
      @ok="addGpuDevice"
      @cancel="addGpuDeviceModalVisible = false"
    >
      <a-form layout="vertical">
        <a-form-item
          v-for="field in createFormFields"
          :key="field.key"
          :label="field.label"
          :required="field.required"
        >
          <!-- Input field -->
          <a-input
            v-if="field.type === 'input'"
            v-model:value="gpuDeviceForm[field.key]"
            :placeholder="field.placeholder"
          />

          <!-- Select field -->
          <a-select
            v-else-if="field.type === 'select'"
            v-model:value="gpuDeviceForm[field.key]"
            :placeholder="field.placeholder"
            :loading="field.loading"
            :show-search="field.showSearch"
            :filter-option="filterOption"
            :allow-clear="field.allowClear"
            @change="field.onChange"
          >
            <a-select-option
              v-for="option in field.options"
              :key="option.value"
              :value="option.value"
            >
              {{ option.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { getAPI, postAPI } from '@/api'
import GPUSummaryTab from '@/components/view/GPUSummaryTab'
import GPUDevicesTab from '@/components/view/GPUDevicesTab'

export default {
  name: 'GPUTab',
  components: {
    GPUSummaryTab,
    GPUDevicesTab
  },
  props: {
    resource: {
      type: Object,
      required: true
    },
    loading: {
      type: Boolean,
      required: true
    },
    resourceType: {
      type: String,
      required: true,
      default: 'Host'
    }
  },
  data () {
    return {
      addGpuDeviceModalVisible: false,
      gpuDeviceForm: {},
      gpuCards: [],
      vgpuProfiles: [],
      parentGpuDevices: [],
      loadingGpuCards: false,
      loadingVgpuProfiles: false,
      loadingParentDevices: false,
      createApiParams: {},
      createFormFields: []
    }
  },
  computed: {
    isAdmin () {
      return this.$store.getters.userInfo.roletype === 'Admin'
    }
  },
  created () {
    this.fetchApiParams()
  },
  methods: {
    discoverGpuDevices () {
      if (!this.resource.id) {
        return
      }

      getAPI('discoverGpuDevices', {
        id: this.resource.id
      }).then(() => {
        this.$notification.success({
          message: this.$t('label.success'),
          description: this.$t('message.success.discover.gpu.devices')
        })
        this.refresh()
      }).catch(error => {
        this.$notifyError(error)
      })
    },
    fetchApiParams () {
      this.createApiParams = this.$getApiParams('createGpuDevice') || {}
      this.generateFormFields()
    },
    generateFormFields () {
      const fields = []
      const fieldOrder = ['busaddress', 'gpucardid', 'vgpuprofileid', 'type', 'numanode', 'parentgpudeviceid']

      fieldOrder.forEach(paramName => {
        if (paramName === 'hostid') return // Skip hostid as it's auto-populated

        const param = this.createApiParams[paramName]
        if (!param) return

        const field = {
          key: paramName,
          label: this.$t(`label.${paramName}`),
          required: param.required || ['busaddress', 'gpucardid', 'vgpuprofileid'].includes(paramName),
          placeholder: param.description,
          type: this.getFieldType(paramName, param)
        }

        // Add special configurations for dropdown fields
        if (field.type === 'select') {
          field.options = this.getFieldOptions(paramName)
          field.loading = this.getFieldLoading(paramName)
          field.showSearch = true
          field.allowClear = false

          if (paramName === 'gpucardid') {
            field.onChange = this.onGpuCardChange
          }
        }

        fields.push(field)
      })

      this.createFormFields = fields
    },
    getFieldType (paramName, param) {
      const selectFields = ['gpucardid', 'vgpuprofileid', 'parentgpudeviceid', 'type']
      return selectFields.includes(paramName) ? 'select' : 'input'
    },
    getFieldOptions (paramName) {
      switch (paramName) {
        case 'gpucardid':
          return this.gpuCards.map(card => ({ value: card.id, label: card.name }))
        case 'vgpuprofileid':
          return this.vgpuProfiles.map(profile => ({ value: profile.id, label: profile.name }))
        case 'parentgpudeviceid':
          return this.parentGpuDevices.map(device => ({
            value: device.id,
            label: `${device.gpucardname} - ${device.busaddress}`
          }))
        case 'type':
          return [
            { value: 'PCI', label: 'PCI' },
            { value: 'MDEV', label: 'MDEV' },
            { value: 'VGPUOnly', label: 'VGPUOnly' }
          ]
        default:
          return []
      }
    },
    getFieldLoading (paramName) {
      switch (paramName) {
        case 'gpucardid':
          return this.loadingGpuCards
        case 'vgpuprofileid':
          return this.loadingVgpuProfiles
        case 'parentgpudeviceid':
          return this.loadingParentDevices
        default:
          return false
      }
    },
    onGpuCardChange (gpucardid) {
      // Clear the selected vGPU profile when GPU card changes
      this.gpuDeviceForm.vgpuprofileid = null
      // Fetch vGPU profiles for the selected GPU card
      if (gpucardid) {
        this.fetchVgpuProfiles(gpucardid)
      } else {
        this.vgpuProfiles = []
      }
    },
    fetchGpuCards () {
      this.loadingGpuCards = true
      getAPI('listGpuCards').then(json => {
        this.gpuCards = json?.listgpucardsresponse?.gpucard || []
        this.generateFormFields() // Refresh form fields with new data
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.loadingGpuCards = false
      })
    },
    fetchVgpuProfiles (gpucardid = null) {
      this.loadingVgpuProfiles = true
      const params = {}
      if (gpucardid) {
        params.gpucardid = gpucardid
      }
      getAPI('listVgpuProfiles', params).then(json => {
        this.vgpuProfiles = json?.listvgpuprofilesresponse?.vgpuprofile || []
        this.generateFormFields() // Refresh form fields with new data
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.loadingVgpuProfiles = false
      })
    },
    fetchParentGpuDevices () {
      if (!this.resource.id || this.resourceType !== 'Host') {
        return
      }
      this.loadingParentDevices = true
      getAPI('listGpuDevices', { hostid: this.resource.id }).then(json => {
        const devices = json?.listgpudevicesresponse?.gpudevice || []
        // Only include devices that can be parent devices (not virtual GPU devices)
        this.parentGpuDevices = devices.filter(device => !device.parentgpudeviceid)
        this.generateFormFields() // Refresh form fields with new data
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.loadingParentDevices = false
      })
    },
    filterOption (input, option) {
      return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    showAddGpuDeviceModal () {
      this.gpuDeviceForm = {
        type: 'PCI' // Set default type
      }
      this.vgpuProfiles = [] // Clear profiles initially
      this.fetchGpuCards()
      this.fetchParentGpuDevices()
      this.addGpuDeviceModalVisible = true
    },
    addGpuDevice () {
      // Validate required fields
      if (!this.gpuDeviceForm.busaddress || !this.gpuDeviceForm.gpucardid || !this.gpuDeviceForm.vgpuprofileid) {
        this.$notification.warning({
          message: this.$t('label.warning'),
          description: this.$t('message.please.fill.required.fields')
        })
        return
      }

      const params = {
        hostid: this.resource.id,
        busaddress: this.gpuDeviceForm.busaddress,
        gpucardid: this.gpuDeviceForm.gpucardid,
        vgpuprofileid: this.gpuDeviceForm.vgpuprofileid
      }

      // Add optional parameters only if they have values
      if (this.gpuDeviceForm.type) {
        params.type = this.gpuDeviceForm.type
      }
      if (this.gpuDeviceForm.numanode) {
        params.numanode = this.gpuDeviceForm.numanode
      }
      if (this.gpuDeviceForm.parentgpudeviceid) {
        params.parentgpudeviceid = this.gpuDeviceForm.parentgpudeviceid
      }

      postAPI('createGpuDevice', params).then(() => {
        this.$notification.success({
          message: this.$t('label.success'),
          description: this.$t('message.success.add.gpu.device')
        })
        this.addGpuDeviceModalVisible = false
        this.refresh()
      }).catch(error => {
        this.$notifyError(error)
      })
    },
    refresh (skipDevicesTab = false) {
      // Refresh summary tabs
      const summaryTab = this.$refs.summaryTab || this.$refs.summaryTabSimple
      if (summaryTab?.refresh) {
        summaryTab.refresh()
      }
      // Refresh devices tab only if not skipped
      if (!skipDevicesTab && this.$refs.devicesTab?.refresh) {
        this.$refs.devicesTab.refresh()
      }
      // Emit refresh to parent
      this.$emit('refresh')
    }
  }
}
</script>

<style scoped>
/* Background colors for GPU device types */
:deep(.parent-gpu-row) {
  background-color: #fafafa;
}

:deep(.vgpu-row) {
  background-color: #f0f8ff;
}

:deep(.parent-gpu-row:hover) {
  background-color: #f5f5f5 !important;
}

:deep(.vgpu-row:hover) {
  background-color: #e6f4ff !important;
}

/* Text truncation for long names */
:deep(.ant-table-tbody .ant-table-cell) {
  max-width: 200px;
}

:deep(.ant-table-tbody .ant-table-cell:has([data-column="gpucardname"]),
  .ant-table-tbody .ant-table-cell:has([data-column="vgpuprofilename"]),
  .ant-table-tbody .ant-table-cell:has([data-column="hostname"])) {
  max-width: 150px;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: inline-block;
}
</style>