<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
    <!-- Header Section -->
    <header class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
        <div class="flex items-center">
          <!-- Company Logo -->
          <svg class="h-8 w-8 mr-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12" y2="16"></line>
          </svg>
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">公司名称</h1>
        </div>
        <div class="flex space-x-4 items-center">
          <!-- Language Selection Dropdown -->
          <select v-model="language" class="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            <option value="en">English</option>
            <option value="es">Español</option>
            <option value="zh">中文</option>
          </select>
          <!-- User Authentication Status -->
          <span class="text-gray-700 dark:text-gray-300">{{ isAuthenticated ? 'Logged In' : 'Guest' }}</span>
        </div>
      </div>
    </header>

    <!-- Main Chat Interface -->
    <main class="flex-grow flex relative">
      <div class="w-full max-w-4xl mx-auto p-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 relative">
          <div class="chat-window overflow-y-scroll max-h-96 mb-4">
            <div v-for="(message, index) in messages" :key="index" class="mb-4">
              <div v-if="message.type === 'user'" class="flex justify-end">
                <div class="bg-blue-100 dark:bg-gray-700 p-3 rounded-l-lg rounded-tr-lg text-right">
                  {{ message.text }}
                </div>
              </div>
              <div v-else class="flex justify-start">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-r-lg rounded-tl-lg text-left">
                  {{ message.text }}
                </div>
              </div>
            </div>
          </div>
          <div class="flex items-center">
            <input v-model="userInput" @keyup.enter="sendMessage" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white mr-2" placeholder="Type your message...">
            <button @click="sendMessage" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
              Send
            </button>
          </div>
          <div class="mt-2">
            <p v-if="suggestions.length" class="text-gray-700 dark:text-gray-300">Suggestions:</p>
            <ul>
              <li v-for="(suggestion, index) in suggestions" :key="index" class="cursor-pointer text-blue-600 dark:text-blue-400" @click="sendSuggestion(suggestion)">
                {{ suggestion }}
              </li>
            </ul>
          </div>
          <div class="mt-4">
            <button @click="escalateIssue" class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700">
              Escalate Issue
            </button>
          </div>
        </div>
      </div>
    </main>

    <!-- Sidebar Section -->
    <aside class="hidden lg:block w-64 bg-white dark:bg-gray-800 shadow">
      <div class="p-4">
        <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Knowledge Base</h2>
        <ul class="space-y-2">
          <li v-for="(category, index) in knowledgeBaseCategories" :key="index" class="text-gray-700 dark:text-gray-300">
            <strong>{{ category.title }}:</strong>
            <ul class="ml-4 list-disc">
              <li v-for="(article, idx) in category.articles" :key="idx" class="cursor-pointer text-blue-600 dark:text-blue-400" @click="openArticle(article)">
                {{ article.title }}
              </li>
            </ul>
          </li>
        </ul>
        <button @click="toggleLanguage" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
          Toggle Language
        </button>
      </div>
    </aside>

    <!-- Footer Section -->
    <footer class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 text-center">
        <p class="text-gray-700 dark:text-gray-300">Status: Online</p>
        <p class="text-gray-700 dark:text-gray-300">Contact IT Support: support@company.com</p>
        <p class="text-gray-700 dark:text-gray-300">Version 1.0.0 © 2025 Company Name</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// State Variables
const userInput = ref('')
const messages = ref([])
const language = ref('en')
const isAuthenticated = ref(false)
const suggestions = ref([
  'How to reset a password?',
  'How to set up VPN access?',
  'How to install software?'
])
const knowledgeBaseCategories = ref([
  {
    title: 'Password Management',
    articles: [
      { title: 'Reset Password Guide', link: '#' },
      { title: 'Change Password Policy', link: '#' }
    ]
  },
  {
    title: 'Software Installation',
    articles: [
      { title: 'Install Software Guide', link: '#' },
      { title: 'Troubleshoot Installation Issues', link: '#' }
    ]
  }
])

// Methods
const sendMessage = () => {
  if (userInput.value.trim()) {
    messages.value.push({ type: 'user', text: userInput.value })
    // Simulate bot response
    setTimeout(() => {
      messages.value.push({ type: 'bot', text: 'Here is your answer...' })
    }, 1000)
    userInput.value = ''
  }
}

const sendSuggestion = (suggestion) => {
  userInput.value = suggestion
  sendMessage()
}

const escalateIssue = () => {
  alert('Escalating issue to IT support team...')
}

const openArticle = (article) => {
  alert(`Opening article: ${article.title}`)
}

const toggleLanguage = () => {
  language.value = language.value === 'en' ? 'es' : language.value === 'es' ? 'zh' : 'en'
}
</script>
