<template>
  <div class="dev-login">
    <div class="dev-label">Dev Login</div>
    <div class="dev-actions">
      <div class="dev-buttons">
        <a href="/api/dev/test-login" class="dev-button">Admin</a>
        <button class="dev-button dev-logout" @click="handleLogout">
          Log out
        </button>
      </div>
      <USelectMenu
        v-model="selectedEmail"
        :items="members"
        value-key="value"
        :filter-fields="['label', 'value']"
        placeholder="Switch user..."
        :search-input="{ placeholder: 'Search members...' }"
        class="dev-select"
        size="xs"
        @update:model-value="loginAsEmail"
      />
    </div>
  </div>
</template>

<script setup>
const selectedEmail = ref(null);
const { logout } = useAuth();

const { data: members } = await useFetch("/api/dev/members", {
  default: () => [],
});

const loginAsEmail = (email) => {
  if (email) {
    navigateTo(`/api/dev/member-login?email=${encodeURIComponent(email)}`, {
      external: true,
    });
  }
};

const handleLogout = async () => {
  await logout();
};
</script>

<style scoped>
.dev-login {
  margin-top: 10px;
  padding: 8px;
  border: 1px dashed var(--ember);
  background: transparent;
}

.dev-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 8px;
}

.dev-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dev-buttons {
  display: flex;
  gap: 6px;
}

.dev-button {
  flex: 1;
  padding: 4px 8px;
  font-family: "Commit Mono", monospace;
  font-size: 11px;
  background: var(--surface);
  color: var(--ember);
  border: 1px solid var(--ember);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.15s;
}

.dev-button:hover {
  background: var(--ember);
  color: var(--bg);
}

.dev-select {
  width: 100%;
}

:deep([data-slot="base"]) {
  background: var(--bg);
  border-color: var(--border);
}

:deep([data-slot="placeholder"]) {
  color: var(--text-dim);
}
</style>
