@extends('admin.layouts.master')

@section('css')
    <style>
        .table-row-zero {
            opacity: 0.6;
        }

        .badge-module {
            font-size: 0.7rem;
            padding: 2px 6px;
        }

        .stats-card {
            border-radius: 10px;
            transition: transform 0.2s;
        }

        .stats-card:hover {
            transform: translateY(-2px);
        }

        .table-actions .btn {
            padding: 4px 8px;
            font-size: 0.75rem;
        }

        .search-highlight {
            background-color: #fff3cd;
        }

        #tables_list tbody tr {
            cursor: pointer;
            transition: background-color 0.2s;
        }

        #tables_list tbody tr:hover {
            background-color: #e3f2fd !important;
        }

        .size-bar {
            height: 6px;
            border-radius: 3px;
            background: linear-gradient(90deg, #28a745, #ffc107, #dc3545);
        }

        .protected-badge {
            font-size: 0.65rem;
        }
    </style>
@endsection

@include('admin.helper.tittle', ['title' => 'إدارة جداول قاعدة البيانات'])

@section('content')
    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card stats-card bg-primary text-white">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 opacity-75">إجمالي الجداول</h6>
                            <h3 class="mb-0 fw-bold">{{ count($tables) }}</h3>
                        </div>
                        <x-lucide-database width="32" height="32" class="opacity-50" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stats-card bg-success text-white">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 opacity-75">إجمالي السجلات</h6>
                            <h3 class="mb-0 fw-bold">{{ number_format(array_sum(array_column($tables, 'rows'))) }}</h3>
                        </div>
                        <x-lucide-list width="32" height="32" class="opacity-50" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stats-card bg-warning text-dark">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 opacity-75">حجم قاعدة البيانات</h6>
                            <h3 class="mb-0 fw-bold">{{ number_format(array_sum(array_column($tables, 'size_mb')), 2) }} MB
                            </h3>
                        </div>
                        <x-lucide-hard-drive width="32" height="32" class="opacity-50" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stats-card bg-info text-white">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 opacity-75">إجمالي الأعمدة</h6>
                            <h3 class="mb-0 fw-bold">{{ number_format(array_sum(array_column($tables, 'columns'))) }}</h3>
                        </div>
                        <x-lucide-columns width="32" height="32" class="opacity-50" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Table Card -->
    <div class="card">
        <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <x-lucide-table width="20" height="20" class="me-2" />
                جميع جداول قاعدة البيانات
            </h5>
            <div class="d-flex gap-2">
                <input type="text" id="table_search" class="form-control form-control-sm" placeholder="بحث عن جدول..."
                    style="width: 200px;">
                <select id="filter_rows" class="form-select form-select-sm" style="width: 150px;">
                    <option value="">كل الجداول</option>
                    <option value="empty">فارغة فقط</option>
                    <option value="has_data">بها بيانات</option>
                    <option value="large">كبيرة (>10K)</option>
                </select>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0" id="tables_list">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 50px;">#</th>
                            <th>اسم الجدول</th>
                            <th style="width: 120px;" class="text-center">السجلات</th>
                            <th style="width: 100px;" class="text-center">الحجم</th>
                            <th style="width: 80px;" class="text-center">الأعمدة</th>
                            <th style="width: 100px;" class="text-center">المحرك</th>
                            <th style="width: 260px;" class="text-center">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $protectedTables = [
                                'users',
                                'migrations',
                                'password_resets',
                                'password_reset_tokens',
                                'personal_access_tokens',
                                'permissions',
                                'roles',
                                'model_has_permissions',
                                'model_has_roles',
                                'role_has_permissions',
                                'failed_jobs',
                                'jobs',
                                'job_batches',
                            ];
                        @endphp
                        @foreach ($tables as $index => $table)
                            @php
                                $isProtected = in_array($table['name'], $protectedTables);
                            @endphp
                            <tr data-table="{{ $table['name'] }}" data-rows="{{ $table['rows'] }}"
                                class="{{ $table['rows'] == 0 ? 'table-row-zero' : '' }}">
                                <td class="text-muted">{{ $index + 1 }}</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <strong class="me-2">{{ $table['name'] }}</strong>
                                        @if ($isProtected)
                                            <span class="badge bg-danger protected-badge" title="جدول محمي">
                                                <x-lucide-shield width="20" height="20" />
                                            </span>
                                        @endif
                                        @if (str_starts_with($table['name'], 'order'))
                                            <span class="badge bg-success badge-module">Orders</span>
                                        @elseif(str_starts_with($table['name'], 'user'))
                                            <span class="badge bg-primary badge-module">Users</span>
                                        @elseif(str_starts_with($table['name'], 'payment'))
                                            <span class="badge bg-warning text-dark badge-module">Payments</span>
                                        @elseif(str_starts_with($table['name'], 'wallet'))
                                            <span class="badge bg-info badge-module">Wallet</span>
                                        @elseif(str_starts_with($table['name'], 'credit'))
                                            <span class="badge bg-secondary badge-module">Credit</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span
                                        class="badge {{ $table['rows'] > 0 ? ($table['rows'] > 10000 ? 'bg-danger' : 'bg-success') : 'bg-secondary' }}">
                                        {{ number_format($table['rows']) }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="{{ $table['size_mb'] > 10 ? 'text-danger fw-bold' : '' }}">
                                        {{ $table['size_mb'] }} MB
                                    </span>
                                </td>
                                <td class="text-center">{{ $table['columns'] }}</td>
                                <td class="text-center">
                                    <small class="text-muted">{{ $table['engine'] }}</small>
                                </td>
                                <td class="text-center table-actions">
                                    <a href="{{ route('admin.developer.database.show', $table['name']) }}"
                                        class="btn btn-info btn-sm" title="عرض التفاصيل">
                                        <x-lucide-eye width="20" height="20" />
                                    </a>

                                    <a href="{{ route('admin.developer.database.export', $table['name']) }}"
                                        class="btn btn-primary btn-sm" title="تصدير JSON">
                                        <x-lucide-download width="20" height="20" />
                                    </a>

                                    @if ($table['rows'] > 0 && !$isProtected)
                                        <button type="button" class="btn btn-warning btn-sm truncate-btn"
                                            data-table="{{ $table['name'] }}" data-rows="{{ $table['rows'] }}"
                                            title="تفريغ الجدول">
                                            <x-lucide-eraser width="20" height="20" />
                                        </button>
                                    @endif

                                    @if (!$isProtected)
                                        <button type="button" class="btn btn-danger btn-sm drop-btn"
                                            data-table="{{ $table['name'] }}" title="حذف الجدول">
                                            <x-lucide-trash-2 width="20" height="20" />
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Confirmation Modal -->
    <div class="modal fade" id="confirmModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">
                        <x-lucide-alert-triangle width="20" height="20" class="me-2" />
                        <span id="modal_title">تأكيد الإجراء</span>
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <p id="modal_message" class="mb-0"></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">اكتب اسم الجدول للتأكيد:</label>
                        <input type="text" id="confirm_input" class="form-control" placeholder="أدخل اسم الجدول">
                        <small class="text-muted">يجب كتابة اسم الجدول بالضبط: <code id="expected_table"></code></small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="button" class="btn btn-danger" id="confirm_action" disabled>
                        <x-lucide-check width="20" height="20" class="me-1" /> تأكيد
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
            let currentAction = '';
            let currentTable = '';
            const confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));

            // Search functionality
            document.getElementById('table_search').addEventListener('input', function() {
                filterTables();
            });

            // Filter by rows
            document.getElementById('filter_rows').addEventListener('change', function() {
                filterTables();
            });

            function filterTables() {
                const search = document.getElementById('table_search').value.toLowerCase();
                const filter = document.getElementById('filter_rows').value;

                document.querySelectorAll('#tables_list tbody tr').forEach(row => {
                    const tableName = row.dataset.table.toLowerCase();
                    const rows = parseInt(row.dataset.rows);
                    let show = tableName.includes(search);

                    if (show && filter) {
                        switch (filter) {
                            case 'empty':
                                show = rows === 0;
                                break;
                            case 'has_data':
                                show = rows > 0;
                                break;
                            case 'large':
                                show = rows > 10000;
                                break;
                        }
                    }

                    row.style.display = show ? '' : 'none';
                });
            }

            // Row click to view details
            document.querySelectorAll('#tables_list tbody tr').forEach(row => {
                row.addEventListener('click', function(e) {
                    if (!e.target.closest('button') && !e.target.closest('a')) {
                        window.location.href = "{{ route('admin.developer.database') }}/" + this
                            .dataset.table;
                    }
                });
            });

            // Truncate button click
            document.querySelectorAll('.truncate-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    currentAction = 'truncate';
                    currentTable = this.dataset.table;
                    const rows = this.dataset.rows;

                    document.getElementById('modal_title').textContent = 'تفريغ الجدول';
                    document.getElementById('modal_message').innerHTML =
                        '<strong class="text-danger">تحذير!</strong> سيتم حذف جميع البيانات (' +
                        Number(rows).toLocaleString() + ' سجل) من الجدول <strong>"' +
                        currentTable + '"</strong>. هذا الإجراء لا يمكن التراجع عنه!';
                    document.getElementById('expected_table').textContent = currentTable;
                    document.getElementById('confirm_input').value = '';
                    document.getElementById('confirm_action').disabled = true;
                    document.getElementById('confirm_action').classList.remove('btn-danger');
                    document.getElementById('confirm_action').classList.add('btn-warning');
                    document.getElementById('confirm_action').innerHTML =
                        `<x-lucide-eraser width="20" height="20" class="me-1" /> تفريغ الجدول`;

                    confirmModal.show();
                });
            });

            // Drop button click
            document.querySelectorAll('.drop-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    currentAction = 'drop';
                    currentTable = this.dataset.table;

                    document.getElementById('modal_title').textContent = 'حذف الجدول';
                    document.getElementById('modal_message').innerHTML =
                        '<strong class="text-danger">خطر!</strong> سيتم حذف الجدول <strong>"' +
                        currentTable +
                        '"</strong> نهائياً مع جميع بياناته. هذا الإجراء لا يمكن التراجع عنه!';
                    document.getElementById('expected_table').textContent = currentTable;
                    document.getElementById('confirm_input').value = '';
                    document.getElementById('confirm_action').disabled = true;
                    document.getElementById('confirm_action').classList.remove('btn-warning');
                    document.getElementById('confirm_action').classList.add('btn-danger');
                    document.getElementById('confirm_action').innerHTML =
                        `<x-lucide-trash-2 width="20" height="20" class="me-1" /> حذف الجدول`;

                    confirmModal.show();
                });
            });

            // Confirm input validation
            document.getElementById('confirm_input').addEventListener('input', function() {
                document.getElementById('confirm_action').disabled = this.value !== currentTable;
            });

            // Confirm action
            document.getElementById('confirm_action').addEventListener('click', async function() {
                const url = "{{ url('admin/developer/database') }}/" + currentTable + "/" +
                    currentAction;

                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        }
                    });

                    const data = await response.json();
                    confirmModal.hide();

                    if (data.success) {
                        toastr.success(data.msg);
                        if (currentAction === 'drop') {
                            document.querySelector(`tr[data-table="${currentTable}"]`).remove();
                        } else {
                            setTimeout(() => location.reload(), 1000);
                        }
                    } else {
                        toastr.error(data.msg);
                    }
                } catch (error) {
                    confirmModal.hide();
                    toastr.error('حدث خطأ غير متوقع');
                }
            });
        });
    </script>
@endsection