<template>
  <PageShell>
    <!-- Loading State -->
    <div v-if="pending" class="loading-state">
      <p>Loading profile...</p>
    </div>

    <!-- Error / 404 State -->
    <div v-else-if="fetchError || !member" class="error-state">
      <p class="error-title">Member not found</p>
      <p class="error-sub">This profile doesn't exist or isn't public.</p>
      <NuxtLink to="/members" class="btn">← Back to Members</NuxtLink>
    </div>

    <!-- Profile Content -->
    <template v-else>

      <!-- HERO: full-bleed, outside ColumnsLayout -->
      <div class="profile-hero" :class="{ 'profile-hero--with-links': hasSocialLinks }">

        <!-- Left: Avatar + Identity -->
        <div class="profile-hero-left">
          <div class="profile-avatar">
            <img
              v-if="member.avatar"
              :src="`/ghosties/Ghost-${member.avatar.charAt(0).toUpperCase() + member.avatar.slice(1)}.png`"
              :alt="member.name"
              class="profile-avatar-img"
            />
            <span v-else class="profile-initials">{{ getInitials(member.name) }}</span>
          </div>
          <div class="profile-identity">
            <h1 class="profile-name">
              {{ member.name }}<span v-if="member.memberNumber" class="profile-member-number">#{{ member.memberNumber }}</span>
            </h1>
            <div v-if="member.pronouns" class="profile-pronouns-row">
              <span class="profile-pronouns">{{ member.pronouns }}</span>
            </div>
            <div class="profile-meta">
              <span v-if="member.circle" class="badge" :class="member.circle">
                {{ circleLabels[member.circle] }}
              </span>
              <template v-if="member.studio">
                <span class="meta-sep">&middot;</span>
                <span class="profile-studio">{{ member.studio }}</span>
              </template>
              <template v-if="member.location || member.timeZone">
                <span class="meta-sep">&middot;</span>
                <span class="profile-location">
                  {{ [member.location, member.timeZone].filter(Boolean).join(' · ') }}
                </span>
              </template>
            </div>
          </div>
        </div>

        <!-- Right: Social Links (only when present) -->
        <div v-if="hasSocialLinks" class="profile-hero-right">
          <div class="section-label">Links</div>
          <div class="social-links">
            <a
              v-if="member.socialLinks.website"
              :href="member.socialLinks.website"
              target="_blank"
              rel="noopener noreferrer"
              class="social-link"
            >Website</a>
            <a
              v-if="member.socialLinks.itch"
              :href="member.socialLinks.itch"
              target="_blank"
              rel="noopener noreferrer"
              class="social-link"
            >itch.io</a>
            <a
              v-if="member.socialLinks.mastodon"
              :href="member.socialLinks.mastodon"
              target="_blank"
              rel="noopener noreferrer"
              class="social-link"
            >Mastodon</a>
            <a
              v-if="member.socialLinks.bluesky"
              :href="member.socialLinks.bluesky"
              target="_blank"
              rel="noopener noreferrer"
              class="social-link"
            >Bluesky</a>
            <a
              v-if="member.socialLinks.linkedin"
              :href="member.socialLinks.linkedin"
              target="_blank"
              rel="noopener noreferrer"
              class="social-link"
            >LinkedIn</a>
          </div>
        </div>

      </div>
      <!-- END HERO -->

      <!-- ColumnsLayout wraps all remaining sections -->
      <ColumnsLayout cols="events-sidebar">

        <!-- Bio: parch (inverted) block -->
        <div v-if="member.bio" class="profile-section profile-section--parch">
          <div class="section-label">About</div>
          <div class="profile-bio" v-html="renderMarkdown(member.bio)"></div>
        </div>

        <!-- Craft Tags -->
        <div v-if="craftTagsDisplay.length > 0" class="profile-section">
          <div class="section-label">What I Do</div>
          <div class="tag-list">
            <span
              v-for="tag in craftTagsDisplay"
              :key="tag"
              class="tag-pill"
            >{{ tagLabel('craft', tag) }}</span>
          </div>
        </div>

        <!-- Board Posts -->
        <div class="profile-section">
          <div class="section-label">Board Posts</div>
          <p v-if="memberPosts.length === 0" class="profile-detail posts-empty">
            No posts yet.
          </p>
          <ul v-else class="posts-list">
            <li v-for="post in memberPosts" :key="post._id" class="post-item">
              <NuxtLink to="/board" class="post-link">
                <div class="post-title">{{ post.title }}</div>
                <div class="post-excerpt">{{ postExcerpt(post) }}</div>
                <div v-if="post.tags && post.tags.length" class="tag-list post-tags">
                  <span
                    v-for="tag in post.tags"
                    :key="tag"
                    class="tag-pill"
                  >{{ tagLabel('cooperative', tag) }}</span>
                </div>
              </NuxtLink>
            </li>
          </ul>
        </div>

        <!-- Recent Activity -->
        <div v-if="activityEntries.length" class="profile-section">
          <div class="section-label">Recent Activity</div>
          <div class="activity-timeline">
            <div v-for="entry in activityEntries" :key="entry._id" class="activity-entry">
              <UIcon :name="getActivity(entry).icon" class="activity-icon" />
              <div class="activity-body">
                <span class="activity-text">{{ getActivity(entry).text }}</span>
                <span class="activity-time">{{ formatRelativeDate(entry.timestamp) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Auth Notice -->
        <div v-if="!isAuthenticated" class="profile-section">
          <div class="auth-notice">
            <p>Sign in to see full profile details</p>
            <button
              type="button"
              class="btn"
              @click="openLoginModal({ title: 'Sign in to see more', description: 'Log in to view full member profiles' })"
            >
              Log In
            </button>
          </div>
        </div>

        <!-- Back Link -->
        <div class="profile-back">
          <NuxtLink to="/members" class="back-link">← Back to Members</NuxtLink>
        </div>

      </ColumnsLayout>

    </template>
  </PageShell>
</template>

<script setup>
definePageMeta({ middleware: ["members-auth"] });

import { formatActivity } from '~/utils/activityText'

const route = useRoute();
const { isAuthenticated } = useAuth();
const { openLoginModal } = useLoginModal();
const { render: renderMarkdown } = useMarkdown();

const id = route.params.id;

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

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

// Fetch member data — no await so the component renders immediately (no Suspense)
const { data, pending, error: fetchError } = useFetch(`/api/members/${id}`);

// Fetch tags for slug-to-label lookup
const { data: tagsData } = useFetch("/api/tags", {
  default: () => ({ tags: [] }),
});

// Fetch public activity
const { data: activityData } = useFetch(`/api/members/${id}/activity`, {
  params: { limit: 5 },
  default: () => ({ entries: [] })
})
const activityEntries = computed(() => activityData.value?.entries || [])

const getActivity = (entry) => formatActivity(entry)

const formatRelativeDate = (date) => {
  const now = new Date()
  const d = new Date(date)
  const diffInSeconds = Math.floor((now - d) / 1000)
  if (diffInSeconds < 60) return 'just now'
  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`
  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`
  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}
const member = computed(() => data.value?.member || null);

// Tag label lookup
const tagLabel = (pool, slug) => {
  const tags = tagsData.value?.tags || [];
  const found = tags.find((t) => t.slug === slug && t.pool === pool);
  return found ? found.label : slug;
};

const craftTagsDisplay = computed(() => member.value?.craftTags || []);

// Board posts authored by this member
const { data: postsData } = useFetch(`/api/board/posts`, {
  params: { author: id },
  default: () => ({ posts: [] }),
})
const memberPosts = computed(() => postsData.value?.posts || [])

const postExcerpt = (post) => {
  const text = post.seeking || post.offering || "";
  if (text.length <= 80) return text;
  return text.slice(0, 80).trimEnd() + "...";
};

// Whether the member has any social links (for hero layout)
const hasSocialLinks = computed(() =>
  member.value?.socialLinks && Object.values(member.value.socialLinks).some(Boolean)
)

const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
watch(
  member,
  (val) => {
    pageBreadcrumbTitle.value = val?.name || "";
  },
  { immediate: true },
);
onUnmounted(() => {
  pageBreadcrumbTitle.value = "";
});

// Page head
useHead({
  title: computed(() =>
    member.value
      ? `${member.value.name} — Ghost Guild`
      : "Member Profile — Ghost Guild",
  ),
});
</script>

<style scoped>
/* ---- LOADING STATE ---- */
.loading-state {
  padding: 80px 32px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

/* ---- ERROR / 404 STATE ---- */
.error-state {
  padding: 80px 32px;
  text-align: center;
}
.error-title {
  font-family: "Brygada 1918", serif;
  font-size: 20px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.error-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 20px;
}

/* ====================================================
   HERO — full-bleed, two-column when social links exist
   ==================================================== */

.profile-hero {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px dashed var(--border);
}

.profile-hero--with-links {
  grid-template-columns: 1fr 1fr;
}

.profile-hero-left {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-hero--with-links .profile-hero-left {
  border-right: 1px dashed var(--border);
}

.profile-hero-right {
  padding: 32px;
}

/* Avatar */
.profile-avatar {
  width: 96px;
  height: 96px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.profile-avatar-img {
  width: 86px;
  height: 86px;
  object-fit: contain;
}
.profile-initials {
  font-family: "Commit Mono", monospace;
  font-size: 28px;
  color: var(--text-faint);
  font-weight: 600;
}

/* Identity */
.profile-identity {
  min-width: 0;
}
.profile-name {
  font-family: "Brygada 1918", serif;
  font-size: 42px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.profile-member-number {
  font-family: "Commit Mono", monospace;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  margin-left: 10px;
  vertical-align: middle;
}

.profile-pronouns-row {
  margin-top: 4px;
}
.profile-pronouns {
  font-family: "Commit Mono", monospace;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.profile-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
}
.meta-sep {
  color: var(--border);
}
.profile-studio,
.profile-location {
  font-family: "Commit Mono", monospace;
  font-size: 12px;
  color: var(--text-dim);
}

/* Social links — vertical stack in hero right column */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.social-link {
  font-family: "Commit Mono", monospace;
  font-size: 11px;
  color: var(--candle);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px dashed var(--border);
  transition: border-color 0.15s, color 0.15s, border-style 0.15s;
  display: block;
}
.social-link:hover {
  border-color: var(--candle);
  border-style: solid;
  color: var(--text-bright);
}

/* ====================================================
   SECTIONS — inside ColumnsLayout
   ==================================================== */

.profile-section {
  padding: 28px 32px;
  border-bottom: 1px dashed var(--border);
}

/* Bio: parch (inverted) block */
.profile-section--parch {
  background: var(--parch);
  border-bottom-color: var(--parch-border);
}
.profile-section--parch .section-label {
  color: var(--parch-text-dim);
}
.profile-section--parch .profile-bio {
  color: var(--parch-text);
}
.profile-section--parch .profile-bio :deep(a) {
  color: var(--parch-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.profile-section--parch .profile-bio :deep(a:hover) {
  color: var(--parch-text);
}

.profile-bio {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-dim);
}
.profile-bio :deep(p) {
  margin: 0 0 10px;
}
.profile-bio :deep(p:last-child) {
  margin-bottom: 0;
}
.profile-bio :deep(a) {
  color: var(--candle);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.profile-bio :deep(a:hover) {
  color: var(--ember);
}

/* ====================================================
   SHARED SECTION ELEMENTS
   ==================================================== */

.profile-detail {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}

/* Tags */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-pill {
  font-family: "Commit Mono", monospace;
  font-size: 10px;
  color: var(--text-dim);
  padding: 3px 8px;
  border: 1px dashed var(--border);
  white-space: nowrap;
}

/* ====================================================
   BOARD POSTS
   ==================================================== */

.posts-empty {
  color: var(--text-faint);
}
.posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-item {
  border-top: 1px dashed var(--border);
}
.post-item:last-child {
  border-bottom: 1px dashed var(--border);
}
.post-link {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
}
.post-link:hover .post-title {
  color: var(--candle);
}
.post-title {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
  transition: color 0.15s;
}
.post-excerpt {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
}
.post-tags {
  margin-top: 6px;
}

/* ====================================================
   ACTIVITY TIMELINE
   ==================================================== */

.activity-timeline {
  display: flex;
  flex-direction: column;
  border-left: 1px dashed var(--border);
  margin-left: 6px;
}
.activity-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0 8px 16px;
  position: relative;
}
/* Dot connector on the timeline track */
.activity-entry::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border: 1px dashed var(--border);
  background: var(--bg);
}
.activity-icon {
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  flex-shrink: 0;
  margin-top: 1px;
}
.activity-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.activity-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.activity-time {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

/* ====================================================
   AUTH NOTICE
   ==================================================== */

.auth-notice {
  border: 1px dashed var(--border);
  padding: 24px;
  text-align: center;
}
.auth-notice p {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 12px;
}

/* ====================================================
   BACK LINK
   ==================================================== */

.profile-back {
  padding: 24px 32px;
}
.back-link {
  font-family: "Commit Mono", monospace;
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.15s;
}
.back-link:hover {
  color: var(--candle);
}

/* ====================================================
   RESPONSIVE
   ==================================================== */

@media (max-width: 768px) {
  .profile-hero,
  .profile-hero--with-links {
    grid-template-columns: 1fr;
  }
  .profile-hero--with-links .profile-hero-left {
    border-right: none;
    border-bottom: 1px dashed var(--border);
  }
  .profile-hero-left {
    padding: 24px 20px;
    gap: 16px;
  }
  .profile-hero-right {
    padding: 20px;
  }
  .profile-name {
    font-size: 28px;
  }
  .profile-avatar {
    width: 72px;
    height: 72px;
  }
  .profile-avatar-img {
    width: 64px;
    height: 64px;
  }
  .profile-initials {
    font-size: 20px;
  }
  .profile-section {
    padding: 20px;
  }
  .profile-back {
    padding: 20px;
  }
  .social-links {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
</style>
