<template>
  <Transition name="fade" mode="out-in">
    <WelcomeScreen
      v-if="showWelcome"
      key="welcome"
      @toggle-sidebar="$emit('toggleSidebar')"
    />
    <ChatArea
      v-else
      key="chat"
      @toggle-sidebar="$emit('toggleSidebar')"
      @toggle-artifacts="$emit('toggleArtifacts')"
    />
  </Transition>
</template>

<script setup>
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useSessionsStore } from '@/stores/sessions'
import { useChatStore } from '@/stores/chat'
import WelcomeScreen from '@/components/ui/WelcomeScreen.vue'
import ChatArea from '@/components/chat/ChatArea.vue'

const route = useRoute()
const sessionsStore = useSessionsStore()
const chatStore = useChatStore()

defineEmits(['toggleSidebar', 'toggleArtifacts'])

const showWelcome = computed(
  () => (sessionsStore.sessions.length === 0 || chatStore.currentId === null) && !sessionsStore.loading
)

// Load session from URL route param (replaces the old raw hashchange handler)
watch(
  () => route.params.sessionId,
  (id) => {
    if (id && id !== chatStore.currentId) {
      chatStore.loadSession(id)
    }
  },
  { immediate: true }
)
</script>