{% extends "base.html" %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>Calibration History for {{ probe.serial_number }}</h2>
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Probe Details</h5>
            <p class="card-text">
                <strong>Description:</strong> {{ probe.description }}<br>
                <strong>Model ID:</strong> {{ probe.model_id }
            </p>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Deviation Trends</h5>
            <canvas id="trendChart" height="300"></canvas>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Channel</th>
                    <th>Standard</th>
                    <th>Calibrated By</th>
                    <th>Deviation (High/Mid/Low)</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for cal in calibrations %}
                <tr>
                    <td>{{ cal.date }}</td>
                    <td>{{ cal.channels.serial_number }}</td>
                    <td>{{ cal.standards.make }} {{ cal.standards.model }}</td>
                    <td>{{ cal.calibrated_by.name }}</td>
                    <td>
                        {{ "%.3f"|format(cal.deviation_high) }} /
                        {{ "%.3f"|format(cal.deviation_mid) }} /
                        {{ "%.3f"|format(cal.deviation_low) }}
                    </td>
                    <td>
                        {% if cal.passed %}
                        <span class="badge bg-success">Passed</span>
                        {% else %}
                        <span class="badge bg-danger">Failed</span>
                        {% endif %}
                    </td>
                    <td>
                        <a href="{{ url_for('calibrations.view_calibration', calibration_id=cal.id) }}" 
                           class="btn btn-sm btn-primary">
                            Details
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    fetch(`/calibrations/probe/{{ probe.id }}/trends`)
        .then(response => response.json())
        .then(data => {
            const ctx = document.getElementById('trendChart').getContext('2d');
            const datasets = [];
            
            // Create a dataset for each channel's deviation metrics
            for (const [channelId, channelData] of Object.entries(data.trends)) {
                const color = getRandomColor();
                
                datasets.push({
                    label: `${channelData.serial} - High`,
                    data: channelData.high,
                    borderColor: color,
                    backgroundColor: color,
                    borderWidth: 1,
                    tension: 0.1
                });
                
                datasets.push({
                    label: `${channelData.serial} - Mid`,
                    data: channelData.mid,
                    borderColor: color,
                    backgroundColor: color,
                    borderWidth: 1,
                    tension: 0.1,
                    borderDash: [5, 5]
                });
                
                datasets.push({
                    label: `${channelData.serial} - Low`,
                    data: channelData.low,
                    borderColor: color,
                    backgroundColor: color,
                    borderWidth: 1,
                    tension: 0.1,
                    borderDash: [2, 2]
                });
            }
            
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: Object.values(data.trends)[0].dates,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: 'Deviation Value'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Calibration Date'
                            }
                        }
                    }
                }
            });
        });
});

function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
</script>
{% endblock %}