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

{% block title %}ACA — Edit {{ store.name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
{% 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 Admin</span>
        </div>
        <div class="dash-nav-links">
            <a href="{% url 'stores:dashboard' %}" class="nav-link">Stores</a>
            <a href="{% url 'stores:vendors' %}" class="nav-link">Vendors</a>
            <a href="{% url 'escrow:admin_dashboard' %}" class="nav-link">Secure Payments</a>
            <a href="{% url 'stores:settings' %}" class="nav-link">Settings</a>
            <a href="/whatsapp/" class="nav-link">Chat</a>
        </div>
        <div class="dash-nav-right">
            <span class="nav-user">{{ request.user.username }}</span>
        </div>
    </nav>

    <div class="page-scroll">
        <div class="page-layout">
            <!-- Left: Form -->
            <div class="page-content">
                <a href="{% url 'stores:dashboard' %}" class="back-link">&larr; Back to Stores</a>
                <h1 class="page-title">Edit Store</h1>

                {% if error %}
                <div class="form-errors"><p>{{ error }}</p></div>
                {% endif %}

                <form method="post">
                    {% csrf_token %}

                    <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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>Store details</h2>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="name">Store Name *</label>
                                    <input type="text" id="name" name="name" required value="{{ store.name }}">
                                </div>
                                <div class="form-group">
                                    <label for="priority">Priority</label>
                                    <input type="number" id="priority" name="priority" value="{{ store.priority }}">
                                    <span class="form-help">Higher = ranked first</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="logo">Logo URL</label>
                                <input type="url" id="logo" name="logo" value="{{ store.logo }}">
                            </div>
                            <div class="form-group">
                                <label for="is_active" class="checkbox-label">
                                    <input type="checkbox" id="is_active" name="is_active" {% if store.is_active %}checked{% endif %}>
                                    Store is active
                                </label>
                                <span class="form-help">Inactive stores won't be queried by ACA</span>
                            </div>
                        </div>
                    </div>

                    <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"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>API configuration</h2>
                            <div class="form-group">
                                <label for="base_api_url">Base API URL *</label>
                                <input type="url" id="base_api_url" name="base_api_url" required value="{{ store.base_api_url }}">
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="search_endpoint">Search Endpoint</label>
                                    <input type="text" id="search_endpoint" name="search_endpoint" value="{{ store.search_endpoint }}">
                                </div>
                                <div class="form-group">
                                    <label for="detail_endpoint">Detail Endpoint</label>
                                    <input type="text" id="detail_endpoint" name="detail_endpoint" value="{{ store.detail_endpoint }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <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"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>Authentication</h2>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="auth_method">Method</label>
                                    <select id="auth_method" name="auth_method">
                                        <option value="none" {% if store.auth_method == "none" %}selected{% endif %}>No Authentication</option>
                                        <option value="api_key_header" {% if store.auth_method == "api_key_header" %}selected{% endif %}>API Key in Header</option>
                                        <option value="bearer_token" {% if store.auth_method == "bearer_token" %}selected{% endif %}>Bearer Token</option>
                                        <option value="query_param" {% if store.auth_method == "query_param" %}selected{% endif %}>Query Param</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="api_key">API Key / Token</label>
                                    <input type="password" id="api_key" name="api_key" value="{{ store.api_key }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="auth_header_name">Header Name</label>
                                <input type="text" id="auth_header_name" name="auth_header_name" value="{{ store.auth_header_name }}">
                            </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"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>Advanced</h2>
                            <div class="form-group">
                                <label for="response_mapping">Response Field Mapping (JSON)</label>
                                <textarea id="response_mapping" name="response_mapping" rows="3">{{ store.response_mapping|safe }}</textarea>
                                <span class="form-help">Map store-specific field names to ACA's canonical names</span>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions-bar">
                        <a href="{% url 'stores:dashboard' %}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary btn-lg">Save Changes</button>
                    </div>
                </form>
            </div>

            <!-- Right: Sidebar -->
            <aside class="page-sidebar">
                <div class="sidebar-card">
                    <div class="sidebar-store-preview">
                        {% if store.logo %}
                        <img src="{{ store.logo }}" class="preview-logo" alt="">
                        {% else %}
                        <div class="store-logo-placeholder lg">{{ store.name|first }}</div>
                        {% endif %}
                        <h3>{{ store.name }}</h3>
                        <span class="preview-url">{{ store.base_api_url }}</span>
                        <div class="preview-badge {% if store.is_active %}status-active{% else %}status-inactive{% endif %}">
                            {{ store.is_active|yesno:"Active,Inactive" }}
                        </div>
                    </div>
                </div>

                <div class="sidebar-card">
                    <h3>Quick Actions</h3>
                    <div class="sidebar-actions">
                        <button class="btn btn-sm btn-test sidebar-btn" onclick="testStore()">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                            Test Connection
                        </button>
                        <form method="post" action="{% url 'stores:toggle' store.id %}" style="display:inline;width:100%">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm sidebar-btn {% if store.is_active %}btn-warning{% else %}btn-success{% endif %}">
                                {{ store.is_active|yesno:"Disable Store,Enable Store" }}
                            </button>
                        </form>
                    </div>
                    <div id="test-result" style="display:none"></div>
                </div>

                <div class="sidebar-card">
                    <h3>Info</h3>
                    <div class="sidebar-meta">
                        <div class="meta-row"><span>Slug</span><code>{{ store.slug }}</code></div>
                        <div class="meta-row"><span>Added</span><span>{{ store.added_at|date:"M d, Y" }}</span></div>
                        <div class="meta-row"><span>Updated</span><span>{{ store.updated_at|date:"M d, Y H:i" }}</span></div>
                    </div>
                </div>

                <div class="sidebar-card sidebar-danger-zone">
                    <h3>Danger Zone</h3>
                    <form method="post" action="{% url 'stores:delete' store.id %}" onsubmit="return confirm('Delete {{ store.name }}? This cannot be undone.')">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-danger sidebar-btn">Delete This Store</button>
                    </form>
                </div>
            </aside>
        </div>
    </div>
</div>

<script>
function testStore() {
    const result = document.getElementById('test-result');
    result.style.display = 'block';
    result.className = 'test-result test-loading';
    result.textContent = 'Testing...';
    fetch('/dashboard/{{ store.id }}/test/')
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                result.className = 'test-result test-success';
                let msg = 'OK — HTTP ' + data.status_code + ' in ' + data.response_time_ms + 'ms';
                if (data.product_count !== null) msg += ' (' + data.product_count + ' products)';
                result.textContent = msg;
            } else {
                result.className = 'test-result test-fail';
                result.textContent = 'Failed: ' + (data.error || 'HTTP ' + data.status_code);
            }
        })
        .catch(err => { result.className = 'test-result test-fail'; result.textContent = err.message; });
}
</script>
{% endblock %}