<template>
  <div class="members-page">
    <!-- Page Header -->
    <PageHeader
      title="Members"
      :subtitle="`${totalCount} member${totalCount === 1 ? '' : 's'} across 3 circles`"
    />

    <!-- Filter Bar -->
    <div class="filter-bar">
      <input
        v-model="searchQuery"
        type="text"
        class="filter-search"
        placeholder="Search members..."
        @input="debouncedSearch"
      >
      <select
        v-model="selectedCircle"
        class="filter-select"
        @change="loadMembers"
      >
        <option v-for="opt in circleOptions" :key="opt.value" :value="opt.value">
          {{ opt.label }}
        </option>
      </select>
      <label class="filter-toggle">
        <input
          type="checkbox"
          :checked="peerSupportFilter === 'true'"
          @change="togglePeerSupport"
        >
        Offering support
      </label>
      <span class="filter-count">Showing {{ totalCount }} member{{ totalCount === 1 ? '' : 's' }}</span>
    </div>

    <!-- Skills Filter -->
    <div v-if="availableSkills && availableSkills.length > 0" class="skills-bar">
      <span class="tag-label">Skills:</span>
      <button
        v-for="skill in (availableSkills || []).slice(0, showAllSkills ? undefined : 10)"
        :key="skill"
        type="button"
        class="skill-tag"
        :class="{ active: selectedSkills.includes(skill) }"
        @click="toggleSkill(skill)"
      >
        {{ skill }}
      </button>
      <button
        v-if="availableSkills && availableSkills.length > 10"
        type="button"
        class="more-btn"
        @click="showAllSkills = !showAllSkills"
      >
        {{ showAllSkills ? 'Show less' : `+${availableSkills.length - 10} more` }}
      </button>
    </div>

    <!-- Topics Filter -->
    <div v-if="availableTopics && availableTopics.length > 0" class="skills-bar">
      <span class="tag-label">Topics:</span>
      <button
        v-for="topic in (availableTopics || []).slice(0, showAllTopics ? undefined : 10)"
        :key="topic"
        type="button"
        class="skill-tag"
        :class="{ active: selectedTopics.includes(topic) }"
        @click="toggleTopic(topic)"
      >
        {{ topic }}
      </button>
      <button
        v-if="availableTopics && availableTopics.length > 10"
        type="button"
        class="more-btn"
        @click="showAllTopics = !showAllTopics"
      >
        {{ showAllTopics ? 'Show less' : `+${availableTopics.length - 10} more` }}
      </button>
    </div>

    <!-- Active Filters -->
    <div
      v-if="hasActiveFilters"
      class="active-filters"
    >
      <span class="af-label">Active filters:</span>
      <span
        v-if="selectedCircle && selectedCircle !== 'all'"
        class="af-tag"
      >
        {{ circleLabels[selectedCircle] }}
        <button type="button" @click="clearCircleFilter">&times;</button>
      </span>
      <span
        v-if="peerSupportFilter && peerSupportFilter !== 'all'"
        class="af-tag"
      >
        Offering Peer Support
        <button type="button" @click="clearPeerSupportFilter">&times;</button>
      </span>
      <span
        v-for="skill in selectedSkills"
        :key="'s-' + skill"
        class="af-tag"
      >
        {{ skill }}
        <button type="button" @click="toggleSkill(skill)">&times;</button>
      </span>
      <span
        v-for="topic in selectedTopics"
        :key="'t-' + topic"
        class="af-tag"
      >
        {{ topic }}
        <button type="button" @click="toggleTopic(topic)">&times;</button>
      </span>
      <button
        v-if="selectedSkills.length > 0 || selectedTopics.length > 0"
        type="button"
        class="clear-all-btn"
        @click="clearAllFilters"
      >
        Clear all
      </button>
    </div>

    <!-- Loading State -->
    <div v-if="loading && !members.length" class="loading-state">
      <p>Loading members...</p>
    </div>

    <!-- Member Grid -->
    <div v-else-if="members.length > 0" class="member-grid">
      <div
        v-for="member in members"
        :key="member._id"
        class="member-card"
      >
        <div class="mc-head">
          <div class="mc-avatar">
            <img
              v-if="member.avatar"
              :src="`/ghosties/Ghost-${member.avatar.charAt(0).toUpperCase() + member.avatar.slice(1)}.png`"
              :alt="member.name"
              class="mc-avatar-img"
            >
            <span v-else>{{ getInitials(member.name) }}</span>
          </div>
          <div class="mc-info">
            <div class="mc-name">
              <NuxtLink v-if="isAuthenticated" :to="`/members/${member._id}`">{{ member.name }}</NuxtLink>
              <span v-else>{{ member.name }}</span>
              <span v-if="member.pronouns" class="mc-pronouns">{{ member.pronouns }}</span>
            </div>
            <div class="mc-meta">
              <span class="badge" :class="member.circle">{{ circleLabels[member.circle] }}</span>
              <template v-if="member.studio">
                <span class="sep">&middot;</span>
                {{ member.studio }}
              </template>
            </div>
          </div>
        </div>

        <div
          v-if="member.bio"
          class="mc-bio"
          v-html="renderMarkdown(member.bio)"
        ></div>

        <div v-if="member.location || member.timeZone" class="mc-location">
          {{ [member.location, member.timeZone].filter(Boolean).join(' \u00b7 ') }}
        </div>

        <!-- Skills tags -->
        <div
          v-if="member.offering?.tags && member.offering.tags.length > 0"
          class="mc-tags"
        >
          <span class="tag-label">Skills:</span>
          <span
            v-for="tag in member.offering.tags"
            :key="tag"
            class="skill-tag"
          >{{ tag }}</span>
        </div>

        <!-- Looking for -->
        <div
          v-if="member.lookingFor?.tags && member.lookingFor.tags.length > 0"
          class="mc-looking"
        >
          Looking for: {{ member.lookingFor.tags.join(', ') }}
        </div>

        <!-- Peer support session link -->
        <a
          v-if="member.peerSupport?.enabled && member.peerSupport?.slackUsername"
          href="#"
          class="mc-session"
          @click.prevent="openSlackDM(member)"
        >
          Book session
        </a>
      </div>
    </div>

    <!-- Empty State -->
    <div v-else class="empty-state">
      <p class="empty-title">No members found</p>
      <p class="empty-sub">Try adjusting your search or filters</p>
      <button type="button" class="btn" @click="clearAllFilters">Clear Filters</button>
    </div>

    <!-- Load more / count -->
    <div v-if="members.length > 0" class="load-more">
      <span>Showing {{ members.length }} of {{ totalCount }} member{{ totalCount === 1 ? '' : 's' }}</span>
    </div>

    <!-- Not Authenticated Notice -->
    <div
      v-if="!isAuthenticated && members.length > 0"
      class="auth-notice"
    >
      <p>Some member information is visible to members only.</p>
      <div class="auth-actions">
        <button
          type="button"
          class="btn"
          @click="openLoginModal({ title: 'Sign in to see more', description: 'Log in to view full member profiles' })"
        >
          Log In
        </button>
        <NuxtLink to="/join" class="btn btn-primary">Join Ghost Guild</NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
const { isAuthenticated } = useAuth();
const { openLoginModal } = useLoginModal();
const { render: renderMarkdown } = useMarkdown();

// State
const members = ref([]);
const totalCount = ref(0);
const availableSkills = ref([]);
const availableTopics = ref([]);
const loading = ref(true);
const searchQuery = ref("");
const selectedCircle = ref("all");
const peerSupportFilter = ref("all");
const selectedSkills = ref([]);
const selectedTopics = ref([]);
const showAllSkills = ref(false);
const showAllTopics = ref(false);

// Circle options
const circleOptions = [
  { label: "All Circles", value: "all" },
  { label: "Community", value: "community" },
  { label: "Founder", value: "founder" },
  { label: "Practitioner", value: "practitioner" },
];

const circleLabels = {
  community: "Community",
  founder: "Founder",
  practitioner: "Practitioner",
};

// Peer support filter options
const peerSupportOptions = [
  { label: "All Members", value: "all" },
  { label: "Offering Peer Support", value: "true" },
];

// Computed: has active filters
const hasActiveFilters = computed(() => {
  return (
    (selectedCircle.value && selectedCircle.value !== 'all') ||
    (peerSupportFilter.value && peerSupportFilter.value !== 'all') ||
    selectedSkills.value.length > 0 ||
    selectedTopics.value.length > 0
  );
});

// Get initials from name
const getInitials = (name) => {
  if (!name) return '?';
  return name
    .split(' ')
    .map((w) => w[0])
    .join('')
    .toUpperCase()
    .slice(0, 2);
};

// Load members
const loadMembers = async () => {
  loading.value = true;

  try {
    const params = {};
    if (searchQuery.value) params.search = searchQuery.value;
    if (selectedCircle.value && selectedCircle.value !== "all")
      params.circle = selectedCircle.value;
    if (peerSupportFilter.value && peerSupportFilter.value !== "all")
      params.peerSupport = peerSupportFilter.value;
    if (selectedSkills.value.length > 0)
      params.skills = selectedSkills.value.join(",");
    if (selectedTopics.value.length > 0)
      params.topics = selectedTopics.value.join(",");

    const data = await $fetch("/api/members/directory", { params });

    members.value = data.members || [];
    totalCount.value = data.totalCount || 0;
    availableSkills.value = data.filters?.availableSkills || [];
    availableTopics.value = data.filters?.availableTopics || [];
  } catch (error) {
    console.error("Failed to load members:", error);
    members.value = [];
    totalCount.value = 0;
    availableSkills.value = [];
    availableTopics.value = [];
  } finally {
    loading.value = false;
  }
};

// Toggle peer support checkbox
const togglePeerSupport = (e) => {
  peerSupportFilter.value = e.target.checked ? 'true' : 'all';
  loadMembers();
};

// Debounced search
let searchTimeout;
const debouncedSearch = () => {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    loadMembers();
  }, 300);
};

// Toggle skill filter
const toggleSkill = (skill) => {
  const index = selectedSkills.value.indexOf(skill);
  if (index > -1) {
    selectedSkills.value.splice(index, 1);
  } else {
    selectedSkills.value.push(skill);
  }
  loadMembers();
};

// Toggle topic filter
const toggleTopic = (topic) => {
  const index = selectedTopics.value.indexOf(topic);
  if (index > -1) {
    selectedTopics.value.splice(index, 1);
  } else {
    selectedTopics.value.push(topic);
  }
  loadMembers();
};

// Clear filters
const clearCircleFilter = () => {
  selectedCircle.value = "all";
  loadMembers();
};

const clearPeerSupportFilter = () => {
  peerSupportFilter.value = "all";
  loadMembers();
};

const clearAllFilters = () => {
  searchQuery.value = "";
  selectedCircle.value = "all";
  peerSupportFilter.value = "all";
  selectedSkills.value = [];
  selectedTopics.value = [];
  loadMembers();
};

// Slack DM functionality
const openSlackDM = async (member) => {
  const username = member.peerSupport?.slackUsername || member.name;

  try {
    await navigator.clipboard.writeText(username);
  } catch (err) {
    console.log("Could not copy to clipboard:", err);
  }

  alert(
    `Opening Slack...\n\nSearch for: ${username}\n\n(Username copied to clipboard)`,
  );
  window.open("https://gammaspace.slack.com", "_blank");
};

// Load on mount and handle query params
onMounted(() => {
  const route = useRoute();
  if (route.query.peerSupport === "true") {
    peerSupportFilter.value = "true";
  }

  loadMembers();
});

useHead({
  title: "Member Directory - Ghost Guild",
  meta: [
    {
      name: "description",
      content:
        "Connect with members of the Ghost Guild community - game developers, founders, and practitioners building solidarity economy studios.",
    },
  ],
});
</script>

<style scoped>
/* ---- FILTER BAR ---- */
.filter-bar {
  padding: 16px 24px;
  border-bottom: 1px dashed var(--border);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-search {
  font-family: 'Commit Mono', monospace;
  font-size: 12px;
  padding: 5px 12px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text);
  outline: none;
  min-width: 180px;
  transition: border-color 0.15s;
}
.filter-search::placeholder {
  color: var(--text-faint);
}
.filter-search:focus {
  border-color: var(--candle-faint);
}

.filter-select {
  font-family: 'Commit Mono', monospace;
  font-size: 11px;
  padding: 5px 10px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238a7e6a' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}
.filter-select:focus {
  border-color: var(--candle-faint);
}

.filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
}
.filter-toggle input {
  accent-color: var(--candle-dim);
}

.filter-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
}

/* ---- SKILLS / TOPICS BAR ---- */
.skills-bar {
  padding: 12px 24px;
  border-bottom: 1px dashed var(--border);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.skills-bar .tag-label {
  font-size: 10px;
  color: var(--text-faint);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.skills-bar .skill-tag {
  font-family: 'Commit Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  padding: 2px 8px;
  border: 1px dashed var(--border);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.skills-bar .skill-tag:hover {
  border-color: var(--candle-faint);
  color: var(--text);
}
.skills-bar .skill-tag.active {
  border-color: var(--candle-dim);
  border-style: solid;
  color: var(--candle);
  background: rgba(154, 116, 32, 0.08);
}

.more-btn {
  font-family: 'Commit Mono', monospace;
  font-size: 10px;
  color: var(--candle);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.more-btn:hover {
  text-decoration: underline;
}

/* ---- ACTIVE FILTERS ---- */
.active-filters {
  padding: 10px 24px;
  border-bottom: 1px dashed var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
}

.af-label {
  color: var(--text-faint);
}

.af-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px dashed var(--candle-faint);
  color: var(--candle);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.af-tag button {
  background: none;
  border: none;
  color: var(--candle);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 0 0 2px;
}
.af-tag button:hover {
  color: var(--ember);
}

.clear-all-btn {
  font-family: 'Commit Mono', monospace;
  font-size: 10px;
  color: var(--candle);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.clear-all-btn:hover {
  text-decoration: underline;
}

/* ---- LOADING ---- */
.loading-state {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

/* ---- MEMBER GRID ---- */
.member-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.member-card {
  padding: 16px 20px;
  border-bottom: 1px dashed var(--border);
  border-right: 1px dashed var(--border);
  transition: background 0.15s;
}
.member-card:hover {
  background: var(--surface);
}
.member-card:nth-child(2n) {
  border-right: none;
}

.mc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.mc-avatar {
  width: 32px;
  height: 32px;
  background: var(--surface);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
  overflow: hidden;
}

.mc-avatar-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.mc-info {
  min-width: 0;
}

.mc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
}
.mc-name a {
  color: var(--text-bright);
  text-decoration: none;
}
.mc-name a:hover {
  color: var(--candle);
  text-decoration: underline;
}

.mc-pronouns {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 4px;
  font-weight: 400;
}

.mc-meta {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 1px;
}
.mc-meta .sep {
  color: var(--border);
}

.mc-bio {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-bio :deep(p) {
  margin: 0;
}

.mc-location {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.mc-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}
.mc-tags .tag-label {
  font-size: 10px;
  color: var(--text-faint);
  margin-right: 2px;
}

.mc-tags .skill-tag {
  font-size: 10px;
  color: var(--text-dim);
  padding: 1px 6px;
  border: 1px dashed var(--border);
  white-space: nowrap;
}

.mc-looking {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
  margin-top: 4px;
}

.mc-session {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Commit Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px dashed var(--candle-faint);
  color: var(--candle);
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  text-decoration: none;
}
.mc-session:hover {
  border-color: var(--candle);
  background: rgba(122, 90, 16, 0.06);
  text-decoration: none;
}

/* ---- LOAD MORE ---- */
.load-more {
  padding: 20px 24px;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---- EMPTY STATE ---- */
.empty-state {
  padding: 60px 24px;
  text-align: center;
}
.empty-title {
  font-family: 'Brygada 1918', serif;
  font-size: 18px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.empty-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 16px;
}

/* ---- AUTH NOTICE ---- */
.auth-notice {
  padding: 24px;
  margin: 20px 24px;
  border: 1px dashed var(--candle-faint);
  text-align: center;
}
.auth-notice p {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.auth-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .member-grid {
    grid-template-columns: 1fr;
  }
  .member-card {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 20px;
  }
  .filter-count {
    margin-left: 0;
  }
  .skills-bar {
    padding: 10px 20px;
  }
  .active-filters {
    padding: 8px 20px;
  }
  .member-card {
    padding: 14px 16px;
  }
  .auth-notice {
    margin: 16px;
  }
}
</style>
