{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}AI Help Bot{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/admin_ai_chat.css">
{% endblock %}
{% block content %}
<nav class="top-nav">
    <div class="nav-brand">AI Help Bot</div>
    <div class="nav-links">
        <a href="{{ '/admin' if session.get('role') == 'admin' or session.get('server_owner') else '/sales' }}">Back</a>
        <a href="/logout" class="hil-inline-2056554381">Logout</a>
    </div>
</nav>

<div class="main-wrapper">
    <div class="chat-container">
        <div class="chat-header">
            <h2>&#129302; App Assistant</h2>
            <p>Ask anything about using the app. Replies are instant.</p>
            <p id="guide-time" class="hil-inline-52008b6760">
                Usage guide updated: {{ guide_time or 'Auto-generated' }}
            </p>
        </div>
        <div class="chat-messages" id="chat-messages">
            <div class="message bot">
                Hi! I am your app assistant. Ask me how to use any feature, or pick a quick question below.
            </div>
            <div class="message bot" id="auto-guide-message">
                <strong>Auto Guide:</strong><br>{{ (guide_details or '').replace('\n', '<br>')|safe }}
            </div>
        </div>
        <div class="typing" id="typing">Typing...</div>

        <div class="quick-pills">
            {% if session.get('role') == 'cashier' and not session.get('server_owner') %}
            <button type="button" data-question="How do I make a sale?">How do I make a sale?</button>
            <button type="button" data-question="Why is selling blocked?">Why is selling blocked?</button>
            <button type="button" data-question="How do I scan a product?">How do I scan a product?</button>
            <button type="button" data-question="How do I print a receipt?">How do I print a receipt?</button>
            <button type="button" data-question="How do returns work?">How do returns work?</button>
            {% else %}
            <button type="button" data-question="How do I add a product?">How do I add a product?</button>
            <button type="button" data-question="How do I make a sale?">How do I make a sale?</button>
            <button type="button" data-question="How do I add a cashier?">How do I add a cashier?</button>
            <button type="button" data-question="How do payment methods work?">How do payment methods work?</button>
            <button type="button" data-question="How do I view reports?">How do I view reports?</button>
            <button type="button" data-question="What is the danger zone?">What is the danger zone?</button>
            {% endif %}
        </div>
        <div class="chat-input-bar">
            <input type="text" id="chat-input" placeholder="Type your question...">
            <button type="button" id="send-message">Send</button>
        </div>
    </div>
</div>

<script>
const userRole = "{{ session.get('role') or '' }}";
const isServerOwner = {{ 'true' if session.get('server_owner') else 'false' }};
const knowledge = {
    "add product": "To add a product, go to **Admin Dashboard** and click **+ Add Product** in the Quick Actions section, or go to **Inventory > Add Product**. Fill in the product name, price, and stock quantity, then save.",
    "new product": "To add a product, go to **Admin Dashboard** and click **+ Add Product** in the Quick Actions section, or go to **Inventory > Add Product**. Fill in the product name, price, and stock quantity, then save.",
    "inventory": "The **Inventory** page shows all your products. You can add, edit, or delete products. Low-stock items (<= 5) are highlighted automatically on the dashboard.",
    "sale": "To make a sale, go to the **Sales** page. Add items to the cart, choose the payment method, and click **Checkout**. A receipt is generated automatically.",
    "make a sale": "To make a sale, go to the **Sales** page. Add items to the cart, choose the payment method, and click **Checkout**. A receipt is generated automatically.",
    "cashier": "To add a cashier, go to **Admin Dashboard** and click **Manage Cashiers**. Create a username and password, then give the cashier the shop code.",
    "add cashier": "To add a cashier, go to **Admin Dashboard** and click **Manage Cashiers**. Fill in the username and password (minimum 8 characters) and save.",
    "payment": "During checkout, choose the payment method the customer is using and follow the screen until the receipt or payment status appears.",
    "payment methods": "Admins can enable or disable checkout methods from **Payment Methods**. Keep provider setup details private and use trusted admin accounts only.",
    "reports": "Go to **Reports** or **Analytics** to view sales trends, inventory pressure, and performance summaries. The **AI Predictions** page forecasts future sales.",
    "analytics": "Go to **Analytics** to see charts and trends about your shop performance. It shows revenue, top products, and sales patterns.",
    "receipt": "After every sale, a receipt is generated automatically. You can view and print receipts from the **Receipts** page.",
    "return": "Use **Return Goods** to process customer returns. Select the sale, choose the items being returned, and the stock is restored automatically.",
    "danger zone": "The **Danger Zone** on the Admin Dashboard lets you permanently delete sales records. Use it with caution — deletions cannot be undone.",
    "delete sales": "Sales cleanup is permanent. Back up first, choose the correct date range, and confirm before deleting records.",
    "scanner": "You can connect a barcode scanner, phone camera, or USB scanner from the **Scanner Center**. This speeds up adding products and checkout.",
    "barcode": "Use **Barcode** or **Camera** scan options under Quick Actions to scan product barcodes for quick entry during sales or inventory updates.",
    "calendar": "The **Sales Calendar** shows daily sales in a calendar view. You can navigate months and delete older records by week, month, or year.",
    "shop": "Each shop has a unique code. Admins manage shop settings, brand name, users, payment methods, and business records.",
    "brand": "Change your shop's brand name from the **Admin Dashboard**. This name appears on receipts, login screens, and across the app.",
    "login": "Admins and cashiers log in with their username, password, and shop code. If you forget your password, use **Forgot Password** on the login page.",
    "password": "If you forget your password, use the **Forgot Password** link on the login page. You can reset via email or SMS verification code.",
    "help": "You are on the **AI Help Bot** page. Ask about the app task you are doing, such as sales, scanning, receipts, customers, payments, reports, or billing due.",
    "contact": "For urgent issues, use the **Help Center** from your dashboard.",
    "issue": "To report an issue, go to the **Help Center** and fill out the **Report an Issue** form.",
    "bulk import": "Use **Bulk Import** under Quick Actions to upload many products at once via a CSV or Excel file.",
    "expenses": "Track your business expenses in the **Finance > Expenses** section. This helps calculate your true net profit on the dashboard.",
    "customers": "The **Customers** page stores customer details and purchase history. You can add customers manually or they are saved automatically during sales.",
    "cloud": "Use **Cloud Backup** to securely back up your shop data to the cloud. You can restore it anytime from the Backup page.",
    "backup": "Go to **Backup** to create local or cloud backups. This protects your shop data against device failure.",
    "billing": "If app usage billing is due, cashiers can open the Sales page but cannot complete selling actions. Ask the shop admin to pay or subscribe from the App Billing page.",
    "blocked": "Selling is blocked because app usage billing is due. You can stay on your page, but the admin must pay or subscribe before sales can continue.",
    "default": "I can help with questions about using the app. Try asking about: sales, scanning, receipts, customers, payment steps, billing due, returns, inventory, reports, or cashiers.",
    "update guide": "Open this page and read the Auto Guide message. It refreshes automatically when the app updates.",
    "new features": "Ask: 'what changed after update?' and I will summarize the latest usage guidance shown in Auto Guide."
};

knowledge["danger zone"] = "The **Danger Zone** is for permanent cleanup actions. Back up first and only use it when you are sure. Deleted records cannot be undone.";

if (userRole === "cashier" && !isServerOwner) {
    Object.assign(knowledge, {
        "add product": "Cashiers should ask an admin to add or edit products. You can search and scan products from the Sales page.",
        "new product": "Cashiers should ask an admin to add new products. You can search and scan products from the Sales page.",
        "inventory": "Cashiers can search products while selling. Product creation, stock changes, and price edits are handled by admins.",
        "cashier": "Cashier accounts are managed by the shop admin. Use your own username, password, and shop code when logging in.",
        "add cashier": "Only admins add cashier accounts. Ask the shop admin if a new staff account is needed.",
        "reports": "Reports are mainly for admins. Cashiers should use sales, receipts, customers, scanning, and returns pages for daily work.",
        "analytics": "Analytics are mainly for admins. Ask the shop admin for business performance reports.",
        "danger zone": "Danger Zone is admin-only. Cashiers should not delete sales records.",
        "delete sales": "Deleting sales is admin-only and permanent. Ask the shop admin if a record needs review.",
        "calendar": "The Sales Calendar is mainly for admin review. Cashiers should focus on today's sales and receipts.",
        "bulk import": "Bulk Import is admin-only. Ask the shop admin to upload many products.",
        "expenses": "Finance expenses are admin-only. Ask the shop admin to record business expenses.",
        "cloud": "Cloud backup is admin-only. Ask the shop admin if backup or restore is needed.",
        "backup": "Backup is admin-only. Ask the shop admin if shop data needs backup or restore."
    });
}

function findAnswer(text) {
    const lower = text.toLowerCase();
    for (const key in knowledge) {
        if (lower.includes(key)) return knowledge[key];
    }
    return knowledge["default"];
}

function appendMessage(text, sender) {
    const container = document.getElementById('chat-messages');
    const div = document.createElement('div');
    div.className = 'message ' + sender;
    div.innerHTML = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
    container.appendChild(div);
    container.scrollTop = container.scrollHeight;
}

function sendMessage() {
    const input = document.getElementById('chat-input');
    const text = input.value.trim();
    if (!text) return;
    appendMessage(text, 'user');
    input.value = '';
    const typing = document.getElementById('typing');
    typing.style.display = 'block';
    setTimeout(() => {
        typing.style.display = 'none';
        appendMessage(findAnswer(text), 'bot');
    }, 400);
}

function sendQuick(text) {
    document.getElementById('chat-input').value = text;
    sendMessage();
}

document.querySelectorAll("[data-question]").forEach((button) => {
    button.addEventListener("click", () => sendQuick(button.dataset.question || ""));
});

document.getElementById("send-message").addEventListener("click", sendMessage);
document.getElementById("chat-input").addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
        event.preventDefault();
        sendMessage();
    }
});

fetch("/api/ai-help/update-guide", { method: "POST" })
    .then(r => r.ok ? r.json() : null)
    .then(data => {
        if (!data || !data.details) return;
        const box = document.getElementById("auto-guide-message");
        const stamp = document.getElementById("guide-time");
        box.innerHTML = "<strong>Auto Guide:</strong><br>" + data.details.replace(/\n/g, "<br>");
        if (stamp && data.created_at) {
            stamp.textContent = "Usage guide updated: " + data.created_at;
        }
    })
    .catch(() => {});
</script>
{% endblock %}