@extends('layouts.app')
@section('head')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<style>
    #revTable td, #revTable th { vertical-align: middle; }
    /* Version column: right-aligned tabular figures */
    #revTable td:nth-child(3), #revTable th:nth-child(3) { text-align: center; font-variant-numeric: tabular-nums; }
    /* Row action (Restore) uses the compact .mo-btn size, matching the
       Waypoints table (the global dataTable rule forces a 44px touch target ->
       tall buttons and rows). Scoped to .mo-btn so it is inert when Restore is
       switched off and the Actions column is absent. Kept above the 24px AA min. */
    #revTable td .mo-btn {
        box-sizing: border-box;
        min-height: 0;
        padding: 3px 12px;
        font-size: 13px;
        line-height: 1.6;
    }
    .mo-rev-action {
        display: inline-block;
        padding: 1px 8px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: #fff;
        background: var(--mo-muted);
    }
    .mo-rev-action--baseline { background: var(--mo-interactive); }
    .mo-rev-action--restore, .mo-rev-action--checkpoint { background: var(--mo-danger); }
    .mo-rev-filter { max-width: 320px; margin: 0 0 4px; }
    .mo-rev-filter label {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--mo-muted);
    }
    /* Native select, visibly styled (Materialize hides bare selects) */
    .mo-rev-filter select {
        display: block;
        width: 100%;
        height: 38px;
        padding: 6px 8px;
        border: 1px solid var(--mo-muted);
        border-radius: 4px;
        background: #fff;
        color: var(--mo-ink);
    }
</style>
@stop
@section('content')
@include('includes.page_header', [
    'title'   => 'Revision History',
    'purpose' => $restoreEnabled
        ? 'Every change to the pricing setup, recorded automatically as a version (rapid consecutive saves are merged into one). Restore previews exactly what will change and asks you to confirm; every restore is itself recorded as a new version, so it can be undone.'
        : 'Every change to the pricing setup, recorded automatically as a version (rapid consecutive saves are merged into one). Restore is currently switched off — nothing here changes data.',
])
<p class="mo-page-purpose" style="margin-top:-6px;">
    Pricing Constants keep their own history and Revert button — their entries here link to the
    <a href="{{ url('/constants') }}">Pricing Constants page</a>, which stays the only place they change.
</p>
<div class="mo-rev-filter">
    <label for="revDatasetFilter">Dataset</label>
    <select id="revDatasetFilter">
        <option value="" selected>All datasets</option>
        @foreach($datasets as $key => $label)
            <option value="{{ $key }}">{{ $label }}</option>
        @endforeach
    </select>
</div>
<div class="row">
    <table id="revTable">
        <thead>
            <tr>
                <th>When</th>
                <th>Dataset</th>
                <th>Version</th>
                <th>What changed</th>
                <th>Who</th>
                @if($restoreEnabled)<th>Actions</th>@endif
            </tr>
        </thead>
    </table>
</div>

@if($restoreEnabled)
{{-- Restore preview modal — in the DOM at load for the layout's one-shot
     Materialize init. Content is filled per preview response. --}}
<div id="restoreModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="restoreModal-title">
    <div class="modal-content">
        <h4 id="restoreModal-title">Restore</h4>
        <div id="restoreModalBody"><p>Loading preview…</p></div>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-close btn-flat">Cancel</a>
        <button id="restoreConfirmBtn" class="btn waves-effect waves-light" style="background-color: var(--mo-danger);" disabled>Restore</button>
    </div>
</div>
@endif
@stop
@section('js')
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
var REV_RESTORE_ENABLED = {{ $restoreEnabled ? 'true' : 'false' }};
$(function () {
    var columns = [
            { data: 'when', render: function (d, type, row) { return (type === 'sort' || type === 'type') ? (row.when_ts || 0) : d; } },
            { data: 'dataset_label' },
            { data: 'v' },
            { data: null, render: function (row, type) {
                if (type === 'sort' || type === 'type') { return row.summary || ''; }
                var badge = '';
                if (row.action && row.action !== 'edit') {
                    badge = '<span class="mo-rev-action mo-rev-action--' + row.action + '">' + row.action + '</span> ';
                }
                var text = $('<span>').text(row.summary || '—').html();
                if (row.link) {
                    // Constants entries restore on their own page (single-writer rule).
                    return badge + text + ' — <a href="' + row.link + '">view on Pricing Constants</a>';
                }
                return badge + text;
            } },
            { data: null, render: function (row, type) {
                var who = $('<span>').text(row.who || '—').html();
                if (row.acted_on) {
                    who += ' <span class="mo-unit">(data of ' + $('<span>').text(row.acted_on).html() + ')</span>';
                }
                return who;
            } },
    ];
    if (REV_RESTORE_ENABLED) {
        columns.push({ data: null, orderable: false, render: function (row) {
            if (!row.restorable || !row.id) { return '—'; }
            return '<a href="#!" class="mo-btn mo-btn--delete rev-restore" data-id="' + row.id + '">Restore</a>';
        } });
    }

    var table = $('#revTable').DataTable({
        ajax: { url: baseUrl + '/revisions/list' },
        order: [[0, 'desc']],
        pageLength: 25,
        language: { emptyTable: 'No revisions yet — they appear automatically when pricing data is saved.' },
        columns: columns,
    });

    $('#revDatasetFilter').on('change', function () {
        var ds = $(this).val();
        table.ajax.url(baseUrl + '/revisions/list' + (ds ? '?dataset=' + encodeURIComponent(ds) : '')).load();
    });

    if (!REV_RESTORE_ENABLED) { return; }

    // ---- P3 restore flow: preview -> confirm -> restore -> reload ----
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
    var pending = null; // {id, head_id} carried from preview to confirm

    function esc(t) { return $('<span>').text(t == null ? '' : t).html(); }
    function listHtml(title, items, color) {
        if (!items || !items.length) { return ''; }
        return '<p style="margin-bottom:4px;"><strong style="color:' + color + ';">' + esc(title) + '</strong></p>'
            + '<ul class="collection" style="margin-top:0;">' + items.map(function (i) {
                return '<li class="collection-item" style="padding:6px 12px;">' + esc(i) + '</li>';
            }).join('') + '</ul>';
    }

    $('#revTable').on('click', '.rev-restore', function () {
        var id = $(this).data('id');
        pending = null;
        $('#restoreConfirmBtn').prop('disabled', true);
        $('#restoreModalBody').html('<p>Loading preview…</p>');
        $('#restoreModal').modal('open');

        $.post(baseUrl + '/revisions/preview', { id: id })
            .done(function (p) {
                $('#restoreModal-title').text('Restore ' + p.revision.dataset + ' to ' + p.revision.v);
                var html = '<p>Saved ' + esc(p.revision.saved_at) + ' — ' + esc(p.revision.summary || '') + '</p>';
                if (p.identical) {
                    html += '<p><em>This version is identical to the current data — restoring changes nothing (a restore record is still written).</em></p>';
                } else {
                    var c = p.changes || {};
                    html += '<p><strong>' + (c.added || 0) + '</strong> come back, <strong>' + (c.removed || 0) + '</strong> removed, <strong>' + (c.changed || 0) + '</strong> change.</p>';
                    html += listHtml('Changes', c.items, 'var(--mo-ink)');
                }
                html += listHtml('Warnings — read before restoring', p.warnings, 'var(--mo-danger)');
                html += listHtml('Blocked', p.blockers, 'var(--mo-danger)');
                $('#restoreModalBody').html(html);
                if (!p.blockers || !p.blockers.length) {
                    pending = { id: id, head_id: p.head_id };
                    $('#restoreConfirmBtn').prop('disabled', false);
                }
            })
            .fail(function (xhr) {
                var errs = (xhr.responseJSON && xhr.responseJSON.errors) || ['Preview failed — try again.'];
                $('#restoreModalBody').html(listHtml('Cannot restore', errs, 'var(--mo-danger)'));
            });
    });

    $('#restoreConfirmBtn').on('click', function () {
        if (!pending) { return; }
        var btn = $(this).prop('disabled', true).text('Restoring…');
        $.post(baseUrl + '/revisions/restore', { id: pending.id, expected_head_id: pending.head_id })
            .done(function (r) {
                Materialize.toast(esc(r.message || 'Restored.'), 4000);
                setTimeout(function () { location.reload(); }, 1200);
            })
            .fail(function (xhr) {
                btn.prop('disabled', false).text('Restore');
                var errs = (xhr.responseJSON && xhr.responseJSON.errors) || ['Restore failed — nothing was changed.'];
                $('#restoreModalBody').prepend(listHtml('Restore refused', errs, 'var(--mo-danger)'));
            });
    });
});
</script>
@stop