@php
    use Illuminate\Support\Facades\Schema;
    $s3PoolBuckets = $s3_pool_buckets ?? collect();
    $storageMode = old('listing_storage_mode', $general_setting->listing_storage_mode ?? 'local');
    $defaultPoolEnabled = ($storageMode === 's3') || ! empty($general_setting->s3_access_key_id);
    $s3PoolEnabled = (bool) old('s3_pool_enabled', $general_setting->s3_pool_enabled ?? $defaultPoolEnabled);
    $errorThreshold = (int) old('s3_pool_error_threshold', $general_setting->s3_pool_error_threshold ?? 2);
    $poolTableReady = Schema::hasTable('s3_pool_buckets');
    if ($s3PoolBuckets->isEmpty() && ! empty($general_setting->s3_access_key_id)) {
        $legacyBucket = (object) [
            'name' => 'Principal',
            'access_key_id' => $general_setting->s3_access_key_id,
            'bucket' => $general_setting->s3_bucket,
            'region' => $general_setting->s3_region ?? 'auto',
            'endpoint' => $general_setting->s3_endpoint,
            'public_url' => $general_setting->s3_public_url,
            'use_path_style' => (bool) ($general_setting->s3_use_path_style ?? true),
            'priority' => 10,
            'monthly_bandwidth_limit_mb' => 0,
            'is_enabled' => true,
        ];
        $bucketRows = collect([$legacyBucket]);
    } else {
        $bucketRows = $s3PoolBuckets->isNotEmpty() ? $s3PoolBuckets : collect([null]);
    }
@endphp

<style>
    .s3-pool-panel { border: 1px solid #dbe3ef; border-radius: 8px; background: #f8fafc; }
    .s3-pool-panel__toolbar {
        display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end;
        padding: 10px 12px; background: #fff; border-bottom: 1px solid #e5e7eb; border-radius: 8px 8px 0 0;
    }
    .s3-pool-panel__toolbar .crancy__item-label { font-size: 12px; margin-bottom: 2px; }
    .s3-pool-panel__toolbar .crancy__item-input { height: 34px; padding: 4px 8px; font-size: 13px; }
    #s3PoolAccordion .accordion-button { padding: 8px 12px; font-size: 13px; min-height: auto; }
    #s3PoolAccordion .accordion-body { padding: 10px 12px; }
    #s3PoolAccordion .accordion-item { margin: 0 8px 6px; border-radius: 6px; border: 1px solid #e8ecf1; }
    .s3-pool-accordion-item__title-wrap { display: flex; flex-direction: column; align-items: flex-start; text-align: left; flex: 1; min-width: 0; }
    .s3-pool-accordion-item__meta { font-size: 11px; color: #64748b; }
    .s3-pool-accordion-item__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-right: 6px; }
</style>

<div class="s3-pool-panel" id="s3-pool-panel">
    <div class="s3-pool-panel__toolbar">
        <div>
            <h5 class="mb-0" style="font-size:15px;font-weight:700;">{{ __('translate.S3 R2 bucket pool') }}</h5>
            <small class="text-muted">{{ __('translate.S3 pool help') }}</small>
        </div>
        @if ($poolTableReady)
            <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" name="s3_pool_enabled" id="s3_pool_enabled" value="1" {{ $s3PoolEnabled ? 'checked' : '' }}>
                <label class="form-check-label" for="s3_pool_enabled">{{ __('translate.S3 pool enable') }}</label>
            </div>
            <div>
                <label class="crancy__item-label" for="s3_pool_error_threshold">{{ __('translate.S3 pool error threshold') }}</label>
                <input class="crancy__item-input" type="number" min="1" max="20" name="s3_pool_error_threshold" id="s3_pool_error_threshold" value="{{ $errorThreshold }}" style="width:70px;">
            </div>
            <button type="button" class="crancy-btn" id="s3-pool-add-bucket" style="padding:6px 12px;font-size:13px;">
                <i class="fas fa-plus"></i> {{ __('translate.S3 pool add bucket') }}
            </button>
        @endif
    </div>

    @if (! $poolTableReady)
        <div class="alert alert-warning m-2 py-2">{{ __('translate.S3 pool migration required') }}</div>
    @else
        <div class="accordion" id="s3PoolAccordion">
            @foreach ($bucketRows as $index => $bucket)
                @include('generalsetting::partials.s3_pool_bucket_row', ['bucket' => $bucket, 'index' => $index])
            @endforeach
        </div>
        <template id="s3-pool-bucket-row-template">
            @include('generalsetting::partials.s3_pool_bucket_row', ['bucket' => null, 'index' => '__INDEX__'])
        </template>
    @endif
</div>

@push('js_section')
<script>
(function () {
    var defaultLabel = @json(__('translate.S3 pool bucket'));
    var resetConfirm = @json(__('translate.S3 pool reset monthly usage confirm'));
    var resetSuccess = @json(__('translate.S3 pool monthly usage reset success'));
    var activeLabel = @json(__('translate.Active'));
    var limitReachedLabel = @json(__('translate.S3 pool limit reached'));
    var autoDisabledLabel = @json(__('translate.S3 pool auto disabled'));
    var unlimitedLabel = @json(__('translate.Unlimited'));

    function csrfToken() {
        var meta = document.querySelector('meta[name="csrf-token"]');
        if (meta && meta.getAttribute('content')) {
            return meta.getAttribute('content');
        }

        var tokenInput = document.querySelector('#cloudflare-cdn input[name="_token"]')
            || document.querySelector('input[name="_token"]');

        return tokenInput ? tokenInput.value : '';
    }

    function parseJsonResponse(response) {
        return response.text().then(function (text) {
            try {
                return JSON.parse(text);
            } catch (e) {
                var fallback = 'HTTP ' + response.status;
                if (response.status === 419) {
                    fallback = 'CSRF token invalid. Reload the page and try again.';
                } else if (response.status === 403) {
                    fallback = 'Access denied. Check admin permissions for Settings.';
                }

                return {
                    success: false,
                    message: fallback,
                };
            }
        });
    }

    function updateS3PoolUsageUi(row, data) {
        if (!row || !data) return;

        var usageValue = row.querySelector('.js-s3-pool-usage-value');
        if (usageValue) {
            usageValue.textContent = data.monthly_mb + ' / ' + data.monthly_limit_label;
        }

        var badgesWrap = row.querySelector('.js-s3-pool-status-badges');
        if (!badgesWrap) return;

        var statusBadge = badgesWrap.querySelector('.js-s3-pool-badge-status');
        if (statusBadge) statusBadge.remove();

        if (data.is_operational) {
            badgesWrap.insertAdjacentHTML('afterbegin', '<span class="badge bg-success js-s3-pool-badge-status">' + activeLabel + '</span>');
        } else if (data.is_auto_disabled) {
            badgesWrap.insertAdjacentHTML('afterbegin', '<span class="badge bg-danger js-s3-pool-badge-status">' + autoDisabledLabel + '</span>');
        } else if (data.is_over_limit) {
            badgesWrap.insertAdjacentHTML('afterbegin', '<span class="badge bg-warning text-dark js-s3-pool-badge-status">' + limitReachedLabel + '</span>');
        }

        var usageBadge = badgesWrap.querySelector('.js-s3-pool-badge-usage');
        if (usageBadge) {
            if (data.is_unlimited) {
                usageBadge.textContent = data.monthly_mb + ' MB · ' + unlimitedLabel;
            } else {
                usageBadge.textContent = data.monthly_mb + '/' + data.monthly_limit_label;
            }
        }
    }

    function resetS3PoolUsage(button) {
        var url = button.getAttribute('data-reset-url');
        var token = csrfToken();

        if (!url) {
            window.alert('Error');
            return;
        }

        if (!token) {
            window.alert('CSRF token missing. Reload the page and try again.');
            return;
        }

        if (!window.confirm(resetConfirm)) {
            return;
        }

        var row = button.closest('[data-s3-pool-row]');
        var body = new FormData();
        body.append('_token', token);
        button.disabled = true;

        fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': token,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: body,
            credentials: 'same-origin',
        })
            .then(function (response) {
                return parseJsonResponse(response).then(function (data) {
                    return { ok: response.ok, data: data };
                });
            })
            .then(function (result) {
                if (!result.ok || !result.data.success) {
                    window.alert(result.data.message || 'Error');
                    return;
                }

                updateS3PoolUsageUi(row, payload);
                window.alert(payload.message || resetSuccess);
            })
            .catch(function () {
                window.alert('Error');
            })
            .finally(function () {
                button.disabled = false;
            });
    }

    function reindexS3Pool() {
        var accordion = document.getElementById('s3PoolAccordion');
        if (!accordion) return;
        accordion.querySelectorAll('[data-s3-pool-row]').forEach(function (item, index) {
            item.querySelectorAll('[name^="s3_pool_buckets"]').forEach(function (input) {
                input.name = input.name.replace(/s3_pool_buckets\[\d+\]/, 's3_pool_buckets[' + index + ']');
                if (input.id) input.id = input.id.replace(/_\d+$/, '_' + index);
            });
            var collapseId = 's3-pool-collapse-' + index;
            var headingId = 's3-pool-heading-' + index;
            var collapse = item.querySelector('.accordion-collapse');
            var button = item.querySelector('.accordion-button');
            var header = item.querySelector('.accordion-header');
            if (collapse) { collapse.id = collapseId; collapse.setAttribute('aria-labelledby', headingId); }
            if (header) header.id = headingId;
            if (button) {
                button.setAttribute('data-bs-target', '#' + collapseId);
                button.setAttribute('aria-controls', collapseId);
            }
            var title = item.querySelector('.s3-pool-accordion-item__title');
            var nameInput = item.querySelector('.js-s3-pool-name-input');
            if (title) title.textContent = (nameInput && nameInput.value.trim()) || (defaultLabel + ' ' + (index + 1));
            var removeBtn = item.querySelector('.js-s3-pool-remove-row');
            if (removeBtn) removeBtn.style.display = accordion.querySelectorAll('[data-s3-pool-row]').length > 1 ? '' : 'none';
        });
    }

    document.addEventListener('click', function (e) {
        var resetBtn = e.target.closest('.js-s3-pool-reset-usage');
        if (resetBtn) {
            e.preventDefault();
            e.stopPropagation();
            resetS3PoolUsage(resetBtn);
        }
    });

    function init() {
        var addBtn = document.getElementById('s3-pool-add-bucket');
        var accordion = document.getElementById('s3PoolAccordion');
        var template = document.getElementById('s3-pool-bucket-row-template');
        if (!accordion) return;

        if (addBtn && template) {
        addBtn.addEventListener('click', function () {
            var index = accordion.querySelectorAll('[data-s3-pool-row]').length;
            accordion.insertAdjacentHTML('beforeend', template.innerHTML.replace(/__INDEX__/g, String(index)));
            reindexS3Pool();
            var item = accordion.querySelectorAll('[data-s3-pool-row]')[index];
            if (item && typeof bootstrap !== 'undefined') {
                var c = item.querySelector('.accordion-collapse');
                if (c) bootstrap.Collapse.getOrCreateInstance(c, { toggle: false }).show();
            }
        });

        accordion.addEventListener('click', function (e) {
            var btn = e.target.closest('.js-s3-pool-remove-row');
            if (!btn) return;
            var row = btn.closest('[data-s3-pool-row]');
            if (row && accordion.querySelectorAll('[data-s3-pool-row]').length > 1) {
                row.remove();
                reindexS3Pool();
            }
        });

        accordion.addEventListener('input', function (e) {
            if (e.target.closest('.js-s3-pool-name-input')) reindexS3Pool();
        });
        }

        reindexS3Pool();
    }

    document.addEventListener('DOMContentLoaded', init);
})();
</script>
@endpush