@extends('admin.panel.layout')

@section('admin_title', 'Backups')

@section('admin_content')
<style>
    .bk-live{ display:flex; align-items:center; gap:14px; border-radius:16px; padding:16px 20px; font-weight:700; border:1px solid var(--ap-line); background:var(--ap-card); box-shadow:var(--ap-shadow); }
    .bk-live .bk-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
    .bk-live--running{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
    .bk-live--running .bk-dot{ background:#f59e0b; animation:bkPulse 1.1s infinite; }
    .bk-live--ok{ background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
    .bk-live--ok .bk-dot{ background:#22c55e; }
    .bk-live--err{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
    .bk-live--err .bk-dot{ background:#ef4444; }
    .bk-live--idle{ color:#475569; } .bk-live--idle .bk-dot{ background:#94a3b8; }
    @keyframes bkPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.5); opacity:.5 } }

    .bk-bar{ height:12px; border-radius:999px; background:#eef2f9; overflow:hidden; margin-top:8px; }
    .bk-bar > span{ display:block; height:100%; border-radius:999px; background:var(--ap-grad); transition:width .5s; }
    .bk-bar.is-full > span{ background:linear-gradient(135deg,#dc2626,#f59e0b); }
    .bk-disk-meta{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--ap-muted); margin-top:8px; }
    .bk-off{ color:var(--ap-err); font-weight:700; }
    .bk-badge{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:.74rem; font-weight:800; }
    .bk-badge--success{ background:#dcfce7; color:#15803d; } .bk-badge--failed{ background:#fee2e2; color:#b91c1c; }
    .bk-badge--running{ background:#fef3c7; color:#92400e; }
    .bk-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
</style>

@if(session('success'))
    <div class="flash-banner flash-banner-success">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="flash-banner flash-banner-error">{{ session('error') }}</div>
@endif
@if($errors->any())
    <div class="flash-banner flash-banner-error">{{ $errors->first() }}</div>
@endif

<div class="admin-header">
    <div>
        <span class="shop-muted-label">System</span>
        <h1>Backup-Wächter</h1>
        <p class="shop-copy">Automatische Sicherung aller Websites, Datenbanken, Secrets &amp; Configs auf
            <strong>{{ $settings->share_path ?: config('backup.share_path') }}</strong>.
            Startet automatisch, sobald die Festplatte erscheint.</p>
    </div>
    <div class="admin-toolbar">
        <form method="POST" action="{{ route('admin.panel.backups.run') }}">
            @csrf
            <button type="submit" class="shop-button"><i class="fas fa-play"></i> Jetzt sichern</button>
        </form>
    </div>
</div>

{{-- Live-Statusbanner --}}
<div id="bk-live" class="bk-live bk-live--idle">
    <span class="bk-dot"></span>
    <span id="bk-live-text">Status wird geladen …</span>
</div>

{{-- Kennzahlen --}}
<div class="admin-card-grid">
    <div class="admin-metric-card">
        <span>Letztes Backup</span>
        <strong id="bk-last-snapshot">{{ $runs->first()->snapshot ?? '–' }}</strong>
        <div class="shop-note" id="bk-last-meta">
            @if($runs->first())
                {{ $runs->first()->humanSize() }} · {{ $runs->first()->humanDuration() }}
            @else keine Läufe @endif
        </div>
    </div>
    <div class="admin-metric-card">
        <span>Letzter Erfolg</span>
        <strong id="bk-success-age">
            @if($lastSuccess && $lastSuccess->finished_at){{ (int) $lastSuccess->finished_at->diffInDays(now()) }} Tage her @else nie @endif
        </strong>
        <div class="shop-note" id="bk-success-meta">Warnung ab {{ $settings->overdue_days }} Tagen</div>
    </div>
    <div class="admin-metric-card">
        <span>Freier Platz — Share</span>
        <strong id="bk-share-free">–</strong>
        <div class="bk-bar" id="bk-share-bar"><span style="width:0"></span></div>
        <div class="bk-disk-meta"><span id="bk-share-note">wird geprüft …</span></div>
    </div>
    <div class="admin-metric-card">
        <span>Freier Platz — C:</span>
        <strong id="bk-local-free">–</strong>
        <div class="bk-bar" id="bk-local-bar"><span style="width:0"></span></div>
        <div class="bk-disk-meta"><span id="bk-local-note">wird geprüft …</span></div>
    </div>
</div>

<div class="bk-grid2">
    {{-- Verlauf --}}
    <div class="admin-panel" style="grid-column:1/-1;">
        <h3><i class="fas fa-clock-rotate-left"></i> Verlauf</h3>
        <div class="admin-table-wrap" style="margin-top:14px;">
            <table class="admin-table">
                <thead>
                <tr>
                    <th>Snapshot</th><th>Status</th><th>Auslöser</th><th>Start</th>
                    <th>Dauer</th><th>Größe</th><th>Sites</th><th>DBs</th><th>Log</th>
                </tr>
                </thead>
                <tbody id="bk-history-body">
                @forelse($runs as $run)
                    <tr>
                        <td style="font-weight:700;">{{ $run->snapshot }}</td>
                        <td><span class="bk-badge bk-badge--{{ $run->status }}">{{ $run->status }}</span></td>
                        <td>{{ $run->trigger }}</td>
                        <td>{{ optional($run->started_at)->format('d.m.Y H:i') }}</td>
                        <td>{{ $run->humanDuration() }}</td>
                        <td>{{ $run->size_bytes ? $run->humanSize() : '–' }}</td>
                        <td>{{ $run->sites_count ?? '–' }}</td>
                        <td>{{ $run->db_count ?? '–' }}</td>
                        <td>
                            @if($run->log_path)
                                <a href="{{ route('admin.panel.backups.log', $run) }}" target="_blank" title="Log ansehen"><i class="fas fa-file-lines"></i></a>
                            @else – @endif
                        </td>
                    </tr>
                    @if($run->warnings || $run->error)
                        <tr><td colspan="9" style="color:{{ $run->error ? 'var(--ap-err)' : 'var(--ap-warn)' }};font-size:.84rem;">
                            {{ $run->error ?: $run->warnings }}
                        </td></tr>
                    @endif
                @empty
                    <tr><td colspan="9" style="text-align:center;color:var(--ap-muted);padding:26px;">Noch keine Backups. Klick „Jetzt sichern" oder schließe die Festplatte an.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Einstellungen --}}
    <div class="admin-panel" style="grid-column:1/-1;">
        <h3><i class="fas fa-sliders"></i> Einstellungen</h3>
        <form method="POST" action="{{ route('admin.panel.backups.settings') }}" style="margin-top:16px;max-width:640px;">
            @csrf
            <div class="admin-card-grid">
                <div class="shop-field">
                    <label class="shop-label">Snapshots behalten (N)</label>
                    <input class="shop-input" type="number" name="retention_count" min="1" max="365" value="{{ old('retention_count', $settings->retention_count) }}">
                </div>
                <div class="shop-field">
                    <label class="shop-label">Überfällig ab (Tagen)</label>
                    <input class="shop-input" type="number" name="overdue_days" min="1" max="365" value="{{ old('overdue_days', $settings->overdue_days) }}">
                </div>
            </div>
            <div class="shop-field">
                <label class="shop-label">Melde-E-Mail</label>
                <input class="shop-input" type="email" name="notify_email" value="{{ old('notify_email', $settings->notify_email ?: config('backup.notify_email')) }}">
            </div>
            <div class="shop-field">
                <label class="shop-label">Share-Pfad</label>
                <input class="shop-input" type="text" name="share_path" value="{{ old('share_path', $settings->share_path ?: config('backup.share_path')) }}">
            </div>
            <div class="shop-field">
                <label class="shop-label" style="display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:normal;font-size:.95rem;">
                    <input type="checkbox" name="watch_enabled" value="1" {{ old('watch_enabled', $settings->watch_enabled) ? 'checked' : '' }}>
                    Auto-Wächter aktiv (Backup startet automatisch bei erkannter Festplatte)
                </label>
            </div>
            <button type="submit" class="shop-button"><i class="fas fa-floppy-disk"></i> Speichern</button>
        </form>
    </div>
</div>

<script>
(function () {
    const dataUrl = @json(route('admin.panel.backups.data'));
    const el = (id) => document.getElementById(id);

    function fmtBar(barId, freeId, noteId, d) {
        const bar = el(barId), free = el(freeId), note = el(noteId);
        if (!d || !d.reachable) {
            free.textContent = 'offline';
            free.classList.add('bk-off');
            note.textContent = 'nicht erreichbar';
            bar.querySelector('span').style.width = '0%';
            return;
        }
        free.classList.remove('bk-off');
        free.textContent = d.free_h || '–';
        note.textContent = (d.used_pct ?? 0) + '% belegt · ' + (d.total_h || '');
        bar.classList.toggle('is-full', (d.used_pct ?? 0) >= 90);
        bar.querySelector('span').style.width = (d.used_pct ?? 0) + '%';
    }

    function setLive(state, text) {
        const box = el('bk-live');
        box.className = 'bk-live bk-live--' + state;
        el('bk-live-text').textContent = text;
    }

    async function poll() {
        try {
            const r = await fetch(dataUrl, { headers: { 'Accept': 'application/json' } });
            if (!r.ok) return;
            const d = await r.json();

            if (d.running) {
                const snap = d.status && d.status.snapshot ? ' (' + d.status.snapshot + ')' : '';
                setLive('running', 'Backup läuft gerade …' + snap);
            } else if (d.trigger_pending) {
                setLive('running', 'Backup angefordert — startet beim nächsten Wächter-Durchlauf …');
            } else if (d.last && d.last.status === 'failed') {
                setLive('err', 'Letztes Backup fehlgeschlagen (' + (d.last.snapshot || '') + ')');
            } else if (d.last && d.last.status === 'success') {
                let extra = '';
                if (d.last_success && d.last_success.age_days != null) {
                    extra = ' · vor ' + d.last_success.age_days + ' Tagen';
                    if (d.last_success.age_days > d.overdue_days) extra += ' ⚠️ überfällig';
                }
                setLive('ok', 'Bereit — letztes Backup erfolgreich' + extra);
            } else {
                setLive('idle', 'Bereit — noch kein Backup gelaufen.');
            }

            if (d.last) {
                el('bk-last-snapshot').textContent = d.last.snapshot || '–';
                el('bk-last-meta').textContent = (d.last.size || '') + ' · ' + (d.last.duration || '');
            }
            if (d.last_success && d.last_success.age_days != null) {
                el('bk-success-age').textContent = d.last_success.age_days + ' Tage her';
            }
            fmtBar('bk-share-bar', 'bk-share-free', 'bk-share-note', d.disk && d.disk.share);
            fmtBar('bk-local-bar', 'bk-local-free', 'bk-local-note', d.disk && d.disk.local);
            // Share-Wert kommt aus der Task-gecachten disk.json → „Stand" anzeigen.
            const sh = d.disk && d.disk.share;
            if (sh && sh.reachable && sh.source === 'cache' && sh.checked_at) {
                el('bk-share-note').textContent += ' · Stand ' + relTime(sh.checked_at);
            }
            renderRuns(d.runs);
        } catch (e) { /* still */ }
    }

    function relTime(iso) {
        const t = new Date(iso).getTime();
        if (isNaN(t)) return '';
        const m = Math.max(0, Math.round((Date.now() - t) / 60000));
        if (m < 1) return 'gerade';
        if (m < 60) return 'vor ' + m + ' Min';
        return 'vor ' + Math.round(m / 60) + ' Std';
    }

    function esc(s) {
        return String(s == null ? '' : s).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
    }

    function renderRuns(runs) {
        const body = el('bk-history-body');
        if (!body || !Array.isArray(runs)) return;
        if (!runs.length) return;
        let html = '';
        for (const r of runs) {
            html += '<tr>'
                + '<td style="font-weight:700;">' + esc(r.snapshot) + '</td>'
                + '<td><span class="bk-badge bk-badge--' + esc(r.status) + '">' + esc(r.status) + '</span></td>'
                + '<td>' + esc(r.trigger) + '</td>'
                + '<td>' + esc(r.started_at) + '</td>'
                + '<td>' + esc(r.duration) + '</td>'
                + '<td>' + esc(r.size) + '</td>'
                + '<td>' + esc(r.sites) + '</td>'
                + '<td>' + esc(r.dbs) + '</td>'
                + '<td>' + (r.log_url ? '<a href="' + esc(r.log_url) + '" target="_blank"><i class="fas fa-file-lines"></i></a>' : '–') + '</td>'
                + '</tr>';
            if (r.warnings) {
                html += '<tr><td colspan="9" style="color:var(--ap-warn);font-size:.84rem;">' + esc(r.warnings) + '</td></tr>';
            }
        }
        body.innerHTML = html;
    }

    poll();
    setInterval(poll, 4000);
})();
</script>
@endsection