{% extends 'superuser/base_superuser.html' %}

{% block title %}E-Commerce API Documentation | ChatLab{% endblock %}
{% block documentation_active %}active{% endblock %}

{% block workspace %}
<style>
.code-block {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1.5rem;
    border-radius: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    overflow-x: auto;
    margin: 1rem 0 2rem 0;
    line-height: 1.5;
}
.endpoint-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.method-badge {
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}
.method-get { background: var(--success-green); }
.method-post { background: var(--warning-orange); }

@media print {
    body * {
        visibility: hidden;
    }
    #doc-content, #doc-content * {
        visibility: visible;
    }
    #doc-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .btn-download-pdf, .header-bar, #drawer, #drawer-overlay {
        display: none !important;
    }
    .glass-card {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 2rem !important;
        page-break-inside: avoid;
    }
    .code-block {
        border: 1px solid #ccc;
        background: #f9f9f9;
        color: #000;
    }
}
</style>

<div class="page-header">
    <div>
        <h2 class="page-title">E-Commerce API Integration Guide</h2>
        <p class="page-subtitle">Specification for developers to connect custom e-commerce stores to the Chatbot system.</p>
    </div>
    <button onclick="window.print()" class="btn btn-primary btn-download-pdf">
        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
        Download PDF
    </button>
</div>

<div id="doc-content">
    
    <div style="margin-bottom: 2rem; display: none;" class="print-header">
        <h1>E-Commerce API Integration Specification</h1>
        <p>This document outlines the API format required for developers to integrate an external e-commerce store with the chatbot system. By exposing these endpoints, the chatbot can read your live product catalog and create orders on behalf of users.</p>
        <hr style="border: 0; border-bottom: 1px solid #ccc; margin-top: 1rem;">
    </div>

    <div class="glass-card" style="padding: 2.5rem; margin-bottom: 2rem;">
        <h3>1. Authentication & Base URL</h3>
        <p style="color: var(--text-muted); margin-top: 0.5rem; line-height: 1.6;">
            All requests sent from our chatbot system to your e-commerce API will be authenticated using a <strong>Bearer Token</strong>. You will generate this token (API Key) in the chatbot settings and configure your server to validate it.
        </p>
        <div class="code-block" style="margin-bottom: 0;">
Authorization: Bearer &lt;YOUR_API_KEY&gt;
        </div>
    </div>

    <div class="glass-card" style="padding: 2.5rem; margin-bottom: 2rem;">
        <h3>2. Connection Test Endpoint</h3>
        <p style="color: var(--text-muted); margin-top: 0.5rem;">
            Used by the chatbot dashboard to verify that the connection to your store is working correctly.
        </p>

        <div class="endpoint-title">
            <span class="method-badge method-get">GET</span> /api/bot/test/
        </div>

        <h4>Expected JSON Response</h4>
        <div class="code-block">
{
  "status": "success",
  "message": "API is working properly."
}
        </div>
    </div>

    <div class="glass-card" style="padding: 2.5rem; margin-bottom: 2rem;">
        <h3>3. Fetch Product Catalog</h3>
        <p style="color: var(--text-muted); margin-top: 0.5rem;">
            The chatbot will call this endpoint to fetch your store's live product catalog to recommend items to customers.
        </p>

        <div class="endpoint-title">
            <span class="method-badge method-get">GET</span> /api/bot/catalog/
        </div>

        <h4>Expected JSON Format</h4>
        <table class="custom-table" style="margin-top: 1rem; margin-bottom: 2rem;">
            <thead>
                <tr>
                    <th>Field</th>
                    <th>Type</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>id</code></td>
                    <td>String / Int</td>
                    <td>Unique product identifier.</td>
                </tr>
                <tr>
                    <td><code>name</code></td>
                    <td>String</td>
                    <td>The name or title of the product.</td>
                </tr>
                <tr>
                    <td><code>price</code></td>
                    <td>Number</td>
                    <td>The regular price of the item.</td>
                </tr>
                <tr>
                    <td><code>discount_price</code></td>
                    <td>Number</td>
                    <td>The discounted price (if applicable). Send null or 0 if none.</td>
                </tr>
                <tr>
                    <td><code>brand</code></td>
                    <td>String</td>
                    <td>The brand name of the product.</td>
                </tr>
                <tr>
                    <td><code>stock</code></td>
                    <td>Boolean / Number</td>
                    <td>Whether the item is in stock.</td>
                </tr>
            </tbody>
        </table>

        <h4>Sample Response</h4>
        <div class="code-block">
{
  "status": "success",
  "products": [
    {
      "id": "1001",
      "name": "Wireless Noise Cancelling Headphones",
      "price": 150.00,
      "discount_price": 120.00,
      "brand": "AudioTech",
      "stock": true
    },
    {
      "id": "1002",
      "name": "Smart Fitness Watch",
      "price": 200.00,
      "discount_price": null,
      "brand": "FitWear",
      "stock": false
    }
  ]
}
        </div>
    </div>

    <div class="glass-card" style="padding: 2.5rem; margin-bottom: 2rem;">
        <h3>4. Create Product Order</h3>
        <p style="color: var(--text-muted); margin-top: 0.5rem;">
            When a user confirms they want to buy a product, the chatbot will send a POST request to create the order in your system.
        </p>

        <div class="endpoint-title">
            <span class="method-badge method-post">POST</span> /api/bot/order/
        </div>

        <h4>Request Payload (Sent by Chatbot)</h4>
        <div class="code-block">
{
  "customer_name": "John Doe",
  "customer_phone": "+1234567890",
  "customer_address": "123 Main St, City, Country",
  "product_id": "1001",
  "quantity": 1,
  "notes": "Please deliver in the evening."
}
        </div>

        <h4>Expected JSON Response</h4>
        <p style="color: var(--text-muted); margin-bottom: 1rem; font-size: 0.85rem;">
            Return the created order ID and a confirmation message that the chatbot will relay to the user.
        </p>
        <div class="code-block">
{
  "status": "success",
  "order_id": "ORD-5592",
  "message": "Order created successfully. Our team will contact you shortly for delivery."
}
        </div>
    </div>

</div>

<script>
    // Ensure print-header is visible only during print
    window.addEventListener('beforeprint', () => {
        document.querySelector('.print-header').style.display = 'block';
    });
    window.addEventListener('afterprint', () => {
        document.querySelector('.print-header').style.display = 'none';
    });
</script>
{% endblock %}