@extends('layouts.app')
@section('title', 'Mises à jour BDD')
@section('page-title', 'Admin — Mises à jour BDD')

@push('styles')
<style>
.mig-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.mig-toolbar-left { display: flex; align-items: center; gap: 10px; }
.btn-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: var(--text-muted);
    border: 1.5px solid var(--border); border-radius: 20px;
    padding: 7px 16px; font-family: 'Nunito', sans-serif;
    font-size: 12px; font-weight: 700; text-decoration: none;
}
.btn-back:hover { background: #f4f6fb; }
.mig-meta { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* Cards */
.mig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media(max-width:900px){ .mig-grid { grid-template-columns: 1fr; } }

.mig-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
}
.mig-card-header {
    padding: 12px 18px; font-size: 11px; font-weight: 900;
    text-transform: uppercase; letter-spacing: .07em;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.mig-card-body { padding: 0; max-height: 380px; overflow-y: auto; }
.mig-card-body::-webkit-scrollbar { width: 5px; }
.mig-card-body::-webkit-scrollbar-thumb { background: #cbd0dc; border-radius: 3px; }

.mig-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px; border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 600;
}
.mig-row:last-child { border-bottom: none; }
.mig-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-pending { background: #e53e3e; }
.dot-ran     { background: #38a169; }
.mig-name { flex: 1; font-family: monospace; font-size: 11.5px; color: var(--text); }
.mig-badge-pending { background: #fff5f5; color: #c53030; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.mig-badge-ran     { background: #f0fff4; color: #276749; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.mig-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 13px; font-weight: 600; }

/* Bouton run */
.btn-run {
    display: inline-flex; align-items: center; gap: 8px;
    background: #e53e3e; color: #fff; border: none; border-radius: 20px;
    padding: 10px 26px; font-family: 'Nunito', sans-serif;
    font-size: 13px; font-weight: 800; cursor: pointer;
    transition: background .15s;
}
.btn-run:hover { background: #c53030; }
.btn-run:disabled { opacity: .55; cursor: not-allowed; }
.btn-run.ok { background: #38a169; }

.btn-refresh-status {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--navy); color: #fff; border: none; border-radius: 20px;
    padding: 8px 18px; font-family: 'Nunito', sans-serif;
    font-size: 12px; font-weight: 800; cursor: pointer;
    transition: background .15s;
}
.btn-refresh-status:hover { background: var(--navy-light); }

/* Console output */
.console-card {
    background: #1a202c; border-radius: 12px;
    border: 1px solid #2d3748; overflow: hidden;
    display: none;
}
.console-header {
    background: #2d3748; padding: 10px 18px;
    display: flex; align-items: center; justify-content: space-between;
}
.console-title { font-size: 11px; font-weight: 800; color: #a0aec0; text-transform: uppercase; letter-spacing: .07em; }
.console-dots { display: flex; gap: 5px; }
.console-dots span { width: 10px; height: 10px; border-radius: 50%; }
.console-body {
    padding: 16px 20px; font-family: 'Courier New', monospace;
    font-size: 12px; line-height: 1.7; color: #e2e8f0;
    min-height: 80px; max-height: 320px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-all;
}
.console-body::-webkit-scrollbar { width: 5px; }
.console-body::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 3px; }

.line-done    { color: #68d391; }
.line-fail    { color: #fc8181; }
.line-info    { color: #63b3ed; }
.line-nothing { color: #a0aec0; }
.line-warn    { color: #f6e05e; }

/* Statut global */
.status-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: 10px; margin-bottom: 16px;
    font-size: 13px; font-weight: 700;
}
.status-banner.ok      { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; }
.status-banner.pending { background: #fff5f5; border: 1px solid #feb2b2; color: #c53030; }
.status-banner.loading { background: #ebf8ff; border: 1px solid #bee3f8; color: #2b6cb0; }
.status-banner svg { flex-shrink: 0; }

/* Actions bar */
.actions-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 0; flex-wrap: wrap;
}
</style>
@endpush

@section('content')

{{-- Toolbar --}}
<div class="mig-toolbar">
    <div class="mig-toolbar-left">
        <a href="{{ route('admin.bases-de-donnees.index') }}" class="btn-back">
            <svg viewBox="0 0 24 24" style="width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="15 18 9 12 15 6"/></svg>
            Retour
        </a>
        <span class="mig-meta">Administration → <strong style="color:var(--navy);">Mises à jour BDD</strong></span>
    </div>
    <button class="btn-refresh-status" onclick="loadStatus()">
        <svg id="spin-status" viewBox="0 0 24 24" style="width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;transition:transform .5s;"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
        Vérifier l'état
    </button>
</div>

{{-- Bannière statut --}}
<div id="statusBanner" class="status-banner loading">
    <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;">
        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16" stroke-width="3"/>
    </svg>
    <span id="statusText">Vérification en cours…</span>
</div>

{{-- Grille pending / ran --}}
<div class="mig-grid">

    {{-- Migrations en attente --}}
    <div class="mig-card">
        <div class="mig-card-header" style="color:#c53030;">
            <span>⏳ En attente</span>
            <span id="pendingCount" style="background:#fff5f5;color:#c53030;font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;">—</span>
        </div>
        <div class="mig-card-body" id="pendingList">
            <div class="mig-empty">Chargement…</div>
        </div>
    </div>

    {{-- Migrations exécutées --}}
    <div class="mig-card">
        <div class="mig-card-header" style="color:#276749;">
            <span>✅ Exécutées</span>
            <span id="ranCount" style="background:#f0fff4;color:#276749;font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;">—</span>
        </div>
        <div class="mig-card-body" id="ranList">
            <div class="mig-empty">Chargement…</div>
        </div>
    </div>

</div>

{{-- Bouton Run --}}
<div class="actions-bar">
    <button class="btn-run" id="btnRun" onclick="runMigrations()" disabled>
        <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;">
            <polygon points="5 3 19 12 5 21 5 3" fill="currentColor" stroke="none"/>
        </svg>
        <span id="btnRunLabel">Lancer les migrations en attente</span>
    </button>
    <span id="runHint" style="font-size:11px;color:var(--text-muted);font-weight:600;"></span>
</div>

{{-- Console output --}}
<div class="console-card" id="consoleCard">
    <div class="console-header">
        <div class="console-dots">
            <span style="background:#fc8181;"></span>
            <span style="background:#f6e05e;"></span>
            <span style="background:#68d391;"></span>
        </div>
        <span class="console-title">Output — php artisan migrate --force</span>
        <span id="consoleTime" style="font-size:10px;color:#718096;"></span>
    </div>
    <div class="console-body" id="consoleBody"></div>
</div>

@endsection

@push('scripts')
<script>
const CSRF = '{{ csrf_token() }}';

async function loadStatus() {
    const spin = document.getElementById('spin-status');
    spin.style.transform = 'rotate(360deg)';
    setTimeout(() => spin.style.transform = '', 600);

    setBanner('loading', 'Vérification en cours…');

    try {
        const r = await fetch('{{ route("admin.bases-de-donnees.migrations") }}', {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        });
        const d = await r.json();

        // Pending
        const pendingEl = document.getElementById('pendingList');
        document.getElementById('pendingCount').textContent = d.pending.length;
        if (d.pending.length === 0) {
            pendingEl.innerHTML = '<div class="mig-empty">✅ Aucune migration en attente</div>';
        } else {
            pendingEl.innerHTML = d.pending.map(m =>
                `<div class="mig-row">
                    <span class="mig-dot dot-pending"></span>
                    <span class="mig-name">${m}</span>
                    <span class="mig-badge-pending">Pending</span>
                </div>`
            ).join('');
        }

        // Ran
        const ranEl = document.getElementById('ranList');
        document.getElementById('ranCount').textContent = d.ran.length;
        if (d.ran.length === 0) {
            ranEl.innerHTML = '<div class="mig-empty">Aucune migration exécutée</div>';
        } else {
            ranEl.innerHTML = d.ran.map(m =>
                `<div class="mig-row">
                    <span class="mig-dot dot-ran"></span>
                    <span class="mig-name">${m}</span>
                    <span class="mig-badge-ran">Ran</span>
                </div>`
            ).join('');
        }

        // Statut global
        const btn = document.getElementById('btnRun');
        const hint = document.getElementById('runHint');
        if (d.pending.length === 0) {
            setBanner('ok', `✅ Base de données à jour — ${d.ran.length} migration(s) exécutée(s)`);
            btn.disabled = true;
            btn.classList.remove('ok');
            hint.textContent = 'Aucune migration en attente.';
        } else {
            setBanner('pending', `⚠️ ${d.pending.length} migration(s) en attente d'exécution`);
            btn.disabled = false;
            btn.classList.remove('ok');
            hint.textContent = `${d.pending.length} migration(s) seront exécutées.`;
        }

    } catch(e) {
        setBanner('pending', '❌ Erreur lors de la vérification');
    }
}

async function runMigrations() {
    const btn   = document.getElementById('btnRun');
    const label = document.getElementById('btnRunLabel');
    const card  = document.getElementById('consoleCard');
    const body  = document.getElementById('consoleBody');
    const time  = document.getElementById('consoleTime');

    btn.disabled = true;
    label.textContent = 'Exécution en cours…';
    card.style.display = 'block';
    body.innerHTML = '<span style="color:#63b3ed;">$ php artisan migrate --force</span>\n\n';
    time.textContent = '';

    const start = Date.now();

    try {
        const r = await fetch('{{ route("admin.bases-de-donnees.migrations.run") }}', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': CSRF,
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        const d = await r.json();

        const elapsed = ((Date.now() - start) / 1000).toFixed(2);
        time.textContent = `${elapsed}s`;

        // Coloriser l'output ligne par ligne
        const lines = (d.output || '').split('\n');
        const colored = lines.map(line => {
            if (line.includes('DONE'))    return `<span class="line-done">${esc(line)}</span>`;
            if (line.includes('FAIL'))    return `<span class="line-fail">${esc(line)}</span>`;
            if (line.includes('INFO'))    return `<span class="line-info">${esc(line)}</span>`;
            if (line.includes('Nothing'))return `<span class="line-nothing">${esc(line)}</span>`;
            if (line.includes('ERROR') || line.includes('ERREUR')) return `<span class="line-fail">${esc(line)}</span>`;
            return `<span style="color:#e2e8f0;">${esc(line)}</span>`;
        }).join('\n');

        body.innerHTML += colored + '\n\n';

        if (d.success) {
            body.innerHTML += '<span class="line-done">✓ Terminé avec succès.</span>';
            btn.classList.add('ok');
            label.textContent = 'Migrations exécutées ✓';
            // Recharger le statut
            setTimeout(loadStatus, 800);
        } else {
            body.innerHTML += '<span class="line-fail">✗ Une erreur est survenue.</span>';
            btn.disabled = false;
            label.textContent = 'Relancer les migrations';
        }

        // Scroll bas de la console
        body.scrollTop = body.scrollHeight;

    } catch(e) {
        body.innerHTML += `<span class="line-fail">✗ Erreur réseau : ${e.message}</span>`;
        btn.disabled = false;
        label.textContent = 'Relancer les migrations';
    }
}

function setBanner(type, text) {
    const b = document.getElementById('statusBanner');
    b.className = 'status-banner ' + type;
    document.getElementById('statusText').textContent = text;
}

function esc(s) {
    return String(s)
        .replace(/&/g,'&amp;')
        .replace(/</g,'&lt;')
        .replace(/>/g,'&gt;');
}

// Chargement automatique au démarrage
document.addEventListener('DOMContentLoaded', loadStatus);
</script>
@endpush