<template>
  <div id="app">
    <LoginScreen v-if="!isLoggedIn" @login="handleLogin" />
    <MainApp v-else :apiKey="apiKey" @logout="handleLogout" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import LoginScreen from './components/LoginScreen.vue'
import MainApp from './components/MainApp.vue'

const isLoggedIn = ref(false)
const apiKey = ref('')

onMounted(() => {
  const savedKey = localStorage.getItem('textpipe_api_key')
  if (savedKey) {
    apiKey.value = savedKey
    isLoggedIn.value = true
  }
})

const handleLogin = (key) => {
  apiKey.value = key
  localStorage.setItem('textpipe_api_key', key)
  isLoggedIn.value = true
}

const handleLogout = () => {
  apiKey.value = ''
  localStorage.removeItem('textpipe_api_key')
  isLoggedIn.value = false
}
</script>
