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

{% block title %}Edit {{ product.name }} — {{ 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: 24px 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: 28px; color: var(--text-muted); margin-bottom: 6px; }
.upload-zone-text { font-size: 13px; color: var(--text-secondary); }
.upload-zone-text strong { color: var(--accent-light); }
.upload-zone-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.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;
}
.image-preview-card.marked-delete {
    opacity: 0.35;
    border-color: var(--danger);
}
.image-preview-card.marked-delete .preview-label {
    background: var(--danger);
}
.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">Edit Product</h1>

                {% 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 %}
                    <input type="hidden" name="delete_images" id="delete-images-input" value="">

                    <div class="form-section">
                        <div class="section-icon">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        </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 value="{{ product.name }}">
                            </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 value="{{ product.price }}">
                                </div>
                                <div class="form-group">
                                    <label for="currency">Currency</label>
                                    <select id="currency" name="currency">
                                        <option value="GHS" {% if product.currency == "GHS" %}selected{% endif %}>GHS (₵)</option>
                                        <option value="NGN" {% if product.currency == "NGN" %}selected{% endif %}>NGN (₦)</option>
                                        <option value="USD" {% if product.currency == "USD" %}selected{% endif %}>USD ($)</option>
                                        <option value="EUR" {% if product.currency == "EUR" %}selected{% endif %}>EUR (€)</option>
                                        <option value="GBP" {% if product.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;">0 = out of stock, AI won't recommend it</span>
                                </label>
                                <input type="number" id="quantity" name="quantity" min="0" required
                                       value="{{ product.quantity }}"
                                       oninput="updateStockIndicator(this.value)">
                                <div id="stock-indicator" class="stock-indicator" style="display:none;"></div>
                            </div>
                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea id="description" name="description" rows="3"
                                          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;">{{ product.description }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="section-icon dim-icon">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
                        </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" value="{{ product.category }}">
                                </div>
                                <div class="form-group">
                                    <label for="brand">Brand</label>
                                    <input type="text" id="brand" name="brand" value="{{ product.brand }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="section-icon dim-icon">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>Product Images</h2>

                            {% if product.images.all %}
                            <p style="font-size:13px; color:var(--text-muted); margin-bottom:12px;">Current images — click &times; to mark for removal on save.</p>
                            <div class="image-previews" id="existing-images">
                                {% for img in product.images.all %}
                                <div class="image-preview-card" id="existing-img-{{ img.id }}" data-image-id="{{ img.id }}">
                                    <img src="{{ img.image.url }}" alt="{{ img.alt_text|default:product.name }}">
                                    <button type="button" class="remove-preview" onclick="toggleDeleteExisting({{ img.id }})" title="Remove">&times;</button>
                                    <div class="preview-label">{% if forloop.first %}Primary{% else %}Image {{ forloop.counter }}{% endif %}</div>
                                </div>
                                {% endfor %}
                            </div>
                            <hr style="border: none; border-top: 1px solid var(--border); margin: 20px 0;">
                            {% endif %}

                            <p style="font-size:13px; color:var(--text-muted); margin-bottom:12px;">Upload additional images:</p>
                            <div class="upload-zone" id="upload-zone">
                                <div class="upload-zone-icon">
                                    <svg width="28" height="28" 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="new-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">Save Changes</button>
                    </div>
                </form>
            </div>

            <aside class="page-sidebar">
                <div class="sidebar-card">
                    <div class="sidebar-store-preview">
                        {% if product.primary_image_url %}
                        <img src="{{ product.primary_image_url }}" class="preview-logo" alt="" style="width:80px; height:80px; object-fit:cover; border-radius:8px;">
                        {% endif %}
                        <h3 style="font-size:15px;">{{ product.name }}</h3>
                        <span style="font-size:20px; font-weight:700; color:var(--accent-light);">{{ product.currency }} {{ product.price }}</span>
                        <span style="font-size:13px; color:{% if product.in_stock %}#2a9d8f{% else %}var(--danger){% endif %}; font-weight:600;">
                            {% if product.in_stock %}{{ product.quantity }} in stock{% else %}Out of Stock{% endif %}
                        </span>
                    </div>
                </div>
                <div class="sidebar-card sidebar-tip">
                    <h3>Stock Management</h3>
                    <p class="sidebar-text">When quantity reaches 0, the product is automatically marked as out of stock and hidden from AI recommendations. Update the quantity here to restock.</p>
                </div>
                <div class="sidebar-card sidebar-danger-zone">
                    <h3>Danger Zone</h3>
                    <form method="post" action="{% url 'vendors:delete_product' product.id %}" onsubmit="return confirm('Delete {{ product.name }}?')">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-danger sidebar-btn">Delete Product</button>
                    </form>
                </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 — listed as available';
    } else {
        indicator.className = 'stock-indicator stock-out';
        indicator.textContent = 'Out of Stock — AI will not recommend this';
    }
}

// Trigger on page load
(function() {
    const qtyInput = document.getElementById('quantity');
    if (qtyInput) updateStockIndicator(qtyInput.value);
})();

(function() {
    const deleteInput = document.getElementById('delete-images-input');
    const deleteSet = new Set();

    window.toggleDeleteExisting = function(imageId) {
        const card = document.getElementById('existing-img-' + imageId);
        if (deleteSet.has(imageId)) {
            deleteSet.delete(imageId);
            card.classList.remove('marked-delete');
        } else {
            deleteSet.add(imageId);
            card.classList.add('marked-delete');
        }
        deleteInput.value = Array.from(deleteSet).join(',');
    };

    const zone = document.getElementById('upload-zone');
    const fileInput = document.getElementById('image-input');
    const previewsEl = document.getElementById('new-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 = file.name;

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