{% extends "base.html" %}
{% load static %}

{% block title %}Add Product — {{ vendor.store_name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<style>
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--bg);
    position: relative;
}
.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--accent-light);
    background: rgba(108, 92, 231, 0.06);
}
.upload-zone-icon { font-size: 36px; color: var(--text-muted); margin-bottom: 8px; }
.upload-zone-text { font-size: 14px; color: var(--text-secondary); }
.upload-zone-text strong { color: var(--accent-light); }
.upload-zone-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.image-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.image-preview-card {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
}
.image-preview-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.image-preview-card .remove-preview {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: background 0.15s;
}
.image-preview-card .remove-preview:hover { background: var(--danger); }
.image-preview-card .preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3px 6px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stock-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 10px;
}
.stock-in { background: rgba(42,157,143,0.12); color: #2a9d8f; }
.stock-out { background: rgba(231,111,81,0.12); color: var(--danger); }
</style>
{% endblock %}

{% block body %}
<div class="dash">
    <nav class="dash-nav">
        <div class="dash-nav-brand">
            <span class="logo-icon">&#9670;</span>
            <span class="logo-text">ACA Vendor</span>
        </div>
        <div class="dash-nav-links">
            <a href="{% url 'vendors:dashboard' %}" class="nav-link">Dashboard</a>
            <a href="{% url 'vendors:orders' %}" class="nav-link">Orders</a>
            <a href="{% url 'vendors:settings' %}" class="nav-link">Settings</a>
            <a href="/whatsapp/" class="nav-link">Chat</a>
        </div>
        <div class="dash-nav-right">
            <span class="nav-user">{{ vendor.store_name }}</span>
        </div>
    </nav>

    <div class="page-scroll" style="height: 100vh;">
        <div class="page-layout">
            <div class="page-content">
                <a href="{% url 'vendors:dashboard' %}" class="back-link">&larr; Back to Dashboard</a>
                <h1 class="page-title">Add Product</h1>
                <p class="page-desc">Add a product to your store. Keep it simple — the AI will handle finding it for customers.</p>
                <p class="page-desc" style="margin-top:-6px;">
                    Product usage: {{ product_count }}/{{ product_limit }}
                    {% if at_product_limit %}
                    <span style="color:var(--danger); font-weight:600;">(Limit reached)</span>
                    {% else %}
                    <span style="color:var(--text-muted);">({{ remaining_slots }} slot{{ remaining_slots|pluralize }} left)</span>
                    {% endif %}
                </p>

                {% if at_product_limit %}
                <div class="form-errors">
                    <p>You have reached your product limit of {{ product_limit }} products.</p>
                    <p>Delete an existing product from your dashboard to add a new one.</p>
                </div>
                {% endif %}

                {% if errors %}
                <div class="form-errors">
                    {% for err in errors %}
                    <p>{{ err }}</p>
                    {% endfor %}
                </div>
                {% endif %}

                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}

                    <div class="form-section">
                        <div class="section-icon">1</div>
                        <div class="section-content">
                            <h2>Product Details</h2>
                            <div class="form-group">
                                <label for="name">Product Name *</label>
                                <input type="text" id="name" name="name" required
                                       placeholder="e.g. Classic Running Shoes"
                                       value="{{ form_data.name|default:'' }}">
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="price">Price *</label>
                                    <input type="number" id="price" name="price" step="0.01" min="0" required
                                           placeholder="29.99"
                                           value="{{ form_data.price|default:'' }}">
                                </div>
                                <div class="form-group">
                                    <label for="currency">Currency</label>
                                    <select id="currency" name="currency">
                                        <option value="GHS" {% if form_data.currency == "GHS" or not form_data %}selected{% endif %}>GHS (₵)</option>
                                        <option value="NGN" {% if form_data.currency == "NGN" %}selected{% endif %}>NGN (₦)</option>
                                        <option value="USD" {% if form_data.currency == "USD" %}selected{% endif %}>USD ($)</option>
                                        <option value="EUR" {% if form_data.currency == "EUR" %}selected{% endif %}>EUR (€)</option>
                                        <option value="GBP" {% if form_data.currency == "GBP" %}selected{% endif %}>GBP (£)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="quantity">Stock Quantity *
                                    <span class="form-help" style="display:inline; margin-left:6px;">Setting to 0 marks the product as out of stock</span>
                                </label>
                                <input type="number" id="quantity" name="quantity" min="0" required
                                       placeholder="e.g. 10"
                                       value="{{ form_data.quantity|default:'0' }}"
                                       oninput="updateStockIndicator(this.value)">
                                <div id="stock-indicator" class="stock-indicator stock-out" style="display:none;">
                                    Out of Stock
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea id="description" name="description" rows="3"
                                          placeholder="Brief description of the product..."
                                          style="width:100%;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none;resize:vertical;">{{ form_data.description|default:'' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="section-icon">2</div>
                        <div class="section-content">
                            <h2>Categorization</h2>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="category">Category</label>
                                    <input type="text" id="category" name="category"
                                           placeholder="e.g. shoes, shirt, bag"
                                           value="{{ form_data.category|default:'' }}">
                                    <span class="form-help">Helps AI match your product to searches</span>
                                </div>
                                <div class="form-group">
                                    <label for="brand">Brand</label>
                                    <input type="text" id="brand" name="brand"
                                           placeholder="e.g. Nike, Zara"
                                           value="{{ form_data.brand|default:'' }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="section-icon">3</div>
                        <div class="section-content">
                            <h2>Product Images</h2>
                            <p style="font-size:13px; color:var(--text-muted); margin-bottom:12px;">Upload one or more images. The first image will be the primary display image.</p>

                            <div class="upload-zone" id="upload-zone">
                                <div class="upload-zone-icon">
                                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                                </div>
                                <div class="upload-zone-text">
                                    <strong>Click to upload</strong> or drag & drop
                                </div>
                                <div class="upload-zone-hint">PNG, JPG, WEBP up to 5 MB each</div>
                                <input type="file" id="image-input" name="images" multiple accept="image/*">
                            </div>

                            <div class="image-previews" id="image-previews"></div>
                        </div>
                    </div>

                    <div class="form-actions-bar">
                        <a href="{% url 'vendors:dashboard' %}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary btn-lg" {% if at_product_limit %}disabled title="Product limit reached"{% endif %}>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                            {% if at_product_limit %}Limit Reached{% else %}Add Product{% endif %}
                        </button>
                    </div>
                </form>
            </div>

            <aside class="page-sidebar">
                <div class="sidebar-card">
                    <h3>Tips</h3>
                    <ol class="sidebar-steps">
                        <li>Use a clear, descriptive product name</li>
                        <li>Set the stock quantity accurately</li>
                        <li>Add a category so the AI can find it easily</li>
                        <li>Upload good quality product photos</li>
                        <li>Set an accurate price</li>
                    </ol>
                </div>
                <div class="sidebar-card sidebar-tip">
                    <h3>Stock &amp; Availability</h3>
                    <p class="sidebar-text">The quantity you set controls availability. When stock hits 0, the product is automatically marked as out of stock and the AI will not recommend it to buyers.</p>
                </div>
                <div class="sidebar-card sidebar-tip">
                    <h3>How AI Finds Your Product</h3>
                    <p class="sidebar-text">When shoppers ask the AI for items, it searches your product name, category, brand, and description. The more detail you add, the better your product matches.</p>
                </div>
            </aside>
        </div>
    </div>
</div>

<script>
function updateStockIndicator(val) {
    const indicator = document.getElementById('stock-indicator');
    const qty = parseInt(val, 10);
    if (isNaN(qty)) {
        indicator.style.display = 'none';
        return;
    }
    indicator.style.display = 'inline-flex';
    if (qty > 0) {
        indicator.className = 'stock-indicator stock-in';
        indicator.textContent = qty + ' in stock — will be listed as available';
    } else {
        indicator.className = 'stock-indicator stock-out';
        indicator.textContent = 'Out of Stock — AI will not recommend this';
    }
}

// Trigger on load if there's a prefilled value
(function() {
    const qtyInput = document.getElementById('quantity');
    if (qtyInput && qtyInput.value) updateStockIndicator(qtyInput.value);
})();

(function() {
    const zone = document.getElementById('upload-zone');
    const fileInput = document.getElementById('image-input');
    const previewsEl = document.getElementById('image-previews');
    let dataTransfer = new DataTransfer();

    zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.classList.add('dragover'); });
    zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
    zone.addEventListener('drop', (e) => {
        e.preventDefault();
        zone.classList.remove('dragover');
        addFiles(e.dataTransfer.files);
    });

    fileInput.addEventListener('change', () => {
        addFiles(fileInput.files);
    });

    function addFiles(fileList) {
        for (const file of fileList) {
            if (!file.type.startsWith('image/')) continue;
            if (file.size > 5 * 1024 * 1024) {
                alert(file.name + ' is larger than 5 MB and was skipped.');
                continue;
            }
            dataTransfer.items.add(file);
        }
        syncInputAndPreviews();
    }

    function removeFile(index) {
        dataTransfer.items.remove(index);
        syncInputAndPreviews();
    }

    function syncInputAndPreviews() {
        fileInput.files = dataTransfer.files;
        previewsEl.innerHTML = '';

        Array.from(dataTransfer.files).forEach((file, idx) => {
            const card = document.createElement('div');
            card.className = 'image-preview-card';

            const img = document.createElement('img');
            img.alt = file.name;
            const reader = new FileReader();
            reader.onload = (e) => { img.src = e.target.result; };
            reader.readAsDataURL(file);

            const removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.className = 'remove-preview';
            removeBtn.innerHTML = '&times;';
            removeBtn.title = 'Remove';
            removeBtn.addEventListener('click', () => removeFile(idx));

            const label = document.createElement('div');
            label.className = 'preview-label';
            label.textContent = idx === 0 ? 'Primary' : file.name;

            card.appendChild(img);
            card.appendChild(removeBtn);
            card.appendChild(label);
            previewsEl.appendChild(card);
        });
    }
})();
</script>
{% endblock %}