@extends('dashboard.app')

@section('page_title', 'Admin Settings')
@section('page_subtitle', 'System configuration and feature flags.')

@section('dashboard_content')
    @if (session('status'))
        <div class="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-200">
            {{ session('status') }}
        </div>
    @endif

    <div class="grid gap-6 lg:grid-cols-3">
        @foreach ([
            ['label' => 'Billing mode', 'value' => ($settings['billing_mode'] ?? config('dewemoji.billing.mode')), 'note' => isset($settings['billing_mode']) ? 'DB' : 'Env'],
            ['label' => 'Rate limit', 'value' => config('dewemoji.rate_limit_enabled') ? 'On' : 'Off', 'note' => 'Global'],
            ['label' => 'Public access', 'value' => ((bool) ($settings['public_enforce'] ?? config('dewemoji.public_access.enforce_whitelist'))) ? 'Whitelist' : 'Open', 'note' => 'Origin policy'],
        ] as $card)
            <div class="rounded-2xl glass-card p-5">
                <div class="text-xs uppercase tracking-[0.2em] text-gray-400">{{ $card['label'] }}</div>
                <div class="mt-3 text-3xl font-semibold text-white">{{ $card['value'] }}</div>
                <div class="mt-2 text-sm text-gray-400">{{ $card['note'] }}</div>
            </div>
        @endforeach
    </div>

    <div class="mt-8 grid gap-6 lg:grid-cols-2">
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Feature flags</div>
            <div class="mt-2 text-lg font-semibold text-white">System toggles</div>
            <div class="mt-6 space-y-4 text-sm text-gray-300">
                @foreach ([
                    ['label' => 'Maintenance mode', 'desc' => 'Temporarily block public API access', 'state' => ((bool) ($settings['maintenance_enabled'] ?? false)) ? 'On' : 'Off'],
                    ['label' => 'Extension verification', 'desc' => 'Require GCM token for extension calls', 'state' => config('dewemoji.extension_verification.enabled') ? 'On' : 'Off'],
                    ['label' => 'Metrics', 'desc' => 'Allow internal metrics endpoints', 'state' => config('dewemoji.metrics.enabled') ? 'On' : 'Off'],
                ] as $row)
                    <div class="flex items-center justify-between rounded-xl border border-white/10 px-4 py-3 theme-surface">
                        <div>
                            <div class="font-semibold text-white">{{ $row['label'] }}</div>
                            <div class="text-xs text-gray-400">{{ $row['desc'] }}</div>
                        </div>
                        <span class="rounded-full {{ $row['state'] === 'On' ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-500/20 dark:text-emerald-200' : 'bg-slate-200 text-slate-700 dark:bg-white/10 dark:text-gray-200' }} px-3 py-1 text-xs font-semibold">
                            {{ $row['state'] }}
                        </span>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Public access</div>
            <div class="mt-2 text-lg font-semibold text-white">Allowlist configuration</div>
            <form method="POST" action="{{ route('dashboard.admin.settings.update') }}" class="mt-5 space-y-4">
                @csrf
                <label class="block text-sm text-gray-300">
                    Billing mode
                    <select name="billing_mode" class="mt-2 w-full rounded-xl border border-white/10 px-3 py-2 text-sm text-gray-200 theme-surface">
                        <option value="sandbox" @selected(($settings['billing_mode'] ?? config('dewemoji.billing.mode')) === 'sandbox')>Sandbox</option>
                        <option value="live" @selected(($settings['billing_mode'] ?? config('dewemoji.billing.mode')) === 'live')>Live</option>
                    </select>
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-300">
                    <input type="checkbox" name="maintenance_enabled" value="1" class="rounded border-white/20 bg-transparent"
                           @checked((bool) ($settings['maintenance_enabled'] ?? false))>
                    Maintenance mode
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-300">
                    <input type="checkbox" name="public_enforce" value="1" class="rounded border-white/20 bg-transparent"
                           @checked((bool) ($settings['public_enforce'] ?? config('dewemoji.public_access.enforce_whitelist')))>
                    Enforce whitelist
                </label>
                <label class="block text-sm text-gray-300">
                    Allowed origins
                    <textarea name="public_origins" rows="4" class="mt-2 w-full rounded-xl border border-white/10 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 theme-surface" placeholder="https://dewemoji.com, https://app.dewemoji.com">{{ isset($settings['public_origins']) ? implode(', ', (array) $settings['public_origins']) : '' }}</textarea>
                </label>
                <label class="block text-sm text-gray-300">
                    Extension IDs
                    <input name="public_extension_ids" class="mt-2 w-full rounded-xl border border-white/10 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 theme-surface" placeholder="chrome-extension-id, edge-extension-id"
                           value="{{ isset($settings['public_extension_ids']) ? implode(', ', (array) $settings['public_extension_ids']) : '' }}" />
                </label>
                <label class="block text-sm text-gray-300">
                    Hourly limit
                    <input name="public_hourly_limit" class="mt-2 w-full rounded-xl border border-white/10 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 theme-surface" placeholder="5000"
                           value="{{ $settings['public_hourly_limit'] ?? '' }}" />
                </label>
                <button type="submit" class="w-full rounded-xl bg-white/10 border border-white/10 px-4 py-2 text-sm font-semibold text-white hover:bg-white/20 transition-colors">
                    Save settings
                </button>
                <p class="text-xs text-gray-400">Changes update the settings store immediately.</p>
            </form>
        </div>
    </div>
@endsection