@extends('admin.layouts.master')

@section('css')
    <style>
        .info-card {
            border-radius: 10px;
        }

        .column-list {
            max-height: 400px;
            overflow-y: auto;
        }

        .column-item {
            padding: 8px 12px;
            border-bottom: 1px solid #eee;
            font-family: monospace;
            font-size: 0.85rem;
        }

        .column-item:hover {
            background-color: #f8f9fa;
        }

        .column-type {
            color: #6c757d;
            font-size: 0.75rem;
        }

        .badge-pk {
            background-color: #ffc107;
            color: #000;
        }

        .badge-fk {
            background-color: #17a2b8;
        }

        .badge-uni {
            background-color: #6f42c1;
        }

        .badge-ai {
            background-color: #28a745;
        }

        .sample-data-table {
            font-size: 0.8rem;
        }

        .sample-data-table th {
            position: sticky;
            top: 0;
            background: #f8f9fa;
            z-index: 1;
        }

        .sample-data-table td {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sample-data-table td:hover {
            white-space: normal;
            word-break: break-all;
        }

        .null-value {
            color: #999;
            font-style: italic;
        }

        .danger-zone {
            border: 2px solid #dc3545;
            border-radius: 10px;
        }
    </style>
@endsection

@include('admin.helper.tittle', ['title' => 'جدول: ' . $tableName])

@section('content')
    <!-- Breadcrumb & Header -->
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-2">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.developer.database') }}">
                            <x-lucide-database width="20" height="20" class="me-1" /> جداول قاعدة البيانات
                        </a>
                    </li>
                    <li class="breadcrumb-item active">{{ $tableName }}</li>
                </ol>
            </nav>
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="mb-0">
                    <x-lucide-table width="20" height="20" class="text-primary me-2" />
                    {{ $tableName }}
                    <span class="badge bg-primary ms-2">{{ number_format($rowCount) }} سجل</span>
                </h4>
                <div>
                    <a href="{{ route('admin.developer.database.export', $tableName) }}" class="btn btn-primary btn-sm">
                        <x-lucide-download width="20" height="20" class="me-1" /> تصدير JSON
                    </a>
                    <a href="{{ route('admin.developer.database') }}" class="btn btn-secondary btn-sm">
                        <x-lucide-arrow-right width="20" height="20" class="me-1" /> العودة
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Stats -->
    <div class="row mb-4">
        <div class="col-md-2">
            <div class="card info-card bg-primary text-white text-center py-3">
                <h3 class="mb-0">{{ number_format($rowCount) }}</h3>
                <small>السجلات</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card info-card bg-info text-white text-center py-3">
                <h3 class="mb-0">{{ count($columns) }}</h3>
                <small>الأعمدة</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card info-card bg-success text-white text-center py-3">
                <h3 class="mb-0">{{ count($indexes) }}</h3>
                <small>الفهارس</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card info-card bg-warning text-dark text-center py-3">
                <h3 class="mb-0">{{ count($foreignKeys) }}</h3>
                <small>العلاقات</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card info-card bg-secondary text-white text-center py-3">
                <h3 class="mb-0">{{ $tableStats->size_mb ?? 0 }} MB</h3>
                <small>الحجم</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card info-card bg-dark text-white text-center py-3">
                <h3 class="mb-0">{{ $tableStats->ENGINE ?? 'N/A' }}</h3>
                <small>المحرك</small>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Columns Info -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0">
                        <x-lucide-columns width="20" height="20" class="me-2" />
                        الأعمدة ({{ count($columns) }})
                    </h6>
                </div>
                <div class="card-body p-0 column-list">
                    @foreach ($columns as $index => $column)
                        <div class="column-item d-flex justify-content-between align-items-center">
                            <div>
                                <span class="text-muted me-2">{{ $index + 1 }}.</span>
                                <strong>{{ $column->Field }}</strong>
                                <div class="column-type">{{ $column->Type }}</div>
                            </div>
                            <div>
                                @if ($column->Key === 'PRI')
                                    <span class="badge badge-pk" title="Primary Key">PK</span>
                                @elseif($column->Key === 'MUL')
                                    <span class="badge badge-fk" title="Foreign Key">FK</span>
                                @elseif($column->Key === 'UNI')
                                    <span class="badge badge-uni" title="Unique">UNI</span>
                                @endif
                                @if (str_contains($column->Extra, 'auto_increment'))
                                    <span class="badge badge-ai" title="Auto Increment">AI</span>
                                @endif
                                @if ($column->Null === 'YES')
                                    <span class="badge bg-secondary" title="Nullable">NULL</span>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Indexes -->
            @if (count($indexes) > 0)
                <div class="card mb-4">
                    <div class="card-header bg-success text-white">
                        <h6 class="mb-0">
                            <x-lucide-key width="20" height="20" class="me-2" />
                            الفهارس ({{ count($indexes) }})
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>الاسم</th>
                                    <th>العمود</th>
                                    <th>النوع</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($indexes as $index)
                                    <tr>
                                        <td><code>{{ $index->Key_name }}</code></td>
                                        <td>{{ $index->Column_name }}</td>
                                        <td>
                                            @if (!$index->Non_unique)
                                                <span class="badge bg-warning text-dark">Unique</span>
                                            @else
                                                <span class="badge bg-secondary">Index</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            <!-- Foreign Keys -->
            @if (count($foreignKeys) > 0)
                <div class="card mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h6 class="mb-0">
                            <x-lucide-link width="20" height="20" class="me-2" />
                            العلاقات ({{ count($foreignKeys) }})
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>العمود</th>
                                    <th>يرتبط بـ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($foreignKeys as $fk)
                                    <tr>
                                        <td><code>{{ $fk->COLUMN_NAME }}</code></td>
                                        <td>
                                            <a
                                                href="{{ route('admin.developer.database.show', $fk->REFERENCED_TABLE_NAME) }}">
                                                {{ $fk->REFERENCED_TABLE_NAME }}.{{ $fk->REFERENCED_COLUMN_NAME }}
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        <!-- Sample Data -->
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <x-lucide-list width="20" height="20" class="me-2" />
                        عينة من البيانات (أول 20 سجل)
                    </h6>
                </div>
                <div class="card-body p-0">
                    @if ($sampleData->count() > 0)
                        <div class="table-responsive" style="max-height: 500px; overflow: auto;">
                            <table class="table table-bordered table-sm sample-data-table mb-0">
                                <thead>
                                    <tr>
                                        @foreach ($columns as $column)
                                            <th>{{ $column->Field }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($sampleData as $row)
                                        <tr>
                                            @foreach ($columns as $column)
                                                @php $field = $column->Field; @endphp
                                                <td title="{{ $row->$field }}">
                                                    @if (is_null($row->$field))
                                                        <span class="null-value">NULL</span>
                                                    @else
                                                        {{ \Illuminate\Support\Str::limit($row->$field, 50) }}
                                                    @endif
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-info m-3">
                            <x-lucide-info width="20" height="20" class="me-2" />
                            هذا الجدول فارغ.
                        </div>
                    @endif
                </div>
            </div>

            <!-- Danger Zone -->
            <div class="card danger-zone">
                <div class="card-header bg-danger text-white">
                    <h6 class="mb-0">
                        <x-lucide-alert-triangle width="20" height="20" class="me-2" />
                        منطقة الخطر
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="border rounded p-3 mb-3 mb-md-0">
                                <h6><x-lucide-eraser width="20" height="20" class="text-warning me-2" /> تفريغ الجدول</h6>
                                <p class="text-muted small mb-2">
                                    سيتم حذف جميع البيانات ({{ number_format($rowCount) }} سجل) مع الحفاظ على هيكل الجدول.
                                </p>
                                @if ($rowCount > 0)
                                    <button type="button" class="btn btn-warning btn-sm truncate-btn"
                                        data-table="{{ $tableName }}" data-rows="{{ $rowCount }}">
                                        <x-lucide-eraser width="20" height="20" class="me-1" /> تفريغ الجدول
                                    </button>
                                @else
                                    <button type="button" class="btn btn-secondary btn-sm" disabled>
                                        <x-lucide-check width="20" height="20" class="me-1" /> الجدول فارغ بالفعل
                                    </button>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="border rounded p-3 border-danger">
                                <h6><x-lucide-trash-2 width="20" height="20" class="text-danger me-2" /> حذف الجدول</h6>
                                <p class="text-muted small mb-2">
                                    سيتم حذف الجدول نهائياً مع جميع بياناته. لا يمكن التراجع!
                                </p>
                                <button type="button" class="btn btn-danger btn-sm drop-btn"
                                    data-table="{{ $tableName }}">
                                    <x-lucide-trash-2 width="20" height="20" class="me-1" /> حذف الجدول
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </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>{{ $tableName }}</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;
            const tableName = '{{ $tableName }}';
            let currentAction = '';
            const confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));

            // Truncate button click
            document.querySelector('.truncate-btn')?.addEventListener('click', function() {
                currentAction = 'truncate';
                const rows = this.dataset.rows;

                document.getElementById('modal_title').textContent = 'تفريغ الجدول';
                document.getElementById('modal_message').innerHTML =
                    '<strong class="text-danger">تحذير!</strong> سيتم حذف جميع البيانات (' +
                    Number(rows).toLocaleString() + ' سجل) من الجدول <strong>"' +
                    tableName + '"</strong>. هذا الإجراء لا يمكن التراجع عنه!';
                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.querySelector('.drop-btn')?.addEventListener('click', function() {
                currentAction = 'drop';

                document.getElementById('modal_title').textContent = 'حذف الجدول';
                document.getElementById('modal_message').innerHTML =
                    '<strong class="text-danger">خطر!</strong> سيتم حذف الجدول <strong>"' +
                    tableName + '"</strong> نهائياً مع جميع بياناته. هذا الإجراء لا يمكن التراجع عنه!';
                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 !== tableName;
            });

            // Confirm action
            document.getElementById('confirm_action').addEventListener('click', async function() {
                const url = "{{ url('admin/developer/database') }}/" + tableName + "/" + 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);
                        setTimeout(() => {
                            window.location.href = "{{ route('admin.developer.database') }}";
                        }, 1500);
                    } else {
                        toastr.error(data.msg);
                    }
                } catch (error) {
                    confirmModal.hide();
                    toastr.error('حدث خطأ غير متوقع');
                }
            });
        });
    </script>
@endsection