<template>
  <div :class="selectorClass" ref="dropdownContainer">
    <div class="server-dropdown" ref="dropdown">
      <button
        class="server-trigger"
        @click="toggleDropdown"
        :aria-expanded="dropdownOpen"
        aria-label="Selectare server"
      >
        <div class="server-info">
          <i class="pi pi-server server-icon"></i>
          <span class="server-name">{{ selectedServerName }}</span>
        </div>
        <i
          class="pi pi-chevron-down chevron-icon"
          :class="{ 'rotate-180': dropdownOpen }"
        ></i>
      </button>

      <div
        v-show="dropdownOpen"
        class="server-dropdown-panel"
        :class="{ 'panel-open': dropdownOpen }"
      >
        <div class="server-list">
          <div
            v-for="server in servers"
            :key="server.id"
            class="server-item"
            :class="{ active: server.id === modelValue }"
            @click="selectServer(server)"
          >
            <div class="server-item-info">
              <i class="pi pi-server"></i>
              <span class="server-item-name">{{ server.name }}</span>
            </div>
            <i
              v-if="server.id === modelValue"
              class="pi pi-check server-selected-icon"
            ></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from "vue";

export default {
  name: "ServerSelector",
  props: {
    modelValue: {
      type: String,
      default: ""
    },
    servers: {
      type: Array,
      default: () => []
    },
    variant: {
      type: String,
      default: "default" // 'default' | 'header'
    }
  },
  emits: ["update:modelValue", "change"],
  setup(props, { emit }) {
    const dropdownOpen = ref(false);
    const dropdownContainer = ref(null);

    const selectorClass = computed(() => ({
      "server-selector": true,
      "server-selector--header": props.variant === "header"
    }));

    const selectedServerName = computed(() => {
      const server = props.servers?.find(s => s.id === props.modelValue);
      return server?.name || "Server";
    });

    const toggleDropdown = () => {
      dropdownOpen.value = !dropdownOpen.value;
    };

    const selectServer = (server) => {
      if (server.id !== props.modelValue) {
        emit("update:modelValue", server.id);
        emit("change", { value: server.id, originalEvent: event });
      }
      dropdownOpen.value = false;
    };

    const handleClickOutside = (event) => {
      if (dropdownContainer.value && !dropdownContainer.value.contains(event.target)) {
        dropdownOpen.value = false;
      }
    };

    onMounted(() => {
      document.addEventListener("click", handleClickOutside);
    });

    onUnmounted(() => {
      document.removeEventListener("click", handleClickOutside);
    });

    return {
      dropdownOpen,
      dropdownContainer,
      selectorClass,
      selectedServerName,
      toggleDropdown,
      selectServer
    };
  }
};
</script>

<style scoped>
.server-selector {
  position: relative;
}

.server-dropdown {
  position: relative;
}

/* Trigger button - match CompanySelector height */
.server-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 8px);
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  background: transparent;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.2));
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 120px;
  /* Fixed height to match CompanySelector (which has 2 lines) */
  height: 52px;
  box-sizing: border-box;
}

.server-trigger:hover {
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
  border-color: var(--color-primary, #2563eb);
}

.server-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  flex: 1;
  min-width: 0;
}

.server-icon {
  font-size: var(--text-sm, 14px);
  color: var(--primary-600, #2563eb);
  flex-shrink: 0;
}

.server-name {
  font-size: var(--text-sm, 14px);
  font-weight: var(--font-medium, 500);
  color: var(--color-text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chevron-icon {
  font-size: 0.65rem;
  color: var(--text-color-secondary, #6b7280);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.chevron-icon.rotate-180 {
  transform: rotate(180deg);
}

/* Dropdown Panel */
.server-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--surface-card, #fff);
  border: 1px solid var(--surface-border, #e2e8f0);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
}

.server-list {
  max-height: 200px;
  overflow-y: auto;
}

.server-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  cursor: pointer;
  transition: background 0.15s ease;
}

.server-item:hover {
  background: var(--surface-hover, #f1f5f9);
}

.server-item.active {
  background: var(--primary-50, #eff6ff);
}

.server-item-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
}

.server-item-info .pi-server {
  font-size: 0.875rem;
  color: var(--text-color-secondary, #6b7280);
}

.server-item-name {
  font-size: 0.875rem;
  color: var(--text-color, #111827);
}

.server-selected-icon {
  color: var(--primary-600, #2563eb);
  font-size: 0.75rem;
}

/* Header variant */
.server-selector--header .server-trigger {
  background: transparent;
  border-color: var(--color-border, rgba(0, 0, 0, 0.2));
}

.server-selector--header .server-trigger:hover {
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
  border-color: var(--color-primary, #2563eb);
}

/* ===== Dark mode ===== */
[data-theme="dark"] .server-icon {
  color: var(--primary-400, #60a5fa);
}

[data-theme="dark"] .server-name {
  color: var(--text-color, #f9fafb);
}

[data-theme="dark"] .server-dropdown-panel {
  background: var(--surface-card, #1e293b);
  border-color: var(--surface-border, #475569);
}

[data-theme="dark"] .server-item:hover {
  background: var(--surface-hover, #334155);
}

[data-theme="dark"] .server-item.active {
  background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .server-item-name {
  color: var(--text-color, #f9fafb);
}

[data-theme="dark"] .server-item-info .pi-server {
  color: var(--text-color-secondary, #94a3b8);
}

/* ===== Gradient header support ===== */
.header-container--gradient .server-selector--header .server-trigger {
  border-color: rgba(255, 255, 255, 0.3);
}

.header-container--gradient .server-selector--header .server-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.header-container--gradient .server-selector--header .server-icon {
  color: white;
}

.header-container--gradient .server-selector--header .server-name {
  color: white;
}

.header-container--gradient .server-selector--header .chevron-icon {
  color: rgba(255, 255, 255, 0.8);
}
</style>
