<template>
  <div class="welcome-screen">
    <!-- Mobile-only sidebar toggle, pinned to top-left corner -->
    <GnIconButton icon="ph ph-sidebar" label="Menu" class="welcome-sidebar-btn" @click="emit('toggle-sidebar')" />

    <div class="welcome-logo">
      <img src="/images/logo.svg" alt="Navi" />
      <h1>Navi</h1>
      <p>Your personal AI assistant</p>
    </div>

    <div v-if="profilesStore.profiles.length" class="welcome-profiles">
      <div
        v-for="p in profilesStore.profiles"
        :key="p.id"
        class="welcome-profile-card"
        :class="{ 'is-creating': creating && startingId === p.id }"
        @click="startWith(p.id)"
      >
        <GnAvatar size="md" variant="secondary" :icon="profileIcon(p)" />
        <div class="profile-name">{{ p.name }}</div>
        <div class="profile-desc">{{ p.description }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['toggle-sidebar'])
import { useProfilesStore } from '@/stores/profiles.js'
import { useSessionsStore } from '@/stores/sessions.js'
import { useChatStore } from '@/stores/chat.js'

const profilesStore = useProfilesStore()
const sessionsStore = useSessionsStore()
const chatStore = useChatStore()

// Tapping a profile IS starting a session there — two-step (select, then a
// button) made the user click twice for a one-click decision.
const creating = ref(false)
const startingId = ref(null)

const PROFILE_ICONS = {
  secretary: 'ph-briefcase',
  server_admin: 'ph-terminal',
  developer: 'ph-code',
  discuss: 'ph-chats',
}

function profileIcon(p) {
  const cls = PROFILE_ICONS[p.id] ?? 'ph-robot'
  return `ph ${cls}`
}

async function startWith(profileId) {
  if (creating.value) return
  creating.value = true
  startingId.value = profileId
  try {
    // Creating a session in a profile also switches the sidebar list (and
    // its chips) to that profile — selectedProfileId is the source of truth.
    profilesStore.selectedProfileId = profileId
    const session = await sessionsStore.createSession(profileId)
    await chatStore.loadSession(session.session_id)
  } catch (err) {
    console.error('[welcome] start failed', err)
  } finally {
    creating.value = false
    startingId.value = null
  }
}
</script>

<style scoped>
.welcome-sidebar-btn {
  display: none;
  position: absolute;
  top: 12px;
  left: 12px;

  @media (max-width: 1279.98px) {
    display: flex;
  }
}
</style>