<template>
  <div class="welcome-screen">
    <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-selected': selectedId === p.id }"
        @click="selectedId = p.id"
      >
        <i :class="profileIcon(p)" class="profile-icon ph"></i>
        <div class="profile-name">{{ p.name }}</div>
        <div class="profile-desc">{{ p.description }}</div>
      </div>
    </div>

    <button
      class="btn btn-primary"
      :disabled="!selectedId || creating"
      @click="handleStart"
    >
      <span v-if="creating" class="spinner"></span>
      <i v-else class="ph ph-chat-centered-text"></i>
      Start a conversation
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
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()

const selectedId = ref(profilesStore.selectedProfileId ?? profilesStore.profiles[0]?.id ?? null)
const creating = ref(false)

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

function profileIcon(p) {
  return PROFILE_ICONS[p.id] ?? 'ph-robot'
}

async function handleStart() {
  if (!selectedId.value || creating.value) return
  creating.value = true
  try {
    profilesStore.selectedProfileId = selectedId.value
    const session = await sessionsStore.createSession(selectedId.value)
    await chatStore.loadSession(session.session_id)
  } finally {
    creating.value = false
  }
}
</script>