@extends('layouts.nova.content-layout')

@section('page-content')
<div class="max-w-4xl space-y-8">

    {{-- ── Header ── --}}
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-white">Early-Stage Growth System</h2>
            <p class="mt-1 text-sm text-neutral-400">
                A non-deceptive layer that keeps Nova feeling alive when uploads are sparse.
                Toggle via <code class="text-sky-400">.env</code> — no deployment required for mode changes.
            </p>
        </div>

        {{-- Cache flush button --}}
        <form method="POST" action="{{ route('admin.early-growth.cache.flush') }}" onsubmit="return confirm('Flush all EGS caches?')">
            @csrf
            @method('DELETE')
            <button type="submit"
                class="inline-flex items-center gap-2 rounded-lg bg-neutral-800 px-4 py-2 text-sm font-medium text-white
                       hover:bg-neutral-700 border border-neutral-700 transition">
                🔄 Flush EGS Cache
            </button>
        </form>
    </div>

    @if(session('success'))
    <div class="rounded-lg bg-green-900/40 border border-green-700 px-4 py-3 text-green-300 text-sm">
        {{ session('success') }}
    </div>
    @endif

    {{-- ── Live Status ── --}}
    <div class="rounded-lg border border-neutral-800 bg-neutral-900 p-6 space-y-4">
        <h3 class="text-sm font-semibold uppercase tracking-widest text-neutral-400">Live Status</h3>

        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
            @php
            $pill = fn(bool $on) => $on
                ? '<span class="inline-block rounded-full bg-emerald-800 px-3 py-0.5 text-xs font-semibold text-emerald-200">ON</span>'
                : '<span class="inline-block rounded-full bg-neutral-700 px-3 py-0.5 text-xs font-semibold text-neutral-400">OFF</span>';
            @endphp

            <div class="rounded-lg bg-neutral-800/50 p-4">
                <p class="text-xs text-neutral-500 mb-1">System</p>
                {!! $pill($status['enabled']) !!}
            </div>
            <div class="rounded-lg bg-neutral-800/50 p-4">
                <p class="text-xs text-neutral-500 mb-1">Mode</p>
                <span class="text-sm font-mono font-semibold {{ $mode === 'aggressive' ? 'text-amber-400' : ($mode === 'light' ? 'text-sky-400' : 'text-neutral-400') }}">
                    {{ strtoupper($mode) }}
                </span>
            </div>
            <div class="rounded-lg bg-neutral-800/50 p-4">
                <p class="text-xs text-neutral-500 mb-1">Adaptive Window</p>
                {!! $pill($status['adaptive_window']) !!}
            </div>
            <div class="rounded-lg bg-neutral-800/50 p-4">
                <p class="text-xs text-neutral-500 mb-1">Grid Filler</p>
                {!! $pill($status['grid_filler']) !!}
            </div>
            <div class="rounded-lg bg-neutral-800/50 p-4">
                <p class="text-xs text-neutral-500 mb-1">Spotlight</p>
                {!! $pill($status['spotlight']) !!}
            </div>
            <div class="rounded-lg bg-neutral-800/50 p-4">
                <p class="text-xs text-neutral-500 mb-1">Activity Layer</p>
                {!! $pill($status['activity_layer']) !!}
            </div>
        </div>
    </div>

    {{-- ── Upload Stats ── --}}
    <div class="rounded-lg border border-neutral-800 bg-neutral-900 p-6 space-y-4">
        <h3 class="text-sm font-semibold uppercase tracking-widest text-neutral-400">Upload Metrics</h3>
        <div class="grid grid-cols-2 gap-4">
            <div class="rounded-lg bg-neutral-800/50 p-4">
                <p class="text-xs text-neutral-500 mb-1">Uploads / day (7-day avg)</p>
                <p class="text-2xl font-bold text-white">{{ number_format($uploads_per_day, 1) }}</p>
            </div>
            <div class="rounded-lg bg-neutral-800/50 p-4">
                <p class="text-xs text-neutral-500 mb-1">Active trending window</p>
                <p class="text-2xl font-bold text-white">{{ $window_days }}d</p>
            </div>
        </div>
    </div>

    {{-- ── Activity Signals ── --}}
    @if($status['activity_layer'] && !empty($activity))
    <div class="rounded-lg border border-neutral-800 bg-neutral-900 p-6 space-y-3">
        <h3 class="text-sm font-semibold uppercase tracking-widest text-neutral-400">Activity Signals</h3>
        <ul class="space-y-2">
            @foreach($activity as $signal)
            <li class="text-sm text-neutral-200">{{ $signal['icon'] }} {{ $signal['text'] }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    {{-- ── ENV Toggles ── --}}
    <div class="rounded-lg border border-neutral-800 bg-neutral-900 p-6 space-y-4">
        <h3 class="text-sm font-semibold uppercase tracking-widest text-neutral-400">ENV Configuration</h3>
        <p class="text-xs text-neutral-500">Edit <code class="text-sky-400">.env</code> to change these values. Run <code class="text-sky-400">php artisan config:clear</code> after changes.</p>
        <div class="overflow-hidden rounded-lg border border-neutral-800">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-neutral-800 bg-neutral-800/40">
                        <th class="px-4 py-2 text-left text-xs text-neutral-400">Variable</th>
                        <th class="px-4 py-2 text-left text-xs text-neutral-400">Current Value</th>
                        <th class="px-4 py-2 text-left text-xs text-neutral-400">Effect</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($env_toggles as $t)
                <tr class="border-b border-neutral-800/50">
                    <td class="px-4 py-2 font-mono text-sky-400">{{ $t['key'] }}</td>
                    <td class="px-4 py-2 font-mono text-white">{{ $t['current'] }}</td>
                    <td class="px-4 py-2 text-neutral-400">
                        @switch($t['key'])
                            @case('NOVA_EARLY_GROWTH_ENABLED') Master switch. Set to <code>false</code> to disable entire system. @break
                            @case('NOVA_EARLY_GROWTH_MODE') <code>off</code> / <code>light</code> / <code>aggressive</code> @break
                            @case('NOVA_EGS_ADAPTIVE_WINDOW') Widen trending window when uploads low. @break
                            @case('NOVA_EGS_GRID_FILLER') Backfill page-1 grids to 12 items. @break
                            @case('NOVA_EGS_SPOTLIGHT') Daily-rotating curated picks. @break
                            @case('NOVA_EGS_ACTIVITY_LAYER') Real activity summary badges. @break
                        @endswitch
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <div class="rounded-lg bg-neutral-800/30 border border-neutral-700 p-4 text-xs text-neutral-400 space-y-1">
            <p><strong class="text-white">To enable (light mode):</strong></p>
            <pre class="text-sky-400 font-mono">NOVA_EARLY_GROWTH_ENABLED=true
NOVA_EARLY_GROWTH_MODE=light</pre>
            <p class="mt-2"><strong class="text-white">To disable instantly:</strong></p>
            <pre class="text-sky-400 font-mono">NOVA_EARLY_GROWTH_ENABLED=false</pre>
        </div>
    </div>

    {{-- ── Cache Keys Reference ── --}}
    <div class="rounded-lg border border-neutral-800 bg-neutral-900 p-6 space-y-3">
        <h3 class="text-sm font-semibold uppercase tracking-widest text-neutral-400">Cache Keys</h3>
        <ul class="space-y-1">
            @foreach($cache_keys as $key)
            <li class="font-mono text-xs text-neutral-400">{{ $key }}</li>
            @endforeach
        </ul>
        <p class="text-xs text-neutral-600">Use the "Flush EGS Cache" button above to clear these in one action.</p>
    </div>

</div>
@endsection