@extends('layouts.app')

@section('title', 'Database Migration Manager')

@section('content')
<section class="content-header">
    <h1>
        <i class="fa fa-database" style="color:#1a237e;"></i>
        Database Migration Manager
        <small>Administrator Only</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> Home</a></li>
        <li class="active">Migration Manager</li>
    </ol>
</section>

<section class="content">

    {{-- ═══════════════════════════════════════ --}}
    {{-- STATS CARDS                            --}}
    {{-- ═══════════════════════════════════════ --}}
    <div class="row">
        <div class="col-sm-3">
            <div class="info-box" style="border-left:4px solid #1a237e;">
                <span class="info-box-icon" style="background:#1a237e;"><i class="fa fa-database"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Total Migrations</span>
                    <span class="info-box-number" id="stat_total">{{ $stats['total'] }}</span>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="info-box" style="border-left:4px solid #2e7d32;">
                <span class="info-box-icon" style="background:#2e7d32;"><i class="fa fa-check-circle"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Ran</span>
                    <span class="info-box-number" id="stat_ran">{{ $stats['ran'] }}</span>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="info-box" style="border-left:4px solid #e65100;">
                <span class="info-box-icon" style="background:#e65100;"><i class="fa fa-clock-o"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Pending</span>
                    <span class="info-box-number" id="stat_pending">{{ $stats['pending'] }}</span>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="info-box" style="border-left:4px solid #6a1b9a;">
                <span class="info-box-icon" style="background:#6a1b9a;"><i class="fa fa-layers"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Latest Batch</span>
                    <span class="info-box-number" id="stat_batch">{{ $stats['batches'] ?? '—' }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════ --}}
    {{-- ACTION BAR                             --}}
    {{-- ═══════════════════════════════════════ --}}
    <div class="box box-primary box-solid">
        <div class="box-header with-border" style="background:linear-gradient(135deg,#1a237e,#283593);color:#fff;">
            <h3 class="box-title"><i class="fa fa-play-circle"></i> &nbsp;Migration Actions</h3>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-sm-3">
                    <button id="btn_run_all" class="btn btn-success btn-block btn-lg"
                        @if($stats['pending'] == 0) disabled @endif>
                        <i class="fa fa-play"></i> &nbsp;Run All Pending
                        @if($stats['pending'] > 0)
                            <span class="badge" style="background:#fff;color:#2e7d32;">{{ $stats['pending'] }}</span>
                        @endif
                    </button>
                    <p class="text-muted" style="font-size:11px;margin-top:5px;">Runs <code>php artisan migrate --force</code></p>
                </div>
                <div class="col-sm-3">
                    <button id="btn_run_selected" class="btn btn-primary btn-block btn-lg" disabled>
                        <i class="fa fa-check-square-o"></i> &nbsp;Run Selected
                        <span class="badge badge-selected-count" style="background:#fff;color:#1565c0;display:none;">0</span>
                    </button>
                    <p class="text-muted" style="font-size:11px;margin-top:5px;">Runs selected migration files.</p>
                </div>
                <div class="col-sm-3">
                    <div class="input-group" style="width:100%;">
                        <input type="number" id="rollback_steps" class="form-control" value="1" min="1" max="10"
                            placeholder="Steps (1-10)" style="height:46px;">
                        <span class="input-group-btn">
                            <button id="btn_rollback" class="btn btn-warning btn-lg" style="height:46px;">
                                <i class="fa fa-undo"></i> Rollback
                            </button>
                        </span>
                    </div>
                    <p class="text-muted" style="font-size:11px;margin-top:5px;">Rolls back last N batch(es). Use with care!</p>
                </div>
                <div class="col-sm-3">
                    <button id="btn_refresh" class="btn btn-info btn-block btn-lg">
                        <i class="fa fa-refresh"></i> &nbsp;Refresh Status
                    </button>
                    <p class="text-muted" style="font-size:11px;margin-top:5px;">Re-scan files and DB without running anything.</p>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════ --}}
    {{-- OUTPUT CONSOLE                         --}}
    {{-- ═══════════════════════════════════════ --}}
    <div id="output_panel" style="display:none;">
        <div class="box box-solid" style="border:2px solid #333;">
            <div class="box-header with-border" style="background:#1e1e1e;color:#fff;">
                <h3 class="box-title"><i class="fa fa-terminal"></i> &nbsp;Output</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" onclick="$('#output_panel').hide();" style="color:#fff;">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="box-body" style="background:#1e1e1e;padding:0;">
                <pre id="output_text" style="
                    background:#1e1e1e;color:#a8ff60;
                    font-family:'Courier New',monospace;font-size:13px;
                    padding:15px;margin:0;min-height:80px;max-height:250px;
                    overflow-y:auto;border:none;border-radius:0;
                ">—</pre>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════ --}}
    {{-- MIGRATION TABLE                        --}}
    {{-- ═══════════════════════════════════════ --}}
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title"><i class="fa fa-list"></i> All Migrations</h3>
            <div class="box-tools pull-right" style="display:flex;gap:8px;align-items:center;">
                <input type="text" id="search_migrations" class="form-control input-sm"
                    placeholder="&#xF002; Search..." style="width:200px;font-family:FontAwesome,Arial;">
                <select id="filter_source" class="form-control input-sm" style="width:160px;">
                    <option value="">All Modules</option>
                    @foreach(collect($migrations)->pluck('source')->unique()->sort() as $src)
                        <option value="{{ $src }}">{{ $src }}</option>
                    @endforeach
                </select>
                <select id="filter_status" class="form-control input-sm" style="width:130px;">
                    <option value="">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="ran">Ran</option>
                </select>
            </div>
        </div>
        <div class="box-body no-padding">
            <div class="table-responsive">
                <table class="table table-hover" id="migrations_table" style="font-size:13px;">
                    <thead style="background:#f5f5f5;">
                        <tr>
                            <th style="width:40px;text-align:center;"><input type="checkbox" id="check_all_migrations"></th>
                            <th style="width:40px;">#</th>
                            <th>Migration Name</th>
                            <th style="width:130px;">Module / Source</th>
                            <th style="width:90px;text-align:center;">Batch</th>
                            <th style="width:120px;text-align:center;">Status</th>
                            <th style="width:130px;text-align:center;">Action</th>
                        </tr>
                    </thead>
                    <tbody id="migration_tbody">
                        @foreach($migrations as $i => $mig)
                        <tr class="migration-row {{ $mig['ran'] ? 'row-ran' : 'row-pending' }}"
                            data-source="{{ $mig['source'] }}"
                            data-status="{{ $mig['ran'] ? 'ran' : 'pending' }}"
                            data-name="{{ strtolower($mig['name']) }}">
                            <td style="text-align:center;">
                                @if(!$mig['ran'])
                                    <input type="checkbox" class="chk-migration" data-path="{{ $mig['file_path'] }}">
                                @else
                                    <input type="checkbox" disabled>
                                @endif
                            </td>
                            <td class="text-muted" style="font-size:11px;">{{ $i + 1 }}</td>
                            <td>
                                <strong>{{ $mig['display'] }}</strong>
                                <br>
                                <small class="text-muted" style="font-family:'Courier New',monospace;font-size:10px;">
                                    {{ $mig['name'] }}
                                </small>
                            </td>
                            <td>
                                @if($mig['source'] === 'Core')
                                    <span class="label label-default">Core</span>
                                @else
                                    <span class="label label-primary">{{ $mig['source'] }}</span>
                                @endif
                                <br>
                                <small class="text-muted" style="font-size:10px;">{{ $mig['date_parsed'] }}</small>
                            </td>
                            <td style="text-align:center;">
                                @if($mig['ran'])
                                    <span class="badge" style="background:#1a237e;">Batch {{ $mig['batch'] }}</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td style="text-align:center;">
                                @if($mig['ran'])
                                    <span class="label label-success" style="font-size:12px;">
                                        <i class="fa fa-check"></i> Ran
                                    </span>
                                @else
                                    <span class="label label-warning" style="font-size:12px;">
                                        <i class="fa fa-clock-o"></i> Pending
                                    </span>
                                @endif
                            </td>
                            <td style="text-align:center;">
                                @if(!$mig['ran'])
                                    <button class="btn btn-xs btn-success btn-run-path"
                                        data-path="{{ $mig['file_path'] }}"
                                        data-name="{{ $mig['name'] }}"
                                        title="Run this migration">
                                        <i class="fa fa-play"></i> Run
                                    </button>
                                @else
                                    <span class="text-muted" style="font-size:11px;">
                                        <i class="fa fa-lock"></i> Done
                                    </span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="box-footer" style="font-size:12px;color:#888;">
            Showing <span id="visible_count">{{ count($migrations) }}</span> of {{ count($migrations) }} migrations.
            &nbsp;|&nbsp; Scan paths: <code>database/migrations</code> + <code>Modules/*/Database/Migrations</code>
        </div>
    </div>

    {{-- ═══════════════════════════════════════ --}}
    {{-- ROLLBACK DANGER MODAL                  --}}
    {{-- ═══════════════════════════════════════ --}}
    <div class="modal fade" id="rollback_confirm_modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background:#c62828;color:#fff;">
                    <h4 class="modal-title"><i class="fa fa-exclamation-triangle"></i> Confirm Rollback</h4>
                </div>
                <div class="modal-body">
                    <p>You are about to <strong>roll back <span id="confirm_steps">1</span> batch(es)</strong>.</p>
                    <div class="alert alert-danger">
                        <i class="fa fa-warning"></i>
                        <strong>Warning:</strong> This will DROP columns and tables from those migrations.
                        Data in those tables may be permanently lost.
                        Only proceed if you know what you are doing.
                    </div>
                    <p>Type <strong>ROLLBACK</strong> to confirm:</p>
                    <input type="text" id="rollback_confirm_input" class="form-control"
                        placeholder="Type ROLLBACK here">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" id="btn_rollback_confirm" class="btn btn-danger" disabled>
                        <i class="fa fa-undo"></i> Execute Rollback
                    </button>
                </div>
            </div>
        </div>
    </div>

</section>
@endsection

@section('javascript')
<style>
    .row-pending td { background: #fffde7 !important; }
    .row-ran   td { background: #f1f8e9 !important; }
    .info-box  { border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
    #migrations_table tbody tr:hover td { filter: brightness(0.96); }
    .btn-run-path:disabled { opacity:.5; cursor:not-allowed; }
</style>
<script>
$(document).ready(function () {

    var CSRF = $('meta[name="csrf-token"]').attr('content');

    // ── Helpers ─────────────────────────────────────────────
    function showOutput(text, success) {
        $('#output_text').text(text || '(no output)');
        $('#output_text').css('color', success ? '#a8ff60' : '#ff8a65');
        $('#output_panel').show();
        $('html,body').animate({ scrollTop: $('#output_panel').offset().top - 80 }, 400);
    }

    function setLoading(btn, state) {
        if (state) {
            btn.data('orig', btn.html()).prop('disabled', true)
               .html('<i class="fa fa-spinner fa-spin"></i> Working...');
        } else {
            btn.prop('disabled', false).html(btn.data('orig'));
        }
    }

    function refreshPage() {
        setTimeout(function () { location.reload(); }, 1200);
    }

    // ── Run All Pending ──────────────────────────────────────
    $('#btn_run_all').on('click', function () {
        if (!confirm('Run ALL pending migrations now?')) return;
        var btn = $(this);
        setLoading(btn, true);

        $.ajax({
            url: '/migration-manager/run-all',
            type: 'POST',
            data: { _token: CSRF },
            success: function (res) {
                showOutput(res.output, res.success);
                toastr && toastr[res.success ? 'success' : 'warning'](res.msg);
                refreshPage();
            },
            error: function (xhr) {
                var res = xhr.responseJSON || {};
                showOutput(res.msg || 'Server error', false);
                toastr && toastr.error(res.msg || 'Error running migrations.');
                setLoading(btn, false);
            }
        });
    });

    // ── Checkbox selection logic ──────────────────────────────
    function updateSelectedCount() {
        var selectedCount = $('.chk-migration:checked').length;
        if (selectedCount > 0) {
            $('#btn_run_selected').prop('disabled', false);
            $('.badge-selected-count').text(selectedCount).show();
        } else {
            $('#btn_run_selected').prop('disabled', true);
            $('.badge-selected-count').hide();
        }
        
        var pendingCount = $('.chk-migration').length;
        $('#check_all_migrations').prop('checked', selectedCount === pendingCount && pendingCount > 0);
    }

    $(document).on('change', '.chk-migration', function() {
        updateSelectedCount();
    });

    $('#check_all_migrations').on('change', function() {
        var isChecked = $(this).prop('checked');
        $('.chk-migration').each(function() {
            if ($(this).closest('tr').is(':visible')) {
                $(this).prop('checked', isChecked);
            }
        });
        updateSelectedCount();
    });

    // ── Run Selected ──────────────────────────────────────────
    $('#btn_run_selected').on('click', function() {
        var selectedPaths = [];
        $('.chk-migration:checked').each(function() {
            selectedPaths.push($(this).data('path'));
        });

        if (selectedPaths.length === 0) return;

        if (!confirm('Run ' + selectedPaths.length + ' selected migration(s) now?')) return;
        var btn = $(this);
        setLoading(btn, true);

        $.ajax({
            url: '/migration-manager/run-path',
            type: 'POST',
            data: { _token: CSRF, path: selectedPaths },
            success: function (res) {
                showOutput(res.output, res.success);
                toastr && toastr[res.success ? 'success' : 'warning'](res.msg);
                refreshPage();
            },
            error: function (xhr) {
                var res = xhr.responseJSON || {};
                showOutput(res.msg || 'Server error', false);
                toastr && toastr.error(res.msg || 'Error running selected migrations.');
                setLoading(btn, false);
            }
        });
    });

    // ── Run Single Path ──────────────────────────────────────
    $(document).on('click', '.btn-run-path', function () {
        var btn  = $(this);
        var path = btn.data('path');
        var name = btn.data('name');

        if (!confirm('Run this migration?\n' + path)) return;
        setLoading(btn, true);

        $.ajax({
            url: '/migration-manager/run-path',
            type: 'POST',
            data: { _token: CSRF, path: path },
            success: function (res) {
                showOutput(res.output, res.success);
                toastr && toastr[res.success ? 'success' : 'warning'](res.msg);
                refreshPage();
            },
            error: function (xhr) {
                var res = xhr.responseJSON || {};
                showOutput(res.msg || 'Server error', false);
                toastr && toastr.error(res.msg || 'Error running migration.');
                setLoading(btn, false);
            }
        });
    });

    // ── Rollback — show confirm modal ─────────────────────────
    $('#btn_rollback').on('click', function () {
        var steps = parseInt($('#rollback_steps').val()) || 1;
        $('#confirm_steps').text(steps);
        $('#rollback_confirm_input').val('');
        $('#btn_rollback_confirm').prop('disabled', true);
        $('#rollback_confirm_modal').modal('show');
    });

    $('#rollback_confirm_input').on('input', function () {
        $('#btn_rollback_confirm').prop('disabled', $(this).val().trim() !== 'ROLLBACK');
    });

    $('#btn_rollback_confirm').on('click', function () {
        var steps = parseInt($('#confirm_steps').text()) || 1;
        var btn   = $(this);
        setLoading(btn, true);
        $('#rollback_confirm_modal').modal('hide');

        $.ajax({
            url: '/migration-manager/rollback',
            type: 'POST',
            data: { _token: CSRF, steps: steps },
            success: function (res) {
                showOutput(res.output, res.success);
                toastr && toastr[res.success ? 'success' : 'warning'](res.msg);
                refreshPage();
            },
            error: function (xhr) {
                var res = xhr.responseJSON || {};
                showOutput(res.msg || 'Server error', false);
                toastr && toastr.error(res.msg || 'Rollback failed.');
                setLoading(btn, false);
            }
        });
    });

    // ── Refresh ──────────────────────────────────────────────
    $('#btn_refresh').on('click', function () {
        location.reload();
    });

    // ── Search & Filter ──────────────────────────────────────
    function applyFilters() {
        var search = $('#search_migrations').val().toLowerCase();
        var source = $('#filter_source').val().toLowerCase();
        var status = $('#filter_status').val().toLowerCase();
        var visible = 0;

        $('.migration-row').each(function () {
            var rowName   = $(this).data('name').toLowerCase();
            var rowSource = $(this).data('source').toLowerCase();
            var rowStatus = $(this).data('status').toLowerCase();

            var matchSearch = !search || rowName.indexOf(search) > -1;
            var matchSource = !source || rowSource === source;
            var matchStatus = !status || rowStatus === status;

            if (matchSearch && matchSource && matchStatus) {
                $(this).show();
                visible++;
            } else {
                $(this).hide();
            }
        });

        $('#visible_count').text(visible);
    }

    $('#search_migrations').on('input', applyFilters);
    $('#filter_source, #filter_status').on('change', applyFilters);

});
</script>
@endsection