{% extends "admin/layout.html" %}
{% block title %}{{ super() }} - {{ page | capitalize }} - {{ project.name }}{% endblock %}
{% block pagetitle %}
<div class="d-flex align-items-center gap-2">
    <a href="{{ url_for('admin_list_projects') }}" class="btn btn-ghost btn-sm">
        <i class="fas fa-arrow-left"></i>
    </a>
    <span class="text-muted">/</span>
    <span>{{ project.name | upper }}</span>
    <span class="badge badge-accent ms-2"><i class="fas fa-shield-alt fa-fw me-1"></i>Admin</span>
</div>
{% endblock %}

{% block content %}
{% include 'admin/projects/modal.html' %}

{% for (category, message) in get_flashed_messages(request) %}
<div class="alert alert-{{ category }} mb-3">
    <i class="fas fa-{% if category == 'danger' %}exclamation-circle{% elif category == 'success' %}check-circle{% else %}info-circle{% endif %}"></i>
    <span>{{ message }}</span>
    <button type="button" class="btn-close" data-bs-dismiss="alert"><i class="fas fa-times"></i></button>
</div>
{% endfor %}

<div class="row g-4">
    <div class="col-lg-3">
        <div class="card mb-4">
            <div class="card-body text-center">
                <div class="rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" 
                     style="width: 80px; height: 80px; background: var(--accent-glow); border: 2px solid var(--accent);">
                    {% set lang_icon = {'python': 'python', 'javascript': 'js', 'php': 'php', 'bun': 'js'}.get(project.language | lower, 'code') %}
                    <i class="fab fa-{{ lang_icon }} fa-2x text-accent"></i>
                </div>
                <h4 class="text-mono mb-1">{{ project.name | title }}</h4>
                <span class="badge badge-accent">{{ project.language | title }}</span>
                
                <div class="d-flex justify-content-center gap-4 mt-4">
                    <div>
                        <div class="text-accent text-mono" style="font-size: 1.25rem; font-weight: 600;">{{ funcs | length }}</div>
                        <div class="text-muted" style="font-size: 0.75rem;">Functions</div>
                    </div>
                    <div>
                        <div class="text-accent text-mono" style="font-size: 1.25rem; font-weight: 600;">
                            {% if project.private %}Private{% else %}Public{% endif %}
                        </div>
                        <div class="text-muted" style="font-size: 0.75rem;">Visibility</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-bolt fa-fw text-accent me-2"></i>
                Quick Actions
            </div>
            <div class="card-body p-2">
                <div class="d-grid gap-1">
                    <div class="nav-item dropdown">
                        <a href="#" class="btn btn-outline-secondary w-100 text-start" data-bs-toggle="dropdown">
                            <i class="fas fa-play fa-fw me-2"></i>
                            Run Function
                        </a>
                        <ul class="dropdown-menu w-100">
                            {% for func in funcs %}
                            <li>
                                <a href="{{ url_for('run_project', project_id=project.id, function=func.name) }}" 
                                   class="dropdown-item" target="_blank">
                                    <i class="fas fa-terminal fa-fw me-2 text-accent"></i>
                                    <span class="text-mono">{{ func.name }}</span>
                                </a>
                            </li>
                            {% else %}
                            <li><span class="dropdown-item text-muted">No functions available</span></li>
                            {% endfor %}
                        </ul>
                    </div>
                    <a href="{{ url_for('admin_list_projects') }}" class="btn btn-outline-secondary text-start">
                        <i class="fas fa-eye-slash fa-fw me-2"></i>
                        Disable Project
                    </a>
                    <button class="btn btn-outline-secondary text-start" onclick="copyProjectId()">
                        <i class="fas fa-copy fa-fw me-2"></i>
                        Copy Project ID
                    </button>
                </div>
            </div>
        </div>
        
        <div class="card border-danger">
            <div class="card-header text-danger">
                <i class="fas fa-exclamation-triangle fa-fw me-2"></i>
                Danger Zone
            </div>
            <div class="card-body">
                <button class="btn btn-outline-danger btn-sm w-100">
                    <i class="fas fa-trash-alt fa-fw me-1"></i>
                    Delete Project
                </button>
            </div>
        </div>
    </div>
    
    <div class="col-lg-9">
        <div class="card">
            <nav>
                <div class="nav nav-tabs" role="tablist">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-overview" type="button" role="tab">
                        <i class="fas fa-home fa-fw me-1"></i>
                        Overview
                    </button>
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-functions" type="button" role="tab">
                        <i class="fas fa-code fa-fw me-1"></i>
                        Functions
                    </button>
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-settings" type="button" role="tab">
                        <i class="fas fa-cog fa-fw me-1"></i>
                        Settings
                    </button>
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-logs" type="button" role="tab">
                        <i class="fas fa-list-alt fa-fw me-1"></i>
                        Logs
                    </button>
                </div>
            </nav>
            
            <div class="tab-content p-4">
                <div class="tab-pane fade show active" id="tab-overview" role="tabpanel">
                    <h5 class="text-mono mb-4">
                        <i class="fas fa-info-circle fa-fw text-accent me-2"></i>
                        Project Overview
                    </h5>
                    
                    <div class="row g-4 mb-4">
                        <div class="col-md-4">
                            <div class="stat-card">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="stat-label">Functions</div>
                                        <div class="stat-value">{{ funcs | length }}</div>
                                    </div>
                                    <i class="fas fa-code fa-2x text-accent" style="opacity: 0.5;"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="stat-card">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="stat-label">Visibility</div>
                                        <div class="stat-value" style="font-size: 1rem;">
                                            {% if project.private %}
                                            <span class="badge badge-secondary"><i class="fas fa-lock fa-fw me-1"></i>Private</span>
                                            {% else %}
                                            <span class="badge badge-success"><i class="fas fa-globe fa-fw me-1"></i>Public</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <i class="fas fa-eye fa-2x text-accent" style="opacity: 0.5;"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="stat-card">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="stat-label">Status</div>
                                        <div class="stat-value" style="font-size: 1rem;">
                                            <span class="badge badge-success"><i class="fas fa-check fa-fw me-1"></i>Active</span>
                                        </div>
                                    </div>
                                    <i class="fas fa-heartbeat fa-2x text-accent" style="opacity: 0.5;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header">
                                    <i class="fas fa-info-circle fa-fw text-accent me-2"></i>
                                    Project Details
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Project ID</label>
                                        <div class="d-flex align-items-center gap-2">
                                            <code class="text-mono" style="font-size: 0.8125rem;">{{ project.id }}</code>
                                            <button class="btn btn-ghost btn-sm" onclick="copyText('{{ project.id }}')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Language</label>
                                        <div class="d-flex align-items-center gap-2">
                                            {% set lang_icon = {'python': 'python', 'javascript': 'js', 'php': 'php', 'bun': 'js'}.get(project.language | lower, 'code') %}
                                            <i class="fab fa-{{ lang_icon }} text-accent"></i>
                                            <span class="text-mono">{{ project.language | title }}</span>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Owner</label>
                                        <div class="text-mono">{{ project.user_id | default('N/A') }}</div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Created</label>
                                        <div class="text-mono">{{ project.created_at | default('N/A') }}</div>
                                    </div>
                                    <div class="mb-0">
                                        <label class="form-label text-muted">Last Updated</label>
                                        <div class="text-mono">{{ project.updated_at | default('N/A') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header">
                                    <i class="fas fa-link fa-fw text-accent me-2"></i>
                                    Quick Endpoints
                                </div>
                                <div class="card-body">
                                    {% for func in funcs[:5] %}
                                    <div class="d-flex align-items-center justify-content-between py-2 {% if not loop.last %}border-bottom{% endif %}">
                                        <div>
                                            <span class="text-mono">{{ func.name }}</span>
                                            <div class="text-muted" style="font-size: 0.75rem;">/run/{{ project.id }}/{{ func.name }}</div>
                                        </div>
                                        <a href="{{ url_for('run_project', project_id=project.id, function=func.name) }}" 
                                           class="btn btn-ghost btn-sm" target="_blank">
                                            <i class="fas fa-external-link-alt"></i>
                                        </a>
                                    </div>
                                    {% else %}
                                    <p class="text-muted mb-0">No functions defined</p>
                                    {% endfor %}
                                    {% if funcs | length > 5 %}
                                    <div class="text-center mt-2">
                                        <a href="#tab-functions" class="text-accent" data-bs-toggle="tab">View all {{ funcs | length }} functions</a>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-pane fade" id="tab-functions" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="text-mono mb-0">
                            <i class="fas fa-code fa-fw text-accent me-2"></i>
                            Functions
                        </h5>
                        <span class="badge badge-secondary">{{ funcs | length }} total</span>
                    </div>
                    
                    {% if funcs %}
                    <div class="row g-4">
                        {% for func in funcs %}
                        <div class="col-md-6">
                            <div class="card hover-lift">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h5 class="text-mono text-accent mb-1">{{ func.name }}</h5>
                                            <code class="text-muted" style="font-size: 0.75rem;">/run/{{ project.id }}/{{ func.name }}</code>
                                        </div>
                                        <a href="{{ url_for('run_project', project_id=project.id, function=func.name) }}" 
                                           class="btn btn-accent btn-sm" target="_blank">
                                            <i class="fas fa-terminal fa-fw"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="empty-state">
                        <i class="fas fa-code"></i>
                        <div class="empty-state-title">No functions defined</div>
                        <p class="empty-state-text">This project has no exposed functions</p>
                    </div>
                    {% endif %}
                </div>
                
                <div class="tab-pane fade" id="tab-settings" role="tabpanel">
                    <h5 class="text-mono mb-4">
                        <i class="fas fa-cog fa-fw text-accent me-2"></i>
                        Project Configuration
                    </h5>
                    
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span><i class="fas fa-database fa-fw text-accent me-2"></i>All Properties</span>
                            <button class="btn btn-accent btn-sm" onclick="updateEnvs()">
                                <i class="fas fa-save fa-fw me-1"></i>
                                Save Changes
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                {% for key, value in project.items() %}
                                <div class="col-md-6 col-lg-4">
                                    <div class="form-group mb-0">
                                        <label class="form-label text-mono" style="font-size: 0.75rem; text-transform: uppercase;">{{ key }}</label>
                                        <input type="text" value="{{ value }}" class="form-control form-control-mono" readonly>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-pane fade" id="tab-logs" role="tabpanel">
                    <h5 class="text-mono mb-4">
                        <i class="fas fa-list-alt fa-fw text-accent me-2"></i>
                        Activity Logs
                    </h5>
                    
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-history fa-fw text-accent me-2"></i>
                            Recent Activity
                        </div>
                        <div class="card-body p-0">
                            <div class="list-group list-group-flush">
                                <div class="list-group-item d-flex align-items-center gap-3 py-3">
                                    <div class="badge badge-accent rounded-circle p-2">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="text-mono">Project deployed successfully</div>
                                        <div class="text-muted" style="font-size: 0.75rem;">{{ project.updated_at | default('Recently') }}</div>
                                    </div>
                                </div>
                                <div class="list-group-item d-flex align-items-center gap-3 py-3">
                                    <div class="badge badge-secondary rounded-circle p-2">
                                        <i class="fas fa-plus"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="text-mono">Project created</div>
                                        <div class="text-muted" style="font-size: 0.75rem;">{{ project.created_at | default('N/A') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.list-group-item {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}
</style>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', path='js/github.js') }}"></script>
<script src="{{ url_for('static', path='js/projects.js') }}"></script>
<script>
function copyProjectId() {
    copyText('{{ project.id }}');
}

function copyText(text) {
    navigator.clipboard.writeText(text).then(() => {
        showNotification('Copied to clipboard');
    });
}

function showNotification(message) {
    const notification = document.createElement('div');
    notification.className = 'alert alert-success position-fixed';
    notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999;';
    notification.innerHTML = '<i class="fas fa-check-circle me-2"></i>' + message;
    document.body.appendChild(notification);
    setTimeout(() => notification.remove(), 2000);
}
</script>
{% endblock %}