<script setup lang="ts">
import { useUiStore } from '../../stores/ui'
import { useConversationsStore } from '../../stores/conversations'

const ui = useUiStore()
const convStore = useConversationsStore()

async function newConversation() {
  await convStore.createConversation()
  ui.activeView = 'chat'
}
</script>

<template>
  <aside
    v-show="ui.sidebarOpen"
    class="w-64 bg-dark-900 border-r border-dark-700 flex flex-col shrink-0"
  >
    <!-- Logo -->
    <div class="h-12 flex items-center px-4 border-b border-dark-700">
      <h1 class="text-lg font-bold text-primary-400">V3Q.AI</h1>
    </div>

    <!-- New Chat Button -->
    <div class="p-3">
      <button @click="newConversation" class="btn-primary w-full flex items-center justify-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        New Chat
      </button>
    </div>

    <!-- Conversation List -->
    <div class="flex-1 overflow-y-auto px-2">
      <div
        v-for="conv in convStore.conversations"
        :key="conv.id"
        @click="convStore.selectConversation(conv.id); ui.activeView = 'chat'"
        :class="[
          'flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer text-sm mb-1 group',
          conv.id === convStore.currentConversationId
            ? 'bg-dark-700 text-dark-100'
            : 'text-dark-400 hover:bg-dark-800 hover:text-dark-200'
        ]"
      >
        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
        </svg>
        <span class="truncate flex-1">{{ conv.title }}</span>
        <button
          @click.stop="convStore.deleteConversation(conv.id)"
          class="opacity-0 group-hover:opacity-100 text-dark-500 hover:text-red-400 transition-opacity"
        >
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </div>
  </aside>
</template>
