{% extends "base.html" %}

{% block title %}ACA Dashboard — Stores{% endblock %}

{% block extra_css %}
{% load static %}
<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 active">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>
            <form method="post" action="{% url 'logout' %}" style="display:inline">
                {% csrf_token %}
                <button type="submit" class="nav-link btn-logout">Logout</button>
            </form>
        </div>
    </nav>

    <main class="dash-main">
        <div class="dash-header">
            <div>
                <h1>Connected Stores</h1>
                <p class="dash-subtitle">{{ active_stores }} active out of {{ total_stores }} registered</p>
            </div>
            <a href="{% url 'stores:add' %}" class="btn btn-primary">
                <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>
                Add Store
            </a>
        </div>

        {% if store_data %}
        <div class="search-bar">
            <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" id="store-search" placeholder="Search stores by name, URL, or slug..." autofocus>
            <span class="search-count" id="search-count">{{ total_stores }} stores</span>
        </div>

        <div class="store-grid" id="store-grid">
            {% for item in store_data %}
            <div class="store-card {% if not item.store.is_active %}store-inactive{% endif %}"
                 data-name="{{ item.store.name|lower }}"
                 data-slug="{{ item.store.slug|lower }}"
                 data-url="{{ item.store.base_api_url|lower }}">

                <div class="store-card-top">
                    <div class="store-card-header">
                        <div class="store-info">
                            {% if item.store.logo %}
                            <img src="{{ item.store.logo }}" alt="" class="store-logo">
                            {% else %}
                            <div class="store-logo-placeholder">{{ item.store.name|first }}</div>
                            {% endif %}
                            <div>
                                <h3 class="store-name">{{ item.store.name }}</h3>
                                <span class="store-slug">{{ item.store.slug }}</span>
                            </div>
                        </div>
                        <div class="store-status {% if item.store.is_active %}status-active{% else %}status-inactive{% endif %}">
                            {{ item.store.is_active|yesno:"Active,Inactive" }}
                        </div>
                    </div>

                    <div class="store-card-body">
                        <div class="store-field">
                            <label>API URL</label>
                            <code>{{ item.store.base_api_url }}</code>
                        </div>
                        <div class="store-field-row">
                            <div class="store-field">
                                <label>Auth</label>
                                <span>{{ item.store.get_auth_method_display }}</span>
                            </div>
                            <div class="store-field">
                                <label>Priority</label>
                                <span>{{ item.store.priority }}</span>
                            </div>
                        </div>

                        {% if item.last_health %}
                        <div class="store-health">
                            <div class="health-indicator {% if item.last_health.success %}health-ok{% else %}health-fail{% endif %}"></div>
                            <span>{{ item.last_health.response_time_ms }}ms — HTTP {{ item.last_health.status_code }}</span>
                            {% if item.uptime is not None %}
                            <span class="health-uptime">{{ item.uptime }}%</span>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>

                <div class="store-card-actions">
                    <button class="btn btn-sm btn-test" onclick="testStore({{ item.store.id }}, this)" title="Test connection">
                        <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
                    </button>
                    <form method="post" action="{% url 'stores:toggle' item.store.id %}" style="display:inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm {% if item.store.is_active %}btn-warning{% else %}btn-success{% endif %}">
                            {{ item.store.is_active|yesno:"Disable,Enable" }}
                        </button>
                    </form>
                    <a href="{% url 'stores:edit' item.store.id %}" class="btn btn-sm btn-secondary">Edit</a>
                    <form method="post" action="{% url 'stores:delete' item.store.id %}" style="display:inline" onsubmit="return confirm('Delete {{ item.store.name }}? This cannot be undone.')">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                    </form>
                </div>

                <div class="test-result" id="test-result-{{ item.store.id }}" style="display:none"></div>
            </div>
            {% endfor %}
        </div>

        <div class="no-results" id="no-results" style="display:none">
            <p>No stores match your search.</p>
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-icon">&#9670;</div>
            <h2>No stores connected</h2>
            <p>Add your first eCommerce store to start aggregating products.</p>
            <a href="{% url 'stores:add' %}" class="btn btn-primary">Add Your First Store</a>
        </div>
        {% endif %}
    </main>
</div>

<script>
function testStore(storeId, btn) {
    const resultEl = document.getElementById('test-result-' + storeId);
    btn.disabled = true;
    btn.textContent = 'Testing...';
    resultEl.style.display = 'block';
    resultEl.className = 'test-result test-loading';
    resultEl.textContent = 'Connecting to store...';

    fetch('/dashboard/' + storeId + '/test/')
        .then(r => r.json())
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = '<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';
            if (data.success) {
                resultEl.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';
                resultEl.textContent = msg;
            } else {
                resultEl.className = 'test-result test-fail';
                resultEl.textContent = 'Failed: ' + (data.error || 'HTTP ' + data.status_code);
            }
        })
        .catch(err => {
            btn.disabled = false;
            btn.innerHTML = '<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';
            resultEl.className = 'test-result test-fail';
            resultEl.textContent = 'Error: ' + err.message;
        });
}

(function() {
    const input = document.getElementById('store-search');
    if (!input) return;
    const grid = document.getElementById('store-grid');
    const cards = grid.querySelectorAll('.store-card');
    const countEl = document.getElementById('search-count');
    const noResults = document.getElementById('no-results');
    const total = cards.length;

    input.addEventListener('input', function() {
        const q = this.value.toLowerCase().trim();
        let visible = 0;
        cards.forEach(card => {
            const match = !q
                || card.dataset.name.includes(q)
                || card.dataset.slug.includes(q)
                || card.dataset.url.includes(q);
            card.style.display = match ? '' : 'none';
            if (match) visible++;
        });
        countEl.textContent = q ? visible + ' of ' + total : total + ' stores';
        noResults.style.display = visible === 0 ? 'block' : 'none';
    });
})();
</script>
{% endblock %}