@php
    use App\Models\S3PoolBucket;
    $rowIndex = is_numeric($index) ? (int) $index : 0;
    $prefix = 's3_pool_buckets['.$rowIndex.']';
    $collapseId = 's3-pool-collapse-'.$rowIndex;
    $headingId = 's3-pool-heading-'.$rowIndex;
    $bucketModel = ($bucket ?? null) instanceof S3PoolBucket ? $bucket : null;
    $headerTitle = trim((string) ($bucket->name ?? '')) !== ''
        ? $bucket->name
        : __('translate.S3 pool bucket').' '.($rowIndex + 1);
@endphp
<div class="accordion-item s3-pool-accordion-item" data-s3-pool-row>
    <h2 class="accordion-header" id="{{ $headingId }}">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}" aria-expanded="false" aria-controls="{{ $collapseId }}">
            <span class="s3-pool-accordion-item__title-wrap">
                <span class="s3-pool-accordion-item__title">{{ $headerTitle }}</span>
                @if (! empty($bucket?->bucket))
                    <span class="s3-pool-accordion-item__meta">{{ $bucket->bucket }}</span>
                @endif
            </span>
            @if ($bucketModel)
                <span class="s3-pool-accordion-item__badges">
                    @if ($bucketModel->isOperational())
                        <span class="badge bg-success">{{ __('translate.Active') }}</span>
                    @elseif ($bucketModel->is_auto_disabled)
                        <span class="badge bg-danger">{{ __('translate.S3 pool auto disabled') }}</span>
                    @elseif ($bucketModel->isOverMonthlyLimit())
                        <span class="badge bg-warning text-dark">{{ __('translate.S3 pool limit reached') }}</span>
                    @endif
                    @if (! $bucketModel->isUnlimitedBandwidth())
                        <span class="badge bg-light text-dark border">{{ number_format($bucketModel->monthly_bytes_used / 1024 / 1024, 1) }}/{{ $bucketModel->monthlyLimitLabel() }}</span>
                    @else
                        <span class="badge bg-light text-dark border">{{ number_format($bucketModel->monthly_bytes_used / 1024 / 1024, 1) }} MB · {{ __('translate.Unlimited') }}</span>
                    @endif
                </span>
            @endif
        </button>
    </h2>
    <div id="{{ $collapseId }}" class="accordion-collapse collapse" aria-labelledby="{{ $headingId }}" data-bs-parent="#s3PoolAccordion">
        <div class="accordion-body">
            @if ($bucketModel?->id)
                <input type="hidden" name="{{ $prefix }}[id]" value="{{ $bucketModel->id }}">
            @endif
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="crancy__item-label">{{ __('translate.S3 pool bucket name') }}</label>
                    <input class="crancy__item-input js-s3-pool-name-input" type="text" name="{{ $prefix }}[name]" value="{{ old('s3_pool_buckets.'.$rowIndex.'.name', $bucket->name ?? '') }}" placeholder="R2 principal">
                </div>
                <div class="col-md-4">
                    <label class="crancy__item-label">{{ __('translate.S3 Access Key ID') }} *</label>
                    <input class="crancy__item-input" type="text" name="{{ $prefix }}[access_key_id]" value="{{ old('s3_pool_buckets.'.$rowIndex.'.access_key_id', $bucket->access_key_id ?? '') }}" autocomplete="off">
                </div>
                <div class="col-md-4">
                    <label class="crancy__item-label">{{ __('translate.S3 Secret Access Key') }} {{ ! $bucketModel?->id ? '*' : '' }}</label>
                    <input class="crancy__item-input" type="password" name="{{ $prefix }}[secret_access_key]" value="" placeholder="{{ __('translate.Leave blank to keep current') }}" autocomplete="new-password">
                </div>
                <div class="col-md-4">
                    <label class="crancy__item-label">{{ __('translate.S3 Bucket') }} *</label>
                    <input class="crancy__item-input" type="text" name="{{ $prefix }}[bucket]" value="{{ old('s3_pool_buckets.'.$rowIndex.'.bucket', $bucket->bucket ?? '') }}">
                </div>
                <div class="col-md-4">
                    <label class="crancy__item-label">{{ __('translate.S3 Region') }}</label>
                    <input class="crancy__item-input" type="text" name="{{ $prefix }}[region]" value="{{ old('s3_pool_buckets.'.$rowIndex.'.region', $bucket->region ?? 'auto') }}" placeholder="auto">
                </div>
                <div class="col-md-4">
                    <label class="crancy__item-label">{{ __('translate.S3 Endpoint') }} *</label>
                    <input class="crancy__item-input" type="url" name="{{ $prefix }}[endpoint]" value="{{ old('s3_pool_buckets.'.$rowIndex.'.endpoint', $bucket->endpoint ?? '') }}" placeholder="https://xxx.r2.cloudflarestorage.com">
                </div>
                <div class="col-md-3">
                    <label class="crancy__item-label">{{ __('translate.S3 pool monthly limit mb') }}</label>
                    <input class="crancy__item-input" type="number" min="-1" name="{{ $prefix }}[monthly_bandwidth_limit_mb]" value="{{ old('s3_pool_buckets.'.$rowIndex.'.monthly_bandwidth_limit_mb', $bucket->monthly_bandwidth_limit_mb ?? 0) }}" placeholder="-1">
                    <small class="text-muted">{{ __('translate.Pool monthly limit help') }}</small>
                </div>
                <div class="col-md-3">
                    <label class="crancy__item-label">{{ __('translate.S3 pool priority') }}</label>
                    <input class="crancy__item-input" type="number" min="1" max="9999" name="{{ $prefix }}[priority]" value="{{ old('s3_pool_buckets.'.$rowIndex.'.priority', $bucket->priority ?? (($rowIndex + 1) * 10)) }}">
                </div>
                <div class="col-md-3">
                    <label class="crancy__item-label">{{ __('translate.S3 Path Style Endpoint') }}</label>
                    <select class="form-select crancy__item-input" name="{{ $prefix }}[use_path_style]">
                        <option value="1" {{ ($bucket->use_path_style ?? true) ? 'selected' : '' }}>{{ __('translate.Enable') }}</option>
                        <option value="0" {{ isset($bucket) && ! $bucket->use_path_style ? 'selected' : '' }}>{{ __('translate.Disable') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="crancy__item-label">{{ __('translate.Status') }}</label>
                    <select class="form-select crancy__item-input" name="{{ $prefix }}[is_enabled]">
                        <option value="1" {{ ($bucket->is_enabled ?? true) ? 'selected' : '' }}>{{ __('translate.Enable') }}</option>
                        <option value="0" {{ isset($bucket) && ! $bucket->is_enabled ? 'selected' : '' }}>{{ __('translate.Disable') }}</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="crancy__item-label">{{ __('translate.S3 Public URL') }}</label>
                    <input class="crancy__item-input" type="url" name="{{ $prefix }}[public_url]" value="{{ old('s3_pool_buckets.'.$rowIndex.'.public_url', $bucket->public_url ?? '') }}" placeholder="https://cdn.example.com (optional)">
                    <small class="text-muted">{{ __('translate.S3 pool public url optional') }}</small>
                </div>
                @if ($bucketModel)
                    <div class="col-md-6">
                        <small class="text-muted d-block mt-4 js-s3-pool-usage-summary">
                            {{ __('translate.S3 pool errors') }}: <strong>{{ $bucketModel->consecutive_errors }}/{{ $bucketModel->total_errors }}</strong>
                            · {{ __('translate.S3 pool monthly usage') }}: <strong class="js-s3-pool-usage-value">{{ number_format($bucketModel->monthly_bytes_used / 1024 / 1024, 2) }} / {{ $bucketModel->monthlyLimitLabel() }}</strong>
                            @if ($bucketModel->last_health_check_at)
                                · {{ __('translate.Last check') }}: {{ $bucketModel->last_health_check_at->format('d.m.Y H:i') }} ({{ $bucketModel->last_health_status }})
                            @endif
                        </small>
                    </div>
                @endif
                @if ($bucketModel?->is_auto_disabled)
                    <div class="col-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="{{ $prefix }}[clear_auto_disabled]" value="1" id="s3_clear_auto_{{ $rowIndex }}">
                            <label class="form-check-label" for="s3_clear_auto_{{ $rowIndex }}">{{ __('translate.S3 pool re enable') }}</label>
                        </div>
                    </div>
                @endif
                <div class="col-12 text-end d-flex flex-wrap justify-content-end align-items-center gap-2">
                    @if ($bucketModel?->id)
                        <button type="button"
                            class="btn btn-outline-secondary btn-sm js-s3-pool-reset-usage"
                            data-bucket-id="{{ $bucketModel->id }}"
                            data-reset-url="{{ route('admin.s3-pool-reset-bucket-usage', $bucketModel->id) }}"
                            title="{{ __('translate.S3 pool reset monthly usage') }}">
                            <i class="fas fa-rotate-left"></i> {{ __('translate.S3 pool reset monthly usage') }}
                        </button>
                    @endif
                    <button type="button" class="btn btn-outline-danger btn-sm js-s3-pool-remove-row">
                        <i class="fas fa-trash-alt"></i> {{ __('translate.Remove') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>