# Kiến trúc hệ thống

## Tổng quan

AutoShopee Kit là một browser extension theo kiến trúc **Manifest V3**, gồm 4 thành phần chính giao tiếp với nhau qua **webext-bridge** và **Socket.io**.

## Sơ đồ kiến trúc

```
┌─────────────────────────────────────────────────────────┐
│                    BROWSER EXTENSION                     │
│                                                          │
│  ┌──────────────┐    webext-bridge    ┌───────────────┐  │
│  │   Popup UI   │◄──────────────────►│   Background   │  │
│  │  (Vue 2 App) │                    │ Service Worker │  │
│  └──────────────┘                    └───────┬───────┘  │
│                                              │           │
│  ┌──────────────┐    webext-bridge    ┌──────┴────────┐  │
│  │ Options Page │◄──────────────────►│Content Scripts │  │
│  │  (Vue 2 App) │                    │ (Injected vào │  │
│  └──────────────┘                    │  các trang EC) │  │
│                                      └───────────────┘  │
└────────────────────────────┬────────────────────────────┘
                             │
              ┌──────────────┼──────────────┐
              ▼              ▼              ▼
    ┌──────────────┐ ┌─────────────┐ ┌──────────────┐
    │  AutoShopee  │ │  CouchDB    │ │  Socket.io   │
    │   REST API   │ │  (Sync DB)  │ │  (Real-time) │
    └──────────────┘ └─────────────┘ └──────────────┘
```

## Thành phần chi tiết

### 1. Background Service Worker (`src/background/`)

Entry point: `src/background/index.js`

Chạy ngầm khi extension được cài đặt. Chịu trách nhiệm:
- Khởi tạo PouchDB indexes cho các model
- Nhận diện shop (Shopee, TikTok, Lazada) từ tab đang mở
- Lắng nghe sự kiện trình duyệt (tabs, alarms, webRequest)
- Quản lý messaging qua webext-bridge
- Kết nối Socket.io đến server
- Tự động làm mới phiên đăng nhập
- Chạy nhận diện shop định kỳ mỗi 60 giây

### 2. Content Scripts (`src/content/`)

Được inject vào các trang thương mại điện tử. Tổ chức theo nền tảng:

```
src/content/
├── shopee/
│   ├── seller/          # Trang bán hàng Shopee
│   │   ├── order.js     # Quản lý đơn hàng
│   │   ├── marketing.js # Flash sale, marketing
│   │   ├── chat.js      # Chat tự động
│   │   ├── ads.js       # Quảng cáo
│   │   ├── product.js   # Quản lý sản phẩm
│   │   └── print.js     # In đơn hàng
│   └── client/          # Trang mua hàng Shopee
├── tiktok/
│   └── seller/          # TikTok Seller Center
├── lazada/
│   └── seller/          # Lazada Seller Center
├── tiki/
│   └── shop/            # Tiki Shop
└── global/
    ├── ping.js          # Ping service
    └── listener.js      # Fetch listener
```

### 3. Popup UI (`src/popup/` + `src/app/`)

Giao diện popup khi click icon extension. Sử dụng:
- **Vue 2** (Options API) cho UI components
- **Vue Router 3** cho điều hướng
- **Vuex 3 + Pinia 2** cho state management
- **View Design (iView)** cho UI components
- **Tailwind CSS** cho styling

### 4. Options Page (`src/options/`)

Trang cài đặt mở rộng, mount Vue app riêng biệt.

## Luồng dữ liệu

### Luồng chính: Thu thập & Xử lý dữ liệu

```
1. Người dùng mở trang e-commerce (vd: banhang.shopee.vn)
       │
2. Content script được inject vào trang
       │
3. Content script thu thập dữ liệu từ DOM / API
       │
4. Gửi dữ liệu qua webext-bridge đến Background
       │
5. Background xử lý và lưu vào PouchDB (IndexedDB)
       │
6. PouchDB tự động sync 2 chiều với CouchDB remote
       │
7. Socket.io thông báo real-time đến Popup UI
       │
8. Vuex/Pinia store cập nhật → UI re-render
```

### Luồng in đơn hàng (ví dụ)

```
1. Seller mở trang in đơn: banhang.shopee.vn/awbprint
2. Content script (seller/print.js) inject UI components
3. User chọn đơn hàng cần in
4. Dữ liệu gửi đến Background qua bridge
5. Background tạo PDF bằng pdf-lib
6. PDF được cache và trả về cho user
7. User tải xuống hoặc in trực tiếp
```

## Messaging System

### webext-bridge

Giao tiếp giữa các thành phần extension:

| Từ | Đến | Mô tả |
|----|-----|--------|
| Content Script | Background | Gửi dữ liệu thu thập được |
| Background | Content Script | Điều khiển, yêu cầu thao tác |
| Popup | Background | Yêu cầu dữ liệu, thực thi hành động |
| Background | Popup | Phản hồi dữ liệu, thông báo |

### Socket.io

Giao tiếp real-time với server:
- **Server:** `wss://ws.autoshopee.com`
- **Mục đích:** Đồng bộ trạng thái, thông báo, điều khiển từ xa

## State Management

### Vuex Store (`src/app/store/`)

Quản lý state chính của ứng dụng, chia theo module:
- `user` - Thông tin người dùng, phiên đăng nhập
- `shop` - Danh sách shop đã kết nối
- `shopee` - State riêng cho Shopee
- `tiktok` - State riêng cho TikTok
- `lazada` - State riêng cho Lazada
- `setting` - Cài đặt ứng dụng
- `app` - State chung của app

**Persistence:** `vuex-persistedstate` lưu vào `localStorage`

### Pinia Store (`src/app/pinia/`)

State bổ sung cho các tính năng mới:
- `user` - Thông tin user bổ sung
- `usage` - Theo dõi usage (free/VIP limits)
- `printer` - Cài đặt máy in
- `productUpdate` - Cập nhật sản phẩm

**Persistence:** `pinia-plugin-persistedstate`

## Database Architecture

### PouchDB (Local)

Lưu trữ chính trên máy client, sử dụng IndexedDB bên dưới.

**Models** (`src/app/models/`):

| Model | Mô tả |
|-------|--------|
| ShopeeShop | Thông tin shop Shopee |
| TiktokShop | Thông tin shop TikTok |
| ShopeeProduct | Sản phẩm Shopee |
| TiktokProduct | Sản phẩm TikTok |
| ProductMapping | Mapping sản phẩm cross-platform |
| ShopeeOrderPdfPrintJob | Job in đơn Shopee |
| LazadaOrderPdfPrintJob | Job in đơn Lazada |
| TiktokOrderPdfPrintJob | Job in đơn TikTok |
| UsageShopee | Usage tracking Shopee |
| UsageTiktok | Usage tracking TikTok |
| ShopeeFlashSaleSave | Flash sale đã lưu |
| ShopeeMarketingSender | Marketing automation |
| ConfigPdfPrinter | Cấu hình máy in PDF |

### CouchDB (Remote)

- **URL:** `https://store-extension-api.autoshopee.com`
- **Sync:** Two-way replication với live flag và retry
- **Xác thực:** `pouchdb-authentication`
- **Cleanup:** Tự động xóa dữ liệu cũ hơn 30-45 ngày

### Storage khác

| Loại | Mục đích |
|------|----------|
| localStorage | Vuex persisted state, cài đặt |
| sessionStorage | Dữ liệu phiên (flash sale campaigns) |
| ttl-localstorage | Cache có thời hạn |
