<script setup>
import DashboardLayout from '../layouts/DashboardLayout.vue'
import ChatWithPipeline from '../components/ChatWithPipeline.vue'
import { Separator } from '@/components/ui/separator'

const sessionId = (() => {
  let sid = sessionStorage.getItem('tag_search_session_id')
  if (!sid) {
    sid = 'ts_' + Date.now().toString(36) + '_' + Math.random().toString(36).slice(2, 8)
    sessionStorage.setItem('tag_search_session_id', sid)
  }
  return sid
})()

const quickPrompts = [
  'Áo sơ mi trắng nam size L',
  'Váy đầm hoa cho mùa hè',
  'Quần jeans nữ dáng skinny',
  'Áo khoác denim unisex',
  'Đồ mặc nhà cotton mát',
]
</script>

<template>
  <DashboardLayout>
    <div class="p-6 max-w-6xl space-y-4">
      <div>
        <h1 class="text-2xl font-black text-gray-900">🏷️ Tag Search Chat</h1>
        <p class="text-xs text-gray-500 mt-0.5">Chat thông minh tìm sản phẩm bằng tag ngữ nghĩa · Session: <span class="font-mono">{{ sessionId.slice(0, 16) }}…</span></p>
      </div>
      <Separator />
      <ChatWithPipeline
        api-url="/api/tag-search/chat"
        history-url="/api/tag-search/history"
        clear-url="/api/tag-search/clear"
        :session-id="sessionId"
        :quick-prompts="quickPrompts"
        title="Tag Search"
      />
    </div>
  </DashboardLayout>
</template>
