{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="page-header d-flex justify-between align-center flex-wrap gap-lg">
        <div>
            <h1 class="page-title">S3 Bucket Management</h1>
            <p class="page-subtitle">Link, validate, browse, edit, and upload against linked S3 buckets in the restored PR19 flow.</p>
        </div>
    </div>

    <div class="alert alert-info mb-xl">
        <i class="fas fa-info-circle"></i>
        <div>
            <strong>About linked buckets</strong>
            <p class="mb-0">Ursa validates read/list/write access, supports folder creation and uploads on writable buckets, and exposes the same linked-bucket browser used by the manifest generator.</p>
        </div>
    </div>

    <div class="card mb-xl">
        <div class="d-flex justify-between align-center flex-wrap gap-lg">
            <div>
                <h3 class="card-title"><i class="fas fa-plus"></i> Link a Bucket</h3>
                <p class="text-muted mb-0">Link a new S3 bucket to browse inputs, upload data, and compose manifests.</p>
            </div>
            <div class="d-flex gap-sm flex-wrap">
                <button class="btn btn-primary" type="button" onclick="openLinkBucketModal()">
                    <i class="fas fa-plus"></i> Link New Bucket
                </button>
                <a href="/manifests" class="btn btn-outline">
                    <i class="fas fa-list-check"></i> Manifest Generator
                </a>
            </div>
        </div>
    </div>

    {% if actor.is_admin %}
    <div class="card mb-xl">
        <div class="d-flex justify-between align-center flex-wrap gap-lg">
            <div>
                <h3 class="card-title"><i class="fas fa-list"></i> List Buckets</h3>
                <p class="text-muted mb-0">Return the equivalent of <code>aws s3 ls</code> for the active AWS profile and feed the selected bucket into the link flow.</p>
            </div>
            <button class="btn btn-outline" type="button" onclick="listAdminBuckets()">
                <i class="fas fa-cloud"></i> List Buckets
            </button>
        </div>
        <p class="text-muted mt-md mb-0">AWS profile in use: <code>{{ admin_bucket_profile }}</code></p>
        <div id="admin-bucket-results" class="bucket-discovery-results d-none mt-lg"></div>
    </div>
    {% endif %}

    <div class="card mb-xl">
        <h3 class="card-title"><i class="fas fa-database"></i> Linked Buckets</h3>

        {% if buckets %}
        <div class="bucket-list">
            {% for bucket in buckets %}
            <div class="bucket-card {% if bucket.is_validated %}bucket-valid{% else %}bucket-invalid{% endif %}">
                <div class="bucket-header">
                    <div class="bucket-info">
                        <div class="bucket-name">
                            <a href="https://s3.console.aws.amazon.com/s3/buckets/{{ bucket.bucket_name }}?region={{ bucket.region or 'us-east-1' }}" target="_blank" title="Open in AWS Console" class="aws-link">
                                <i class="fab fa-aws"></i>
                            </a>
                            <strong>{{ bucket.display_name or bucket.bucket_name }}</strong>
                        </div>
                        <span class="badge badge-{{ 'success' if bucket.is_validated else 'error' }}">
                            {{ 'Valid' if bucket.is_validated else 'Needs Attention' }}
                        </span>
                        <span class="badge badge-outline">{{ bucket.bucket_type }}</span>
                        {% if bucket.read_only %}
                        <span class="badge badge-warning">Read-only</span>
                        {% endif %}
                    </div>
                    <div class="bucket-actions">
                        <a href="/buckets/{{ bucket.bucket_id }}{% if bucket.prefix_restriction %}?prefix={{ bucket.prefix_restriction }}{% endif %}" class="btn btn-sm btn-primary">
                            <i class="fas fa-folder-open"></i> Browse
                        </a>
                        <button class="btn btn-sm btn-outline" type="button" onclick="revalidateBucket('{{ bucket.bucket_id }}')">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <button class="btn btn-sm btn-outline" type="button" onclick="editBucket('{{ bucket.bucket_id }}')">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-outline text-error" type="button" onclick="unlinkBucket('{{ bucket.bucket_id }}')">
                            <i class="fas fa-unlink"></i>
                        </button>
                    </div>
                </div>

                <div class="bucket-details">
                    <div class="bucket-meta">
                        <span><i class="fab fa-aws"></i> <code>s3://{{ bucket.bucket_name }}</code></span>
                        <span><i class="fas fa-folder"></i> Prefix: <code>{{ bucket.prefix_restriction if bucket.prefix_restriction else '/' }}</code></span>
                        {% if bucket.region %}
                        <span><i class="fas fa-globe"></i> {{ bucket.region }}</span>
                        {% endif %}
                        <span><i class="fas fa-clock"></i> Linked: {{ bucket.created_at[:10] if bucket.created_at else 'Unknown' }}</span>
                    </div>

                    {% if bucket.description %}
                    <p class="bucket-description">{{ bucket.description }}</p>
                    {% endif %}

                    <div class="validation-status mt-md">
                        <div class="validation-checks">
                            <span class="check-item {% if bucket.can_read %}check-pass{% else %}check-fail{% endif %}">
                                <i class="fas fa-{{ 'check' if bucket.can_read else 'times' }}"></i> Read
                            </span>
                            <span class="check-item {% if bucket.can_write %}check-pass{% else %}check-fail{% endif %}">
                                <i class="fas fa-{{ 'check' if bucket.can_write else 'times' }}"></i> Write
                            </span>
                            <span class="check-item {% if bucket.can_list %}check-pass{% else %}check-fail{% endif %}">
                                <i class="fas fa-{{ 'check' if bucket.can_list else 'times' }}"></i> List
                            </span>
                        </div>
                    </div>

                    {% if bucket.remediation_steps %}
                    <div class="remediation-box mt-md">
                        <div class="remediation-header">
                            <i class="fas fa-wrench"></i> Validation Notes
                        </div>
                        <ol class="remediation-steps">
                            {% for step in bucket.remediation_steps %}
                            <li>{{ step }}</li>
                            {% endfor %}
                        </ol>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-state-icon"><i class="fas fa-database"></i></div>
            <h4 class="empty-state-title">No buckets linked</h4>
            <p class="empty-state-text">Link an S3 bucket to start browsing and composing manifest inputs.</p>
            <button class="btn btn-primary" type="button" onclick="openLinkBucketModal()">
                <i class="fas fa-plus"></i> Link First Bucket
            </button>
        </div>
        {% endif %}
    </div>
</div>

<div class="modal" id="link-bucket-modal">
    <div class="modal-content modal-lg">
        <div class="modal-header">
            <h3>Link S3 Bucket</h3>
            <button class="modal-close" type="button" onclick="closeModal('link-bucket-modal')">&times;</button>
        </div>
        <div class="modal-body">
            <form id="link-bucket-form">
                <div class="form-group">
                    <label class="form-label">Bucket Name</label>
                    <div class="input-with-button">
                        <input type="text" class="form-control" id="bucket-name" placeholder="s3://my-genomics-bucket" required>
                        <button type="button" class="btn btn-outline" onclick="validateBucketBeforeLink()">
                            <i class="fas fa-check-circle"></i> Validate
                        </button>
                    </div>
                    <small class="form-text">The S3 bucket URI or raw bucket name.</small>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Bucket Type</label>
                        <select class="form-control form-select" id="bucket-type">
                            <option value="secondary">Secondary</option>
                            <option value="primary">Primary</option>
                            <option value="archive">Archive</option>
                            <option value="shared">Shared</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Display Name</label>
                        <input type="text" class="form-control" id="bucket-display-name" placeholder="Friendly name for this bucket">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Prefix Restriction</label>
                    <input type="text" class="form-control" id="bucket-prefix" placeholder="data/fastq/">
                    <small class="form-text">Optional. Restrict the linked bucket to a specific prefix.</small>
                </div>

                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea class="form-control" id="bucket-description" rows="2" placeholder="Description of this bucket's purpose"></textarea>
                </div>

                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="bucket-read-only">
                        <span>Read-only access</span>
                    </label>
                </div>

                <div id="bucket-validation-results" class="validation-results-box d-none mt-lg">
                    <hr>
                    <h4><i class="fas fa-clipboard-check"></i> Validation Results</h4>
                    <div id="validation-content"></div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="closeModal('link-bucket-modal')">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="linkBucket()">
                <i class="fas fa-link"></i> Link Bucket
            </button>
        </div>
    </div>
</div>

<div class="modal" id="edit-bucket-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-edit"></i> Edit Bucket</h3>
            <button class="modal-close" type="button" onclick="closeModal('edit-bucket-modal')">&times;</button>
        </div>
        <div class="modal-body">
            <form id="edit-bucket-form">
                <div class="form-group">
                    <label class="form-label">Bucket Name</label>
                    <div class="form-static" id="edit-bucket-name">-</div>
                    <small class="form-text">Bucket name cannot be changed.</small>
                </div>
                <div class="form-group">
                    <label class="form-label">Display Name</label>
                    <input type="text" class="form-control" id="edit-display-name">
                </div>
                <div class="form-group">
                    <label class="form-label">Bucket Type</label>
                    <select class="form-control form-select" id="edit-bucket-type">
                        <option value="secondary">Secondary</option>
                        <option value="primary">Primary</option>
                        <option value="archive">Archive</option>
                        <option value="shared">Shared</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Prefix Restriction</label>
                    <input type="text" class="form-control" id="edit-bucket-prefix" placeholder="data/fastq/">
                </div>
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea class="form-control" id="edit-bucket-description" rows="2"></textarea>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="edit-bucket-read-only">
                        <span>Read-only access</span>
                    </label>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="closeModal('edit-bucket-modal')">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="saveBucketEdit()">
                <i class="fas fa-save"></i> Save Changes
            </button>
        </div>
    </div>
</div>

<style>
.bucket-list { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.bucket-card { border: 1px solid var(--color-gray-300); border-radius: var(--radius-lg); padding: var(--spacing-lg); background: rgba(255,255,255,0.8); }
.bucket-card.bucket-valid { border-left: 4px solid var(--color-success); }
.bucket-card.bucket-invalid { border-left: 4px solid var(--color-error); }
.bucket-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); }
.bucket-info { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; }
.bucket-name { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 1.125rem; }
.bucket-name i { color: #ff9900; }
.bucket-name .aws-link { text-decoration: none; transition: transform 0.2s; display: inline-flex; }
.bucket-name .aws-link:hover { transform: scale(1.2); }
.bucket-actions { display: flex; gap: var(--spacing-sm); }
.bucket-meta { display: flex; gap: var(--spacing-xl); flex-wrap: wrap; color: var(--color-gray-600); font-size: 0.875rem; }
.bucket-meta span { display: flex; align-items: center; gap: var(--spacing-xs); }
.validation-checks { display: flex; gap: var(--spacing-lg); flex-wrap: wrap; }
.check-item { display: flex; align-items: center; gap: var(--spacing-xs); font-size: 0.875rem; }
.check-pass { color: var(--color-success); }
.check-fail { color: var(--color-error); }
.remediation-box { background: #fff3cd; border: 1px solid #ffc107; border-radius: var(--radius-md); padding: var(--spacing-md); }
.remediation-header { font-weight: 600; margin-bottom: var(--spacing-sm); color: #856404; }
.remediation-steps { margin: 0; padding-left: var(--spacing-lg); color: #856404; }
.input-with-button { display: flex; gap: var(--spacing-sm); }
.input-with-button .form-control { flex: 1; }
.validation-results-box { background: var(--color-gray-100); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); padding: var(--spacing-md); }
.validation-results-box.validation-success { background: rgba(0, 217, 166, 0.08); border-color: rgba(0, 217, 166, 0.28); }
.validation-results-box.validation-error { background: rgba(220, 53, 69, 0.06); border-color: rgba(220, 53, 69, 0.22); }
.validation-summary-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
.validation-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.validation-check-card { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); padding: var(--spacing-md); }
.validation-check-pass { border-color: rgba(0, 217, 166, 0.28); }
.validation-check-fail { border-color: rgba(220, 53, 69, 0.22); }
.validation-check-skipped { border-color: rgba(255, 193, 7, 0.28); }
.validation-check-header { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); }
.validation-check-title { font-weight: 600; display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.validation-check-detail { color: var(--color-gray-600); font-size: 0.875rem; }
.validation-remediation-title { font-weight: 600; margin-bottom: var(--spacing-xs); color: #8d1a28; }
.bucket-discovery-results { border-top: 1px solid var(--color-gray-200); padding-top: var(--spacing-lg); }
.bucket-discovery-meta { color: var(--color-gray-600); margin-bottom: var(--spacing-md); }
.bucket-discovery-table td:last-child,
.bucket-discovery-table th:last-child { text-align: right; }
@media (max-width: 780px) {
    .validation-check-grid { grid-template-columns: 1fr; }
}
</style>
{% endblock %}

{% block extra_js %}
<script>
let currentBucketId = null;
const pageData = UrsaPortal.parsePageData();
const linkedBucketNames = new Set(
    (pageData.buckets || [])
        .map((bucket) => String(bucket.bucket_name || '').trim())
        .filter(Boolean)
);

function resetBucketValidationResults() {
    const box = document.getElementById('bucket-validation-results');
    const content = document.getElementById('validation-content');
    if (box) {
        box.classList.add('d-none');
        box.classList.remove('validation-success', 'validation-error');
    }
    if (content) {
        content.innerHTML = '';
    }
}

function openLinkBucketModal(bucketName = '', displayName = '') {
    const form = document.getElementById('link-bucket-form');
    form?.reset();
    document.getElementById('bucket-name').value = bucketName;
    document.getElementById('bucket-display-name').value = displayName || bucketName;
    document.getElementById('bucket-type').value = 'secondary';
    document.getElementById('bucket-read-only').checked = false;
    resetBucketValidationResults();
    showModal('link-bucket-modal');
}

function bucketPayload(prefix = 'bucket') {
    const isEdit = prefix === 'edit';
    const displayNameField = document.getElementById(isEdit ? 'edit-display-name' : 'bucket-display-name');
    const bucketTypeField = document.getElementById(isEdit ? 'edit-bucket-type' : 'bucket-type');
    const descriptionField = document.getElementById(isEdit ? 'edit-bucket-description' : 'bucket-description');
    const prefixField = document.getElementById(isEdit ? 'edit-bucket-prefix' : 'bucket-prefix');
    const readOnlyField = document.getElementById(isEdit ? 'edit-bucket-read-only' : 'bucket-read-only');
    return {
        bucket_name: isEdit ? document.getElementById('edit-bucket-name').textContent : document.getElementById('bucket-name').value,
        display_name: displayNameField?.value || null,
        bucket_type: bucketTypeField?.value || 'secondary',
        description: descriptionField?.value || null,
        prefix_restriction: prefixField?.value || null,
        read_only: !!readOnlyField?.checked,
        metadata: {},
    };
}

function renderValidationResult(result) {
    const box = document.getElementById('bucket-validation-results');
    const content = document.getElementById('validation-content');
    const readOnlyRequested = !!document.getElementById('bucket-read-only')?.checked;
    const writeStatus = readOnlyRequested
        ? {
            badgeClass: 'badge-warning',
            cardClass: 'validation-check-skipped',
            badgeLabel: 'Not Required',
            icon: 'minus',
            detail: 'Write access is not required because this bucket will be linked as read-only.',
        }
        : result.can_write
            ? {
                badgeClass: 'badge-success',
                cardClass: 'validation-check-pass',
                badgeLabel: 'Pass',
                icon: 'check',
                detail: 'Ursa can create and remove a validation object in the selected bucket or prefix.',
            }
            : {
                badgeClass: 'badge-error',
                cardClass: 'validation-check-fail',
                badgeLabel: 'Fail',
                icon: 'xmark',
                detail: 'Ursa could not create and remove a validation object in the selected bucket or prefix.',
            };

    const checks = [
        {
            name: 'Read',
            passed: result.can_read,
            detail: result.can_read
                ? 'Ursa can read bucket contents through the selected prefix.'
                : 'Ursa could not read bucket contents through the selected prefix.',
        },
        {
            name: 'List',
            passed: result.can_list,
            detail: result.can_list
                ? 'Ursa can enumerate objects for bucket browsing and manifest inputs.'
                : 'Ursa could not enumerate objects for bucket browsing and manifest inputs.',
        },
    ];

    box.classList.remove('d-none', 'validation-success', 'validation-error');
    box.classList.add(result.is_validated ? 'validation-success' : 'validation-error');
    box.classList.remove('d-none');
    content.innerHTML = `
        <div class="alert ${result.is_validated ? 'alert-success' : 'alert-error'} mb-0">
            <i class="fas fa-${result.is_validated ? 'circle-check' : 'triangle-exclamation'}"></i>
            <div>
                <strong>${result.is_validated ? 'Validation passed' : 'Validation failed'}</strong>
                <div>
                    ${result.is_validated
                        ? `Ursa confirmed the required access${readOnlyRequested ? ' for a read-only bucket link' : ''}.`
                        : 'Ursa could not confirm the required bucket access. Fix the failed checks before linking this bucket.'}
                </div>
            </div>
        </div>
        <div class="validation-summary-meta">
            <span class="badge ${result.is_validated ? 'badge-success' : 'badge-error'}">
                ${result.is_validated ? 'Ready to Link' : 'Access Missing'}
            </span>
            <span class="badge badge-outline">Region: ${escapeHtml(result.region || 'Unknown')}</span>
            ${readOnlyRequested ? '<span class="badge badge-warning">Read-only Requested</span>' : ''}
        </div>
        <div class="validation-check-grid">
            ${checks.map((check) => `
                <div class="validation-check-card ${check.passed ? 'validation-check-pass' : 'validation-check-fail'}">
                    <div class="validation-check-header">
                        <span class="validation-check-title">
                            <i class="fas fa-${check.passed ? 'check' : 'xmark'} ${check.passed ? 'text-success' : 'text-error'}"></i>
                            ${check.name}
                        </span>
                        <span class="badge ${check.passed ? 'badge-success' : 'badge-error'}">${check.passed ? 'Pass' : 'Fail'}</span>
                    </div>
                    <div class="validation-check-detail">${check.detail}</div>
                </div>
            `).join('')}
            <div class="validation-check-card ${writeStatus.cardClass}">
                <div class="validation-check-header">
                    <span class="validation-check-title">
                        <i class="fas fa-${writeStatus.icon} ${writeStatus.badgeClass === 'badge-success' ? 'text-success' : writeStatus.badgeClass === 'badge-error' ? 'text-error' : 'text-warning'}"></i>
                        Write
                    </span>
                    <span class="badge ${writeStatus.badgeClass}">${writeStatus.badgeLabel}</span>
                </div>
                <div class="validation-check-detail">${writeStatus.detail}</div>
            </div>
        </div>
        ${!result.is_validated && result.remediation_steps?.length ? `
            <div class="remediation-box mt-md">
                <div class="validation-remediation-title">
                    <i class="fas fa-wrench"></i> What to fix
                </div>
                <ol class="remediation-steps mb-0">
                    ${result.remediation_steps.map((step) => `<li>${escapeHtml(step)}</li>`).join('')}
                </ol>
            </div>
        ` : ''}
    `;
}

function formatBucketCreatedAt(value) {
    if (!value) {
        return 'Unknown';
    }
    const createdAt = new Date(value);
    if (Number.isNaN(createdAt.getTime())) {
        return escapeHtml(value);
    }
    return escapeHtml(createdAt.toLocaleString());
}

function renderAdminBuckets(payload) {
    const results = document.getElementById('admin-bucket-results');
    if (!results) {
        return;
    }
    const buckets = Array.isArray(payload?.buckets) ? payload.buckets : [];
    const profile = escapeHtml(payload?.profile || 'default');
    if (!buckets.length) {
        results.innerHTML = `
            <p class="bucket-discovery-meta">AWS profile: <code>${profile}</code></p>
            <div class="empty-state">
                <div class="empty-state-icon"><i class="fas fa-cloud"></i></div>
                <h4 class="empty-state-title">No buckets available</h4>
                <p class="empty-state-text">The active AWS profile did not return any S3 buckets.</p>
            </div>
        `;
        results.classList.remove('d-none');
        return;
    }

    const rows = buckets
        .map((bucket) => {
            const bucketName = String(bucket.bucket_name || '').trim();
            if (!bucketName) {
                return '';
            }
            const isLinked = linkedBucketNames.has(bucketName);
            return `
                <tr>
                    <td><code>s3://${escapeHtml(bucketName)}</code></td>
                    <td>${formatBucketCreatedAt(bucket.created_at)}</td>
                    <td>
                        ${isLinked
                            ? '<span class="badge badge-success">Linked</span>'
                            : '<span class="badge badge-outline">Available</span>'}
                    </td>
                    <td>
                        <button
                            class="btn btn-sm btn-outline"
                            type="button"
                            data-link-bucket-name="${escapeHtml(bucketName)}"
                            ${isLinked ? 'disabled' : ''}
                        >
                            ${isLinked ? 'Linked' : 'Link'}
                        </button>
                    </td>
                </tr>
            `;
        })
        .join('');

    results.innerHTML = `
        <p class="bucket-discovery-meta">AWS profile: <code>${profile}</code></p>
        <div class="table-container">
            <table class="bucket-discovery-table">
                <thead>
                    <tr>
                        <th>Bucket</th>
                        <th>Created</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>${rows}</tbody>
            </table>
        </div>
    `;
    results.classList.remove('d-none');
    results.querySelectorAll('[data-link-bucket-name]').forEach((button) => {
        if (button.disabled) {
            return;
        }
        button.addEventListener('click', () => {
            const bucketName = button.getAttribute('data-link-bucket-name') || '';
            openLinkBucketModal(bucketName, bucketName);
        });
    });
}

async function listAdminBuckets() {
    showLoading('Listing S3 buckets...');
    try {
        const payload = await UrsaPortal.apiRequest('/api/v1/admin/s3-buckets');
        renderAdminBuckets(payload);
    } catch (error) {
        showToast('error', error.message);
    } finally {
        hideLoading();
    }
}

async function validateBucketBeforeLink() {
    const result = await UrsaPortal.apiRequest('/api/v1/buckets/validate', {
        method: 'POST',
        body: bucketPayload(),
    });
    renderValidationResult(result);
}

async function linkBucket() {
    await UrsaPortal.apiRequest('/api/v1/buckets', {
        method: 'POST',
        body: bucketPayload(),
    });
    window.location.reload();
}

async function revalidateBucket(bucketId) {
    await UrsaPortal.apiRequest(`/api/v1/buckets/${encodeURIComponent(bucketId)}/revalidate`, {
        method: 'POST',
    });
    window.location.reload();
}

async function editBucket(bucketId) {
    const bucket = await UrsaPortal.apiRequest(`/api/v1/buckets/${encodeURIComponent(bucketId)}`);
    currentBucketId = bucketId;
    document.getElementById('edit-bucket-name').textContent = bucket.bucket_name;
    document.getElementById('edit-display-name').value = bucket.display_name || '';
    document.getElementById('edit-bucket-type').value = bucket.bucket_type || 'secondary';
    document.getElementById('edit-bucket-prefix').value = bucket.prefix_restriction || '';
    document.getElementById('edit-bucket-description').value = bucket.description || '';
    document.getElementById('edit-bucket-read-only').checked = !!bucket.read_only;
    showModal('edit-bucket-modal');
}

async function saveBucketEdit() {
    if (!currentBucketId) return;
    await UrsaPortal.apiRequest(`/api/v1/buckets/${encodeURIComponent(currentBucketId)}`, {
        method: 'PATCH',
        body: {
            display_name: document.getElementById('edit-display-name').value || null,
            bucket_type: document.getElementById('edit-bucket-type').value,
            prefix_restriction: document.getElementById('edit-bucket-prefix').value || null,
            description: document.getElementById('edit-bucket-description').value || null,
            read_only: document.getElementById('edit-bucket-read-only').checked,
        },
    });
    window.location.reload();
}

async function unlinkBucket(bucketId) {
    if (!confirm('Unlink this bucket? Files remain in S3 but will no longer appear in Ursa.')) {
        return;
    }
    await UrsaPortal.apiRequest(`/api/v1/buckets/${encodeURIComponent(bucketId)}`, {
        method: 'DELETE',
    });
    window.location.reload();
}
</script>
{% endblock %}