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

{% block title %}ACA — Settings{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<style>
/* ── Provider toggle cards ──────────────────────────────────── */
.provider-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 0;
}
.provider-card {
    border: 2px solid var(--border-light);
    border-radius: var(--radius);
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--black);
}
.provider-card:hover {
    border-color: var(--gold-dim);
}
.provider-card.selected {
    border-color: var(--gold);
    background: var(--gold-glow);
}
.provider-card input[type="radio"] {
    display: none;
}
.provider-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.provider-icon.claude { background: rgba(201,169,110,0.15); color: var(--gold); }
.provider-icon.openai { background: rgba(42,157,143,0.15); color: #2a9d8f; }
.provider-info h4 {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 3px;
    color: var(--text);
}
.provider-info p {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.5;
}
.provider-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}
.badge-active { background: rgba(42,157,143,0.15); color: #2a9d8f; }
.badge-inactive { background: var(--surface); color: var(--text-muted); }
.badge-missing { background: rgba(231,111,81,0.12); color: var(--danger, #e76f51); }

/* ── Config panels ───────────────────────────────────────────── */
.provider-config {
    display: none;
    margin-top: 16px;
}
.provider-config.visible { display: block; }

/* ── Active provider pill on sidebar ─────────────────────────── */
.active-provider-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 2px;
    margin-bottom: 12px;
}
.pill-claude { background: var(--gold-glow); color: var(--gold); border: 1px solid rgba(201,169,110,0.3); }
.pill-openai { background: rgba(42,157,143,0.1); color: #2a9d8f; border: 1px solid rgba(42,157,143,0.25); }
</style>
{% endblock %}

{% block body %}
<div class="dash">
    <nav class="dash-nav">
        <div class="dash-nav-brand">
            <span class="logo-icon"></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 active">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">
            <div class="page-content">
                <a href="{% url 'stores:dashboard' %}" class="back-link">&larr; Back to Dashboard</a>
                <h1 class="page-title">Settings</h1>
                <p class="page-desc">Configure AI provider, API keys, and platform-wide options.</p>

                {% if saved %}
                <div class="alert alert-success">Settings saved successfully.</div>
                {% endif %}

                {% if test_result %}
                <div class="alert {% if test_result.success %}alert-success{% else %}alert-error{% endif %}">
                    {% if test_result.success %}
                        {{ test_result.message }}
                    {% else %}
                        Test failed: {{ test_result.error }}
                    {% endif %}
                </div>
                {% endif %}

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

                    <!-- ── AI Provider Selection ───────────────────────── -->
                    <div class="form-section">
                        <div class="section-icon">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>AI Provider</h2>
                            <p class="section-desc">Choose which AI service powers the shopping assistant. Changes take effect immediately after saving — no server restart needed.</p>

                            <div class="provider-toggle">
                                <!-- Claude -->
                                <label class="provider-card {% if settings.llm_provider == 'claude' %}selected{% endif %}" id="card-claude">
                                    <input type="radio" name="llm_provider" value="claude"
                                           {% if settings.llm_provider == 'claude' %}checked{% endif %}
                                           onchange="switchProvider('claude')">
                                    <div class="provider-icon claude">A</div>
                                    <div class="provider-info">
                                        <h4>Anthropic Claude</h4>
                                        <p>Haiku · Sonnet · Opus<br>Recommended for cost-efficiency</p>
                                    </div>
                                    <span class="provider-badge {% if claude_active %}badge-active{% else %}badge-missing{% endif %}">
                                        {% if claude_active %}Key set{% else %}No key{% endif %}
                                    </span>
                                </label>

                                <!-- OpenAI -->
                                <label class="provider-card {% if settings.llm_provider == 'openai' %}selected{% endif %}" id="card-openai">
                                    <input type="radio" name="llm_provider" value="openai"
                                           {% if settings.llm_provider == 'openai' %}checked{% endif %}
                                           onchange="switchProvider('openai')">
                                    <div class="provider-icon openai">G</div>
                                    <div class="provider-info">
                                        <h4>OpenAI ChatGPT</h4>
                                        <p>GPT-4o · GPT-4o-mini · GPT-3.5<br>Alternative provider</p>
                                    </div>
                                    <span class="provider-badge {% if openai_active %}badge-active{% else %}badge-missing{% endif %}">
                                        {% if openai_active %}Key set{% else %}No key{% endif %}
                                    </span>
                                </label>
                            </div>

                            <!-- ── Claude config ─────────────────────────── -->
                            <div class="provider-config {% if settings.llm_provider == 'claude' %}visible{% endif %}" id="config-claude">
                                <div style="background:var(--charcoal);border:1px solid var(--border-light);border-radius:var(--radius);padding:18px;margin-top:4px;">
                                    <div class="form-group">
                                        <label for="anthropic_api_key">Anthropic API Key</label>
                                        <div class="key-input-row">
                                            <input type="password" id="anthropic_api_key" name="anthropic_api_key"
                                                   value="{{ masked_key_value }}"
                                                   placeholder="sk-ant-..."
                                                   autocomplete="off">
                                            <button type="button" class="btn btn-sm btn-secondary" onclick="toggleVis('anthropic_api_key', this)">Show</button>
                                        </div>
                                        <span class="form-help">Get your key at <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener">console.anthropic.com</a></span>
                                        {% if claude_active %}
                                        <div class="key-status key-set" style="display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;font-weight:600;color:#2a9d8f;">
                                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                                            API key configured
                                        </div>
                                        {% else %}
                                        <div class="key-status key-missing" style="display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;font-weight:600;color:var(--danger,#e76f51);">
                                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                                            No API key — Claude disabled
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="form-row" style="margin-top:12px;">
                                        <div class="form-group">
                                            <label for="llm_model">Model</label>
                                            <select id="llm_model" name="llm_model">
                                                <option value="claude-haiku-4-5-20251001" {% if settings.llm_model == "claude-haiku-4-5-20251001" %}selected{% endif %}>Claude Haiku 4.5 (fast · cheap)</option>
                                                <option value="claude-sonnet-4-5-20250514" {% if settings.llm_model == "claude-sonnet-4-5-20250514" %}selected{% endif %}>Claude Sonnet 4.5 (balanced)</option>
                                                <option value="claude-sonnet-4-20250514" {% if settings.llm_model == "claude-sonnet-4-20250514" %}selected{% endif %}>Claude Sonnet 4 (smart)</option>
                                            </select>
                                            <span class="form-help">Haiku recommended for cost-efficiency</span>
                                        </div>
                                        <div class="form-group">
                                            <label for="llm_max_tokens">Max Tokens</label>
                                            <input type="number" id="llm_max_tokens" name="llm_max_tokens"
                                                   value="{{ settings.llm_max_tokens }}" min="128" max="4096">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- ── OpenAI config ──────────────────────────── -->
                            <div class="provider-config {% if settings.llm_provider == 'openai' %}visible{% endif %}" id="config-openai">
                                <div style="background:var(--charcoal);border:1px solid var(--border-light);border-radius:var(--radius);padding:18px;margin-top:4px;">
                                    <div class="form-group">
                                        <label for="openai_api_key">OpenAI API Key</label>
                                        <div class="key-input-row">
                                            <input type="password" id="openai_api_key" name="openai_api_key"
                                                   value="{{ openai_masked_key_value }}"
                                                   placeholder="sk-..."
                                                   autocomplete="off">
                                            <button type="button" class="btn btn-sm btn-secondary" onclick="toggleVis('openai_api_key', this)">Show</button>
                                        </div>
                                        <span class="form-help">Get your key at <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener">platform.openai.com/api-keys</a></span>
                                        {% if openai_active %}
                                        <div style="display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;font-weight:600;color:#2a9d8f;">
                                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                                            OpenAI key configured
                                        </div>
                                        {% else %}
                                        <div style="display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;font-weight:600;color:var(--danger,#e76f51);">
                                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                                            No API key — OpenAI disabled
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="form-group" style="margin-top:12px;">
                                        <label for="openai_model">Model</label>
                                        <select id="openai_model" name="openai_model">
                                            <option value="gpt-4o-mini" {% if settings.openai_model == "gpt-4o-mini" %}selected{% endif %}>GPT-4o Mini (fast · cheap)</option>
                                            <option value="gpt-4o" {% if settings.openai_model == "gpt-4o" %}selected{% endif %}>GPT-4o (balanced)</option>
                                            <option value="gpt-3.5-turbo" {% if settings.openai_model == "gpt-3.5-turbo" %}selected{% endif %}>GPT-3.5 Turbo (legacy)</option>
                                        </select>
                                        <span class="form-help">GPT-4o Mini recommended for cost-efficiency</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ── Vendor Subscriptions ───────────────────────── -->
                    <div class="form-section">
                        <div class="section-icon">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>Vendor Subscriptions</h2>
                            <p class="section-desc">Control how new vendors register and pay.</p>

                            <div class="form-group" style="margin-bottom:20px;">
                                <label class="checkbox-label" style="cursor:pointer;">
                                    <input type="checkbox" id="vendor_registration_free" name="vendor_registration_free"
                                           {% if settings.vendor_registration_free %}checked{% endif %}
                                           onchange="toggleFreeMode(this.checked)">
                                    <span style="font-family:var(--font-display,Syne,sans-serif);font-size:13px;font-weight:600;letter-spacing:0.02em;text-transform:none;color:var(--text);">
                                        Free registration mode
                                    </span>
                                </label>
                                <span class="form-help">When enabled, no payment is taken at registration.</span>
                            </div>

                            <div id="free-duration-row" style="{% if not settings.vendor_registration_free %}display:none;{% endif %}">
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="vendor_free_duration_months">Free Duration (months)</label>
                                        <input type="number" id="vendor_free_duration_months" name="vendor_free_duration_months"
                                               value="{{ settings.vendor_free_duration_months }}" min="1" max="120">
                                    </div>
                                    <div class="form-group" style="display:flex;align-items:center;padding-top:24px;">
                                        <div style="background:rgba(42,157,143,0.08);border:1px solid rgba(42,157,143,0.2);border-radius:3px;padding:10px 14px;font-size:12px;color:#2a9d8f;">
                                            Vendors get a <strong>free</strong> subscription — no charge at registration.
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="paid-options-row" style="{% if settings.vendor_registration_free %}display:none;{% endif %}">
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="vendor_registration_fee">Registration Fee (GHS)</label>
                                        <input type="number" id="vendor_registration_fee" name="vendor_registration_fee"
                                               value="{{ settings.vendor_registration_fee }}" min="0" step="0.01">
                                    </div>
                                    <div class="form-group">
                                        <label for="vendor_subscription_months">Subscription Duration (months)</label>
                                        <input type="number" id="vendor_subscription_months" name="vendor_subscription_months"
                                               value="{{ settings.vendor_subscription_months }}" min="1" max="120">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions-bar">
                        <button type="submit" name="action" value="test" class="btn btn-secondary">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                            Test AI Connection
                        </button>
                        <button type="submit" name="action" value="save" class="btn btn-primary btn-lg">Save Settings</button>
                    </div>
                </form>
            </div>

            <!-- ── Sidebar ──────────────────────────────────────────────── -->
            <aside class="page-sidebar">
                <div class="sidebar-card">
                    <h3>Active AI Provider</h3>
                    <div class="active-provider-pill {% if settings.llm_provider == 'openai' %}pill-openai{% else %}pill-claude{% endif %}" id="sidebar-provider-pill">
                        {% if settings.llm_provider == 'openai' %}
                        &#9650; OpenAI — {{ settings.openai_model|default:"gpt-4o-mini" }}
                        {% else %}
                        &#9670; Claude — {{ settings.llm_model|default:"claude-haiku-4-5-20251001" }}
                        {% endif %}
                    </div>
                    <div class="ai-status-indicator">
                        {% if ai_active %}
                        <div class="status-dot status-dot-ok"></div>
                        <span>Active</span>
                        {% else %}
                        <div class="status-dot status-dot-off"></div>
                        <span>No key — AI disabled</span>
                        {% endif %}
                    </div>
                </div>

                <div class="sidebar-card">
                    <h3>Key Status</h3>
                    <div class="sidebar-meta">
                        <div class="meta-row">
                            <span>Claude</span>
                            <span style="color:{% if claude_active %}#2a9d8f{% else %}var(--danger,#e76f51){% endif %};font-weight:600;font-size:11px;">
                                {% if claude_active %}Configured{% else %}Not set{% endif %}
                            </span>
                        </div>
                        <div class="meta-row">
                            <span>OpenAI</span>
                            <span style="color:{% if openai_active %}#2a9d8f{% else %}var(--danger,#e76f51){% endif %};font-weight:600;font-size:11px;">
                                {% if openai_active %}Configured{% else %}Not set{% endif %}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="sidebar-card" id="sidebar-sub-card">
                    <h3>Subscription Mode</h3>
                    {% if settings.vendor_registration_free %}
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                        <div style="width:8px;height:8px;border-radius:50%;background:#2a9d8f;"></div>
                        <span style="font-size:13px;color:#2a9d8f;font-weight:600;">Free Mode ON</span>
                    </div>
                    <p class="sidebar-text">Free for {{ settings.vendor_free_duration_months }} month{{ settings.vendor_free_duration_months|pluralize }}.</p>
                    {% else %}
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                        <div style="width:8px;height:8px;border-radius:50%;background:var(--gold);"></div>
                        <span style="font-size:13px;color:var(--gold);font-weight:600;">Paid Mode</span>
                    </div>
                    <p class="sidebar-text">GHS {{ settings.vendor_registration_fee }} for {{ settings.vendor_subscription_months }} month{{ settings.vendor_subscription_months|pluralize }}.</p>
                    {% endif %}
                </div>

                <div class="sidebar-card">
                    <h3>Active Subscriptions</h3>
                    <div class="sidebar-meta">
                        <div class="meta-row"><span>Active</span><span>{{ active_subscriptions }}</span></div>
                        <div class="meta-row"><span>Expired</span><span>{{ expired_subscriptions }}</span></div>
                        <div class="meta-row"><span>Pending</span><span>{{ pending_subscriptions }}</span></div>
                    </div>
                </div>

                <div class="sidebar-card sidebar-tip">
                    <h3>Provider Tips</h3>
                    <p class="sidebar-text">
                        Both providers work identically from ACA's perspective.
                        You can store keys for both and switch freely.
                        Claude Haiku and GPT-4o Mini are the most cost-efficient options.
                    </p>
                </div>
            </aside>
        </div>
    </div>
</div>

<script>
function toggleVis(inputId, btn) {
    const input = document.getElementById(inputId);
    if (!input) return;
    input.type = input.type === 'password' ? 'text' : 'password';
    btn.textContent = input.type === 'password' ? 'Show' : 'Hide';
}

function switchProvider(provider) {
    // Card highlight
    document.getElementById('card-claude').classList.toggle('selected', provider === 'claude');
    document.getElementById('card-openai').classList.toggle('selected', provider === 'openai');
    // Config panels
    document.getElementById('config-claude').classList.toggle('visible', provider === 'claude');
    document.getElementById('config-openai').classList.toggle('visible', provider === 'openai');
}

function toggleFreeMode(isFree) {
    document.getElementById('free-duration-row').style.display = isFree ? 'block' : 'none';
    document.getElementById('paid-options-row').style.display = isFree ? 'none' : 'block';
}
</script>
{% endblock %}