<script setup lang="ts">
interface CampaignRow {
  id: string
  title: string
  current_scene: string
  status: string
  updated_at: string
}
interface DraftSession {
  id: string
  status: string
  messages: Array<{ role: 'user' | 'assistant'; content: string }>
  generated_world?: { title?: string; premise?: string } | null
  updated_at: string
}

const { api } = useDngApi()
const auth = useDngAuth()
const filter = ref<'all' | 'active' | 'drafts'>('all')
const campaigns = ref<CampaignRow[]>([])
const drafts = ref<DraftSession[]>([])
const loading = ref(true)
const error = ref('')

const visibleCampaigns = computed(() => filter.value === 'active'
  ? campaigns.value.filter(campaign => campaign.status === 'active')
  : filter.value === 'drafts' ? [] : campaigns.value)
const visibleDrafts = computed(() => filter.value === 'active' ? [] : drafts.value)
const displayName = computed(() => {
  const value = auth.session.value?.user.user_metadata?.display_name
  return typeof value === 'string' && value.trim() ? value.trim() : 'ADVENTURER'
})

function draftTitle(draft: DraftSession) {
  return draft.generated_world?.title || 'UNFINISHED UNIVERSE'
}

function draftSummary(draft: DraftSession) {
  return draft.generated_world?.premise
    || draft.messages.find(message => message.role === 'user')?.content
    || 'Continue your conversation with the coauthor.'
}

onMounted(async () => {
  try {
    await auth.restore()
    const [campaignResult, draftResult] = await Promise.all([
      api<{ campaigns: CampaignRow[] }>('/api/v1/campaigns'),
      api<{ sessions: DraftSession[] }>('/api/v1/coauthor/sessions'),
    ])
    campaigns.value = campaignResult.campaigns
    drafts.value = draftResult.sessions
  } catch (cause) {
    const value = cause as { data?: { statusMessage?: string }; message?: string }
    error.value = value.data?.statusMessage ?? value.message ?? 'Could not load your campaigns.'
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <AppShell section="COMMAND DECK">
    <div class="dash-wrap noise">
      <section class="dash-head">
        <div><p class="kicker">WELCOME BACK, {{ displayName.toUpperCase() }}</p><h1>YOUR UNIVERSES<span>.</span></h1><p>Every world remembers where you left it.</p></div>
        <NuxtLink to="/worlds/new" class="create-button"><span>＋</span> CREATE A UNIVERSE</NuxtLink>
      </section>

      <div class="filter-row">
        <button v-for="item in ['all','active','drafts']" :key="item" :class="{active:filter===item}" @click="filter=item as typeof filter">{{ item }}</button>
        <span>{{ campaigns.length }} CAMPAIGNS · {{ drafts.length }} DRAFTS</span>
      </div>

      <section class="world-grid">
        <p v-if="loading" class="load-state">RECEIVING PRIVATE CAMPAIGNS…</p>
        <p v-else-if="error" class="load-state error">{{ error }} <NuxtLink to="/">SIGN IN AGAIN</NuxtLink></p>
        <NuxtLink v-for="campaign in visibleCampaigns" :key="campaign.id" :to="`/campaign/${campaign.id}`" class="world-card active-world">
          <div class="world-art"><div class="eclipse" /><span>{{ campaign.status.toUpperCase() }} CAMPAIGN</span></div>
          <div class="world-info"><small>PRIVATE MULTIPLAYER</small><h2>{{ campaign.title }}</h2><p>{{ campaign.current_scene }}</p><div><b>CONTINUE STORY</b><span>{{ new Date(campaign.updated_at).toLocaleDateString() }}</span></div></div>
        </NuxtLink>
        <NuxtLink v-for="draft in visibleDrafts" :key="draft.id" :to="`/worlds/new?session=${draft.id}`" class="world-card active-world draft-world">
          <div class="world-art"><div class="eclipse" /><span>{{ draft.status.toUpperCase() }} DRAFT</span></div>
          <div class="world-info"><small>PRIVATE COAUTHOR SESSION</small><h2>{{ draftTitle(draft) }}</h2><p>{{ draftSummary(draft) }}</p><div><b>RESUME CREATION</b><span>{{ new Date(draft.updated_at).toLocaleDateString() }}</span></div></div>
        </NuxtLink>
        <NuxtLink to="/worlds/new" class="world-card new-card">
          <span class="plus">＋</span><h2>MAKE THE NEXT<br>IMPOSSIBLE PLACE</h2><p>Begin with a sentence. The coauthor will ask the rest.</p>
        </NuxtLink>
      </section>

      <section class="system-strip"><span><i /> AI COAUTHOR READY</span><span>SERVER DICE <b>ONLINE</b></span><span>PRIVATE BY DEFAULT</span></section>
    </div>
  </AppShell>
</template>

<style scoped>
.draft-world .world-art{background:radial-gradient(circle at 50% 60%,#3f4720 0 2%,#1c2011 9%,#080808 58%)}.draft-world .world-art span{background:transparent;color:var(--acid);border:1px solid var(--acid-dim)}
</style>
