@extends('layout.super-admin-app')

@section('title', 'Document & Storage Manager')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
    <style>
        .storage-kpi-card {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            transition: all 0.25s ease;
            background: #ffffff;
        }
        .storage-kpi-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }
        .kpi-icon-box {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        .category-pill {
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .category-pill.active {
            background-color: #0d6efd !important;
            color: #ffffff !important;
            border-color: #0d6efd !important;
        }
        .file-icon {
            font-size: 20px;
            vertical-align: middle;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('super-admin.dashboard') }}">Dashboard</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Document & Storage Manager
        </li>
    </ol>
    <div class="ms-auto d-flex align-items-center gap-2">
        <span class="badge bg-dark px-3 py-2 text-white">
            <i class="ri-cloud-line me-1"></i> Storage Disk: {{ strtoupper($disk) }}
        </span>
        <button type="button" class="btn btn-sm btn-outline-primary" id="btnRefreshStats" onclick="refreshTable();">
            <i class="ri-refresh-line me-1"></i> Refresh Stats
        </button>
    </div>
</div>

<div class="app-body">
    <!-- Top KPI Cards -->
    <div class="row g-3 mb-4">
        <!-- Tenants Count -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card storage-kpi-card h-100">
                <div class="card-body d-flex align-items-center">
                    <div class="kpi-icon-box bg-primary-subtle text-primary me-3">
                        <i class="ri-building-line"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-medium">SaaS Tenants</div>
                        <h4 class="mb-0 fw-bold">{{ $totalTenants }}</h4>
                        <div class="small text-success mt-1">
                            <i class="ri-check-line"></i> {{ $activeTenants }} Active Subscriptions
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Cloud Storage -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card storage-kpi-card h-100">
                <div class="card-body d-flex align-items-center">
                    <div class="kpi-icon-box bg-info-subtle text-info me-3">
                        <i class="ri-cloud-fill"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-medium">Cloud Storage Used</div>
                        <h4 class="mb-0 fw-bold">{{ $formattedTotalStorage }}</h4>
                        <div class="small text-muted mt-1">
                            <i class="ri-shield-check-line text-success"></i> Cloudflare R2 Private Bucket
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Documents -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card storage-kpi-card h-100">
                <div class="card-body d-flex align-items-center">
                    <div class="kpi-icon-box bg-success-subtle text-success me-3">
                        <i class="ri-file-cloud-line"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-medium">Total Documents</div>
                        <h4 class="mb-0 fw-bold">{{ $totalFilesCount }} Files</h4>
                        <div class="small text-muted mt-1">
                            <i class="ri-folders-line"></i> Partitioned across tenants
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Expiring Plans -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card storage-kpi-card h-100">
                <div class="card-body d-flex align-items-center">
                    <div class="kpi-icon-box {{ $expiringSoon > 0 || $expiredCount > 0 ? 'bg-warning-subtle text-warning' : 'bg-secondary-subtle text-secondary' }} me-3">
                        <i class="ri-alarm-warning-line"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-medium">Plan Expiry Alert</div>
                        <h4 class="mb-0 fw-bold">{{ $expiringSoon }} Soon / {{ $expiredCount }} Expired</h4>
                        <div class="small {{ $expiringSoon > 0 ? 'text-warning fw-semibold' : 'text-muted' }} mt-1">
                            @if($expiringSoon > 0)
                                <i class="ri-time-line"></i> Action required within 15 days
                            @else
                                <i class="ri-checkbox-circle-line text-success"></i> All plans healthy
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Row -->
    <div class="row gx-3 mb-3">
        <div class="col-md-4 col-sm-6 col-12">
            <label class="form-label fw-bold" for="filter_tenant_id">
                <i class="ri-filter-3-line text-primary me-1"></i> Filter by Customer
            </label>
            <select id="filter_tenant_id" class="form-select select2">
                <option value="">-- All Customers --</option>
                @foreach($allTenants as $t)
                    <option value="{{ $t->id }}">{{ $t->company_name }} ({{ $t->company_code }})</option>
                @endforeach
            </select>
        </div>
    </div>

    <!-- Main Reporting Table Card -->
    <div class="card mb-4">
        <div class="card-header bg-white border-bottom py-3 d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0 fw-bold">
                <i class="ri-dashboard-3-line text-primary me-2"></i> Tenant-wise Plan & Storage Consumption
            </h5>
            <span class="text-muted small">Real-time status synced with Cloudflare R2</span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table m-0 align-middle table-hover" id="datatableDocumentManager">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 50px;">#</th>
                            <th>Tenant / Company</th>
                            <th>Current Plan</th>
                            <th>Plan Expiry & Status</th>
                            <th style="min-width: 170px;">Storage Consumed</th>
                            <th>Total Files</th>
                            <th>Vehicle Limit</th>
                            <th style="width: 130px;" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Tenant Files & Storage Explorer -->
<div class="modal fade" id="tenantFilesModal" tabindex="-1" aria-labelledby="tenantFilesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <div>
                    <h5 class="modal-title fw-bold" id="tenantFilesModalLabel">
                        <i class="ri-folder-shield-2-line text-primary me-2"></i>
                        <span id="modalTenantName">Tenant Documents</span>
                    </h5>
                    <div class="small text-muted mt-1">
                        Company Code: <span class="badge bg-secondary" id="modalTenantCode">...</span> |
                        Assigned Plan: <strong id="modalTenantPlan">...</strong> |
                        Plan Expires: <span class="text-dark fw-semibold" id="modalTenantExpiry">...</span>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <!-- Modal Top Storage Summary Bar -->
                <div class="card bg-light border-0 mb-4 p-3 rounded-3">
                    <div class="row align-items-center">
                        <div class="col-md-4 mb-2 mb-md-0">
                            <div class="text-muted small">Storage Consumed</div>
                            <div class="fs-5 fw-bold text-dark">
                                <span id="modalUsedStorage">0 KB</span> / <span class="text-muted" id="modalAllocatedStorage">0 GB</span>
                            </div>
                        </div>
                        <div class="col-md-5 mb-2 mb-md-0">
                            <div class="d-flex justify-content-between small text-muted mb-1">
                                <span>Usage Quota</span>
                                <span id="modalPercentageText">0%</span>
                            </div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-primary" id="modalProgressBar" role="progressbar" style="width: 0%;"></div>
                            </div>
                        </div>
                        <div class="col-md-3 text-md-end">
                            <div class="text-muted small">Total Stored Files</div>
                            <div class="fs-5 fw-bold text-primary">
                                <span id="modalTotalFiles">0</span> Files
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Category Filters -->
                <div class="d-flex flex-wrap align-items-center gap-2 mb-3" id="categoryPillsContainer">
                    <span class="text-muted small fw-bold me-2"><i class="ri-filter-3-line"></i> Category Filter:</span>
                    <button type="button" class="btn btn-sm btn-outline-secondary category-pill active" data-category="all">
                        All Files (<span id="countAllFiles">0</span>)
                    </button>
                    <!-- Dynamically populated categories -->
                </div>

                <!-- Files Table -->
                <div class="table-responsive">
                    <table class="table table-sm table-hover align-middle border" id="tenantFilesTable">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 40px;">#</th>
                                <th>File Name</th>
                                <th>Category</th>
                                <th>File Size</th>
                                <th>Uploaded At</th>
                                <th style="width: 140px;" class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody id="tenantFilesTableBody">
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">Loading documents...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer bg-light py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script>
        let dataTable;
        let currentTenantFiles = [];

        $(document).ready(function() {
            dataTable = $('#datatableDocumentManager').DataTable({
                processing: true,
                serverSide: true,
                stateSave: false,
                responsive: true,
                ajax: {
                    url: '{{ route("super-admin.document-manager.getData") }}',
                    data: function(d) {
                        d.tenant_id = $('#filter_tenant_id').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false },
                    { data: 'tenant_info', name: 'company_name' },
                    { data: 'plan_info', name: 'plan_name' },
                    { data: 'expiry_info', name: 'expiry_info', orderable: false },
                    { data: 'storage_usage', name: 'storage_usage', orderable: false },
                    { data: 'files_badge', name: 'files_badge', orderable: false },
                    { data: 'vehicle_usage', name: 'vehicle_usage', orderable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center' },
                ],
                order: [[1, 'asc']]
            });

            $('#filter_tenant_id').on('change', function() {
                dataTable.draw();
            });

            // Inspect Tenant Files Click
            $(document).on('click', '.view-tenant-files-btn', function() {
                const tenantId = $(this).data('id');
                const tenantName = $(this).data('name');
                const tenantCode = $(this).data('code');
                openTenantFilesModal(tenantId, tenantName, tenantCode);
            });

            // Category Filter Click inside modal
            $(document).on('click', '.category-pill', function() {
                $('.category-pill').removeClass('active');
                $(this).addClass('active');
                const selectedCat = $(this).data('category');
                filterFilesTable(selectedCat);
            });
        });

        function refreshTable() {
            $('#btnRefreshStats').prop('disabled', true).html('<i class="ri-loader-4-line ri-spin me-1"></i> Refreshing...');
            dataTable.ajax.reload(function() {
                $('#btnRefreshStats').prop('disabled', false).html('<i class="ri-refresh-line me-1"></i> Refresh Stats');
            }, false);
        }

        function openTenantFilesModal(tenantId, tenantName, tenantCode) {
            $('#modalTenantName').text(tenantName);
            $('#modalTenantCode').text(tenantCode);
            $('#modalTenantPlan').text('Loading...');
            $('#modalTenantExpiry').text('...');
            $('#modalUsedStorage').text('...');
            $('#modalAllocatedStorage').text('...');
            $('#modalPercentageText').text('...');
            $('#modalProgressBar').css('width', '0%');
            $('#modalTotalFiles').text('0');

            $('#categoryPillsContainer').html(`
                <span class="text-muted small fw-bold me-2"><i class="ri-filter-3-line"></i> Category Filter:</span>
                <button type="button" class="btn btn-sm btn-outline-secondary category-pill active" data-category="all">
                    All Files (<span id="countAllFiles">...</span>)
                </button>
            `);

            $('#tenantFilesTableBody').html(`
                <tr>
                    <td colspan="6" class="text-center py-4 text-muted">
                        <i class="ri-loader-4-line ri-spin fs-4 d-block mb-2 text-primary"></i>
                        Fetching private storage documents from Cloudflare R2...
                    </td>
                </tr>
            `);

            const modal = new bootstrap.Modal(document.getElementById('tenantFilesModal'));
            modal.show();

            $.ajax({
                url: '{{ url("super-admin/document-manager/tenant") }}/' + tenantId,
                type: 'GET',
                dataType: 'json',
                success: function(res) {
                    if (res.success) {
                        const t = res.tenant;
                        $('#modalTenantPlan').text(t.plan_name);
                        $('#modalTenantExpiry').text(t.plan_expires_at);
                        $('#modalUsedStorage').text(t.total_used);
                        $('#modalAllocatedStorage').text(t.allocated_storage);
                        $('#modalPercentageText').text(t.percentage + '%');
                        $('#modalProgressBar').css('width', Math.max(3, t.percentage) + '%');
                        $('#modalTotalFiles').text(t.total_files);
                        $('#countAllFiles').text(t.total_files);

                        // Category Pills
                        let pillsHtml = `
                            <span class="text-muted small fw-bold me-2"><i class="ri-filter-3-line"></i> Category Filter:</span>
                            <button type="button" class="btn btn-sm btn-outline-secondary category-pill active" data-category="all">
                                All Files (${t.total_files})
                            </button>
                        `;

                        if (res.categories && res.categories.length > 0) {
                            res.categories.forEach(cat => {
                                pillsHtml += `
                                    <button type="button" class="btn btn-sm btn-outline-secondary category-pill" data-category="${cat.slug}">
                                        ${cat.name} (${cat.count} - ${cat.formatted_size})
                                    </button>
                                `;
                            });
                        }
                        $('#categoryPillsContainer').html(pillsHtml);

                        currentTenantFiles = res.files || [];
                        renderFilesTable(currentTenantFiles);
                    } else {
                        $('#tenantFilesTableBody').html(`
                            <tr>
                                <td colspan="6" class="text-center py-4 text-danger">Failed to load tenant documents.</td>
                            </tr>
                        `);
                    }
                },
                error: function(err) {
                    $('#tenantFilesTableBody').html(`
                        <tr>
                            <td colspan="6" class="text-center py-4 text-danger">An error occurred while loading files from storage.</td>
                        </tr>
                    `);
                }
            });
        }

        function filterFilesTable(category) {
            if (category === 'all') {
                renderFilesTable(currentTenantFiles);
            } else {
                const filtered = currentTenantFiles.filter(f => f.category_slug === category);
                renderFilesTable(filtered);
            }
        }

        function renderFilesTable(files) {
            if (!files || files.length === 0) {
                $('#tenantFilesTableBody').html(`
                    <tr>
                        <td colspan="6" class="text-center py-4 text-muted">
                            <i class="ri-inbox-line fs-3 d-block mb-1 text-secondary"></i>
                            No documents found in this category.
                        </td>
                    </tr>
                `);
                return;
            }

            let html = '';
            files.forEach((file, index) => {
                let iconClass = 'ri-file-text-line text-secondary';
                if (['pdf'].includes(file.extension)) {
                    iconClass = 'ri-file-pdf-line text-danger';
                } else if (['jpg', 'jpeg', 'png', 'webp', 'bmp'].includes(file.extension)) {
                    iconClass = 'ri-image-line text-success';
                } else if (['xls', 'xlsx', 'csv'].includes(file.extension)) {
                    iconClass = 'ri-file-excel-line text-success';
                } else if (['doc', 'docx'].includes(file.extension)) {
                    iconClass = 'ri-file-word-line text-primary';
                }

                html += `
                    <tr>
                        <td class="text-muted small">${index + 1}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="${iconClass} file-icon fs-5 me-2"></i>
                                <div>
                                    <div class="fw-medium text-dark text-break" style="max-width: 320px;">${file.name}</div>
                                    <div class="small text-muted font-monospace">${file.path}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border">${file.category}</span>
                        </td>
                        <td class="fw-semibold text-secondary small">${file.formatted_size}</td>
                        <td class="text-muted small">${file.uploaded_at}</td>
                        <td class="text-center">
                            <div class="btn-group btn-group-sm">
                                <a href="${file.url}" target="_blank" class="btn btn-outline-primary" title="Preview / Download Document">
                                    <i class="ri-eye-line me-1"></i> View
                                </a>
                                <button type="button" class="btn btn-outline-danger" onclick="deleteDocument('${file.path}')" title="Delete orphaned file">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#tenantFilesTableBody').html(html);
        }

        function deleteDocument(filePath) {
            if (!confirm('Are you sure you want to delete this document from Cloudflare R2?\n\nFile: ' + filePath)) {
                return;
            }

            $.ajax({
                url: '{{ route("super-admin.document-manager.destroy") }}',
                type: 'DELETE',
                data: {
                    path: filePath,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(res) {
                    if (res.success) {
                        alert(res.message);
                        currentTenantFiles = currentTenantFiles.filter(f => f.path !== filePath);
                        const activeCat = $('.category-pill.active').data('category') || 'all';
                        filterFilesTable(activeCat);
                        dataTable.ajax.reload(null, false);
                    } else {
                        alert(res.message || 'Error deleting file.');
                    }
                },
                error: function(err) {
                    alert('Failed to delete file. Please check server logs.');
                }
            });
        }
    </script>
@endpush