<script setup>
import DashboardLayout from '../layouts/DashboardLayout.vue'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Badge } from '@/components/ui/badge'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'

const sections = [
  {
    icon: '🔗', title: 'Resources — Bookmark tools & services',
    desc: 'Lưu tập trung tất cả link tools, services, tài liệu mà team đang sử dụng — thay vì nhắn qua Zalo rồi mất.',
    tableHead: ['Category', 'Chứa gì', 'Ví dụ'],
    rows: [
      ['🛠️ Tools', 'Link tools nội bộ đang chạy', 'Langfuse, LiteLLM, n8n, Portainer, Uptime Kuma'],
      ['📄 Docs', 'Tài liệu kỹ thuật', 'ReDoc, PRD, kiến trúc hệ thống'],
      ['🔌 APIs', 'Endpoints / connections', 'Swagger UI, Redis connection string'],
      ['🎨 Design', 'Link thiết kế, mockup', 'Figma, UI reference, wireframe'],
      ['📦 Repos', 'Source code repositories', 'GitHub repos, branches chính'],
    ],
    tip: 'Bấm + Add Resource để thêm. Bấm 📌 để ghim link lên đầu. Dùng filter bar để lọc theo category.'
  },
  {
    icon: '📝', title: 'Team Notes — Ghi chú tập trung cho team',
    desc: 'Ghi chú cho cả team — to-do, bug, ý tưởng, meeting notes. Thay vì nhắn qua Zalo rồi trôi mất.',
    tableHead: ['Category', 'Ghi gì', 'Ví dụ'],
    rows: [
      ['📝 Note', 'Ghi chú chung', '"Redis restart mỗi đêm 00:00, cache sẽ bị xóa"'],
      ['📄 Doc', 'Tài liệu nội bộ', '"Cách deploy chatbot lên staging"'],
      ['✅ To-do', 'Việc cần làm', '"Tuần này: test load 100 users"'],
      ['📢 Announcement', 'Thông báo team', '"Deploy v2.5 ngày 15/3 — freeze code từ 14/3"'],
    ],
    tip: 'Bấm + New Note để tạo. Chọn category để phân biệt loại. Bấm 📌 để ghim lên đầu.'
  },
  {
    icon: '📜', title: 'Changelog — Lịch sử thay đổi',
    desc: 'Ghi lại lịch sử thay đổi chatbot — ai sửa gì, khi nào. Để trace bug, để rollback.',
    tableHead: ['Loại thay đổi', 'Ví dụ cách ghi'],
    rows: [
      ['🐛 Fix bug', '"Fix search áo bra — thêm mapping skort"'],
      ['✏️ Sửa prompt', '"Update system prompt v2.3 — thêm rule giới hạn emoji"'],
      ['🚀 Deploy', '"Deploy Gemini Flash Lite — giảm 55% cost"'],
      ['📦 Thêm data', '"Thêm 200 sản phẩm mới vào Meilisearch index"'],
      ['⚙️ Config', '"Tăng timeout Redis từ 5s → 10s"'],
    ],
    tip: 'Ghi tên bạn ở ô đầu tiên, mô tả thay đổi ở ô thứ hai. Nhấn Enter để thêm nhanh.'
  },
]
</script>

<template>
  <DashboardLayout>
    <div class="p-8 max-w-4xl space-y-8">

      <!-- Header -->
      <div>
        <h1 class="text-2xl font-black text-gray-900">📚 Hướng dẫn sử dụng Workspace</h1>
        <p class="text-sm text-gray-500 mt-1">Cách dùng Resources, Team Notes và Changelog</p>
      </div>

      <Separator />

      <!-- Sections -->
      <div v-for="(s, i) in sections" :key="i" class="space-y-4">
        <div>
          <h2 class="text-lg font-bold text-gray-800">{{ s.icon }} {{ s.title }}</h2>
          <p class="text-sm text-gray-500 mt-1">{{ s.desc }}</p>
        </div>

        <Card>
          <CardContent class="p-0">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead v-for="h in s.tableHead" :key="h" class="text-xs">{{ h }}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow v-for="(row, j) in s.rows" :key="j">
                  <TableCell v-for="(cell, k) in row" :key="k"
                             :class="k === 0 ? 'font-medium text-sm' : 'text-sm text-gray-600'">
                    {{ cell }}
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        <div class="flex items-start gap-2 bg-amber-50 border border-amber-200 rounded-lg px-4 py-3">
          <span class="text-amber-600 font-bold text-xs mt-0.5">💡 Cách dùng:</span>
          <p class="text-xs text-amber-800">{{ s.tip }}</p>
        </div>

        <Separator v-if="i < sections.length - 1" />
      </div>

    </div>
  </DashboardLayout>
</template>
