@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">System Update</h4>
        <div class="text-secondary small mt-1">Keep your PBX up to date with the latest improvements and fixes.</div>
    </div>
</div>

{{-- Version card --}}
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-3 align-items-center">
            <div class="col-md-5">
                <div class="text-secondary small text-uppercase fw-semibold mb-2">Installed Version</div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-primary px-3 py-2" style="font-size:1rem;" id="localVersion">{{ $currentVersion }}</span>
                </div>
                <div class="text-secondary small mt-1" id="localDate">
                    {{ $currentDate ? \Carbon\Carbon::parse($currentDate)->format('d M Y') : '' }}
                </div>
            </div>
            <div class="col-md-2 text-center d-none d-md-block">
                <i data-lucide="arrow-right" style="width:28px;height:28px;color:#cbd5e1;"></i>
            </div>
            <div class="col-md-5">
                <div class="text-secondary small text-uppercase fw-semibold mb-2">Latest Available</div>
                <div id="remoteStatus">
                    <div class="d-flex align-items-center gap-2 text-secondary small">
                        <span class="spinner-border spinner-border-sm"></span> Checking for updates…
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer d-flex gap-2 align-items-center">
        <button id="btnCheck" class="btn btn-outline-secondary btn-sm" type="button">
            <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Check for Updates
        </button>
        <button id="btnUpdate" class="btn btn-primary btn-sm" type="button" disabled>
            <i data-lucide="download" style="width:14px;height:14px;"></i> Apply Update
        </button>
        @if($hasLog)
        <a href="{{ route('settings.update.log') }}" class="btn btn-outline-secondary btn-sm ms-auto" id="btnDownloadTop">
            <i data-lucide="file-down" style="width:14px;height:14px;"></i> Download Last Log
        </a>
        @endif
    </div>
</div>

{{-- Progress card (hidden until update starts) --}}
<div class="card" id="progressCard" style="{{ $isRunning ? '' : 'display:none;' }}">
    <div class="card-body py-4">

        {{-- Status icon + title --}}
        <div class="text-center mb-4">
            <div id="statusIcon" class="mb-3">
                <div class="spinner-border text-primary" style="width:3rem;height:3rem;" id="spinnerIcon"></div>
                <i data-lucide="check-circle" id="successIcon" style="width:3rem;height:3rem;color:#22c55e;display:none;"></i>
                <i data-lucide="x-circle" id="failIcon" style="width:3rem;height:3rem;color:#ef4444;display:none;"></i>
            </div>
            <h5 id="statusTitle" class="mb-1">Updating…</h5>
            <div class="text-secondary small" id="statusSubtitle">Please wait while the update is applied.</div>
        </div>

        {{-- Progress bar --}}
        <div class="mb-3" id="progressWrap">
            <div class="progress" style="height:8px;border-radius:4px;">
                <div id="progressBar"
                    class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                    style="width:0%;transition:width .4s ease;">
                </div>
            </div>
            <div class="d-flex justify-content-between mt-1">
                <span class="text-secondary small" id="stepLabel">Starting…</span>
                <span class="text-secondary small" id="stepCount"></span>
            </div>
        </div>

        {{-- Step checklist --}}
        <div class="mx-auto" style="max-width:480px;">
            <div id="stepList" class="vstack gap-2">
                @php
                $steps = [
                    'pull'       => 'Downloading latest code',
                    'composer'   => 'Installing dependencies',
                    'migrate'    => 'Updating database',
                    'cache'      => 'Rebuilding caches',
                    'ownership'  => 'Fixing permissions',
                    'asterisk'   => 'Reloading phone system',
                    'astdb'      => 'Reconciling settings',
                ];
                @endphp
                @foreach($steps as $key => $label)
                <div class="d-flex align-items-center gap-2 step-row" data-step="{{ $key }}">
                    <span class="step-icon text-secondary" style="width:20px;text-align:center;">
                        <i data-lucide="circle" style="width:14px;height:14px;"></i>
                    </span>
                    <span class="step-label text-secondary small">{{ $label }}</span>
                </div>
                @endforeach
            </div>
        </div>

    </div>
    <div class="card-footer d-flex justify-content-center gap-3" id="resultFooter" style="display:none!important;">
        <a href="{{ route('settings.update.log') }}" class="btn btn-outline-secondary btn-sm" id="btnDownloadLog">
            <i data-lucide="file-down" style="width:14px;height:14px;"></i> Download Log
        </a>
        <button class="btn btn-outline-secondary btn-sm" onclick="location.reload()">
            <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Refresh Page
        </button>
    </div>
</div>

<style>
.step-row.done   .step-icon { color: #22c55e; }
.step-row.active .step-icon { color: #3b82f6; }
.step-row.done   .step-label { color: #374151; }
.step-row.active .step-label { color: #1d4ed8; font-weight: 600; }
</style>

<script>
(function () {
    const btnCheck   = document.getElementById('btnCheck');
    const btnUpdate  = document.getElementById('btnUpdate');
    const progressCard = document.getElementById('progressCard');
    const progressBar  = document.getElementById('progressBar');
    const stepLabel    = document.getElementById('stepLabel');
    const stepCount    = document.getElementById('stepCount');
    const statusTitle  = document.getElementById('statusTitle');
    const statusSub    = document.getElementById('statusSubtitle');
    const spinnerIcon  = document.getElementById('spinnerIcon');
    const successIcon  = document.getElementById('successIcon');
    const failIcon     = document.getElementById('failIcon');
    const resultFooter = document.getElementById('resultFooter');
    const remoteDiv    = document.getElementById('remoteStatus');

    let pollTimer  = null;
    let pollOffset = 0;
    let isRunning  = {{ $isRunning ? 'true' : 'false' }};

    // Map log output keywords → step keys
    const stepMap = [
        { key: 'pull',      patterns: ['Pulling latest', 'Already up to date', 'Updated '] },
        { key: 'composer',  patterns: ['Installing PHP', 'composer install'] },
        { key: 'migrate',   patterns: ['Running database', 'artisan migrate', 'Nothing to migrate'] },
        { key: 'cache',     patterns: ['Rebuilding caches', 'config:cache', 'route:cache', 'view:clear'] },
        { key: 'ownership', patterns: ['Fixing file ownership', 'chown storage'] },
        { key: 'asterisk',  patterns: ['Reloading Asterisk', 'dialplan reload', 'Dialplan reloaded'] },
        { key: 'astdb',     patterns: ['Reconciling AstDB', 'pbx:reconcile-astdb'] },
    ];
    const stepKeys = stepMap.map(s => s.key);
    let currentStepIdx = -1;
    let logBuffer = '';

    function setStep(idx) {
        if (idx <= currentStepIdx) return;
        currentStepIdx = idx;
        const pct = Math.round(((idx + 1) / stepKeys.length) * 90); // max 90% until done
        progressBar.style.width = pct + '%';
        stepCount.textContent = `${idx + 1} / ${stepKeys.length}`;

        document.querySelectorAll('.step-row').forEach((row, i) => {
            const icon = row.querySelector('.step-icon');
            if (i < idx) {
                row.className = 'step-row done d-flex align-items-center gap-2';
                icon.innerHTML = '<i data-lucide="check-circle" style="width:14px;height:14px;"></i>';
            } else if (i === idx) {
                row.className = 'step-row active d-flex align-items-center gap-2';
                icon.innerHTML = '<i data-lucide="loader" style="width:14px;height:14px;"></i>';
                stepLabel.textContent = row.querySelector('.step-label').textContent;
            }
            if (window.lucide) lucide.createIcons({ nodes: [icon] });
        });
    }

    function detectStep(text) {
        stepMap.forEach((step, idx) => {
            if (step.patterns.some(p => text.includes(p))) {
                setStep(idx);
            }
        });
    }

    // ── Check for updates ──────────────────────────────────────────────────
    function checkForUpdates() {
        btnCheck.disabled = true;
        remoteDiv.innerHTML = '<div class="d-flex align-items-center gap-2 text-secondary small"><span class="spinner-border spinner-border-sm"></span> Checking…</div>';

        fetch('{{ route("settings.update.check") }}')
            .then(r => r.json())
            .then(data => {
                if (data.up_to_date) {
                    remoteDiv.innerHTML =
                        `<div class="d-flex align-items-center gap-2">
                            <span class="badge bg-success px-3 py-2" style="font-size:1rem;">${data.remote_version || data.remote}</span>
                            <span class="text-success fw-semibold small">✓ Up to date</span>
                         </div>`;
                    btnUpdate.disabled = true;
                } else {
                    remoteDiv.innerHTML =
                        `<div class="d-flex align-items-center gap-2">
                            <span class="badge bg-warning text-dark px-3 py-2" style="font-size:1rem;">${data.remote_version || data.remote}</span>
                            <span class="text-warning fw-semibold small">Update available</span>
                         </div>`;
                    btnUpdate.disabled = false;
                }
            })
            .catch(() => {
                remoteDiv.innerHTML = '<span class="text-danger small">Could not check for updates</span>';
            })
            .finally(() => { btnCheck.disabled = false; });
    }

    // ── Start update ───────────────────────────────────────────────────────
    btnUpdate.addEventListener('click', () => {
        if (!confirm('Apply the update now? The system will remain online during the update.')) return;

        btnUpdate.disabled = true;
        btnCheck.disabled  = true;
        logBuffer = '';
        pollOffset = 0;
        currentStepIdx = -1;
        progressCard.style.display = '';
        progressBar.style.width = '5%';
        stepLabel.textContent = 'Starting…';
        stepCount.textContent = '';
        statusTitle.textContent = 'Updating…';
        statusSub.textContent = 'Please wait while the update is applied. This usually takes under a minute.';
        spinnerIcon.style.display = '';
        successIcon.style.display = 'none';
        failIcon.style.display = 'none';
        resultFooter.style.setProperty('display', 'none', 'important');

        // Reset step rows
        document.querySelectorAll('.step-row').forEach(row => {
            row.className = 'step-row d-flex align-items-center gap-2';
            row.querySelector('.step-icon').innerHTML = '<i data-lucide="circle" style="width:14px;height:14px;"></i>';
        });
        if (window.lucide) lucide.createIcons();

        fetch('{{ route("settings.update.start") }}', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
        })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                showResult(false, data.error);
            } else {
                startPolling();
            }
        })
        .catch(err => { showResult(false, 'Could not start update.'); });
    });

    // ── Poll ───────────────────────────────────────────────────────────────
    function startPolling() { pollTimer = setInterval(poll, 1500); }

    function poll() {
        fetch(`{{ route("settings.update.poll") }}?offset=${pollOffset}`)
            .then(r => r.json())
            .then(data => {
                if (data.content) {
                    logBuffer += data.content;
                    pollOffset = data.offset;
                    detectStep(logBuffer);
                }
                if (!data.running) {
                    clearInterval(pollTimer);
                    const success = logBuffer.includes('Update complete');
                    // Mark all steps done on success
                    if (success) {
                        stepKeys.forEach((_, i) => setStep(i));
                        progressBar.style.width = '100%';
                        progressBar.classList.remove('progress-bar-animated', 'progress-bar-striped');
                        progressBar.classList.add('bg-success');
                    }
                    showResult(success);
                    if (data.commit) {
                        document.getElementById('localVersion').textContent = data.remote_version || data.commit;
                        document.getElementById('localDate').textContent = new Date().toLocaleDateString('en-GB', {day:'2-digit',month:'short',year:'numeric'});
                    }
                }
            })
            .catch(() => {});
    }

    function showResult(success, errorMsg) {
        spinnerIcon.style.display = 'none';
        if (success) {
            successIcon.style.display = '';
            statusTitle.textContent = 'Update Complete';
            statusSub.textContent = 'Your PBX is now running the latest version.';
            stepLabel.textContent = 'Done';
        } else {
            failIcon.style.display = '';
            progressBar.classList.add('bg-danger');
            progressBar.classList.remove('progress-bar-animated', 'bg-primary');
            statusTitle.textContent = 'Update Failed';
            statusSub.textContent = errorMsg || 'Something went wrong. Download the log for details.';
            stepLabel.textContent = 'Failed';
        }
        resultFooter.style.removeProperty('display');
        btnCheck.disabled = false;
        if (window.lucide) lucide.createIcons();
    }

    btnCheck.addEventListener('click', checkForUpdates);

    if (isRunning) {
        progressCard.style.display = '';
        startPolling();
    } else {
        checkForUpdates();
    }

    if (window.lucide) lucide.createIcons();
})();
</script>
@endsection