{% extends "layouts/base.html" %}

{% block title %}JAX Gateway{% endblock %}

{% block content %}
<div class="fade-in">
    <div class="max-w-3xl mx-auto px-8 py-8">
        <!-- Page header -->
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold mb-2">JAX Gateway</h1>
            <p class="text-muted-foreground">Content-addressed storage gateway</p>
        </div>

        <!-- Available Buckets -->
        <div class="card p-6 mb-6">
            <h3 class="text-lg font-semibold mb-4">
                <i class="fas fa-bucket mr-2"></i>Available Buckets
            </h3>
            {% if buckets.is_empty() %}
            <p class="text-muted-foreground text-sm">No buckets available yet.</p>
            {% else %}
            <div class="space-y-2">
                {% for bucket in buckets %}
                <a href="/gw/{{ bucket.id }}" class="bucket-row">
                    <div class="bucket-info">
                        <span class="bucket-name">{{ bucket.name }}</span>
                        <div class="bucket-ids">
                            <code class="bucket-id" title="Bucket ID">{{ bucket.id_short }}</code>
                            <code class="bucket-version" title="Version">v:{{ bucket.version_short }}</code>
                        </div>
                    </div>
                    <div class="bucket-status">
                        {% if bucket.is_published %}
                        <span class="status-badge status-published">
                            <i class="fas fa-globe"></i> Published
                        </span>
                        {% else %}
                        <span class="status-badge status-private">
                            <i class="fas fa-lock"></i> Private
                        </span>
                        {% endif %}
                        <i class="fas fa-chevron-right bucket-arrow"></i>
                    </div>
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <!-- Identity Card -->
        <div class="card p-6 mb-6">
            <div class="peer-id-card-inner">
                <div class="peer-id-label">Node Identity</div>
                <div class="peer-id-value" onclick="copyNodeId()" title="Click to copy">
                    <code id="nodeIdDisplay">{{ node_id }}</code>
                    <i class="fas fa-copy peer-id-copy-icon"></i>
                </div>
            </div>
        </div>

        <!-- Endpoints -->
        <div class="card p-6">
            <h3 class="text-lg font-semibold mb-4">API Endpoints</h3>
            <div class="space-y-3">
                <div class="endpoint-row">
                    <code class="endpoint-path">/gw/:bucket_id/*path</code>
                    <span class="endpoint-desc">Serve bucket content</span>
                </div>
                <div class="endpoint-row">
                    <code class="endpoint-path">/_status/identity</code>
                    <span class="endpoint-desc">Node identity (JSON)</span>
                </div>
                <div class="endpoint-row">
                    <code class="endpoint-path">/_status/livez</code>
                    <span class="endpoint-desc">Liveness check</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block head %}
<style>
.bucket-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: hsl(var(--muted) / 0.2);
    border-radius: 8px;
    border: 1px solid hsl(var(--border));
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.bucket-row:hover {
    background: hsl(var(--muted) / 0.4);
    border-color: hsl(var(--primary) / 0.5);
}

.bucket-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bucket-name {
    font-weight: 600;
    font-size: 1rem;
}

.bucket-ids {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bucket-id {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.bucket-version {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.75rem;
    color: hsl(var(--primary) / 0.7);
}

.bucket-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-published {
    background: hsl(142 76% 36% / 0.15);
    color: hsl(142 76% 36%);
}

.status-private {
    background: hsl(var(--muted) / 0.5);
    color: hsl(var(--muted-foreground));
}

.bucket-arrow {
    color: hsl(var(--muted-foreground));
    opacity: 0.5;
    transition: all 0.2s;
}

.bucket-row:hover .bucket-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.peer-id-card-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.peer-id-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
}

.peer-id-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.75rem;
    background: hsl(var(--muted) / 0.3);
    border-radius: 6px;
    border: 1px solid hsl(var(--border));
}

.peer-id-value:hover {
    border-color: hsl(var(--primary));
}

.peer-id-value code {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.8rem;
    word-break: break-all;
    flex: 1;
}

.peer-id-copy-icon {
    font-size: 0.75rem;
    opacity: 0.5;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.peer-id-value:hover .peer-id-copy-icon {
    opacity: 1;
}

.endpoint-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: hsl(var(--muted) / 0.2);
    border-radius: 6px;
    gap: 1rem;
}

.endpoint-path {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    color: hsl(var(--primary));
}

.endpoint-desc {
    font-size: 0.85rem;
    color: hsl(var(--muted-foreground));
    text-align: right;
}

@media (max-width: 640px) {
    .endpoint-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .endpoint-desc {
        text-align: left;
    }
}
</style>

<script>
function copyNodeId() {
    const nodeId = document.getElementById('nodeIdDisplay').textContent;
    navigator.clipboard.writeText(nodeId).then(() => {
        const icon = document.querySelector('.peer-id-copy-icon');
        const originalClass = icon.className;
        icon.className = 'fas fa-check peer-id-copy-icon';
        setTimeout(() => {
            icon.className = originalClass;
        }, 2000);
    });
}
</script>
{% endblock %}