{% extends 'clean_base.axml' %}
{% from 'actions.axml' import pagination %}

{% set modal_name = 'Publish New Event' %}

{% macro commander() %}
{
    isFilterable: false,
    idSearch: '',
    eventSearch: '',
    deduperSearch: '',
    payloadSearch: '',
    whenFilter: '',

    // Payload Modal State
    selectedPayload: null,
    showPayloadModal: false,

    filterResults(){
        let base = `/v1/events?pagination=${this.pagination}&page=1`
        if(this.idSearch) base += `&id=${this.idSearch}`
        if(this.eventSearch) base += `&event=${this.eventSearch}`
        if(this.deduperSearch) base += `&deduper=${this.deduperSearch}`
        if(this.payloadSearch) base += `&payload=${this.payloadSearch}`
        if(this.whenFilter) base += `&timeline=${this.whenFilter}`
        fetch(base)
            .then(r => r.json())
            .then(data => {
                isFiltering = true;
                events = data;
            }).catch(err => ShowFeedback('error', 'Filter operation failed'))
    },

    clearFilter(){
        this.idSearch = '';
        this.eventSearch = '';
        this.deduperSearch = '';
        this.payloadSearch = '';
        this.whenFilter = '';
        isFiltering = false;
        fetchAll();
    },

    checkDirty(){
        this.isFilterable = (
            this.idSearch !== '' ||
            this.eventSearch !== '' ||
            this.deduperSearch !== '' ||
            this.payloadSearch !== '' ||
            this.whenFilter !== ''
        );
        return this.isFilterable;
    },

    viewPayload(payload) {
        this.selectedPayload = payload;
        this.showPayloadModal = true;
    }
}
{% endmacro %}


{% block easel %}
<section x-data="{{ controller('events') }}">
    <div x-data="{{ commander() }}" x-effect="checkDirty">

        <!-- Payload Modal -->
        <div class="modal fade" :class="showPayloadModal ? 'show d-block' : ''" tabindex="-1"
            style="z-index: 9999; background: rgba(0,0,0,0.5);" x-show="showPayloadModal" x-transition.opacity>
            <div class="modal-dialog modal-lg modal-dialog-centered" style="max-width: 720px;">
                <div class="modal-content border-0 shadow-lg" x-data="{ payloadIDE: null }">
                    <div class="modal-header pb-2">
                        <div>
                            <h5 class="modal-title fw-bold mb-0">Event Payload</h5>
                            <span class="text-xs text-muted-custom"
                                x-text="selectedPayload ? `${prettyJson(selectedPayload).split('\\n').length} lines` : ''"></span>
                        </div>
                        <button type="button" class="btn-close" @click="showPayloadModal = false; if(payloadIDE) { payloadIDE.destroy(); payloadIDE = null; }"></button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="payload-ace-viewer" x-effect="
                            if (showPayloadModal && selectedPayload && $el) {
                                $nextTick(() => {
                                    if (payloadIDE) { payloadIDE.destroy(); }
                                    payloadIDE = ace.edit($el);
                                    payloadIDE.session.setMode('ace/mode/json');
                                    payloadIDE.setTheme(darkMode ? 'ace/theme/one_dark' : 'ace/theme/chrome');
                                    payloadIDE.setOptions({
                                        readOnly: true,
                                        fontSize: 13,
                                        fontFamily: 'JetBrains Mono, SF Mono, Fira Code, monospace',
                                        showPrintMargin: false,
                                        highlightActiveLine: false,
                                        highlightGutterLine: false,
                                        showGutter: true,
                                        displayIndentGuides: true,
                                        tabSize: 2,
                                        wrap: false,
                                        maxLines: 30,
                                        minLines: 8
                                    });
                                    payloadIDE.setValue(prettyJson(selectedPayload));
                                    payloadIDE.clearSelection();
                                    payloadIDE.gotoLine(1);
                                });
                            }
                        "></div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-sm btn-outline-secondary"
                            @click="if(selectedPayload) { navigator.clipboard.writeText(prettyJson(selectedPayload)); ShowFeedback('success', 'Copied to clipboard'); }">
                            <span class="material-icons" style="font-size: 14px; vertical-align: middle;">content_copy</span>
                            Copy
                        </button>
                        <button class="btn btn-sm btn-dark" @click="showPayloadModal = false; if(payloadIDE) { payloadIDE.destroy(); payloadIDE = null; }">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-content-scroll">
            <div class="page-header d-flex align-items-start justify-content-between">
                <div>
                    <h1 class="page-title">Events</h1>
                    <p class="page-subtitle">Real-time system event feed</p>
                </div>
                <div class="loading-spinner" x-show="loading" x-transition>
                    <div class="spinner-border spinner-border-sm"></div>
                    <span>Loading...</span>
                </div>
            </div>

            <div class="filter-bar">
                <div class="input-icon">
                    <span class="material-icons">key</span>
                    <input class="form-control" type="text" placeholder="Event ID" x-model="idSearch"
                        style="width: 120px;">
                </div>
                <div class="input-icon">
                    <span class="material-icons">bolt</span>
                    <input class="form-control" type="text" placeholder="Search event types..."
                        x-model="eventSearch" style="width: 200px;">
                </div>
                <div class="input-icon">
                    <span class="material-icons">merge_type</span>
                    <input class="form-control" type="text" placeholder="Deduper key"
                        x-model="deduperSearch" style="width: 140px;">
                </div>
                <div class="input-icon flex-grow-1">
                    <span class="material-icons">data_object</span>
                    <input class="form-control" type="text" placeholder="Search inside payload..."
                        x-model="payloadSearch">
                </div>
                <select class="form-select" x-model="whenFilter" style="width: 140px;">
                    <option value="">Any Time</option>
                    <option value="today">Today</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                </select>
                <button class="btn btn-dark btn-sm d-inline-flex align-items-center gap-1"
                    @click="filterResults" :disabled="!isFilterable">
                    <span class="material-icons" style="font-size: 16px;">search</span>
                    Search
                </button>
                <button class="btn btn-sm btn-outline-secondary" @click="clearFilter"
                    :disabled="!isFiltering" x-show="isFiltering" x-transition>
                    Clear
                </button>
            </div>
        </div>

        <div class="page-table-area">
            <div class="data-table-wrapper" x-init="fetchAll()">
                <div class="data-table-scroll">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th style="width: 12%">Event ID</th>
                                <th style="width: 25%">Action Type</th>
                                <th style="width: 15%">Deduper</th>
                                <th>Payload</th>
                                <th style="width: 20%">Timestamp</th>
                            </tr>
                        </thead>
                        <tbody @refresher.window="refreshPage">
                            <template x-for="event in events" :key="event.event">
                                <tr>
                                    <td>
                                        <span class="tag-id" x-text="event.event.substring(0,8) + '...'"></span>
                                    </td>
                                    <td>
                                        <span class="fw-medium" x-text="event.action"></span>
                                    </td>
                                    <td>
                                        <span class="font-mono text-sm text-muted-custom"
                                            x-text="event.deduper || '—'"></span>
                                    </td>
                                    <td>
                                        <button class="btn-action" @click="viewPayload(event.payload)"
                                            title="View Payload">
                                            <span class="material-icons">data_object</span>
                                            <span>View</span>
                                        </button>
                                    </td>
                                    <td>
                                        <span class="text-muted-custom text-sm" x-text="event.timestamped"></span>
                                    </td>
                                </tr>
                            </template>
                            <template x-if="events.length === 0 && !loading">
                                <tr>
                                    <td colspan="5">
                                        <div class="empty-state">
                                            <span class="material-icons">inbox</span>
                                            <p>No events found</p>
                                        </div>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                {{ pagination() }}
            </div>
        </div>

    </div>
</section>
{% endblock %}


{% block wizard %}
<span x-data="{
    ide: null,
    actions: [],
    action: '',
    deduper: '',
    secret: '',

    fetchActions(){
        fetch('/v1/actions').then(r => r.json()).then(d => this.actions = d)
    },

    publishEvent(){
        superpost('/v1/events').send({
            action: this.action,
            deduper: this.deduper,
            secret: this.secret,
            payload: JSON.parse(this.ide.getValue())
        }).then(res => {
            ShowFeedback('success', 'Event published successfully');
            $dispatch('refresher');
            showModal = false;
        }).catch(err => {
            supertoast('error', err.response?.body?.error || 'Failed to publish event');
        })
    }
}">
    <div class="modal-body">
        <div class="row g-3 mb-3">
            <div class="col-6">
                <label class="form-label-sm">Action Type</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-end-0">
                        <span class="material-icons text-muted" style="font-size: 18px;">bolt</span>
                    </span>
                    <select class="form-select border-start-0" x-model="action" x-init="fetchActions">
                        <option value="">Select Action...</option>
                        <template x-for="dat in actions">
                            <option :value="dat.action" x-text="dat.action"></option>
                        </template>
                    </select>
                </div>
            </div>
            <div class="col-6">
                <label class="form-label-sm">Deduplication Key</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-end-0">
                        <span class="material-icons text-muted" style="font-size: 18px;">merge_type</span>
                    </span>
                    <input class="form-control border-start-0" type="text"
                        placeholder="Unique key (optional)" x-model="deduper">
                </div>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label-sm">Secret Key</label>
            <div x-data="{visible: false}" class="position-relative">
                <input :type="visible ? 'text' : 'password'" class="form-control pe-5"
                    placeholder="App Secret" x-model="secret">
                <button class="btn btn-link position-absolute end-0 top-50 translate-middle-y text-muted p-1 me-1"
                    @click="visible = !visible" type="button" style="z-index: 3;">
                    <span class="material-icons" style="font-size: 18px;"
                        x-text="visible ? 'visibility' : 'visibility_off'"></span>
                </button>
            </div>
        </div>

        <div class="mb-0">
            <label class="form-label-sm">JSON Payload</label>
            <div id="schemator" style="height: 280px;"
                x-init="ide = ace.edit($el); ide.session.setMode('ace/mode/json');"></div>
        </div>
    </div>

    <div class="modal-footer">
        <button class="btn btn-sm btn-outline-secondary" @click="showModal = false">Cancel</button>
        <button class="btn btn-sm btn-dark d-inline-flex align-items-center gap-1" @click="publishEvent">
            <span class="material-icons" style="font-size: 16px;">cloud_upload</span>
            Publish Event
        </button>
    </div>
</span>
{% endblock %}