<template>
  <div class="py-1">
    <template v-for="group in connectionStore.groups" :key="group.id">
      <!-- Only show groups that have matching connections during search -->
      <div v-if="!connectionStore.searchQuery || connectionStore.groupHasResults(group.id)">
        <!-- Group header -->
        <button
          class="w-full flex items-center gap-1.5 px-3 py-1.5 text-xs hover:bg-[var(--wraith-bg-tertiary)] transition-colors cursor-pointer"
          @click="toggleGroup(group.id)"
        >
          <!-- Chevron -->
          <svg
            class="w-3 h-3 text-[var(--wraith-text-muted)] transition-transform shrink-0"
            :class="{ 'rotate-90': expandedGroups.has(group.id) }"
            viewBox="0 0 16 16"
            fill="currentColor"
          >
            <path d="M6 4l4 4-4 4z" />
          </svg>

          <!-- Folder icon -->
          <svg
            class="w-3.5 h-3.5 text-[var(--wraith-accent-yellow)] shrink-0"
            viewBox="0 0 16 16"
            fill="currentColor"
          >
            <path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z" />
          </svg>

          <span class="text-[var(--wraith-text-primary)] truncate">{{ group.name }}</span>

          <!-- Connection count -->
          <span class="ml-auto text-[var(--wraith-text-muted)] text-[10px]">
            {{ connectionStore.connectionsByGroup(group.id).length }}
          </span>
        </button>

        <!-- Connections in group -->
        <div v-if="expandedGroups.has(group.id)">
          <button
            v-for="conn in connectionStore.connectionsByGroup(group.id)"
            :key="conn.id"
            class="w-full flex items-center gap-2 pl-8 pr-3 py-1.5 text-xs hover:bg-[var(--wraith-bg-tertiary)] transition-colors cursor-pointer"
          >
            <!-- Protocol dot -->
            <span
              class="w-2 h-2 rounded-full shrink-0"
              :class="conn.protocol === 'ssh' ? 'bg-[#3fb950]' : 'bg-[#1f6feb]'"
            />
            <span class="text-[var(--wraith-text-primary)] truncate">{{ conn.name }}</span>
            <span
              v-for="tag in conn.tags"
              :key="tag"
              class="ml-auto text-[10px] px-1.5 py-0.5 rounded bg-[var(--wraith-bg-tertiary)] text-[var(--wraith-text-muted)]"
            >
              {{ tag }}
            </span>
          </button>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useConnectionStore } from "@/stores/connection.store";

const connectionStore = useConnectionStore();

// All groups expanded by default
const expandedGroups = ref<Set<number>>(
  new Set(connectionStore.groups.map((g) => g.id)),
);

function toggleGroup(groupId: number): void {
  if (expandedGroups.value.has(groupId)) {
    expandedGroups.value.delete(groupId);
  } else {
    expandedGroups.value.add(groupId);
  }
}
</script>
