<template>
  <div class="flex h-screen bg-gray-50">
    <!-- Sidebar -->
    <aside class="w-64 bg-[#1A1A2E] text-white flex flex-col">
      <!-- Logo -->
      <div class="p-6">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center">
            <PlaySquare class="w-5 h-5" />
          </div>
          <span class="text-xl font-semibold">GEN <span class="text-purple-400">LTEX</span></span>
        </div>
      </div>

      <!-- Navigation -->
      <nav class="flex-1 px-4">
        <div class="mb-8">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm">Sessions</span>
            <button class="px-3 py-1 text-xs bg-purple-600 rounded-md hover:bg-purple-700">
              + New Requirement
            </button>
          </div>
        </div>

        <div class="space-y-6">
          <div class="text-xs text-gray-400 uppercase">MANAGE YOUR CONTEXT</div>
          <div class="space-y-2">
            <a v-for="(item, index) in menuItems"
               :key="index"
               href="#"
               class="flex items-center gap-3 px-3 py-2 text-gray-300 rounded-lg hover:bg-purple-600/20">
              <component :is="item.icon" class="w-5 h-5" />
              {{ item.name }}
              <span v-if="item.badge"
                    class="ml-auto px-2 py-0.5 text-xs bg-purple-500 rounded-full">
                {{ item.badge }}
              </span>
            </a>
          </div>
        </div>
      </nav>

      <!-- User Profile -->
      <div class="p-4 border-t border-gray-700">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 bg-gray-600 rounded-full"></div>
          <div>
            <div class="text-sm font-medium">zbytest003</div>
            <div class="text-xs text-gray-400">platform admin</div>
          </div>
          <ChevronRight class="w-4 h-4 ml-auto text-gray-400" />
        </div>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 overflow-auto">
      <div class="max-w-4xl mx-auto p-8">
        <!-- Header -->
        <div class="flex justify-between items-center mb-8">
          <div>
            <h1 class="text-2xl font-semibold mb-2">Hi, zbytest003</h1>
            <p class="text-gray-600">I am GenliteX User Story generator, I'm here to help.</p>
          </div>
          <div class="w-64">
            <select class="w-full p-2 border rounded-lg">
              <option value="">Select a model</option>
            </select>
          </div>
        </div>

        <!-- Content -->
        <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
          <p class="text-gray-600 mb-4">
            Simply upload the related documents you have so that I can understand the background and generate user stories more accurately.
          </p>
          <p class="text-gray-600">
            You can also constantly clarify your requests through the conversation.
          </p>
        </div>

        <!-- Chat Input -->
        <div class="flex gap-2">
          <div class="flex-1 relative">
            <input
                type="text"
                placeholder="Chat with GentLiteX Chatbot ..."
                class="w-full p-3 pr-12 border rounded-lg"
            />
            <Upload class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400" />
          </div>
          <button class="p-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600">
            <Send class="w-5 h-5" />
          </button>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import {
  PlaySquare,
  ChevronRight,
  Upload,
  Send,
  Home,
  Briefcase,
  Book,
  MessageSquare,
  Link,
  User,
  Bell
} from 'lucide-vue-next'

const menuItems = [
  { name: 'Home', icon: Home },
  { name: 'Workspace', icon: Briefcase },
  { name: 'Knowledge', icon: Book },
  { name: 'Prompt', icon: MessageSquare },
  { name: 'Link', icon: Link },
  { name: 'User', icon: User },
  { name: 'Notifications', icon: Bell, badge: '0' },
]
</script>

<style>
/* Additional styles can be added here if needed */
</style>