{% extends 'public/base.html' %}

{% block title %}E-Commerce API Documentation | ChatLab - AI Sales Agent{% endblock %}

{% block content %}
<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); }
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.container-doc {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 1rem;
}
.page-header {
    margin-bottom: 3rem;
}
.page-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--primary-blue), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.custom-table {
    width: 100%;
    border-collapse: collapse;
}
.custom-table th, .custom-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.custom-table th {
    background: #f8fafc;
    font-weight: 600;
}
</style>

<div class="container-doc">
    <div class="page-header">
        <h2 class="page-title">E-Commerce API Integration Guide</h2>
        <p class="page-subtitle" style="font-size: 1.1rem; color: #64748b;">Specification for developers to connect custom e-commerce stores to our Chatbot system.</p>
    </div>

    <div id="doc-content">
        <div class="glass-card" style="padding: 2.5rem; margin-bottom: 2rem;">
            <h3>1. Authentication & Base URL</h3>
            <p style="color: #64748b; margin-top: 0.5rem; line-height: 1.6;">
                <strong>IMPORTANT:</strong> The API Key required for authorization must be generated and obtained from our dashboard by the company owner. All requests sent from our chatbot system to your e-commerce API will be authenticated using this <strong>Bearer Token</strong>.
            </p>
            <p style="color: #64748b; margin-top: 0.5rem; line-height: 1.6;">
                The Chatbot will call <em>your</em> e-commerce system using the Base URL you provide. The endpoints below (<code>/api/bot/test/</code>, <code>/api/bot/catalog/</code>, etc.) should be implemented on <strong>your server</strong>.
            </p>
            <div class="code-block" style="margin-bottom: 0;">
Authorization: Bearer &lt;OBTAINED_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: #64748b; margin-top: 0.5rem;">
                Used by our 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: #64748b; 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": 15000.00,
      "discount_price": 12000.00,
      "brand": "AudioTech",
      "stock": true
    },
    {
      "id": "1002",
      "name": "Smart Fitness Watch",
      "price": 20000.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: #64748b; 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": "Md. Rahim Uddin",
  "customer_phone": "+8801700000000",
  "customer_address": "123 Gulshan, Dhaka, Bangladesh",
  "product_id": "1001",
  "quantity": 1,
  "notes": "Please deliver in the evening."
}
            </div>

            <h4>Expected JSON Response</h4>
            <p style="color: #64748b; 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 class="glass-card" style="padding: 2.5rem; margin-bottom: 2rem; border-left: 4px solid var(--primary-blue);">
            <h3>Check Connection</h3>
            <p style="color: #64748b; margin-top: 0.5rem; margin-bottom: 1.5rem;">
                Test if your API is correctly configured. Enter your API Base URL (Authorized Domain) and the API Key provided by us.
            </p>
            
            <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
                <div style="flex: 1; min-width: 250px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">API Base URL (Authorized Domain)</label>
                    <input type="url" id="test-api-url" placeholder="https://yourstore.com/" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 6px; font-family: monospace;">
                </div>
                <div style="flex: 1; min-width: 250px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">API Key</label>
                    <input type="text" id="test-api-key" placeholder="Provided by us" style="width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 6px; font-family: monospace;">
                </div>
            </div>
            
            <button id="btn-test-connection" style="background: var(--primary-blue); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; cursor: pointer;">
                Test Connection
            </button>

            <div id="test-connection-result" style="margin-top: 1rem; padding: 1rem; background: #f8fafc; border-radius: 8px; font-family: monospace; white-space: pre-wrap; display: none;"></div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const btnTest = document.getElementById('btn-test-connection');
    const resultDiv = document.getElementById('test-connection-result');
    
    if (btnTest) {
        btnTest.addEventListener('click', function() {
            const url = document.getElementById('test-api-url').value.trim();
            const key = document.getElementById('test-api-key').value.trim();
            
            if (!url || !key) {
                alert('Please provide both API Base URL and API Key.');
                return;
            }

            resultDiv.style.display = 'block';
            resultDiv.innerHTML = 'Testing connection... Please wait.';
            resultDiv.style.color = '#64748b';
            btnTest.disabled = true;

            const formData = new FormData();
            formData.append('api_url', url);
            formData.append('api_key', key);
            
            // We need a CSRF token. Since this is a public page, we might not have it in template. 
            // We should use an endpoint that accepts CSRF exempt or pass it.
            // But let's fetch CSRF from cookie if available.
            function getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            const csrftoken = getCookie('csrftoken') || '';

            fetch("{% url 'public_test_developer_api' %}", {
                method: 'POST',
                headers: { 'X-CSRFToken': csrftoken },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                btnTest.disabled = false;
                if (data.status === 'success') {
                    resultDiv.style.color = '#10b981';
                    resultDiv.innerHTML = `🟢 <strong>${data.message}</strong>\n\nPreview of fetched catalog data:\n${JSON.stringify(data.data, null, 2)}`;
                } else {
                    resultDiv.style.color = '#ef4444';
                    resultDiv.innerHTML = `🔴 <strong>Error:</strong> ${data.message}`;
                }
            })
            .catch(err => {
                btnTest.disabled = false;
                resultDiv.style.color = '#ef4444';
                resultDiv.innerHTML = `🔴 <strong>Network Error:</strong> ${err.message}`;
            });
        });
    }
});
</script>
{% endblock %}