<template>
  <div class="min-h-screen bg-gray-900 text-white">
    <!-- Header (Hidden on Login page) -->
    <header v-if="!isLoginPage" class="bg-gray-800 border-b border-gray-700 fixed top-0 left-0 right-0 z-50">
      <div class="container mx-auto px-4 py-3">
        <div class="flex items-center justify-between">
          <h1 class="text-2xl font-bold text-blue-400">Momentry Portal</h1>
          <nav class="flex items-center space-x-6">
            <router-link to="/home" class="hover:text-blue-400 transition">首頁</router-link>
            <router-link to="/search" class="hover:text-blue-400 transition">搜尋</router-link>
            <router-link to="/persons" class="hover:text-blue-400 transition">人物管理</router-link>
            <router-link to="/traces" class="hover:text-blue-400 transition">Face Traces</router-link>
            <router-link to="/files" class="hover:text-blue-400 transition">納管檔案</router-link>
            <router-link to="/settings" class="hover:text-blue-400 transition">設定</router-link>
            <router-link to="/jobs" class="hover:text-blue-400 transition">Pipeline</router-link>
            <button @click="handleLogout" class="text-xs bg-red-800 hover:bg-red-700 px-2 py-1 rounded transition ml-4 text-red-100">登出</button>
            <button @click="toggleDevMode" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2" :title="showApiDemo ? '隱藏 API Console' : '顯示 API Console'">
              {{ showApiDemo ? '🔧' : '🛠️' }}
            </button>
            <button @click="openDevTools" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2">Console</button>
          </nav>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main :class="{ 'container mx-auto px-4 py-6 pt-20': !isLoginPage }">
      <router-view />
    </main>

    <!-- API Demo (hidden by default, enable via localStorage devMode=true) -->
    <div v-if="!isLoginPage && showApiDemo" class="container mx-auto px-4 pb-8 pt-4">
      <ApiDemo />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ApiDemo from './components/ApiDemo.vue'

const route = useRoute()
const router = useRouter()

const isLoginPage = computed(() => route.path === '/login')
const showApiDemo = ref(localStorage.getItem('devMode') === 'true')

const toggleDevMode = () => {
  showApiDemo.value = !showApiDemo.value
  localStorage.setItem('devMode', String(showApiDemo.value))
}

const openDevTools = () => {
  console.clear()
  console.log('%c🛠️ Momentry Console', 'font-size: 18px; font-weight: bold; color: #3b82f6;')
  console.log('%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━', 'color: #3b82f6;')
  console.log('%c點擊左側「Console」標籤查看輸出', 'color: #9ca3af;')
  console.log('%c', '')
  console.log('%c🔍 快速過濾:', 'color: #10b981; font-weight: bold;')
  console.log('%c   在上方搜尋框輸入「Momentry」可只看本系統輸出', 'color: #6b7280;')
  console.log('%c', '')
  console.log('%c📋 操作提示:', 'color: #f59e0b; font-weight: bold;')
  console.log('%c   1. 登入後點擊各功能頁面進行 API 呼叫', 'color: #d1d5db;')
  console.log('%c   2. 每次呼叫會即時顯示於此 Console', 'color: #d1d5db;')
  console.log('%c   3. 使用 F12 也可打開完整開發者工具', 'color: #d1d5db;')
  console.log('%c', '')
  console.log('%c⚡ 測試範例:', 'color: #ef4444; font-weight: bold;')
  console.log('%c   curl -X POST http://127.0.0.1:3003/api/v1/auth/login -H "Content-Type: application/json" -d \'{"username":"demo","password":"demo"}\'', 'color: #a78bfa; font-family: monospace;')
  console.log('%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━', 'color: #3b82f6;')
  
  alert('✅ Console 訊息已輸出！\n\n請按 F12 或 Cmd+Option+I 打開開發者工具查看')
}

const handleLogout = () => {
  localStorage.removeItem('momentry_user')
  // Also clear config if you want to force re-login to setup API
  localStorage.removeItem('portal_config')
  router.push('/login')
}
</script>
