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

{% block title %}ACA — Connect Store{% 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" style="height: 100vh;">
        <div class="page-layout">
            <!-- Left: Main Content -->
            <div class="page-content">
                <a href="{% url 'stores:dashboard' %}" class="back-link">&larr; Back to Stores</a>
                <h1 class="page-title">Connect a Store</h1>
                <p class="page-desc">Add any eCommerce store by pasting its URL. ACA auto-detects its name, logo, categories, and API endpoints.</p>

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

                <!-- Step 1: Domain -->
                <div id="step-url" class="form-section">
                    <div class="section-icon">1</div>
                    <div class="section-content">
                        <h2>Enter store domain</h2>
                        <p class="section-desc">Paste the root URL of the eCommerce site.</p>
                        <div class="probe-row">
                            <div class="form-group" style="flex:1;margin-bottom:0">
                                <input type="url" id="domain-input"
                                       value="{{ form_data.base_api_url|default:'' }}"
                                       placeholder="https://store.example.com" autofocus>
                            </div>
                            <button type="button" id="btn-probe" class="btn btn-primary" onclick="probeStore()">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/></svg>
                                Connect
                            </button>
                        </div>
                        <div id="probe-status" style="display:none"></div>
                    </div>
                </div>

                <!-- Step 2: Detected (shown after probe) -->
                <div id="step-detected" class="form-section" style="display:none">
                    <div class="section-icon success-icon">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <div class="section-content">
                        <h2>Store detected</h2>
                        <div class="detected-card" id="detected-card"></div>
                    </div>
                </div>

                <!-- Step 3: Form (shown after probe) -->
                <form method="post" id="step-confirm" style="display:none">
                    {% csrf_token %}

                    <div class="form-section">
                        <div class="section-icon">2</div>
                        <div class="section-content">
                            <h2>Store settings</h2>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="name">Store Name</label>
                                    <input type="text" id="name" name="name" required>
                                </div>
                                <div class="form-group">
                                    <label for="priority">Priority</label>
                                    <input type="number" id="priority" name="priority" value="0">
                                    <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" placeholder="Auto-detected">
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="section-icon">3</div>
                        <div class="section-content">
                            <h2>API endpoints</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 readonly class="input-readonly">
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="search_endpoint">Search</label>
                                    <input type="text" id="search_endpoint" name="search_endpoint">
                                </div>
                                <div class="form-group">
                                    <label for="detail_endpoint">Detail</label>
                                    <input type="text" id="detail_endpoint" name="detail_endpoint">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-section collapsible" id="auth-section">
                        <div class="section-icon dim-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 class="toggle-header" onclick="toggleSection('auth-section')">
                                Authentication <span class="optional-tag">optional</span>
                                <span class="toggle-icon">+</span>
                            </h2>
                            <div class="section-body" style="display:none">
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="auth_method">Method</label>
                                        <select id="auth_method" name="auth_method">
                                            <option value="none" selected>No Authentication</option>
                                            <option value="api_key_header">API Key in Header</option>
                                            <option value="bearer_token">Bearer Token</option>
                                            <option value="query_param">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">
                                    </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="X-Api-Key">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-section collapsible" id="advanced-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 class="toggle-header" onclick="toggleSection('advanced-section')">
                                Advanced <span class="optional-tag">optional</span>
                                <span class="toggle-icon">+</span>
                            </h2>
                            <div class="section-body" style="display:none">
                                <div class="form-group">
                                    <label for="response_mapping">Response Field Mapping (JSON)</label>
                                    <textarea id="response_mapping" name="response_mapping" rows="3">{}</textarea>
                                    <span class="form-help">Only needed if the store uses non-standard field names</span>
                                </div>
                            </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">
                            <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
                        </button>
                    </div>
                </form>
            </div>

            <!-- Right: Sidebar -->
            <aside class="page-sidebar">
                <div class="sidebar-card" id="sidebar-initial">
                    <div class="sidebar-card-icon">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/></svg>
                    </div>
                    <h3>How it works</h3>
                    <ol class="sidebar-steps">
                        <li>Paste the store's website URL</li>
                        <li>ACA probes for compatible API endpoints</li>
                        <li>Store name, logo, and categories are detected</li>
                        <li>Review and confirm to connect</li>
                    </ol>
                </div>

                <div class="sidebar-card">
                    <h3>Requirements</h3>
                    <p class="sidebar-text">The store needs ACA-compatible endpoints enabled. If you own the store, make sure the ACA API module is installed.</p>
                </div>

                <div class="sidebar-card" id="sidebar-preview" style="display:none">
                    <h3>Preview</h3>
                    <div id="sidebar-preview-content"></div>
                </div>

                <div class="sidebar-card sidebar-tip">
                    <h3>Tip</h3>
                    <p class="sidebar-text">You can add unlimited stores. Each store is queried in parallel when users search — the more stores, the broader the product selection.</p>
                </div>
            </aside>
        </div>
    </div>
</div>

<script>
function probeStore() {
    const input = document.getElementById('domain-input');
    const btn = document.getElementById('btn-probe');
    const status = document.getElementById('probe-status');
    const url = input.value.trim();
    if (!url) { input.focus(); return; }

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner"></span> Connecting...';
    status.style.display = 'block';
    status.className = 'probe-status probe-loading';
    status.textContent = 'Probing store for ACA compatibility...';

    fetch('/dashboard/probe/?url=' + encodeURIComponent(url))
        .then(r => r.json())
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/></svg> Connect';

            if (data.success) {
                status.className = 'probe-status probe-success';
                status.innerHTML = '<strong>' + esc(data.store_name || 'Store') + '</strong> detected — ' + data.total_products + ' products (' + data.response_time_ms + 'ms)';

                const card = document.getElementById('detected-card');
                let catHtml = (data.categories || []).map(c => '<span class="cat-tag">' + esc(c) + '</span>').join('');
                card.innerHTML =
                    '<div class="detected-row">' +
                    (data.logo_url ? '<img src="' + esc(data.logo_url) + '" class="detected-logo">' : '<div class="store-logo-placeholder">' + esc((data.store_name||'S')[0]) + '</div>') +
                    '<div><h3>' + esc(data.store_name || 'Store') + '</h3>' +
                    (data.store_tagline ? '<p class="detected-tagline">' + esc(data.store_tagline) + '</p>' : '') +
                    '</div></div>' +
                    (data.store_description ? '<p class="detected-desc">' + esc(data.store_description) + '</p>' : '') +
                    '<div class="detected-stats">' +
                    '<span class="stat">' + data.total_products + ' products</span>' +
                    '<span class="stat">' + (data.categories||[]).length + ' categories</span>' +
                    '<span class="stat">' + data.response_time_ms + 'ms</span></div>' +
                    (catHtml ? '<div class="detected-cats">' + catHtml + '</div>' : '');

                document.getElementById('name').value = data.store_name || '';
                document.getElementById('logo').value = data.logo_url || '';
                document.getElementById('base_api_url').value = data.base_api_url || '';
                document.getElementById('search_endpoint').value = data.search_endpoint || 'aca/products/search/';
                document.getElementById('detail_endpoint').value = data.detail_endpoint || 'aca/products/';

                document.getElementById('step-detected').style.display = 'flex';
                document.getElementById('step-confirm').style.display = 'block';

                // Sidebar preview
                const preview = document.getElementById('sidebar-preview');
                preview.style.display = 'block';
                document.getElementById('sidebar-preview-content').innerHTML =
                    '<div class="preview-store">' +
                    (data.logo_url ? '<img src="' + esc(data.logo_url) + '" class="preview-logo">' : '') +
                    '<strong>' + esc(data.store_name || '') + '</strong>' +
                    '<span class="preview-url">' + esc(data.base_api_url || '') + '</span></div>';

                document.getElementById('step-detected').scrollIntoView({ behavior: 'smooth', block: 'center' });
            } else {
                status.className = 'probe-status probe-fail';
                status.textContent = data.error || 'Could not connect.';
                document.getElementById('step-detected').style.display = 'none';
                document.getElementById('step-confirm').style.display = 'none';
                document.getElementById('sidebar-preview').style.display = 'none';
            }
        })
        .catch(err => {
            btn.disabled = false;
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/></svg> Connect';
            status.className = 'probe-status probe-fail';
            status.textContent = 'Error: ' + err.message;
        });
}

function toggleSection(id) {
    const section = document.getElementById(id);
    const body = section.querySelector('.section-body');
    const icon = section.querySelector('.toggle-icon');
    const isHidden = body.style.display === 'none';
    body.style.display = isHidden ? 'block' : 'none';
    icon.textContent = isHidden ? '-' : '+';
}

function esc(str) { const d = document.createElement('div'); d.textContent = str||''; return d.innerHTML; }

document.getElementById('domain-input').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') { e.preventDefault(); probeStore(); }
});
</script>
{% endblock %}