@extends('admin.layouts.app')

@section('title', 'SQL 战术沙盒探针')

@section('content')

    <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded text-red-700 shadow-sm text-sm">
        <p class="font-bold flex items-center">
            <span class="mr-2">⚠️</span> 顶级安全警告
        </p>
        <p class="mt-1 ml-6">
            此操作直接连通底层 MySQL 数据库。为杜绝《删库跑路》等生产事故，本控制台已硬编码拦截过滤：只会放行以 <code>SELECT</code>, <code>SHOW</code>,
            <code>EXPLAIN</code> 等起手的<strong>纯只读语句</strong>。所有的增删改一律阻断。
        </p>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-6">
        <div class="p-6">
            <form action="{{ route('admin.sql.execute') }}" method="POST">
                @csrf

                <div class="mb-4">
                    <label class="block text-sm font-bold text-gray-700 mb-2">输入原始只读 SQL 语句</label>
                    <textarea name="query" rows="5" required placeholder="SELECT * FROM users ORDER BY id DESC LIMIT 10;"
                        class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-4 bg-gray-50 border font-mono resize-y">{{ old('query', $query ?? '') }}</textarea>
                </div>

                <div class="flex justify-end pt-2">
                    <button type="submit"
                        class="px-6 py-2 bg-slate-800 text-white rounded-md font-bold hover:bg-slate-900 shadow-sm transition flex items-center">
                        <span>🔥 探 针 发 射</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- 结果展示区 --}}
    @isset($error)
        <div
            class="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl shadow-sm mb-6 overflow-x-auto font-mono text-sm whitespace-pre-wrap">
            {{ $error }}
        </div>
        @endif

        @isset($results)
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="bg-gray-50 px-6 py-3 border-b flex justify-between items-center text-sm font-bold text-gray-700">
                    <span>查询结果 (共 {{ count($results) }} 条)</span>
                </div>

                <div class="overflow-x-auto p-4 max-h-[600px] custom-scrollbar overflow-y-auto">
                    @if (empty($results))
                        <div class="text-center text-gray-400 py-10 font-bold">SQL 执行成功，但返回了空结果集 (0 rows)</div>
                    @else
                        <table class="w-full text-left border-collapse text-sm">
                            <thead>
                                <tr class="border-b-2 border-indigo-500">
                                    @foreach ($columns as $col)
                                        <th
                                            class="p-3 font-bold text-gray-600 whitespace-nowrap bg-indigo-50/50 sticky top-0 z-10 shadow-sm">
                                            {{ $col }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 font-mono">
                                @foreach ($results as $row)
                                    <tr class="hover:bg-amber-50 transition">
                                        @foreach ($columns as $col)
                                            <td class="p-3 whitespace-nowrap text-gray-700">{{ $row->$col ?? 'NULL' }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
            </div>
        @endisset

        <style>
            /* 针对该表格页加深一点滚动条以便查看超长字段 */
            .custom-scrollbar::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }

            .custom-scrollbar::-webkit-scrollbar-thumb {
                background-color: #94a3b8;
                border-radius: 4px;
            }

            .custom-scrollbar::-webkit-scrollbar-track {
                background-color: #f1f5f9;
            }
        </style>

    @endsection