{% extends "account/layout.html" %}
{% block title %}{{ super() }} - {{ page | capitalize }} - {{ database.name }}{% endblock %}
{% block pagetitle %}
<div class="d-flex align-items-center gap-2">
    <a href="{{ url_for('list_user_databases') }}" class="btn btn-ghost btn-sm">
        <i class="fas fa-arrow-left"></i>
    </a>
    <span class="text-muted">/</span>
    <span>{{ database.name | upper }}</span>
</div>
{% endblock %}

{% block content %}
{% include 'databases/modal.html' %}

{% for (category, message) in get_flashed_messages(request) %}
<div class="alert alert-{{ category }} mb-3">
    <i class="fas fa-{% if category == 'danger' %}exclamation-circle{% elif category == 'success' %}check-circle{% else %}info-circle{% endif %}"></i>
    <span>{{ message }}</span>
    <button type="button" class="btn-close" data-bs-dismiss="alert"><i class="fas fa-times"></i></button>
</div>
{% endfor %}

<nav class="mb-4 d-flex flex-wrap justify-content-between align-items-center gap-3">
    <div class="nav nav-pills" role="tablist">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#nav-documents" type="button" role="tab">
            <i class="fas fa-file-alt fa-fw me-1"></i>
            Documents
        </button>
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-settings" type="button" role="tab">
            <i class="fas fa-cog fa-fw me-1"></i>
            Schema
        </button>
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-initialization" type="button" role="tab">
            <i class="fas fa-code fa-fw me-1"></i>
            Init
        </button>
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab">
            <i class="fas fa-info-circle fa-fw me-1"></i>
            Details
        </button>
    </div>
    <div class="btn-group" role="group">
        <a href="{{ url_for('list_user_databases') }}" class="btn btn-outline-secondary" title="Disable">
            <i class="fas fa-eye-slash"></i>
        </a>
        <a href="{{ url_for('list_user_databases') }}" class="btn btn-outline-danger" title="Delete">
            <i class="fas fa-trash-alt"></i>
        </a>
    </div>
</nav>

<div class="tab-content">
    <div class="tab-pane fade show active" id="nav-documents" role="tabpanel">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="btn-group" role="group">
                <a href="{{ url_for('user_database_details', database_id=database.id) }}?view=grid" 
                   class="btn {% if request.session['view'] != 'list' %}btn-accent{% else %}btn-outline-secondary{% endif %}">
                    <i class="fas fa-code fa-fw"></i>
                </a>
                <a href="{{ url_for('user_database_details', database_id=database.id) }}?view=list" 
                   class="btn {% if request.session['view'] == 'list' %}btn-accent{% else %}btn-outline-secondary{% endif %}">
                    <i class="fas fa-th-list fa-fw"></i>
                </a>
            </div>
            <button type="button" class="btn btn-accent" data-bs-toggle="modal" data-bs-target="#databaseModal">
                <i class="fas fa-plus fa-fw"></i>
                Insert Document
            </button>
        </div>
        {% if request.session['view'] == 'list' %}
        {% include 'databases/table.html' %}
        {% else %}
        {% include 'databases/json.html' %}
        {% endif %}
    </div>
    
    <div class="tab-pane fade" id="nav-settings" role="tabpanel">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-cog fa-fw text-accent me-2"></i>Collection Schema</span>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-ghost" onclick="createSchema()">
                        <i class="fas fa-plus"></i>
                    </button>
                    <button type="submit" class="btn btn-ghost" onclick="updateSchemas()">
                        <i class="fas fa-save"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ url_for('user_database_schema', database_id=database.id) }}" method="post" class="schema-form">
                    {% for key, value in database.collection_schema.items() %}
                    {% set id = 'schema' + (loop.index | string) %}
                    {% set schemaKey = 'schemaKey' + (loop.index | string) %}
                    <div class="form-group d-flex align-items-center gap-2 py-2 {% if not loop.last %}border-bottom{% endif %}" id="{{ id }}">
                        <input type="text" value="{{ key }}" placeholder="key"
                               class="form-control form-control-sm form-control-mono"
                               data-name="{{ schemaKey }}" required onkeyup="setSchemaKey(this)">
                        <span class="text-muted">=</span>
                        <select name="{{ key }}" id="{{ schemaKey }}" class="form-select form-select-sm" required>
                            <option disabled>Type</option>
                            <option value="str" {% if value == 'str' %}selected{% endif %}>String</option>
                            <option value="text" {% if value == 'text' %}selected{% endif %}>Text</option>
                            <option value="int" {% if value == 'int' %}selected{% endif %}>Integer</option>
                            <option value="float" {% if value == 'float' %}selected{% endif %}>Float</option>
                            <option value="bool" {% if value == 'bool' %}selected{% endif %}>Boolean</option>
                        </select>
                        <a href="javascript:deleteElem('{{ id }}')" class="btn btn-ghost btn-sm text-danger">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">No schema defined. Add fields to define your document structure.</p>
                    {% endfor %}
                </form>
            </div>
        </div>
    </div>
    
    <div class="tab-pane fade" id="nav-initialization" role="tabpanel">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fab fa-python fa-fw text-accent me-2"></i>Python Initialization</span>
                <button class="btn btn-ghost btn-sm" onclick="copyInitCode()" title="Copy to clipboard">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
            <div class="card-body p-0">
                <div class="code-editor">
                    <div class="code-editor-header">
                        <div class="code-editor-tabs">
                            <span class="code-editor-tab active">
                                <i class="fab fa-python fa-fw me-1"></i>init.py
                            </span>
                        </div>
                        <div class="code-editor-dots">
                            <span></span><span></span><span></span>
                        </div>
                    </div>
                    <div class="code-editor-body">
                        <div class="code-editor-gutter">
                            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
                        </div>
                        <pre class="code-editor-content" id="init-code"><code><span class="code-keyword">from</span> <span class="code-module">runit_database</span> <span class="code-keyword">import</span> <span class="code-class">Document</span>

<span class="code-class">Document</span>.<span class="code-func">initialize</span>(
    <span class="code-string">'{{ request.base_url }}api/{{ api_version }}'</span>,
    <span class="code-string">'{{ request.session["access_token"] }}'</span>,
    <span class="code-string">'{{ database.project_id }}'</span>
)</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="tab-pane fade" id="nav-home" role="tabpanel">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-database fa-fw text-accent me-2"></i>Database Details</span>
                <button type="button" class="btn btn-accent btn-sm" data-bs-toggle="modal" data-bs-target="#databaseModal">
                    <i class="fas fa-folder-plus fa-fw me-1"></i>
                    Insert
                </button>
            </div>
            <div class="p-0">
                <div class="code-editor">
                    <div class="code-editor-header">
                        <div class="code-editor-tabs">
                            <span class="code-editor-tab active">
                                <i class="fas fa-database fa-fw me-1"></i>database.json
                            </span>
                        </div>
                        <div class="code-editor-dots">
                            <span></span><span></span><span></span>
                        </div>
                    </div>
                    <div class="code-editor-body code-editor-no-gutter">
                        <pre class="code-editor-content" id="database-json"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let db = {{ database | tojson }};

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        let cls = 'code-number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'code-key';
            } else {
                cls = 'code-string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'code-boolean';
        } else if (/null/.test(match)) {
            cls = 'code-null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

document.getElementById("database-json").innerHTML = '<code>' + syntaxHighlight(JSON.stringify(db, null, 2)) + '</code>';

function copyInitCode() {
    const code = `from runit_database import Document

Document.initialize(
    '{{ request.base_url }}api/{{ api_version }}',
    '{{ request.session["access_token"] }}',
    '{{ database.project_id }}'
)`;
    navigator.clipboard.writeText(code).then(() => {
        const btn = event.currentTarget;
        const icon = btn.querySelector('i');
        icon.className = 'fas fa-check';
        setTimeout(() => { icon.className = 'fas fa-copy'; }, 2000);
    });
}
</script>
{{ super() }}
<script src="/static/js/databases.js"></script>
{% endblock %}