<template>
  <div class="software-grid">
    <div
      v-for="software in cadSoftware"
      :key="software.id"
      class="software-item"
      :class="{
        active: currentSoftware === software.id,
        disabled: software.disabled,
        connected: getConnectionStatus(software.id) === 'connected'
      }"
      :data-software="software.id"
      :title="software.description"
      @click="selectSoftware(software.id)"
    >
      <div class="software-icon">
        <i :class="software.icon"></i>
      </div>
      <span class="software-name">{{ software.name }}</span>
      <div
        class="connection-dot"
        :class="getConnectionStatus(software.id)"
      ></div>
      <button
        class="connection-test-btn"
        :data-software="software.id"
        :title="`测试${software.name}连接`"
        @click.stop="testConnection(software.id)"
      >
        <i class="fas fa-plug"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'
import { getDisplayableCADs } from '@/config/cad'

const props = defineProps({
  currentSoftware: {
    type: String,
    default: ''
  },
  connectionStatus: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['software-selected', 'test-connection'])

// 从配置获取CAD软件列表
const cadSoftware = computed(() => {
  return getDisplayableCADs().map(cad => ({
    id: cad.id,
    name: cad.displayName,
    fullName: cad.name,
    icon: cad.icon,
    disabled: false,
    description: cad.description
  }))
})

const selectSoftware = (software) => {
  emit('software-selected', software)
}

const getConnectionStatus = (software) => {
  return props.connectionStatus[software] || 'disconnected'
}

const testConnection = (software) => {
  emit('test-connection', software)
}
</script>

<style scoped>
.software-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-grid-gap);
  margin-bottom: var(--spacing-card-padding);
}

@media (max-width: 768px) {
  .software-grid {
    grid-template-columns: 1fr;
  }
}

.software-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-form-gap);
  background-color: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  padding: var(--spacing-card-padding) var(--spacing-card-padding-small);
  cursor: pointer;
  transition: all var(--transition-duration) ease;
  text-align: center;
}

.software-item:hover {
  border-color: var(--color-border-active);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-primary-rgb-2);
}

.software-item.active {
  border-color: var(--color-secondary);
  background-color: var(--color-orange-rgb-1);
}

.software-item.connected {
  border-color: var(--color-success);
  background-color: var(--color-bg-success);
}

.software-item.connected .software-icon {
  color: var(--color-text-primary);
}

.software-item.connected .software-name {
  color: var(--color-text-primary);
}

.software-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.software-item.disabled:hover {
  border-color: var(--color-border-primary);
  transform: none;
  box-shadow: none;
}

.software-icon {
  font-size: var(--font-size-icon);
  color: var(--color-text-quaternary);
  transition: color var(--transition-duration) ease;
}

.software-item.active .software-icon {
  color: var(--color-secondary);
}

.software-item.disabled .software-icon {
  color: var(--color-text-quaternary);
}

.software-name {
  font-size: var(--font-size-connection-name);
  color: var(--color-text-quaternary);
  font-weight: var(--font-weight-medium);
}

.software-item.disabled .software-name {
  color: var(--color-text-quaternary);
}

.connection-dot {
  position: absolute;
  top: var(--spacing-connection-dot);
  right: var(--spacing-connection-dot);
  width: var(--size-connection-dot);
  height: var(--size-connection-dot);
  border-radius: 50%;
  border: 1px solid var(--color-white-rgb-3);
}

.connection-dot.connected {
  background-color: var(--color-success);
  box-shadow: 0 0 6px var(--color-success-rgb-5);
}

.connection-dot.disconnected {
  background-color: var(--color-error);
  box-shadow: 0 0 6px var(--color-error-rgb-3);
}

.connection-test-btn {
  position: absolute;
  bottom: var(--spacing-xs);
  right: var(--spacing-xs);
  width: var(--size-connection-test-btn-small);
  height: var(--size-connection-test-btn-small);
  background: var(--color-bg-active);
  border: 1px solid var(--color-border-active);
  border-radius: var(--size-border-radius-button);
  color: var(--color-text-primary);
  font-size: var(--font-size-icon-small);
  cursor: pointer;
  transition: all var(--transition-duration) ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.connection-test-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-active);
  transform: scale(1.1);
}

.connection-test-btn.testing {
  background: var(--color-secondary);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

</style>