╔═══════════════════════════════════════════════════════════════════╗
║                    VISUAL WORKFLOW GUIDE                          ║
║                 Self-Hosted WhatsApp Server                       ║
╚═══════════════════════════════════════════════════════════════════╝


══════════════════════════════════════════════════════════════════════
                    WHAT HAPPENS WHEN YOU START?
══════════════════════════════════════════════════════════════════════

STEP 1: You Start the Server
┌────────────────────────────────────────────────────────────────────┐
│  YOU RUN:  node server.js   (or double-click INSTALL-AND-RUN.bat) │
└────────────────────────────────────────────────────────────────────┘
                                 ▼
┌────────────────────────────────────────────────────────────────────┐
│  TERMINAL SHOWS:                                                   │
│  🔥 STARTING WHATSAPP SERVER...                                    │
│  📱 Creating WhatsApp client...                                    │
│  🚀 Server running: http://localhost:3000                          │
└────────────────────────────────────────────────────────────────────┘


STEP 2: Two Browser Windows Open Automatically
┌─────────────────────────────────────────────────────────────────────┐
│                                                                     │
│  🌐 WINDOW 1: Chrome/Browser Opens                                 │
│  ┌───────────────────────────────────────────────────────────┐    │
│  │ 🔒 https://web.whatsapp.com/                              │    │
│  ├───────────────────────────────────────────────────────────┤    │
│  │                                                           │    │
│  │        WhatsApp Web Interface                            │    │
│  │        (Shows "Loading..." or WhatsApp interface)         │    │
│  │                                                           │    │
│  │        ⚠️ KEEP THIS WINDOW OPEN ⚠️                        │    │
│  │        (You can minimize it)                             │    │
│  │                                                           │    │
│  └───────────────────────────────────────────────────────────┘    │
│                                                                     │
│                          AND                                        │
│                                                                     │
│  📱 WINDOW 2: QR Code Tab Opens                                    │
│  ┌───────────────────────────────────────────────────────────┐    │
│  │ 🔒 http://localhost:3000/qr                              │    │
│  ├───────────────────────────────────────────────────────────┤    │
│  │                                                           │    │
│  │        📱 WhatsApp QR Code                                │    │
│  │        ⏳ Loading QR Code...                              │    │
│  │                                                           │    │
│  │        Status: Initializing...                           │    │
│  │                                                           │    │
│  └───────────────────────────────────────────────────────────┘    │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘


STEP 3: QR Code Appears
┌─────────────────────────────────────────────────────────────────────┐
│  TERMINAL SHOWS QR CODE:                                            │
│  ████████████████████████████                                       │
│  ██      ██  ██████  ██  ████                                       │
│  ██  ██  ██  ██  ██████  ████                                       │
│  ██  ██  ██  ██  ██  ██  ████                                       │
│  ████████████████████████████                                       │
│  (Big QR code in ASCII art)                                         │
│                                                                     │
│  🎉 QR CODE RECEIVED!                                               │
│  ✅ QR IMAGE READY!                                                 │
│  🌐 Opening browser...                                              │
└─────────────────────────────────────────────────────────────────────┘
                                 ▼
┌─────────────────────────────────────────────────────────────────────┐
│  QR CODE TAB NOW SHOWS:                                             │
│  ┌───────────────────────────────────────────────────────────┐    │
│  │ 📱 WhatsApp QR Code                                        │    │
│  │ Scan to connect your WhatsApp                             │    │
│  │                                                           │    │
│  │ ✅ QR Code Ready                                           │    │
│  │                                                           │    │
│  │  ┌─────────────────────────────┐                          │    │
│  │  │ ██████████████████████████  │                          │    │
│  │  │ ██  ████  ████████  ██  ██  │                          │    │
│  │  │ ██  ████  ██  ██  ████  ██  │                          │    │
│  │  │ ██████████████████████████  │                          │    │
│  │  └─────────────────────────────┘                          │    │
│  │                                                           │    │
│  │  📖 How to scan:                                          │    │
│  │  1. Open WhatsApp on your phone                          │    │
│  │  2. Go to Settings → Linked Devices                      │    │
│  │  3. Tap Link a Device                                    │    │
│  │  4. Point your phone at the QR code above               │    │
│  └───────────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────────────┘


STEP 4: You Scan the QR Code with Your Phone
┌─────────────────────────────────────────────────────────────────────┐
│                                                                     │
│   📱 YOUR PHONE                                                     │
│   ┌──────────────────┐                                             │
│   │ 📷 WhatsApp      │                                             │
│   │                  │      👉  Scan QR code on screen             │
│   │   Scanning...    │                                             │
│   │   ▓▓▓▓▓▓▓▓▓▓▓▓   │                                             │
│   │                  │                                             │
│   └──────────────────┘                                             │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘
                                 ▼
                          CONNECTING...


STEP 5: Connection Success!
┌─────────────────────────────────────────────────────────────────────┐
│  TERMINAL SHOWS:                                                    │
│  ✅ Authenticated!                                                  │
│  ✅ CONNECTED!                                                      │
└─────────────────────────────────────────────────────────────────────┘
                                 ▼
┌─────────────────────────────────────────────────────────────────────┐
│  QR CODE TAB SHOWS:                                                 │
│  ┌───────────────────────────────────────────────────────────┐    │
│  │                                                           │    │
│  │           ✅ Connected!                                    │    │
│  │                                                           │    │
│  │    WhatsApp is connected. This window will               │    │
│  │    close in 3 seconds...                                 │    │
│  │                                                           │    │
│  │    ( 3... 2... 1... )                                    │    │
│  │                                                           │    │
│  └───────────────────────────────────────────────────────────┘    │
│                                                                     │
│  → TAB CLOSES AUTOMATICALLY ✓                                      │
└─────────────────────────────────────────────────────────────────────┘


STEP 6: What's Still Open?
┌─────────────────────────────────────────────────────────────────────┐
│                                                                     │
│  ✅ STILL OPEN (MUST KEEP OPEN):                                   │
│                                                                     │
│  1️⃣  Terminal Window                                                │
│      ┌──────────────────────────────────────────────┐             │
│      │ [Terminal]                                   │             │
│      │ ✅ CONNECTED!                                │             │
│      │ Server running: http://localhost:3000       │             │
│      │ _                                            │             │
│      └──────────────────────────────────────────────┘             │
│      ⚠️ KEEP THIS OPEN (can minimize)                             │
│                                                                     │
│  2️⃣  WhatsApp Web Browser Window                                   │
│      ┌──────────────────────────────────────────────┐             │
│      │ [Chrome] https://web.whatsapp.com/          │             │
│      │ ┌────────────────────────────────────────┐  │             │
│      │ │ WhatsApp                              │  │             │
│      │ │ [Your chats are shown here]           │  │             │
│      │ │ [All connected and working]           │  │             │
│      │ └────────────────────────────────────────┘  │             │
│      └──────────────────────────────────────────────┘             │
│      ⚠️ KEEP THIS OPEN (can minimize)                             │
│                                                                     │
│  ❌ CLOSED (Don't need anymore):                                   │
│                                                                     │
│  3️⃣  QR Code Tab (localhost:3000/qr)                               │
│      → Closed automatically ✓                                      │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘


STEP 7: Connect Your App
┌─────────────────────────────────────────────────────────────────────┐
│  NOW OPEN YOUR BROWSER AND GO TO:                                  │
│                                                                     │
│  🌐 http://localhost/whatsapp-bulk-sender/app.php                  │
│     (or wherever you have app.php)                                 │
│                                                                     │
│  ┌───────────────────────────────────────────────────────────┐    │
│  │ WhatsApp AI Bulk Sender Pro                               │    │
│  │                                                           │    │
│  │ Connect to WhatsApp                                       │    │
│  │ [Green-API] [Whapi] ... [Self-Hosted] ✓ ← Click this     │    │
│  │                                                           │    │
│  │ Self-Hosted WhatsApp Server                              │    │
│  │ Server URL: http://localhost:3000                        │    │
│  │                                                           │    │
│  │ [ Connect to Local Server ] ← Click this button          │    │
│  │                                                           │    │
│  └───────────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────────────┘
                                 ▼
┌─────────────────────────────────────────────────────────────────────┐
│  APP SHOWS:                                                         │
│  ✅ Connected successfully! WhatsApp is ready.                     │
│                                                                     │
│  [ Disconnect ] ← Now visible                                      │
└─────────────────────────────────────────────────────────────────────┘


STEP 8: Send Messages!
┌─────────────────────────────────────────────────────────────────────┐
│  YOU CAN NOW:                                                       │
│                                                                     │
│  ✅ Send single messages                                           │
│  ✅ Send bulk messages from Excel                                  │
│  ✅ Send with attachments (images, files)                          │
│  ✅ Use all features normally                                      │
│                                                                     │
│  Messages will appear in:                                          │
│  → Your WhatsApp phone app                                         │
│  → WhatsApp Web window (if you look)                               │
│  → Recipients' WhatsApp                                            │
└─────────────────────────────────────────────────────────────────────┘


══════════════════════════════════════════════════════════════════════
                    WINDOW MANAGEMENT SUMMARY
══════════════════════════════════════════════════════════════════════

┌──────────────────────────────────────────────────────────────────┐
│ WINDOW/TAB                   STATUS           ACTION             │
├──────────────────────────────────────────────────────────────────┤
│ 📟 Terminal                   Must Stay Open   Minimize OK       │
│ 🌐 WhatsApp Web Window       Must Stay Open   Minimize OK       │
│ 📱 QR Code Tab               Auto-Closes      No action needed  │
│ 💻 Your App (app.php)        Your Main UI     Use this!         │
└──────────────────────────────────────────────────────────────────┘


══════════════════════════════════════════════════════════════════════
                    WHAT TO DO WITH EACH WINDOW
══════════════════════════════════════════════════════════════════════

🖥️  YOUR DESKTOP AFTER SETUP:

    ┌─────────────┐  ┌─────────────┐  ┌─────────────┐
    │  Terminal   │  │  WhatsApp   │  │  Your App   │
    │  (Running)  │  │  Web        │  │  (app.php)  │
    │  Minimized  │  │  Minimized  │  │  ⭐ ACTIVE  │
    └─────────────┘  └─────────────┘  └─────────────┘
         ✅               ✅                 ⭐
      Keep open        Keep open        Use this!
      (background)     (background)     (main work)


══════════════════════════════════════════════════════════════════════
                    COMPLETE WORKFLOW DIAGRAM
══════════════════════════════════════════════════════════════════════

Start Server ──┐
               │
               ├─→ Terminal Opens (Keep open!)
               │
               ├─→ Chrome Opens WhatsApp Web (Keep open!)
               │
               └─→ QR Tab Opens (Will auto-close)
                   │
                   ├─→ Scan QR with Phone
                   │
                   ├─→ "Connected!" Message
                   │
                   ├─→ QR Tab Closes (Auto)
                   │
                   └─→ Ready! ✓

Now Open app.php ──┐
                   │
                   ├─→ Click "Self-Hosted" Tab
                   │
                   ├─→ Click "Connect to Local Server"
                   │
                   └─→ Connected! ✓

Send Messages ─────┐
                   │
                   ├─→ Messages go through WhatsApp Web window
                   │
                   ├─→ Appear in your WhatsApp phone
                   │
                   └─→ Sent to recipients ✓


══════════════════════════════════════════════════════════════════════
                       REMEMBER THIS!
══════════════════════════════════════════════════════════════════════

            Keep Open = ✅     Can Close = ❌

    Terminal Window:            ✅ Keep (minimize OK)
    WhatsApp Web Browser:       ✅ Keep (minimize OK)
    QR Code Tab:                ❌ Auto-closes (good!)
    Your App (app.php):         ⭐ This is what you use!


══════════════════════════════════════════════════════════════════════

Questions? See: QUICK-ANSWERS.txt or BROWSER-TAB-INFO.txt
