<script setup>
import { ref } from 'vue'
import { useCollaborationStore } from './stores/collaboration'
import CollaborativeInput from './components/CollaborativeInput.vue'
import CollaborativeSession from './components/CollaborativeSession.vue'
import NetworkStatus from './components/NetworkStatus.vue'

const collaborationStore = useCollaborationStore()

const showSession = ref(false)
const currentSessionId = ref(null)

function handleCollaborationCreated(session) {
  currentSessionId.value = session.sessionId
  showSession.value = true
}

function startNewCollaboration() {
  collaborationStore.clearCurrentSession()
  showSession.value = false
}
</script>

<template>
  <div class="app">
    <NetworkStatus />

    <!-- Input Mode -->
    <div v-if="!showSession">
      <CollaborativeInput @session-created="handleCollaborationCreated" />
    </div>

    <!-- Session Mode -->
    <div v-else>
      <button @click="startNewCollaboration" class="new-session-btn">
        New Session
      </button>

      <CollaborativeSession
        v-if="currentSessionId"
        :session-id="currentSessionId"
        @session-completed="startNewCollaboration"
      />
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #f5f7fa;
  color: #2c3e50;
}

#app {
  min-height: 100vh;
}
</style>

<style scoped>
.app {
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.new-session-btn {
  position: fixed;
  top: 2rem;
  right: 2rem;
  padding: 0.75rem 1.5rem;
  background: rgba(102, 126, 234, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
  backdrop-filter: blur(10px);
  z-index: 50;
}

.new-session-btn:hover {
  background: rgba(102, 126, 234, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}
</style>
