{% extends bambu_run_base_template %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'bambu_run/css/dashboard.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h1>{{ filament }}</h1>
            <p class="text-body-secondary">Filament Spool Details</p>
        </div>
        <div class="col-auto">
            {% if not is_basic_user %}
            <a href="{% url 'bambu_run:filament_update' filament.pk %}" class="btn btn-warning">Edit</a>
            {% endif %}
            <a href="{% url 'bambu_run:filament_list' %}" class="btn btn-secondary">Back to List</a>
        </div>
    </div>

    <!-- Filament Info Cards -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6>Color</h6>
                    <div class="d-flex align-items-center">
                        <div style="width: 50px; height: 50px; background-color: {{ filament.color_hex|default:'#999' }}; border-radius: 8px; margin-right: 15px; border: 2px solid #ddd;"></div>
                        <div>
                            <strong>{{ filament.color }}</strong><br>
                            <small class="text-muted">{{ filament.color_hex }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6>Specifications</h6>
                    <p class="mb-1"><strong>Type:</strong> {{ filament.type }}</p>
                    {% if filament.sub_type %}
                    <p class="mb-1"><strong>Sub Type:</strong> {{ filament.sub_type }}</p>
                    {% endif %}
                    <p class="mb-1"><strong>Brand:</strong> {{ filament.brand }}</p>
                    <p class="mb-0"><strong>Diameter:</strong> {{ filament.diameter }}mm</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6>Remaining</h6>
                    <div class="progress mb-2" style="height: 25px;">
                        <div class="progress-bar {% if filament.remaining_percent < 20 %}bg-danger{% elif filament.remaining_percent < 50 %}bg-warning{% else %}bg-success{% endif %}"
                             style="width: {{ filament.remaining_percent }}%;">
                            {{ filament.remaining_percent }}%
                        </div>
                    </div>
                    <small>{{ filament.remaining_weight_grams|default:"?" }}g of {{ filament.initial_weight_grams|default:"?" }}g</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6>Location</h6>
                    {% if filament.is_loaded_in_ams %}
                        <span class="badge bg-success fs-6">AMS Tray {{ filament.current_tray_id }}</span>
                        <p class="mb-0 mt-2"><small>Loaded: {{ filament.last_loaded_date|date:"Y-m-d H:i" }}</small></p>
                    {% else %}
                        <span class="badge bg-secondary fs-6">Storage</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Usage Chart -->
    <div class="card mb-4">
        {% if not is_basic_user %}
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <strong>Filament Usage History</strong>
                    <span class="text-muted" id="filamentDateRange">(Last 24 Hours)</span>
                </div>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <!-- Date Range -->
                    <div class="d-flex align-items-center gap-1">
                        <label class="form-label mb-0 small text-body-secondary">From:</label>
                        <input type="date" class="form-control form-control-sm" id="filamentStartDate" style="width: auto;">
                    </div>
                    <div class="d-flex align-items-center gap-1">
                        <label class="form-label mb-0 small text-body-secondary">To:</label>
                        <input type="date" class="form-control form-control-sm" id="filamentEndDate" style="width: auto;">
                    </div>
                    <!-- Full Day Checkbox -->
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="filamentFullDayCheckbox" checked>
                        <label class="form-check-label small" for="filamentFullDayCheckbox">Full Day</label>
                    </div>
                    <!-- Time Range -->
                    <div class="d-flex align-items-center gap-1" id="filamentTimeRangeControls">
                        <label class="form-label mb-0 small text-body-secondary">Time:</label>
                        <select class="form-select form-select-sm" id="filamentStartTime" style="width: auto;" disabled></select>
                        <span class="text-body-secondary">-</span>
                        <select class="form-select form-select-sm" id="filamentEndTime" style="width: auto;" disabled></select>
                    </div>
                    <!-- Buttons -->
                    <button type="button" class="btn btn-primary btn-sm" id="refreshFilamentChart">
                        <svg class="icon"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-reload"></use></svg>
                        Refresh
                    </button>
                    <button type="button" class="btn btn-secondary btn-sm" id="resetFilamentChart">
                        <svg class="icon"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-action-undo"></use></svg>
                        Reset
                    </button>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="card-body">
            <div class="chart-container" style="height: 300px;">
                <canvas id="usageChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Print Jobs -->
    <div class="card mb-4">
        <div class="card-header">
            <h5>Print Jobs Using This Filament</h5>
        </div>
        <div class="card-body">
            {% if print_usages %}
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Project</th>
                            <th>Date</th>
                            <th>Tray</th>
                            <th>Consumed</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for usage in print_usages %}
                        <tr>
                            <td>{{ usage.print_job.project_name }}</td>
                            <td>{{ usage.print_job.start_time|date:"Y-m-d H:i" }}</td>
                            <td>Tray {{ usage.tray_id }}</td>
                            <td>{{ usage.consumed_percent|default:"?" }}% ({{ usage.consumed_grams|default:"?" }}g)</td>
                            <td><span class="badge bg-{% if usage.print_job.final_status == 'FINISH' %}success{% else %}danger{% endif %}">{{ usage.print_job.final_status }}</span></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-muted">No print jobs recorded yet</p>
            {% endif %}
        </div>
    </div>

    <!-- Purchase Info -->
    {% if filament.purchase_date or filament.purchase_price or filament.supplier %}
    <div class="card mb-4">
        <div class="card-header">
            <h5>Purchase Information</h5>
        </div>
        <div class="card-body">
            <div class="row">
                {% if filament.purchase_date %}
                <div class="col-md-4">
                    <strong>Purchase Date:</strong> {{ filament.purchase_date|date:"Y-m-d" }}
                </div>
                {% endif %}
                {% if filament.purchase_price %}
                <div class="col-md-4">
                    <strong>Price:</strong> ${{ filament.purchase_price }}
                </div>
                {% endif %}
                {% if filament.supplier %}
                <div class="col-md-4">
                    <strong>Supplier:</strong> {{ filament.supplier }}
                </div>
                {% endif %}
            </div>
            {% if filament.notes %}
            <hr>
            <strong>Notes:</strong>
            <p>{{ filament.notes }}</p>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1"></script>
{% if not is_basic_user %}
{# Inject Django-specific values that the static JS file cannot know #}
<script>
    const FILAMENT_USAGE_API_URL = "{% url 'bambu_run:filament_usage_api' filament.pk %}";
</script>
<script src="{% static 'bambu_run/js/filament_detail.js' %}"></script>
{% else %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const ctx = document.getElementById('usageChart');
        if (ctx) {
            new Chart(ctx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: 'Remaining %',
                        data: [],
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
                        tension: 0.3,
                        fill: true,
                        pointRadius: 0,
                        pointHoverRadius: 3,
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: { y: { beginAtZero: true, max: 100 } }
                }
            });
        }
    });
</script>
{% endif %}
{% endblock %}