{% extends 'base.html.twig' %}
{% import '_sidebar_tables.html.twig' as macros %}

{% block title %}{{ tableName }} — Browse · Jormun Admin{% endblock %}

{% block breadcrumbs %}
    <a href="{{ path('dashboard') }}"><i class="bi bi-house-fill"></i> Home</a>
    <span class="sep">/</span>
    <span class="current">{{ tableName }}</span>
    <span class="sep">/</span>
    <span class="current">Browse</span>
{% endblock %}

{% block sidebar_tables %}
    {{ macros.sidebar_table_links(tables, tableName) }}
{% endblock %}

{% block content %}

{# Op Tabs #}
<nav class="op-tabs">
    <a href="{{ path('table_browse', {name: tableName}) }}" class="op-tab active">
        <i class="bi bi-grid-3x3-gap"></i> Browse
    </a>
    <a href="{{ path('table_structure', {name: tableName}) }}" class="op-tab">
        <i class="bi bi-diagram-3"></i> Structure
    </a>
    <a href="{{ path('table_query', {name: tableName}) }}" class="op-tab">
        <i class="bi bi-search"></i> Query
    </a>
    <a href="{{ path('table_item_new', {name: tableName}) }}" class="op-tab">
        <i class="bi bi-plus-circle"></i> Insert
    </a>
    <span style="flex:1;"></span>
    {# Drop table — in a confirmation modal #}
    <button class="op-tab" style="color:#ef4444;" @click="showDrop = true">
        <i class="bi bi-trash3"></i> Drop Table
    </button>
</nav>

{# Error #}
{% if error %}
<div style="background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;border-radius:6px;padding:0.75rem 1rem;margin-bottom:1rem;font-size:0.8rem;">
    <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ error }}
</div>
{% endif %}

{# Stats row #}
{% if not error %}
<div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
    <span class="stat-pill"><i class="bi bi-table"></i> {{ tableName }}</span>
    <span class="stat-pill"><i class="bi bi-check-circle" style="color:var(--jormun-teal);"></i> {{ (desc.TableStatus ?? 'UNKNOWN')|lower }}</span>
    <span class="stat-pill"><i class="bi bi-collection"></i> ~{{ (desc.ItemCount ?? 0)|number_format }} items</span>
    <span class="stat-pill"><i class="bi bi-eye"></i> showing {{ count }} of {{ scannedCount }} scanned</span>
</div>
{% endif %}

{# Main data card #}
<div class="content-card" x-data="browseTable()">
    <div class="content-card-header">
        <h6><i class="bi bi-grid-3x3-gap me-1" style="color:var(--jormun-teal);"></i> Rows</h6>
        <div class="d-flex align-items-center gap-2">
            <label style="font-size:0.72rem;color:#64748b;">Rows per page</label>
            <select class="jormun-select" onchange="changeLimit(this.value)" style="width:auto;">
                {% for l in [10, 25, 50, 100] %}
                <option value="{{ l }}" {% if l == limit %}selected{% endif %}>{{ l }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    {% if items is empty %}
    <div class="empty-state">
        <i class="bi bi-inbox"></i>
        <div style="font-family:'Syne',sans-serif;font-weight:700;font-size:0.9rem;color:#374151;margin-bottom:0.3rem;">No items found</div>
        <div style="font-size:0.75rem;">This table is empty.</div>
    </div>
    {% else %}
    <div style="overflow-x:auto;">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width:100px;">Actions</th>
                    {% for col in columns %}
                    <th>
                        {{ col }}
                        {% if keySchema.HASH is defined and keySchema.HASH.name == col %}
                            <span class="type-badge" title="Partition Key">PK</span>
                        {% endif %}
                        {% if keySchema.RANGE is defined and keySchema.RANGE.name == col %}
                            <span class="type-badge" title="Sort Key">SK</span>
                        {% endif %}
                    </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                {% set itemKey = {} %}
                {% if keySchema.HASH is defined %}
                    {% set itemKey = itemKey|merge({(keySchema.HASH.name): item[keySchema.HASH.name]}) %}
                {% endif %}
                {% if keySchema.RANGE is defined %}
                    {% set itemKey = itemKey|merge({(keySchema.RANGE.name): item[keySchema.RANGE.name]}) %}
                {% endif %}
                <tr>
                    <td class="action-cell">
                        <a href="{{ path('table_item_edit', {name: tableName, key: itemKey|json_encode}) }}" class="btn-sm-edit">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <button
                            class="btn-danger-sm ms-1"
                            @click="confirmDelete($el.dataset.key)"
                            data-key="{{ itemKey|json_encode|e('html_attr') }}"
                        >
                            <i class="bi bi-trash3"></i>
                        </button>
                    </td>
                    {% for col in columns %}
                    <td class="{% if keySchema.HASH is defined and keySchema.HASH.name == col %}pk-cell{% endif %} cell-value" title="{{ item[col] is defined ? item[col]|json_encode : 'null' }}">
                        {% if item[col] is defined %}
                            {% set val = item[col] %}
                            {% if val is iterable %}
                                <span style="color:#6366f1;" title="{{ val|json_encode }}">
                                    <i class="bi bi-braces"></i> {{ val|json_encode|slice(0, 40) }}{% if val|json_encode|length > 40 %}…{% endif %}
                                </span>
                            {% else %}
                                {{ val|e|slice(0, 60) }}{% if (val|e|length) > 60 %}…{% endif %}
                            {% endif %}
                        {% else %}
                            <span class="null-val">NULL</span>
                        {% endif %}
                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {# Pagination #}
    <div style="padding:0.65rem 1rem;border-top:1px solid #f1f5f9;display:flex;align-items:center;gap:0.5rem;justify-content:space-between;">
        <div style="font-size:0.72rem;color:#64748b;">
            Showing {{ count }} item{{ count != 1 ? 's' : '' }}
        </div>
        <div class="d-flex gap-2">
            {% if prevKeys is not empty %}
            {% set prevStack = prevKeys[0:(prevKeys|length - 1)] %}
            {% set prevLastKey = prevKeys|last %}
            <a href="{{ path('table_browse', {name: tableName, lastKey: prevLastKey, prevKeys: prevStack|json_encode, limit: limit}) }}" class="btn-jormun-outline">
                <i class="bi bi-chevron-left"></i> Prev
            </a>
            {% endif %}

            {% if nextKey %}
            {% set newPrevKeys = prevKeys %}
            {% if currentKey %}
                {% set newPrevKeys = newPrevKeys|merge([currentKey]) %}
            {% else %}
                {# first page, push empty marker #}
                {% set newPrevKeys = newPrevKeys|merge(['null']) %}
            {% endif %}
            <a href="{{ path('table_browse', {name: tableName, lastKey: nextKey, prevKeys: newPrevKeys|json_encode, limit: limit}) }}" class="btn-jormun">
                Next <i class="bi bi-chevron-right"></i>
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {# Delete item modal #}
    <div x-show="deleteModal" x-cloak style="position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9000;display:flex;align-items:center;justify-content:center;" @click.self="deleteModal=false">
        <div style="background:#fff;border-radius:8px;padding:1.5rem;width:420px;max-width:90vw;" @click.stop>
            <h6 class="font-display" style="font-weight:700;margin-bottom:0.5rem;">
                <i class="bi bi-trash3-fill" style="color:#ef4444;"></i> Delete Item
            </h6>
            <p style="font-size:0.8rem;color:#64748b;margin-bottom:1rem;">This will permanently delete the item with key:</p>
            <pre style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:4px;padding:0.5rem;font-size:0.72rem;margin-bottom:1rem;" x-text="JSON.stringify(deleteKey, null, 2)"></pre>
            <div class="d-flex gap-2 justify-content-end">
                <button class="btn-jormun-outline" @click="deleteModal=false">Cancel</button>
                <form method="POST" :action="deleteAction">
                    <input type="hidden" name="key" :value="JSON.stringify(deleteKey)">
                    <button type="submit" class="btn-jormun" style="background:#ef4444;">
                        <i class="bi bi-trash3"></i> Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{# Drop Table modal #}
<div x-data="{ showDrop: false }" x-cloak>
    <div x-show="showDrop" style="position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9000;display:flex;align-items:center;justify-content:center;" @click.self="showDrop=false">
        <div style="background:#fff;border-radius:8px;padding:1.5rem;width:400px;max-width:90vw;">
            <h6 class="font-display" style="font-weight:700;margin-bottom:0.5rem;color:#ef4444;">
                <i class="bi bi-exclamation-triangle-fill"></i> Drop Table
            </h6>
            <p style="font-size:0.8rem;color:#374151;margin-bottom:1rem;">
                Are you sure you want to drop <strong>{{ tableName }}</strong>? This action is <strong>irreversible</strong> and will delete all data.
            </p>
            <div class="d-flex gap-2 justify-content-end">
                <button class="btn-jormun-outline" @click="showDrop=false">Cancel</button>
                <form method="POST" action="{{ path('table_drop', {name: tableName}) }}">
                    <button type="submit" class="btn-jormun" style="background:#ef4444;">
                        <i class="bi bi-trash3-fill"></i> Drop Table
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
function browseTable() {
    return {
        deleteModal: false,
        deleteKey: null,
        deleteAction: '',

        confirmDelete(keyJson) {
            this.deleteKey = JSON.parse(keyJson);
            this.deleteAction = '{{ path('table_item_delete', {name: tableName}) }}';
            this.deleteModal = true;
        }
    };
}

function changeLimit(val) {
    const url = new URL(window.location.href);
    url.searchParams.set('limit', val);
    url.searchParams.delete('lastKey');
    url.searchParams.delete('prevKeys');
    window.location.href = url.toString();
}
</script>
{% endblock %}