@extends('admin.layouts.app')

@section('title', '系统参数配置')

@section('content')
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50">
            <div>
                <h2 class="text-lg font-bold text-gray-800">修改系统运行参数</h2>
                <p class="text-xs text-gray-500 mt-1">保存后会同步更新 Redis 缓存，前台实时生效。</p>
            </div>
        </div>

        <div class="mx-6 mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 text-sm">
            通用系统参数页仅维护低敏公共配置；SMTP、VIP 支付、微信机器人、AI 机器人等站长专属敏感项已迁移到各自独立页面。
        </div>

        <div class="p-6">
            <form action="{{ route('admin.system.update') }}" method="POST">
                @csrf
                @method('PUT')

                <div class="space-y-6 max-w-2xl">
                    @forelse ($params as $alias => $body)
                        @php
                            $fieldValue = (string) $body;
                            $shouldUseTextarea = strlen($fieldValue) > 50 || str_contains($fieldValue, "\n") || str_contains($fieldValue, '<');
                            $isMaxLevelField = $alias === 'maxlevel';
                            $isSuperLevelField = $alias === 'superlevel';
                        @endphp
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">
                                {{ $descriptions[$alias] ?? $alias }}
                                <span class="text-gray-400 font-normal ml-2">[{{ $alias }}]</span>
                            </label>
                            @if ($isMaxLevelField)
                                <p class="mb-2 text-xs text-gray-500">修改后会自动同步管理员级别为“最高等级 + 1”。</p>
                                <input type="number" min="1" step="1" id="system-maxlevel" name="{{ $alias }}" value="{{ $fieldValue }}"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border">
                            @elseif ($isSuperLevelField)
                                <p class="mb-2 text-xs text-gray-500">该值会随“用户最高可达等级”自动计算，仅用于展示当前结果。</p>
                                <input type="number" id="system-superlevel" value="{{ $fieldValue }}"
                                    class="w-full border-gray-200 rounded-md shadow-sm p-2.5 bg-gray-100 border text-gray-600"
                                    readonly>
                            @elseif ($shouldUseTextarea)
                                <textarea name="{{ $alias }}" rows="4"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border whitespace-pre-wrap">{{ $fieldValue }}</textarea>
                            @else
                                <input type="text" name="{{ $alias }}" value="{{ $fieldValue }}"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border">
                            @endif
                        </div>
                    @empty
                        <div class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-6 text-sm text-gray-500">
                            当前没有可在通用系统页维护的公共参数，请前往对应专属配置页处理敏感模块参数。
                        </div>
                    @endforelse
                </div>

                <div class="mt-8 pt-6 border-t flex space-x-3">
                    <button type="submit"
                        class="px-6 py-2 bg-indigo-600 text-white rounded-md font-bold hover:bg-indigo-700 shadow-sm transition">保存并发布</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const maxLevelInput = document.querySelector('#system-maxlevel');
            const superLevelInput = document.querySelector('#system-superlevel');

            if (!maxLevelInput || !superLevelInput) {
                return;
            }

            const syncSuperLevel = () => {
                const maxLevel = Number.parseInt(maxLevelInput.value ?? '', 10);

                if (Number.isNaN(maxLevel) || maxLevel < 1) {
                    superLevelInput.value = '';

                    return;
                }

                superLevelInput.value = String(maxLevel + 1);
            };

            maxLevelInput.addEventListener('input', syncSuperLevel);
            syncSuperLevel();
        });
    </script>
@endsection