{% extends "admin_base.html" %}
{% import "macros/admin_management_header.html" as mh %}
{% import "macros/modal.html" as modal %}
{% import "macros/loading_spinner.html" as spinner %}

{% block extra_head %}
{% endblock %}

{% block page_title %}Relational Sheets{% endblock %}

{% block admin_content %}
<div class="relational-sheet-app rs-admin-shell" data-plugin="relational-sheet"
    data-allow-edit="{{ allow_profile_editing | default(value=true) }}"
    data-currency="{{ currency_symbol | default(value='₹') }}">

    {{ mh::management_header_simple(
        title="Relational Sheets",
        subtitle="Define schema-agnostic sheet profiles. Open the workbook for Excel-style tab navigation.",
        actions_html='<a href="/plugins/relational-sheet/workbook" class="blocks-button blocks-button-secondary"><i class="fas fa-table"></i> Open workbook</a> <button type="button" class="blocks-button blocks-button-primary" id="rs-new-profile-btn"><i class="fas fa-plus"></i> New profile</button>'
    ) }}

    <div class="card">
        <table class="blocks-admin-table responsive-table" id="rs-profiles-table">
            <thead>
                <tr>
                    <th>Profile</th>
                    <th>Slug</th>
                    <th>Description</th>
                    <th>Updated</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for p in profiles %}
                <tr data-profile-id="{{ p.id }}" data-profile-slug="{{ p.slug }}">
                    <td data-label="Profile"><strong>{{ p.title }}</strong></td>
                    <td data-label="Slug"><code>{{ p.slug }}</code></td>
                    <td data-label="Description">{{ p.description | default(value="—") }}</td>
                    <td data-label="Updated">
                        {% if p.updated_at %}
                        {{ p.updated_at | date_in_tz(timezone=timezone, format="%Y-%m-%d %H:%M") }}
                        {% else %}—{% endif %}
                    </td>
                    <td data-label="Actions" class="rs-actions-cell">
                        <a class="blocks-button blocks-button-primary blocks-button-sm" href="/plugins/relational-sheet/workbook/{{ p.slug }}">
                            <i class="fas fa-table"></i> Open sheet
                        </a>
                        <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm rs-edit-profile-btn" data-id="{{ p.id }}">
                            <i class="fas fa-pen"></i> Edit
                        </button>
                    </td>
                </tr>
                {% else %}
                {{ spinner::table_skeleton(colspan=5, lines=2, label="Loading profiles…") }}
                {% endfor %}
            </tbody>
        </table>
    </div>

    {{ modal::modal(id="rs-profile-modal", title="Sheet profile", body_html='<form id="rs-profile-form" class="rs-profile-form"><input type="hidden" name="id" id="rs-profile-id"><div class="form-row"><div class="space-y-2"><label for="rs-profile-title">Title</label><input type="text" id="rs-profile-title" name="title" required></div><div class="space-y-2"><label for="rs-profile-slug">Slug</label><input type="text" id="rs-profile-slug" name="slug" required pattern="[a-z0-9-]+"></div></div><div class="space-y-2"><label for="rs-profile-description">Description</label><textarea id="rs-profile-description" name="description" rows="2"></textarea></div><div class="space-y-2"><label for="rs-profile-sort">Sort order</label><input type="number" id="rs-profile-sort" name="sort_order" value="0"></div><div class="rs-profile-tabs"><button type="button" class="tab-btn active" data-tab="source">Source query</button><button type="button" class="tab-btn" data-tab="columns">Columns</button><button type="button" class="tab-btn" data-tab="filters">Filters &amp; UI</button><button type="button" class="tab-btn" data-tab="advanced">Advanced JSON</button></div><div class="tab-panel active" data-panel="source"><p class="text-muted rs-help">SQL that powers the sheet. Use column aliases matching your row key and editable fields.</p><div class="space-y-2"><label for="rs-source-row-key">Row key column</label><input type="text" id="rs-source-row-key" value="id"></div><div class="space-y-2"><label for="rs-source-query">Source SQL</label><textarea id="rs-source-query" rows="8" spellcheck="false"></textarea></div><div class="rs-schema-helper"><label>Schema helper</label><select id="rs-schema-table-select"><option value="">Pick a table…</option></select><pre id="rs-schema-columns-preview" class="rs-schema-preview"></pre></div></div><div class="tab-panel" data-panel="columns"><p class="text-muted rs-help">Define visible columns, editability, validation, and write mappings.</p><div id="rs-columns-builder"></div><button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="rs-add-column-btn"><i class="fas fa-plus"></i> Add column</button></div><div class="tab-panel" data-panel="filters"><div class="space-y-2"><label for="rs-ui-page-size">Page size override (leave empty to inherit default)</label><input class="blocks-input" type="number" id="rs-ui-page-size" min="1" max="5000" placeholder="Inherit global default"></div><div class="space-y-2"><label>Default filters</label><div id="rs-filters-builder"></div><button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="rs-add-filter-btn">Add filter</button></div></div><div class="tab-panel" data-panel="advanced"><p class="text-muted rs-help">Full profile JSON (updates as you edit tabs).</p><pre id="rs-config-preview" class="rs-config-preview"></pre></div></form>', footer_html='<button type="button" class="blocks-button blocks-button-secondary" id="rs-profile-cancel-btn">Cancel</button><button type="submit" form="rs-profile-form" class="blocks-button blocks-button-primary">Save profile</button>') }}
    </div>
{% endblock %}

{% block scripts %}
<script src="/plugins/relational-sheet/assets/js/relational_sheet_common.js"></script>
<script src="/plugins/relational-sheet/assets/js/relational_sheet_admin.js"></script>
{% endblock %}