<template>
  <div class="py-1">
    <!-- Add Group / Add Host buttons -->
    <div class="flex gap-1 px-3 py-1.5 border-b border-[var(--wraith-border)]">
      <button
        class="flex-1 flex items-center justify-center gap-1 px-2 py-1 text-[10px] font-medium rounded
               bg-[var(--wraith-bg-tertiary)] text-[var(--wraith-text-muted)]
               hover:text-[var(--wraith-text-primary)] hover:bg-[var(--wraith-bg-secondary)] transition-colors"
        @click="addGroup"
        title="New Group"
      >
        <svg viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3"><path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"/></svg>
        Group
      </button>
      <button
        class="flex-1 flex items-center justify-center gap-1 px-2 py-1 text-[10px] font-medium rounded
               bg-[var(--wraith-bg-tertiary)] text-[var(--wraith-text-muted)]
               hover:text-[var(--wraith-text-primary)] hover:bg-[var(--wraith-bg-secondary)] transition-colors"
        @click="editDialog?.openNew()"
        title="New Connection"
      >
        <svg viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3"><path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"/></svg>
        Host
      </button>
    </div>

    <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)"
          @contextmenu.prevent="showGroupMenu($event, group)"
        >
          <!-- 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"
            @dblclick="handleConnect(conn)"
            @contextmenu.prevent="showConnectionMenu($event, conn)"
          >
            <!-- 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>

    <!-- Context menu -->
    <ContextMenu ref="contextMenu" />

    <!-- Edit dialog -->
    <ConnectionEditDialog ref="editDialog" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Call } from "@wailsio/runtime";
import { useConnectionStore, type Connection, type Group } from "@/stores/connection.store";
import { useSessionStore } from "@/stores/session.store";
import ContextMenu from "@/components/common/ContextMenu.vue";
import type { ContextMenuItem } from "@/components/common/ContextMenu.vue";
import ConnectionEditDialog from "@/components/connections/ConnectionEditDialog.vue";

const CONN = "github.com/vstockwell/wraith/internal/connections.ConnectionService";

const connectionStore = useConnectionStore();
const sessionStore = useSessionStore();

const contextMenu = ref<InstanceType<typeof ContextMenu> | null>(null);
const editDialog = ref<InstanceType<typeof ConnectionEditDialog> | null>(null);

// 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);
  }
}

/** Add a new group. */
async function addGroup(): Promise<void> {
  const name = prompt("New group name:");
  if (!name) return;
  try {
    await Call.ByName(`${CONN}.CreateGroup`, name, null);
    await connectionStore.loadGroups();
  } catch (err) {
    console.error("Failed to create group:", err);
  }
}

/** Double-click a connection to open a new session. */
function handleConnect(conn: Connection): void {
  sessionStore.connect(conn.id);
}

/** Show context menu for a connection. */
function showConnectionMenu(event: MouseEvent, conn: Connection): void {
  const items: ContextMenuItem[] = [
    {
      label: "Connect",
      icon: `<svg viewBox="0 0 16 16" fill="currentColor" class="w-3.5 h-3.5"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 15H2.75A1.75 1.75 0 0 1 1 13.25Zm5 1.22v8.06l4.97-4.03L6 3.97Z"/></svg>`,
      action: () => handleConnect(conn),
    },
    { separator: true },
    {
      label: "Edit",
      icon: `<svg viewBox="0 0 16 16" fill="currentColor" class="w-3.5 h-3.5"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.25.25 0 0 0-.064.108l-.558 1.953 1.953-.558a.249.249 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"/></svg>`,
      action: () => editDialog.value?.openEdit(conn),
    },
    {
      label: "Duplicate",
      icon: `<svg viewBox="0 0 16 16" fill="currentColor" class="w-3.5 h-3.5"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25ZM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/></svg>`,
      action: () => duplicateConnection(conn),
    },
    { separator: true },
    {
      label: "Delete",
      icon: `<svg viewBox="0 0 16 16" fill="currentColor" class="w-3.5 h-3.5"><path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"/></svg>`,
      danger: true,
      action: () => deleteConnection(conn),
    },
  ];

  contextMenu.value?.open(event, items);
}

/** Show context menu for a group. */
function showGroupMenu(event: MouseEvent, group: Group): void {
  const items: ContextMenuItem[] = [
    {
      label: "New Connection",
      icon: `<svg viewBox="0 0 16 16" fill="currentColor" class="w-3.5 h-3.5"><path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"/></svg>`,
      action: () => editDialog.value?.openNew(group.id),
    },
    { separator: true },
    {
      label: "Rename",
      icon: `<svg viewBox="0 0 16 16" fill="currentColor" class="w-3.5 h-3.5"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.25.25 0 0 0-.064.108l-.558 1.953 1.953-.558a.249.249 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"/></svg>`,
      action: async () => {
        const newName = prompt("Rename group:", group.name);
        if (newName && newName !== group.name) {
          try {
            await Call.ByName(`${CONN}.RenameGroup`, group.id, newName);
            await connectionStore.loadGroups();
          } catch (err) {
            console.error("Failed to rename group:", err);
          }
        }
      },
    },
    {
      label: "Delete",
      icon: `<svg viewBox="0 0 16 16" fill="currentColor" class="w-3.5 h-3.5"><path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"/></svg>`,
      danger: true,
      action: () => deleteGroup(group),
    },
  ];

  contextMenu.value?.open(event, items);
}

/** Duplicate a connection via the Go backend. */
async function duplicateConnection(conn: Connection): Promise<void> {
  try {
    await Call.ByName(`${CONN}.CreateConnection`, {
      name: `${conn.name} (copy)`,
      hostname: conn.hostname,
      port: conn.port,
      protocol: conn.protocol,
      groupId: conn.groupId,
      credentialId: conn.credentialId ?? null,
      color: conn.color ?? "",
      tags: conn.tags ?? [],
      notes: conn.notes ?? "",
      options: conn.options ?? "{}",
    });
    await connectionStore.loadConnections();
  } catch (err) {
    console.error("Failed to duplicate connection:", err);
  }
}

/** Delete a connection via the Go backend after confirmation. */
async function deleteConnection(conn: Connection): Promise<void> {
  if (!confirm(`Delete "${conn.name}"?`)) return;
  try {
    await Call.ByName(`${CONN}.DeleteConnection`, conn.id);
    await connectionStore.loadConnections();
  } catch (err) {
    console.error("Failed to delete connection:", err);
  }
}

/** Delete a group via the Go backend after confirmation. */
async function deleteGroup(group: Group): Promise<void> {
  if (!confirm(`Delete group "${group.name}" and all its connections?`)) return;
  try {
    await Call.ByName(`${CONN}.DeleteGroup`, group.id);
    await connectionStore.loadAll();
  } catch (err) {
    console.error("Failed to delete group:", err);
  }
}
</script>
