<template>
  <div>
    <PageHeader
      title="My Updates"
      subtitle="Your activity and milestones in the Guild"
    />

    <!-- Content Area: two-column with events mini sidebar -->
    <div class="content-area">

      <!-- Main Content -->
      <div class="content-main">
        <ClientOnly>

        <!-- Stats + New Update row -->
        <div v-if="isAuthenticated && !pending" class="stats-row">
          <span class="stats-count">
            <strong>{{ total }}</strong> {{ total === 1 ? 'update' : 'updates' }} posted
          </span>
          <NuxtLink to="/updates/new" class="btn btn-primary">+ New Update</NuxtLink>
        </div>

        <!-- Loading State -->
        <div v-if="pending && !updates.length" class="state-box">
          <div class="spinner"></div>
          <p class="state-text">Loading your updates...</p>
        </div>

        <!-- Unauthenticated State -->
        <div v-else-if="!isAuthenticated" class="state-box">
          <div class="state-icon">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
            </svg>
          </div>
          <h2 class="state-heading">Sign in required</h2>
          <p class="state-text">Please sign in to view your updates.</p>
          <button
            class="btn btn-primary"
            @click="openLoginModal({ title: 'Sign in to view your updates', description: 'Enter your email to access your updates' })"
          >
            Sign In
          </button>
        </div>

        <!-- Updates Timeline -->
        <div v-else-if="updates.length" class="timeline-wrap">
          <div class="timeline">
            <div
              v-for="update in updates"
              :key="update._id"
              class="tl-item"
            >
              <div class="tl-dot">&#9998;</div>
              <div class="tl-time">{{ formatDate(update.createdAt) }}</div>
              <div class="tl-text">
                <NuxtLink :to="`/updates/${update._id}`" class="tl-title">
                  {{ getUpdateTitle(update) }}
                </NuxtLink>
                <span v-if="isEdited(update)" class="tl-edited">(edited)</span>
                <span v-if="update.privacy === 'private'" class="badge">Private</span>
                <span v-if="update.privacy === 'public'" class="badge">Public</span>
              </div>
              <div v-if="getUpdatePreview(update)" class="tl-detail">
                {{ getUpdatePreview(update) }}
              </div>

              <!-- Images -->
              <div v-if="update.images?.length" class="tl-images">
                <img
                  v-for="(image, index) in update.images"
                  :key="index"
                  :src="image.url"
                  :alt="image.alt || 'Update image'"
                  class="tl-image"
                />
              </div>

              <!-- Actions -->
              <div v-if="isAuthor(update)" class="tl-actions">
                <button class="tl-action-btn" @click="handleEdit(update)">Edit</button>
                <span class="tl-action-sep">&middot;</span>
                <button class="tl-action-btn tl-action-danger" @click="handleDelete(update)">Delete</button>
              </div>
            </div>
          </div>

          <!-- Load More -->
          <div v-if="hasMore" class="load-more">
            <button
              class="btn"
              :disabled="loadingMore"
              @click="loadMore"
            >
              {{ loadingMore ? 'Loading...' : 'Load More' }}
            </button>
          </div>
        </div>

        <!-- Empty State -->
        <div v-else class="state-box">
          <div class="state-icon">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
            </svg>
          </div>
          <h2 class="state-heading">No updates yet</h2>
          <p class="state-text">Share your first update with the community</p>
          <NuxtLink to="/updates/new" class="btn btn-primary">+ Post Your First Update</NuxtLink>
        </div>

        <template #fallback>
          <div class="state-box">
            <div class="spinner"></div>
            <p class="state-text">Loading your updates...</p>
          </div>
        </template>
        </ClientOnly>

      </div>

      <!-- Events Mini Sidebar -->
      <EventsMiniSidebar :events="upcomingEvents" />

    </div>

    <!-- Delete Confirmation Modal -->
    <Teleport to="body">
      <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
        <div class="modal-box">
          <h3 class="modal-heading">Delete Update?</h3>
          <p class="modal-text">Are you sure you want to delete this update? This action cannot be undone.</p>
          <div class="modal-actions">
            <button class="btn" @click="showDeleteModal = false">Cancel</button>
            <button class="btn btn-danger" :disabled="deleting" @click="confirmDelete">
              {{ deleting ? 'Deleting...' : 'Delete' }}
            </button>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
const { isAuthenticated, memberData, checkMemberStatus } = useAuth()
const { openLoginModal } = useLoginModal()

const updates = ref([])
const pending = ref(false)
const loadingMore = ref(false)
const hasMore = ref(false)
const total = ref(0)

const showDeleteModal = ref(false)
const updateToDelete = ref(null)
const deleting = ref(false)

const upcomingEvents = ref([])

// Check if current user is the author of an update
const isAuthor = (update) => {
  return memberData.value && update.author?._id === memberData.value.id
}

// Check if update was edited
const isEdited = (update) => {
  const created = new Date(update.createdAt).getTime()
  const updated = new Date(update.updatedAt).getTime()
  return updated - created > 1000
}

// Extract a title from update content (first line or first ~60 chars)
const getUpdateTitle = (update) => {
  if (!update.content) return 'Untitled update'
  const firstLine = update.content.split('\n')[0]
  if (firstLine.length <= 80) return firstLine
  return firstLine.substring(0, 80) + '...'
}

// Get a preview of the update content (after the first line)
const getUpdatePreview = (update) => {
  if (!update.content) return ''
  const lines = update.content.split('\n')
  if (lines.length <= 1 && update.content.length <= 80) return ''
  // If the first line was truncated, show the full content as preview
  if (lines.length <= 1) return ''
  const rest = lines.slice(1).join(' ').trim()
  if (!rest) return ''
  return rest.length > 200 ? rest.substring(0, 200) + '...' : rest
}

// Format date with relative time
const formatDate = (date) => {
  const now = new Date()
  const updateDate = new Date(date)
  const diffInSeconds = Math.floor((now - updateDate) / 1000)

  if (diffInSeconds < 60) return 'just now'
  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`
  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`
  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)} days ago`

  return updateDate.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: updateDate.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
  })
}

// Check authentication
onMounted(async () => {
  if (!isAuthenticated.value) {
    const authenticated = await checkMemberStatus()
    if (!authenticated) {
      openLoginModal({
        title: 'Sign in to view your updates',
        description: 'Enter your email to access your updates',
      })
      return
    }
  }

  await Promise.all([loadUpdates(), loadUpcomingEvents()])
})

// Load updates
const loadUpdates = async () => {
  pending.value = true
  try {
    const response = await $fetch('/api/updates/my-updates', {
      params: { limit: 20, skip: 0 },
    })
    updates.value = response.updates
    total.value = response.total
    hasMore.value = response.hasMore
  } catch (error) {
    console.error('Failed to load updates:', error)
  } finally {
    pending.value = false
  }
}

// Load upcoming events for sidebar
const loadUpcomingEvents = async () => {
  try {
    const response = await $fetch('/api/events', {
      params: { limit: 3, upcoming: true },
    })
    upcomingEvents.value = response.events || response || []
  } catch (error) {
    console.error('Failed to load upcoming events:', error)
  }
}

// Load more updates
const loadMore = async () => {
  loadingMore.value = true
  try {
    const response = await $fetch('/api/updates/my-updates', {
      params: { limit: 20, skip: updates.value.length },
    })
    updates.value.push(...response.updates)
    hasMore.value = response.hasMore
  } catch (error) {
    console.error('Failed to load more updates:', error)
  } finally {
    loadingMore.value = false
  }
}

// Handle edit
const handleEdit = (update) => {
  navigateTo(`/updates/${update._id}/edit`)
}

// Handle delete
const handleDelete = (update) => {
  updateToDelete.value = update
  showDeleteModal.value = true
}

// Confirm delete
const confirmDelete = async () => {
  if (!updateToDelete.value) return

  deleting.value = true
  try {
    await $fetch(`/api/updates/${updateToDelete.value._id}`, {
      method: 'DELETE',
    })

    // Remove from list
    updates.value = updates.value.filter(
      (u) => u._id !== updateToDelete.value._id,
    )
    total.value--

    showDeleteModal.value = false
    updateToDelete.value = null
  } catch (error) {
    console.error('Failed to delete update:', error)
    alert('Failed to delete update. Please try again.')
  } finally {
    deleting.value = false
  }
}

useHead({
  title: 'My Updates - Ghost Guild',
})
</script>

<style scoped>
/* ---- TWO-COLUMN LAYOUT ---- */
.content-area {
  display: grid;
  grid-template-columns: 1fr 200px;
}

.content-main {
  min-width: 0;
}

/* ---- STATS ROW ---- */
.stats-row {
  padding: 16px 32px;
  border-bottom: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.stats-count {
  color: var(--text-dim);
}

.stats-count strong {
  color: var(--text-bright);
  font-size: 18px;
}

/* ---- STATE BOXES (loading, empty, unauth) ---- */
.state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
}

.state-icon {
  width: 48px;
  height: 48px;
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--text-faint);
}

.state-heading {
  font-family: 'Brygada 1918', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 6px;
}

.state-text {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 20px;
  max-width: 320px;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px dashed var(--candle);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- TIMELINE ---- */
.timeline-wrap {
  padding: 24px 32px 48px;
}

.timeline {
  position: relative;
  padding-left: 32px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed var(--border);
}

.tl-item {
  position: relative;
  padding: 0 0 24px;
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-dot {
  position: absolute;
  left: -32px;
  top: 2px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-dim);
}

.tl-time {
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.tl-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.tl-title {
  color: var(--text-bright);
  text-decoration: none;
  font-weight: 500;
}

.tl-title:hover {
  color: var(--candle);
  text-decoration: underline;
}

.tl-edited {
  font-size: 11px;
  color: var(--text-faint);
}

.tl-detail {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  padding: 8px 12px;
  border-left: 2px solid var(--border);
  line-height: 1.6;
}

.tl-images {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tl-image {
  max-width: 200px;
  height: auto;
  border: 1px dashed var(--border);
}

.tl-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-action-btn {
  font-family: 'Commit Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.tl-action-btn:hover {
  color: var(--candle);
}

.tl-action-danger:hover {
  color: var(--ember);
}

.tl-action-sep {
  color: var(--border);
  font-size: 10px;
}

/* ---- LOAD MORE ---- */
.load-more {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* ---- MODAL ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 32, 21, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-box {
  background: var(--bg);
  border: 1px dashed var(--border);
  padding: 28px 32px;
  max-width: 400px;
  width: 90%;
}

.modal-heading {
  font-family: 'Brygada 1918', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.modal-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .content-area {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-row {
    padding: 12px 20px;
  }

  .timeline-wrap {
    padding: 20px 20px 40px;
  }

  .state-box {
    padding: 48px 20px;
  }
}
</style>
