<template>
  <div class="flex h-screen bg-white">
    <!-- Left Sidebar -->
    <div class="w-64 bg-[#1a1a2e] text-white flex flex-col">
      <!-- Logo -->
      <div class="p-4 flex items-center space-x-2">
        <div class="bg-purple-600 rounded p-1">
          <PlaySquare class="w-5 h-5" />
        </div>
        <span class="font-bold">GEN <span class="text-purple-400">LITEX</span></span>
      </div>

      <!-- Navigation -->
      <nav class="flex-1 p-4">
        <div class="space-y-2">
          <a href="#" class="flex items-center space-x-2 text-gray-300 hover:text-white">
            <Home class="w-4 h-4" />
            <span>Home</span>
          </a>

          <!-- Sessions Section -->
          <div class="mt-6">
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-400">Sessions</span>
              <button class="text-xs bg-purple-600 px-2 py-1 rounded-md">
                + New Requirement
              </button>
            </div>

            <!-- Session Items -->
            <div class="mt-3 space-y-2">
              <div v-for="(item, index) in sessionItems" :key="index"
                   class="flex items-center justify-between text-sm text-gray-300 hover:text-white group">
                <div class="flex items-center space-x-2">
                  <FileText class="w-4 h-4" />
                  <span class="truncate">{{ item }}</span>
                </div>
                <div class="hidden group-hover:flex space-x-2">
                  <PencilLine class="w-3 h-3" />
                  <Trash2 class="w-3 h-3" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>

      <!-- Bottom Admin Section -->
      <div class="p-4 border-t border-gray-700">
        <div class="flex items-center space-x-3">
          <div class="w-8 h-8 bg-gray-600 rounded-full"></div>
          <div>
            <div class="text-sm font-medium">admin</div>
            <div class="text-xs text-gray-400">platform admin</div>
          </div>
          <ChevronRight class="w-4 h-4 ml-auto" />
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col">
      <!-- Top Bar -->
      <div class="h-14 border-b flex items-center justify-end px-4">
        <div class="flex items-center space-x-2">
          <span class="text-gray-600">qwen-turbo</span>
          <ChevronDown class="w-4 h-4 text-gray-400" />
        </div>
      </div>

      <!-- Chat Area -->
      <div class="flex-1 overflow-auto p-6">
        <div class="max-w-4xl mx-auto space-y-6">
          <!-- Chat Messages -->
          <div class="bg-white rounded-lg p-4 shadow-sm">
            <h2 class="text-lg font-medium mb-4">Snowflake Training Registration</h2>
            <div class="space-y-4 text-gray-600">
              <p>根据您提供的内容片段，"Snowflake Training Registration"</p>
              <p>文件包含以下功能描述：</p>
              <ol class="list-decimal pl-6 space-y-2">
                <li>在步骤七中输入培训券，最终结算时费用应为零。</li>
                <li>注意：在第四步不要直接点击Play按钮，基于之前的体验，
                  这可能导致屏幕变白，正确的做法是点击Details，
                  然后点击仪表板链接进入。</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

      <!-- Input Area -->
      <div class="border-t p-4">
        <div class="max-w-4xl mx-auto">
          <div class="flex items-center space-x-2 mb-2">
            <div class="bg-gray-100 rounded-full px-3 py-1 text-sm flex items-center space-x-1">
              <span>User Story Agent</span>
              <X class="w-3 h-3" />
            </div>
          </div>
          <div class="flex items-end space-x-2">
            <textarea
                class="flex-1 border rounded-lg p-3 resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
                placeholder="Chat with GentLiteX Chatbot ..."
                rows="1"
            ></textarea>
            <button class="p-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600">
              <Send class="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Panel -->
    <div class="w-80 border-l p-4">
      <div class="space-y-4">
        <h3 class="text-lg font-medium">You uploaded the document</h3>
        <div class="space-y-2">
          <div v-for="(file, index) in uploadedFiles" :key="index"
               class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <div class="flex-1">
              <div class="text-sm font-medium truncate">{{ file.name }}</div>
              <div class="text-xs text-gray-500">{{ file.type }}</div>
            </div>
            <Trash2 class="w-4 h-4 text-gray-400 hover:text-gray-600 cursor-pointer" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Home,
  FileText,
  PencilLine,
  Trash2,
  ChevronRight,
  ChevronDown,
  PlaySquare,
  Send,
  X
} from 'lucide-vue-next'

const sessionItems = ref([
  'UserStory-2025-02-2...',
  'UserStory-2025-02-2...',
  '测试用例/lw-2',
  '测试用例/lw-1',
  '测试2',
  '测试'
])

const uploadedFiles = ref([
  {
    name: 'Snowflake Training Registration-d604-30b2-4ec4-9f3e-be068b2c9bb4.txt',
    type: 'text-image.table.testing.doucument'
  },
  {
    name: 'text-image.table.testing.doucument-c9267fb7-f962-4857-bf3f-16820a220f',
    type: 'document'
  }
])
</script>

<style>
/* Add any custom styles here if needed */
</style>