{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="preset-header py-5 bg-black border-bottom border-secondary">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-2">
                        <li class="breadcrumb-item"><a href="{% url 'index' %}" class="text-warning text-decoration-none">Home</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'artist_detail' preset.artist.slug %}" class="text-warning text-decoration-none">{{ preset.artist.name }}</a></li>
                        <li class="breadcrumb-item active text-secondary" aria-current="page">{{ preset.title }}</li>
                    </ol>
                </nav>
                <h1 class="display-4 fw-bold text-white mb-2">{{ preset.title }}</h1>
                <p class="lead text-secondary">{{ preset.description }}</p>
                <div class="d-flex gap-2 mt-3">
                    <span class="badge bg-dark border border-warning text-warning">Artist: {{ preset.artist.name }}</span>
                    <span class="badge bg-dark border border-info text-info">Style: {{ preset.artist.style }}</span>
                    <span class="badge bg-dark border border-danger text-danger">64-bit Ready</span>
                </div>
            </div>
            <div class="col-md-4 text-end">
                <button class="btn btn-warning btn-lg fw-bold px-5 rounded-pill shadow-sm">
                    <i class="bi bi-play-fill me-2"></i>LOAD PRESET
                </button>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <h3 class="text-white mb-4"><i class="bi bi-diagram-3 me-2 text-warning"></i>Signal Chain Architecture</h3>
    
    <div class="signal-chain-wrapper overflow-auto pb-4">
        <div class="d-flex align-items-center gap-3" style="min-width: 1200px;">
            <div class="input-node text-center">
                <div class="rounded-circle bg-success mb-2" style="width: 15px; height: 15px; margin: 0 auto; box-shadow: 0 0 10px #198754;"></div>
                <small class="text-uppercase text-secondary fw-bold" style="font-size: 0.7rem;">Input</small>
            </div>

            <div class="flex-grow-1 border-top border-secondary border-2" style="min-width: 30px;"></div>

            {% for step in steps %}
            <div class="module-card">
                <div class="card bg-dark border-secondary shadow-sm" style="width: 180px;">
                    <div class="card-header bg-black py-1 px-2 border-secondary d-flex justify-content-between align-items-center">
                        <small class="text-secondary fw-bold" style="font-size: 0.6rem;">#{{ forloop.counter }}</small>
                        <i class="bi {{ step.module.icon_class }} text-warning" style="font-size: 0.8rem;"></i>
                    </div>
                    <div class="card-body p-3 text-center">
                        <div class="mb-2">
                            <i class="bi {{ step.module.icon_class }} display-6 text-white"></i>
                        </div>
                        <h6 class="text-white mb-1" style="font-size: 0.9rem;">{{ step.module.name }}</h6>
                        <span class="badge bg-black text-secondary small border border-secondary" style="font-size: 0.6rem;">{{ step.module.get_category_display }}</span>
                    </div>
                    <div class="card-footer bg-black border-secondary p-2">
                        <div class="settings-visual bg-dark rounded p-1" style="font-size: 0.65rem;">
                            <p class="text-info mb-0 text-truncate">{{ step.settings_summary }}</p>
                        </div>
                    </div>
                </div>
            </div>

            {% if not forloop.last %}
            <div class="flex-grow-1 border-top border-secondary border-2" style="min-width: 30px;"></div>
            {% endif %}
            {% endfor %}

            <div class="flex-grow-1 border-top border-secondary border-2" style="min-width: 30px;"></div>

            <div class="output-node text-center">
                <div class="rounded-circle bg-danger mb-2" style="width: 15px; height: 15px; margin: 0 auto; box-shadow: 0 0 10px #dc3545;"></div>
                <small class="text-uppercase text-secondary fw-bold" style="font-size: 0.7rem;">Output</small>
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-md-6">
            <div class="card bg-dark border-secondary">
                <div class="card-header bg-black border-secondary">
                    <h5 class="mb-0 text-white">Module Technical Specs</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush bg-transparent">
                        {% for step in steps %}
                        <li class="list-group-item bg-transparent text-secondary border-secondary px-0">
                            <div class="d-flex justify-content-between">
                                <span class="text-white">{{ step.module.name }}</span>
                                <span class="badge bg-secondary">{{ step.module.get_category_display }}</span>
                            </div>
                            <small class="d-block text-muted mt-1">{{ step.settings_summary }}</small>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-dark border-secondary">
                <div class="card-header bg-black border-secondary">
                    <h5 class="mb-0 text-white">Engine Performance</h5>
                </div>
                <div class="card-body text-center py-5">
                    <div class="mb-4">
                        <div class="display-4 text-warning">0.03%</div>
                        <small class="text-secondary text-uppercase fw-bold">CPU Usage (64-bit Core)</small>
                    </div>
                    <div class="row">
                        <div class="col-6 border-end border-secondary">
                            <div class="h3 text-info">2.9 ms</div>
                            <small class="text-secondary">Latency (ASIO)</small>
                        </div>
                        <div class="col-6">
                            <div class="h3 text-info">48 kHz</div>
                            <small class="text-secondary">Sample Rate</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.signal-chain-wrapper::-webkit-scrollbar {
    height: 8px;
}
.signal-chain-wrapper::-webkit-scrollbar-track {
    background: #000;
}
.signal-chain-wrapper::-webkit-scrollbar-thumb {
    background: #FFD700;
    border-radius: 4px;
}
.module-card {
    transition: transform 0.2s;
}
.module-card:hover {
    transform: translateY(-5px);
}
</style>
{% endblock %}