@extends('admin.layout')

@section('title', 'System Settings')
@section('page_title', 'Settings')

@section('extra_styles')
<style>
.settings-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
    overflow: hidden;
}
.settings-section-header {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    font-size: 14px; font-weight: 600;
}
.settings-section-header i { color: var(--brand); font-size: 16px; }
.settings-section-body { padding: 22px; }

.setting-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.setting-row:first-child { padding-top: 0; }
.setting-label { flex: 1; }
.setting-label strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.setting-label small  { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.setting-control { flex-shrink: 0; min-width: 180px; }

/* Toggle switch */
.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle-switch {
    position: relative; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute; inset: 0;
    background: var(--border-light); border-radius: 12px;
    transition: background .2s;
}
.toggle-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.toggle-switch input:checked ~ .toggle-track { background: var(--brand); }
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(20px); }
.toggle-label { font-size: 13px; color: var(--text-2); }
.toggle-switch input:checked + .toggle-track + .toggle-label { color: var(--text); }

/* Select */
.adm-select-full {
    width: 100%; height: 38px;
    background: var(--bg); border: 1px solid var(--border-light);
    border-radius: 8px; color: var(--text); font-size: 13px;
    padding: 0 12px; outline: none; font-family: inherit;
    transition: border-color .15s; cursor: pointer;
}
.adm-select-full:focus { border-color: var(--brand); }
.adm-select-full option { background: #1e1e1e; }

/* GPU cards */
.gpu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 4px; }
.gpu-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px;
    cursor: pointer; transition: border-color .15s, background .15s;
    position: relative;
}
.gpu-card:hover { border-color: #444; background: var(--bg-card2); }
.gpu-card.selected { border-color: var(--brand); background: var(--brand-dim); }
.gpu-card-check {
    position: absolute; top: 10px; right: 10px;
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--border); background: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #fff;
    transition: background .15s, border-color .15s;
}
.gpu-card.selected .gpu-card-check { background: var(--brand); border-color: var(--brand); }
.gpu-card-name { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding-right: 24px; }
.gpu-stat { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.gpu-stat:last-child { margin-bottom: 0; }
.gpu-stat-val { color: var(--text); font-weight: 500; }

/* Mem bar */
.mem-bar-wrap { margin-top: 8px; }
.mem-bar-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.mem-bar-fill  { height: 100%; background: var(--brand); border-radius: 2px; transition: width .4s; }

/* No GPU state */
.no-gpu-state { text-align: center; padding: 28px 20px; color: var(--text-2); }
.no-gpu-state i { font-size: 32px; display: block; margin-bottom: 10px; opacity: .3; }

/* Status chip */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.chip-green { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
.chip-red   { background: rgba(239,68,68,.15);  color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.chip-dot   { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Encoder option cards */
.enc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.enc-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px;
    cursor: pointer; transition: border-color .15s;
    text-align: left;
}
.enc-card:hover { border-color: #444; }
.enc-card.selected { border-color: var(--brand); background: var(--brand-dim); }
.enc-card-name { font-size: 13px; font-weight: 600; display: block; }
.enc-card-desc { font-size: 11px; color: var(--text-2); margin-top: 3px; display: block; }

.save-bar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 12px; padding-top: 4px;
}
</style>
@endsection

@section('content')
<div class="adm-page-header">
    <h1 class="adm-page-title"><i class="bi bi-gear-fill"></i> System Settings</h1>
</div>

@if(session('success'))
<div class="adm-alert adm-alert-success" style="margin-bottom:20px;">
    <i class="bi bi-check-circle-fill"></i>
    <span>{{ session('success') }}</span>
    <button class="adm-alert-close" type="button"><i class="bi bi-x"></i></button>
</div>
@endif

@if($errors->any())
<div class="adm-alert adm-alert-error" style="margin-bottom:20px;">
    <i class="bi bi-exclamation-triangle-fill"></i>
    <span>{{ $errors->first() }}</span>
    <button class="adm-alert-close" type="button"><i class="bi bi-x"></i></button>
</div>
@endif

<form method="POST" action="{{ route('admin.settings.update') }}" id="settingsForm">
@csrf

{{-- ── GPU Processing ───────────────────────────────────────── --}}
<div class="settings-section">
    <div class="settings-section-header">
        <i class="bi bi-gpu-card"></i>
        GPU Accelerated Processing
        <span id="gpuStatusChip" style="margin-left:6px;">
            @if(count($gpus))
                <span class="chip chip-green"><span class="chip-dot"></span> {{ count($gpus) }} GPU{{ count($gpus) > 1 ? 's' : '' }} detected</span>
            @else
                <span class="chip chip-red"><span class="chip-dot"></span> No GPU detected</span>
            @endif
        </span>
        {{-- NVENC encoding health --}}
        <span id="nvencStatusChip" style="margin-left:6px;">
            @if($nvencWorks)
                <span class="chip chip-green"><span class="chip-dot"></span> NVENC encoding ✓</span>
            @else
                <span class="chip chip-red"><span class="chip-dot"></span> NVENC encoding ✗</span>
            @endif
        </span>
    </div>

    @if(!$nvencWorks && count($gpus))
    <div style="background:rgba(239,68,68,.08);border-left:3px solid #f87171;padding:12px 18px;font-size:13px;color:#f87171;line-height:1.6;">
        <strong>⚠ NVENC is not working with the current FFmpeg binary.</strong><br>
        The GPU is detected but FFmpeg {{ shell_exec('/usr/bin/ffmpeg -version 2>/dev/null | head -1') ?? '' }} cannot initialise CUDA on this driver.<br>
        <strong>Fix:</strong> Install a newer FFmpeg with CUDA 12+ support (e.g. <code>jellyfin-ffmpeg7</code>), then update the binary path below.<br>
        Until then, video encoding will automatically fall back to CPU (libx264).
    </div>
    @endif

    <div class="settings-section-body">

        {{-- Detect button + GPU cards --}}
        <div style="margin-bottom:20px;">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                <span style="font-size:13px;color:var(--text-2);">Available GPUs</span>
                <button type="button" class="adm-btn adm-btn-sm" id="detectBtn" onclick="detectGpus()">
                    <i class="bi bi-arrow-repeat" id="detectIcon"></i> Detect GPUs
                </button>
            </div>
            <div id="gpuCardsWrap">
                @if(count($gpus))
                    @include('admin.partials.gpu-cards', ['gpus' => $gpus, 'selectedDevice' => $settings['gpu_device']])
                @else
                    <div class="no-gpu-state">
                        <i class="bi bi-gpu-card"></i>
                        <p>No NVIDIA GPUs detected. Click "Detect GPUs" to scan.</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Enable GPU --}}
        <div class="setting-row">
            <div class="setting-label">
                <strong>Enable GPU acceleration</strong>
                <small>When enabled, video encoding uses the NVIDIA GPU. When disabled, falls back to CPU (libx264).</small>
            </div>
            <div class="setting-control">
                <label class="toggle-wrap">
                    <div class="toggle-switch">
                        <input type="checkbox" id="gpuEnabledInput" name="gpu_enabled_check"
                               {{ $settings['gpu_enabled'] === 'true' ? 'checked' : '' }}>
                        <div class="toggle-track"></div>
                        <div class="toggle-thumb"></div>
                    </div>
                    <span class="toggle-label" id="gpuEnabledLabel">
                        {{ $settings['gpu_enabled'] === 'true' ? 'Enabled' : 'Disabled' }}
                    </span>
                </label>
                <input type="hidden" name="gpu_enabled" id="gpuEnabledHidden"
                       value="{{ $settings['gpu_enabled'] }}">
            </div>
        </div>

        {{-- GPU device (hidden input, controlled by card click) --}}
        <input type="hidden" name="gpu_device" id="gpuDeviceInput" value="{{ $settings['gpu_device'] }}">

        {{-- GPU Encoder --}}
        <div class="setting-row" id="gpuEncoderRow">
            <div class="setting-label">
                <strong>Video encoder</strong>
                <small>h264_nvenc is broadly compatible. hevc_nvenc produces smaller files (H.265) but requires compatible players. libx264 forces CPU encoding regardless of the toggle above.</small>
            </div>
            <div class="setting-control">
                <div class="enc-grid">
                    @foreach([
                        ['h264_nvenc', 'H.264 NVENC', 'GPU · max compatibility'],
                        ['hevc_nvenc', 'H.265 NVENC', 'GPU · smaller files'],
                        ['libx264',   'libx264',      'CPU · software fallback'],
                    ] as [$val, $label, $desc])
                    <button type="button"
                            class="enc-card {{ $settings['gpu_encoder'] === $val ? 'selected' : '' }}"
                            data-encoder="{{ $val }}"
                            onclick="selectEncoder(this)">
                        <span class="enc-card-name">{{ $label }}</span>
                        <span class="enc-card-desc">{{ $desc }}</span>
                    </button>
                    @endforeach
                </div>
                <input type="hidden" name="gpu_encoder" id="gpuEncoderInput" value="{{ $settings['gpu_encoder'] }}">
            </div>
        </div>

        {{-- Encoding preset --}}
        <div class="setting-row" id="gpuPresetRow">
            <div class="setting-label">
                <strong>Encoding preset</strong>
                <small>NVENC presets: p1 (fastest) → p7 (best quality). libx264 presets: fast / medium / slow. Preset only affects speed vs file size; quality is controlled by CQ/CRF.</small>
            </div>
            <div class="setting-control">
                <select name="gpu_preset" class="adm-select-full" id="gpuPresetSelect">
                    <optgroup label="NVENC (GPU)">
                        @foreach(['p1','p2','p3','p4','p5','p6','p7'] as $p)
                        <option value="{{ $p }}" {{ $settings['gpu_preset'] === $p ? 'selected' : '' }}>
                            {{ $p }}{{ $p === 'p4' ? ' — recommended' : '' }}
                        </option>
                        @endforeach
                    </optgroup>
                    <optgroup label="libx264 (CPU)">
                        @foreach(['fast','medium','slow'] as $p)
                        <option value="{{ $p }}" {{ $settings['gpu_preset'] === $p ? 'selected' : '' }}>
                            {{ $p }}
                        </option>
                        @endforeach
                    </optgroup>
                </select>
            </div>
        </div>

        {{-- HW Accel --}}
        <div class="setting-row" id="gpuHwaccelRow">
            <div class="setting-label">
                <strong>Hardware decode acceleration</strong>
                <small>Use CUDA to decode the source video on the GPU before re-encoding, speeding up the pipeline. Disable if you see CUDA errors in the logs.</small>
            </div>
            <div class="setting-control">
                <select name="gpu_hwaccel" class="adm-select-full">
                    <option value="cuda" {{ $settings['gpu_hwaccel'] === 'cuda' ? 'selected' : '' }}>cuda — GPU decode</option>
                    <option value="none" {{ $settings['gpu_hwaccel'] === 'none' ? 'selected' : '' }}>none — CPU decode</option>
                </select>
            </div>
        </div>

        {{-- FFmpeg binary path --}}
        <div class="setting-row">
            <div class="setting-label">
                <strong>FFmpeg binary path</strong>
                <small>
                    Absolute path to the <code>ffmpeg</code> executable.
                    Change this to use a newer build (e.g. <code>/usr/lib/jellyfin-ffmpeg/ffmpeg</code>)
                    that supports your GPU driver. Current: <code>{{ config('ffmpeg.ffmpeg', '/usr/bin/ffmpeg') }}</code>
                </small>
            </div>
            <div class="setting-control">
                <input type="text" name="ffmpeg_binary" class="adm-select-full" style="height:auto;padding:8px 12px;"
                       value="{{ $settings['ffmpeg_binary'] }}"
                       placeholder="/usr/bin/ffmpeg">
            </div>
        </div>

    </div>
</div>

{{-- ── NAS Storage ───────────────────────────────────────────── --}}
<div class="settings-section">
    <div class="settings-section-header">
        <i class="bi bi-hdd-network"></i>
        NAS Storage
        @if($settings['nas_sync_enabled'] === 'true')
            <span class="chip chip-green" style="margin-left:6px;"><span class="chip-dot"></span> Enabled</span>
        @else
            <span class="chip chip-red" style="margin-left:6px;"><span class="chip-dot"></span> Disabled</span>
        @endif
    </div>
    <div class="settings-section-body">

        <div class="setting-row" style="padding-top:0;">
            <div class="setting-label">
                <strong>Use NAS as primary storage</strong>
                <small>
                    When enabled, uploads go <strong>directly to the NAS</strong> — no permanent local copy is kept.
                    Files are stored at <code>users/{username}/videos/{title-slug}/</code> on the NAS share.
                    When disabled, all files are served from local disk using the same directory schema.
                    <strong>Disabling NAS will prompt you to migrate files or start fresh.</strong>
                </small>
            </div>
            <div class="setting-control">
                @if($settings['nas_sync_enabled'] === 'true')
                    <button type="button" class="adm-btn adm-btn-danger" onclick="openNasDisableModal()">
                        <i class="bi bi-hdd-network"></i> Disable NAS
                    </button>
                @else
                    <span style="font-size:13px;color:var(--text-2);">NAS is disabled. Enable it under <a href="{{ route('admin.nas-storage') }}" style="color:var(--brand)">NAS Storage</a>.</span>
                @endif
            </div>
        </div>

        @if($settings['nas_sync_enabled'] === 'true')
        <div class="setting-row" style="border-top:1px solid var(--border-color);padding-top:18px;">
            <div class="setting-label">
                <strong>Repair stuck files</strong>
                <small>
                    Scans for files that were saved locally but never reached the NAS (e.g. due to a
                    connection error during upload or edit). Uploads them to the NAS, then removes the
                    local copies. Safe to run at any time — nothing is deleted until the NAS confirms receipt.
                </small>
            </div>
            <div class="setting-control" style="gap:10px;align-items:flex-start;">
                <button type="button" id="nasRepairScanBtn" class="adm-btn" style="white-space:nowrap;">
                    <i class="bi bi-search" id="nasRepairScanIcon"></i> Scan
                </button>
                <button type="button" id="nasRepairFixBtn" class="adm-btn adm-btn-primary" style="white-space:nowrap;display:none;">
                    <i class="bi bi-arrow-repeat" id="nasRepairFixIcon"></i> Fix All
                </button>
            </div>
        </div>
        <div id="nasRepairResult" style="padding:0 22px 18px;display:none;">
            <div id="nasRepairResultInner"></div>
        </div>
        @endif

    </div>
</div>

{{-- ── Backup & Restore ──────────────────────────────────────────────────────── --}}
<div class="settings-section">
    <div class="settings-section-header">
        <i class="bi bi-archive"></i>
        Backup & Restore
    </div>
    <div class="settings-section-body">

        <div class="setting-row" style="padding-top:0;">
            <div class="setting-label">
                <strong>Export users &amp; settings</strong>
                <small>Downloads a JSON file containing all user accounts and system settings. Does not include media files.</small>
            </div>
            <div class="setting-control">
                <a href="{{ route('admin.backup.users-settings') }}" class="adm-btn">
                    <i class="bi bi-download"></i> Download Backup
                </a>
            </div>
        </div>

        <div class="setting-row">
            <div class="setting-label">
                <strong>Restore users &amp; settings</strong>
                <small>Upload a previously exported backup JSON. Existing users are matched by email and updated; new users are created. Settings are merged.</small>
            </div>
            <div class="setting-control">
                <form method="POST" action="{{ route('admin.backup.restore') }}" enctype="multipart/form-data" id="restoreForm">
                    @csrf
                    <input type="file" name="backup" id="restoreFile" accept=".json" style="display:none" onchange="document.getElementById('restoreForm').submit()">
                    <button type="button" class="adm-btn" onclick="document.getElementById('restoreFile').click()">
                        <i class="bi bi-upload"></i> Upload &amp; Restore
                    </button>
                </form>
            </div>
        </div>

    </div>
</div>

{{-- ── Save ─────────────────────────────────────────────────── --}}
<div class="save-bar">
    <a href="{{ route('admin.dashboard') }}" class="adm-btn">Cancel</a>
    <button type="submit" class="adm-btn adm-btn-primary">
        <i class="bi bi-floppy"></i> Save Settings
    </button>
</div>

</form>
@endsection

@section('scripts')
<script>
// ── GPU card selection ────────────────────────────────────────
function selectGpuCard(el) {
    document.querySelectorAll('.gpu-card').forEach(c => c.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById('gpuDeviceInput').value = el.dataset.index;
}

// ── Encoder card selection ────────────────────────────────────
function selectEncoder(el) {
    document.querySelectorAll('.enc-card').forEach(c => c.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById('gpuEncoderInput').value = el.dataset.encoder;
    // Sync preset optgroup visibility hint
    const isCpu = el.dataset.encoder === 'libx264';
    document.getElementById('gpuPresetSelect').value = isCpu ? 'fast' : 'p4';
}

// ── GPU toggle ────────────────────────────────────────────────
const gpuToggle = document.getElementById('gpuEnabledInput');
const gpuHidden = document.getElementById('gpuEnabledHidden');
const gpuLabel  = document.getElementById('gpuEnabledLabel');

function applyGpuToggle() {
    const on = gpuToggle.checked;
    gpuHidden.value  = on ? 'true' : 'false';
    gpuLabel.textContent = on ? 'Enabled' : 'Disabled';
}
gpuToggle.addEventListener('change', applyGpuToggle);

// ── Live GPU detect ───────────────────────────────────────────
async function detectGpus() {
    const btn  = document.getElementById('detectBtn');
    const icon = document.getElementById('detectIcon');
    btn.disabled = true;
    icon.className = 'bi bi-arrow-repeat spin';

    try {
        const res  = await fetch('{{ route('admin.settings.detect-gpu') }}');
        const data = await res.json();
        const gpus = data.gpus || [];
        const wrap = document.getElementById('gpuCardsWrap');
        const chip = document.getElementById('gpuStatusChip');
        const selectedDevice = parseInt(document.getElementById('gpuDeviceInput').value);

        if (gpus.length === 0) {
            wrap.innerHTML = '<div class="no-gpu-state"><i class="bi bi-gpu-card"></i><p>No NVIDIA GPUs detected.</p></div>';
            chip.innerHTML = '<span class="chip chip-red"><span class="chip-dot"></span> No GPU detected</span>';
        } else {
            chip.innerHTML = `<span class="chip chip-green"><span class="chip-dot"></span> ${gpus.length} GPU${gpus.length > 1 ? 's' : ''} detected</span>`;
            wrap.innerHTML = buildGpuCards(gpus, selectedDevice);
        }
    } catch (e) {
        console.error(e);
    }

    btn.disabled = false;
    icon.className = 'bi bi-arrow-repeat';
}

function buildGpuCards(gpus, selectedDevice) {
    if (!gpus.length) return '';
    const grid = document.createElement('div');
    grid.className = 'gpu-grid';

    gpus.forEach(gpu => {
        const used   = gpu.mem_total - gpu.mem_free;
        const usedPct = Math.round((used / gpu.mem_total) * 100);
        const sel    = gpu.index === selectedDevice;
        const card   = document.createElement('div');
        card.className = 'gpu-card' + (sel ? ' selected' : '');
        card.dataset.index = gpu.index;
        card.onclick = function() { selectGpuCard(this); };
        card.innerHTML = `
            <div class="gpu-card-check">${sel ? '<i class="bi bi-check"></i>' : ''}</div>
            <div class="gpu-card-name">${escHtml(gpu.name)}</div>
            <div class="gpu-stat"><span>VRAM</span><span class="gpu-stat-val">${gpu.mem_total.toLocaleString()} MB</span></div>
            <div class="gpu-stat"><span>Free</span><span class="gpu-stat-val">${gpu.mem_free.toLocaleString()} MB</span></div>
            <div class="gpu-stat"><span>GPU Load</span><span class="gpu-stat-val">${gpu.util}%</span></div>
            <div class="gpu-stat"><span>Temp</span><span class="gpu-stat-val">${gpu.temp} °C</span></div>
            <div class="gpu-stat"><span>Driver</span><span class="gpu-stat-val">${escHtml(gpu.driver)}</span></div>
            <div class="mem-bar-wrap">
                <div class="mem-bar-track"><div class="mem-bar-fill" style="width:${usedPct}%"></div></div>
            </div>`;
        grid.appendChild(card);
    });

    return grid.outerHTML;
}

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

// ── NAS Repair ────────────────────────────────────────────────
(function () {
    const scanBtn  = document.getElementById('nasRepairScanBtn');
    const fixBtn   = document.getElementById('nasRepairFixBtn');
    const resultEl = document.getElementById('nasRepairResult');
    const inner    = document.getElementById('nasRepairResultInner');
    const scanIcon = document.getElementById('nasRepairScanIcon');
    const fixIcon  = document.getElementById('nasRepairFixIcon');
    if (! scanBtn) return;

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
    let stuckCount  = 0;

    function showResult(html, type = 'info') {
        const colours = { success: '#22c55e', warning: '#f59e0b', danger: '#ef4444', info: 'var(--text-secondary)' };
        inner.innerHTML = `<div style="font-size:13px;color:${colours[type] ?? colours.info};padding:12px 0;">${html}</div>`;
        resultEl.style.display = 'block';
    }

    scanBtn.addEventListener('click', async function () {
        scanBtn.disabled = true;
        fixBtn.style.display = 'none';
        scanIcon.className = 'bi bi-arrow-repeat spin';
        showResult('Scanning…', 'info');

        try {
            const res  = await fetch('{{ url("/admin/nas-repair") }}?scan=1', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ scan_only: true }),
            });
            const data = await res.json();
            stuckCount = data.stuck ?? 0;

            if (stuckCount === 0) {
                showResult('✅ All clear — no stuck local files found.', 'success');
            } else {
                let html = `<strong style="color:var(--brand);">⚠ ${stuckCount} video(s) have files stuck locally.</strong>`;
                if (data.details && data.details.length) {
                    html += `<ul style="margin:8px 0 0;padding-left:18px;">` +
                        data.details.map(d => `<li>${escHtml(d)}</li>`).join('') + `</ul>`;
                }
                html += `<p style="margin-top:10px;color:var(--text-secondary);font-size:12px;">Click <strong>Fix All</strong> to upload them to the NAS and remove local copies.</p>`;
                showResult(html, 'warning');
                fixBtn.style.display = '';
            }
        } catch (e) {
            showResult('❌ Scan failed: ' + escHtml(e.message), 'danger');
        }

        scanIcon.className = 'bi bi-search';
        scanBtn.disabled = false;
    });

    fixBtn.addEventListener('click', async function () {
        if (! confirm(`Upload ${stuckCount} stuck file(s) to NAS and remove local copies?`)) return;
        fixBtn.disabled = true;
        scanBtn.disabled = true;
        fixIcon.className = 'bi bi-arrow-repeat spin';
        showResult('Uploading to NAS…', 'info');

        try {
            const res  = await fetch('{{ url("/admin/nas-repair") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
            });
            const data = await res.json();
            const type = data.failed > 0 ? 'warning' : 'success';
            let html = `${data.success ? '✅' : '⚠️'} ${escHtml(data.message)}`;
            if (data.details && data.details.length) {
                html += `<ul style="margin:8px 0 0;padding-left:18px;">` +
                    data.details.map(d => `<li>${escHtml(d)}</li>`).join('') + `</ul>`;
            }
            showResult(html, type);
            fixBtn.style.display = 'none';
        } catch (e) {
            showResult('❌ Repair failed: ' + escHtml(e.message), 'danger');
        }

        fixIcon.className = 'bi bi-arrow-repeat';
        fixBtn.disabled = false;
        scanBtn.disabled = false;
    });
})();

// ── NAS Disable Modal ────────────────────────────────────────
let _nasOpt = null;
let _nasPollTimer = null;

function openNasDisableModal() {
    _nasOpt = null;
    document.getElementById('nasDisableModal').style.display = 'flex';
    document.getElementById('nasDisableStep1').style.display = 'block';
    document.getElementById('nasDisableStep2Migrate').style.display = 'none';
    document.getElementById('nasDisableStep2Fresh').style.display = 'none';
    document.getElementById('nasDisableNextBtn').disabled = true;
    ['optMigrate','optFresh'].forEach(id => {
        document.getElementById(id).style.borderColor = 'var(--border)';
    });
}

function closeNasDisableModal() {
    if (_nasPollTimer) clearInterval(_nasPollTimer);
    document.getElementById('nasDisableModal').style.display = 'none';
}

function selectNasOpt(opt) {
    _nasOpt = opt;
    document.getElementById('optMigrate').style.borderColor = opt === 'migrate' ? 'var(--brand)' : 'var(--border)';
    document.getElementById('optFresh').style.borderColor   = opt === 'fresh'   ? '#e74c3c'      : 'var(--border)';
    document.getElementById('nasDisableNextBtn').disabled = false;
}

function nasDisableNext() {
    document.getElementById('nasDisableStep1').style.display = 'none';
    if (_nasOpt === 'migrate') {
        document.getElementById('nasDisableStep2Migrate').style.display = 'block';
        nasStartMigration();
    } else {
        document.getElementById('nasDisableStep2Fresh').style.display = 'block';
    }
}

async function nasStartMigration() {
    try {
        await fetch('{{ route("admin.nas.disable") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ mode: 'migrate' }),
        });
    } catch(e) {
        document.getElementById('nasDisableError').textContent = 'Failed to start migration: ' + e.message;
        document.getElementById('nasDisableError').style.display = 'block';
        return;
    }
    _nasPollTimer = setInterval(nasPollProgress, 2000);
}

async function nasPollProgress() {
    try {
        const r = await fetch('{{ route("admin.nas.migrate-progress") }}');
        const d = await r.json();
        const pct = d.total > 0 ? Math.round((d.current / d.total) * 100) : 0;
        document.getElementById('nasDisableBar').style.width = pct + '%';
        document.getElementById('nasDisableCount').textContent = d.current + ' / ' + d.total;
        document.getElementById('nasDisablePhase').textContent = d.phase || '';
        if (d.error) {
            clearInterval(_nasPollTimer);
            document.getElementById('nasDisableError').textContent = 'Error: ' + d.error;
            document.getElementById('nasDisableError').style.display = 'block';
        }
        if (d.done) {
            clearInterval(_nasPollTimer);
            document.getElementById('nasDisableBar').style.width = '100%';
            document.getElementById('nasDisableCount').textContent = d.total + ' / ' + d.total;
            document.getElementById('nasDisableDone').style.display = 'block';
        }
    } catch(e) { /* network blip, keep polling */ }
}

async function nasDisableFreshConfirm() {
    const val = document.getElementById('nasDeleteConfirmInput').value.trim();
    const errEl = document.getElementById('nasDeleteConfirmError');
    if (val !== 'DELETE') {
        errEl.textContent = 'Type DELETE (all caps) to confirm.';
        errEl.style.display = 'block';
        return;
    }
    errEl.style.display = 'none';
    try {
        const r = await fetch('{{ route("admin.nas.disable") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ mode: 'fresh' }),
        });
        const d = await r.json();
        if (d.ok) {
            closeNasDisableModal();
            location.reload();
        } else {
            errEl.textContent = d.message || 'An error occurred.';
            errEl.style.display = 'block';
        }
    } catch(e) {
        errEl.textContent = 'Failed: ' + e.message;
        errEl.style.display = 'block';
    }
}
</script>
<style>
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .6s linear infinite; }
.adm-input {
    background: var(--bg-input, #1e1e1e);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
}
.adm-input:focus { border-color: var(--brand); }
</style>

{{-- ── NAS Disable Modal ─────────────────────────────────────── --}}
<div id="nasDisableModal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);align-items:center;justify-content:center;">
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);width:min(520px,94vw);padding:28px;max-height:90vh;overflow-y:auto;">

        {{-- Step 1: Choose action --}}
        <div id="nasDisableStep1">
            <h3 style="margin:0 0 8px;font-size:17px;">Disable NAS Storage</h3>
            <p style="margin:0 0 20px;font-size:13px;color:var(--text-2);">All your files currently live on the NAS. Choose what to do before disabling:</p>

            <div style="display:grid;gap:12px;margin-bottom:24px;">
                <div id="optMigrate" onclick="selectNasOpt('migrate')" style="border:2px solid var(--border);border-radius:8px;padding:16px;cursor:pointer;transition:border-color .15s;">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                        <i class="bi bi-arrow-down-circle" style="color:var(--brand);font-size:18px;"></i>
                        <strong style="font-size:14px;">Copy all files to local disk</strong>
                    </div>
                    <p style="margin:0;font-size:12px;color:var(--text-2);">Downloads every video, thumbnail, avatar, and banner from the NAS to <code>storage/app/users/…</code>. Same directory structure — everything keeps working. May take a while.</p>
                </div>
                <div id="optFresh" onclick="selectNasOpt('fresh')" style="border:2px solid var(--border);border-radius:8px;padding:16px;cursor:pointer;transition:border-color .15s;">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                        <i class="bi bi-trash3" style="color:#e74c3c;font-size:18px;"></i>
                        <strong style="font-size:14px;color:#e74c3c;">Delete all media, start fresh</strong>
                    </div>
                    <p style="margin:0;font-size:12px;color:var(--text-2);">Removes all videos, thumbnails, playlists, comments, and posts. <strong>User accounts are kept.</strong> Nothing is downloaded.</p>
                </div>
            </div>

            <div style="display:flex;gap:10px;justify-content:flex-end;">
                <button type="button" class="adm-btn" onclick="closeNasDisableModal()">Cancel</button>
                <button type="button" id="nasDisableNextBtn" class="adm-btn adm-btn-danger" disabled onclick="nasDisableNext()">Continue &rarr;</button>
            </div>
        </div>

        {{-- Step 2a: Migration progress --}}
        <div id="nasDisableStep2Migrate" style="display:none;">
            <h3 style="margin:0 0 8px;font-size:17px;">Migrating files to local disk&hellip;</h3>
            <p id="nasDisablePhase" style="margin:0 0 16px;font-size:13px;color:var(--text-2);">Starting&hellip;</p>
            <div style="background:var(--border);border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden;">
                <div id="nasDisableBar" style="height:100%;background:var(--brand);border-radius:4px;width:0%;transition:width .3s;"></div>
            </div>
            <div id="nasDisableCount" style="font-size:12px;color:var(--text-2);margin-bottom:20px;">0 / 0</div>
            <div id="nasDisableDone" style="display:none;">
                <div style="color:#27ae60;font-size:13px;margin-bottom:16px;"><i class="bi bi-check-circle-fill"></i> Migration complete! NAS has been disabled. Reload the page to continue.</div>
                <button type="button" class="adm-btn adm-btn-primary" onclick="location.reload()">Reload Page</button>
            </div>
            <div id="nasDisableError" style="display:none;color:#e74c3c;font-size:13px;margin-bottom:16px;"></div>
        </div>

        {{-- Step 2b: Fresh start confirmation --}}
        <div id="nasDisableStep2Fresh" style="display:none;">
            <h3 style="margin:0 0 8px;font-size:17px;color:#e74c3c;">Delete all media?</h3>
            <p style="margin:0 0 16px;font-size:13px;color:var(--text-2);">This will permanently delete all videos, playlists, comments, and posts. User accounts will remain. <strong>This cannot be undone.</strong></p>
            <p style="margin:0 0 8px;font-size:13px;">Type <strong>DELETE</strong> to confirm:</p>
            <input type="text" id="nasDeleteConfirmInput" placeholder="DELETE" class="adm-input" style="width:100%;margin-bottom:8px;box-sizing:border-box;">
            <div id="nasDeleteConfirmError" style="display:none;color:#e74c3c;font-size:12px;margin-bottom:12px;"></div>
            <div style="display:flex;gap:10px;justify-content:flex-end;">
                <button type="button" class="adm-btn" onclick="closeNasDisableModal()">Cancel</button>
                <button type="button" class="adm-btn adm-btn-danger" onclick="nasDisableFreshConfirm()">Delete &amp; Disable NAS</button>
            </div>
        </div>

    </div>
</div>
@endsection
