{% extends "base.html" %}
{% block title %}Settings — CogniGraph Studio{% endblock %}
{% block nav_settings %}active{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Settings</h1>
    <p class="subtitle">Configuration and backend status</p>
</div>

<div class="grid-2">
    <div class="panel">
        <h3>Graph Backend</h3>
        {% if config %}
        <div class="metric-row">
            <span>Connector</span>
            <strong>{{ config.graph.connector if config.graph else 'networkx' }}</strong>
        </div>
        <div class="metric-row">
            <span>Activation Strategy</span>
            <strong>{{ config.activation.strategy if config.activation else 'chunk' }}</strong>
        </div>
        <div class="metric-row">
            <span>Max Nodes</span>
            <strong>{{ config.activation.max_nodes if config.activation else 50 }}</strong>
        </div>
        {% else %}
        <p>No configuration loaded</p>
        {% endif %}
    </div>

    <div class="panel">
        <h3>Model Backend</h3>
        {% if config %}
        <div class="metric-row">
            <span>Backend</span>
            <strong>{{ config.model.backend if config.model else 'api' }}</strong>
        </div>
        <div class="metric-row">
            <span>Model</span>
            <strong>{{ config.model.model if config.model else 'claude-haiku-4-5-20251001' }}</strong>
        </div>
        <div class="metric-row">
            <span>Budget per Query</span>
            <strong>${{ config.cost.budget_per_query if config.cost else 0.10 }}</strong>
        </div>
        {% else %}
        <p>No configuration loaded</p>
        {% endif %}
    </div>
</div>

<div class="panel">
    <h3>Neo4j Status</h3>
    <div x-data="neo4jHealth()" x-init="check()">
        <div x-show="loading" class="loading">Checking Neo4j...</div>
        <div x-show="!loading && !connected" class="status-banner yellow">
            <strong>Neo4j not connected.</strong> Graph is served from JSON.
            <p>To enable Neo4j, set <code>graph.connector: neo4j</code> in cognigraph.yaml</p>
        </div>
        <div x-show="!loading && connected">
            <div class="metric-row"><span>Status</span><strong class="text-green">Connected</strong></div>
            <div class="metric-row"><span>Nodes</span><strong x-text="nodeCount"></strong></div>
            <div class="metric-row"><span>Chunks</span><strong x-text="chunkCount"></strong></div>
            <div class="metric-row"><span>Vector Index</span><strong x-text="indexStatus"></strong></div>
        </div>
    </div>
</div>

<div class="panel">
    <h3>About</h3>
    <div class="metric-row"><span>CogniGraph Version</span><strong>v0.11.0</strong></div>
    <div class="metric-row"><span>Patent</span><strong>EP26162901.8</strong></div>
    <div class="metric-row"><span>License</span><strong>Apache 2.0</strong></div>
    <div class="metric-row"><span>Innovations</span><strong>14</strong></div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function neo4jHealth() {
        return {
            loading: true,
            connected: false,
            nodeCount: 0,
            chunkCount: 0,
            indexStatus: 'unknown',
            async check() {
                try {
                    const r = await fetch('/studio/api/graph/nodes?size=1');
                    const data = await r.json();
                    // Basic health check via graph API
                    this.nodeCount = data.total || 0;
                    this.connected = false; // Will be true when Neo4j backend is active
                } catch(e) {}
                this.loading = false;
            }
        }
    }
</script>
{% endblock %}