{% extends 'layout.html' %}

{% block content %}
<header class="mb-4 d-flex justify-content-between align-items-center">
    <div>                
        <h2 class="text-white">{{ title }}</h2>
        <p class="text-white-50 mb-0">{{ subtitle }}</p>
    </div>
    <div class="d-flex align-items-center">
        {% if hat.durum == 1 %}        
        <div class="status-badge-pill status-online me-3">
            <span class="pulse"></span>
            <span id="statusText">Sistem Aktif</span>
        </div>
        {% else %}
        <div class="status-badge-pill-offline status-online me-3">
            <span class="pulse"></span>
            <span id="statusText">Sistem Offline</span>
        </div>
        {% endif %}
        <div id="currentTime" class="text-white-50 me-3 fw-bold"></div>
        <a href="{{ url_for('st_hat.index', bolum_id = hat.bolum.id) }}" class="btn btn-danger rounded-pill px-4">
            <i class="bi bi-arrow-left me-1"></i> Geri Dön
        </a>
    </div>
</header>

<div class="row g-4 mb-4">
    <!-- Ana Motor Card -->
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card p-4">
            <div class="card-header border-0 p-0 mb-3 d-flex justify-content-between align-items-center">
                <span class="card-title mb-0">⚡ Ana Motor</span>
                <div class="card-icon" style="background: #bee3f8; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">⚙️</div>
            </div>
            <div class="metric-value" id="anaMotorHiz">{{ hat.sensor.ana_motor_hizi }}</div>
            <div class="metric-unit">Hz - Motor Hızı</div>
            <span class="metric-change" id="anaMotorStatus"></span>
            <div class="info-row" style="margin-top: 15px;">
                <span class="info-label">Akım</span>
                <span class="info-value" id="anaMotorAkim">{{ hat.sensor.ana_motor_akimi }} A</span>
            </div>
        </div>
    </div>

    <!-- Çizgi Motor Card -->
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card p-4">
            <div class="card-header border-0 p-0 mb-3 d-flex justify-content-between align-items-center">
                <span class="card-title mb-0">🔧 Çizgi Motor</span>
                <div class="card-icon" style="background: #c6f6d5; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">⚙️</div>
            </div>
            <div class="metric-value" id="cizgiMotorHiz">{{ hat.sensor.cizgi_motor_hizi }}</div>
            <div class="metric-unit">Hz - Motor Hızı</div>
            <div class="info-row" style="margin-top: 15px;">
                <span class="info-label">Akım</span>
                <span class="info-value" id="cizgiMotorAkim">{{ hat.sensor.cizgi_motor_akimi }} A</span>
            </div>
        </div>
    </div>

    <!-- Çekici Hızı Card -->
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card p-4">
            <div class="card-header border-0 p-0 mb-3 d-flex justify-content-between align-items-center">
                <span class="card-title mb-0">🎯 Çekici Hızı</span>
                <div class="card-icon" style="background: #feebc8; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">📊</div>
            </div>
            <div class="metric-value" id="cekiciHiz">{{ hat.sensor.cekici_hizi }}</div>
            <div class="metric-unit">m/min</div>
            <span class="metric-change" id="cekiciChange"></span>
        </div>
    </div>

    <!-- Eriyik Basıncı Card -->
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card p-4">
            <div class="card-header border-0 p-0 mb-3 d-flex justify-content-between align-items-center">
                <span class="card-title mb-0">💧 Eriyik Basıncı</span>
                <div class="card-icon" style="background: #e9d8fd; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">📈</div>
            </div>
            <div class="metric-value" id="eriyikBasinc">{{ hat.sensor.eriyik_basinci }}</div>
            <div class="metric-unit">Bar</div>
            <span class="metric-change" id="eriyikBasincStatus"></span>
        </div>
    </div>

    <!-- Titreşim v-RMS(Magnitude) -->
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card p-4">
            <div class="card-header border-0 p-0 mb-3 d-flex justify-content-between align-items-center">
                <span class="card-title mb-0"> 🌊 v-RMS(Magnitude)</span>
                <div class="card-icon" style="background: #bee3f8; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">⚙️</div>
            </div>
            <div class="metric-value" id="vRmsMag">{{ hat.titresim.v_rms_magnitude }}</div>
            <div class="metric-unit">Magnitude</div>
            <span class="metric-change" id="vRmsStatus"></span>
        </div>
    </div>
    <!-- Titreşim a-RMS(Magnitude) -->
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card p-4">
            <div class="card-header border-0 p-0 mb-3 d-flex justify-content-between align-items-center">
                <span class="card-title mb-0"> 📈 a-RMS(Magnitude)</span>
                <div class="card-icon" style="background: #bee3f8; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">⚙️</div>
            </div>
            <div class="metric-value" id="aRmsMag">{{ hat.titresim.a_rms_magnitude }}</div>
            <div class="metric-unit">Magnitude</div>
            <span class="metric-change" id="aRmsStatus"></span>
        </div>
    </div>
    <!-- Titreşim a-Peak(Magnitude) -->
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card p-4">
            <div class="card-header border-0 p-0 mb-3 d-flex justify-content-between align-items-center">
                <span class="card-title mb-0"> ⚡ a-Peak</span>
                <div class="card-icon" style="background: #bee3f8; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">⚙️</div>
            </div>
            <div class="metric-value" id="aPeakMag">{{ hat.titresim.a_peak_magnitude }}</div>
            <div class="metric-unit">Magnitude</div>
            <span class="metric-change" id="aPeakStatus"></span>
        </div>
    </div>
    <!-- Titreşim Sıcaklık -->
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card p-4">
            <div class="card-header border-0 p-0 mb-3 d-flex justify-content-between align-items-center">
                <span class="card-title mb-0"> 🔥 Sıcaklık</span>
                <div class="card-icon" style="background: #bee3f8; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">⚙️</div>
            </div>
            <div class="metric-value" id="vibeSicaklik">{{ hat.titresim.sicaklik }}</div>
            <div class="metric-unit">°C</div>
            <span class="metric-change" id="vibeSicaklikStatus"></span>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Grafik - Motor Performansı -->
    <div class="col-12 col-lg-6">
        <div class="card p-4 h-100">
            <div class="card-header border-0 p-0 mb-3">
                <span class="card-title">📊 Motor Performans Grafiği</span>
            </div>
            <div class="chart-container" style="position: relative; height: 250px;">
                <canvas id="motorChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Basınç Grafiği -->
    <div class="col-12 col-lg-6">
        <div class="card p-4 h-100">
            <div class="card-header border-0 p-0 mb-3">
                <span class="card-title">💧 Eriyik Basınç Trendi</span>
            </div>
            <div class="chart-container" style="position: relative; height: 250px;">
                <canvas id="pressureChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Sıcaklık Sensörleri -->
    <div class="col-12">
        <div class="card p-4">
            <div class="card-header border-0 p-0 mb-3 d-flex justify-content-between align-items-center">
                <span class="card-title">🌡️ Sıcaklık Sensörleri (°C)</span>
                <span class="info-value">Ortalama: <span id="avgTemp" class="fw-bold">0</span>°C</span>
            </div>
            <div class="temp-grid" id="tempGrid">
                <div class="temp-cell"><div class="temp-label">S1</div>{{ hat.sensor.sicaklik1 }}°</div>
                <div class="temp-cell"><div class="temp-label">S2</div>{{ hat.sensor.sicaklik2 }}°</div>
                <div class="temp-cell"><div class="temp-label">S3</div>{{ hat.sensor.sicaklik3 }}°</div>
                <div class="temp-cell"><div class="temp-label">S4</div>{{ hat.sensor.sicaklik4 }}°</div>
                <div class="temp-cell"><div class="temp-label">S5</div>{{ hat.sensor.sicaklik5 }}°</div>
                <div class="temp-cell"><div class="temp-label">S6</div>{{ hat.sensor.sicaklik6 }}°</div>
                <div class="temp-cell"><div class="temp-label">S7</div>{{ hat.sensor.sicaklik7 }}°</div>
                <div class="temp-cell"><div class="temp-label">S8</div>{{ hat.sensor.sicaklik8 }}°</div>
                <div class="temp-cell"><div class="temp-label">S9</div>{{ hat.sensor.sicaklik9 }}°</div>
                <div class="temp-cell"><div class="temp-label">S10</div>{{ hat.sensor.sicaklik10 }}°</div>
                <div class="temp-cell"><div class="temp-label">S11</div>{{ hat.sensor.sicaklik11 }}°</div>
                <div class="temp-cell"><div class="temp-label">S12</div>{{ hat.sensor.sicaklik12 }}°</div>
                <div class="temp-cell"><div class="temp-label">S13</div>{{ hat.sensor.sicaklik13 }}°</div>
                <div class="temp-cell"><div class="temp-label">S14</div>{{ hat.sensor.sicaklik14 }}°</div>
                <div class="temp-cell"><div class="temp-label">S15</div>{{ hat.sensor.sicaklik15 }}°</div>
                <div class="temp-cell"><div class="temp-label">S16</div>{{ hat.sensor.sicaklik16 }}°</div>
                <div class="temp-cell"><div class="temp-label">S17</div>{{ hat.sensor.sicaklik17 }}°</div>
                <div class="temp-cell"><div class="temp-label">S18</div>{{ hat.sensor.sicaklik18 }}°</div>
                <div class="temp-cell"><div class="temp-label">S19</div>{{ hat.sensor.sicaklik19 }}°</div>
                <div class="temp-cell"><div class="temp-label">S20</div>{{ hat.sensor.sicaklik20 }}°</div>
                <div class="temp-cell"><div class="temp-label">S21</div>{{ hat.sensor.sicaklik21 }}°</div>
                <div class="temp-cell"><div class="temp-label">S22</div>{{ hat.sensor.sicaklik22 }}°</div>
                <div class="temp-cell"><div class="temp-label">S23</div>{{ hat.sensor.sicaklik23 }}°</div>
                <div class="temp-cell"><div class="temp-label">S24</div>{{ hat.sensor.sicaklik24 }}°</div>
                <div class="temp-cell"><div class="temp-label">S25</div>{{ hat.sensor.sicaklik25 }}°</div>
                <div class="temp-cell"><div class="temp-label">S26</div>{{ hat.sensor.sicaklik26 }}°</div>
                <div class="temp-cell"><div class="temp-label">S27</div>{{ hat.sensor.sicaklik27 }}°</div>
                <div class="temp-cell"><div class="temp-label">S28</div>{{ hat.sensor.sicaklik28 }}°</div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script>
    const hatId = {{ hat.id }};
    let motorChart, pressureChart;
    let motorHistory = [];
    let pressureHistory = [];

    // Initialize Charts
    function initCharts() {
        const motorCtx = document.getElementById('motorChart').getContext('2d');
        motorChart = new Chart(motorCtx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Ana Motor (Hz)',
                    data: [],
                    borderColor: '#667eea',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    tension: 0.4,
                    fill: true
                }, {
                    label: 'Çizgi Motor (Hz)',
                    data: [],
                    borderColor: '#48bb78',
                    backgroundColor: 'rgba(72, 187, 120, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: { y: { beginAtZero: false } }
            }
        });

        const pressureCtx = document.getElementById('pressureChart').getContext('2d');
        pressureChart = new Chart(pressureCtx, {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: 'Eriyik Basıncı (Bar)',
                    data: [],
                    backgroundColor: 'rgba(118, 75, 162, 0.8)',
                    borderColor: '#764ba2',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: { y: { beginAtZero: true } }
            }
        });
    }

    // Update UI components with latest data
    function updateUI(latestSensor, latestVibe) {
        if (!latestSensor) return;

        // Update Metrics
        document.getElementById('anaMotorHiz').textContent = latestSensor.ana_motor_hizi.toFixed(3);
        document.getElementById('anaMotorAkim').textContent = latestSensor.ana_motor_akimi.toFixed(2) + ' A';
        document.getElementById('cizgiMotorHiz').textContent = latestSensor.cizgi_motor_hizi.toFixed(3);
        document.getElementById('cizgiMotorAkim').textContent = latestSensor.cizgi_motor_akimi.toFixed(2) + ' A';
        document.getElementById('cekiciHiz').textContent = latestSensor.cekici_hizi.toFixed(3);
        document.getElementById('eriyikBasinc').textContent = latestSensor.eriyik_basinci.toFixed(3) + ' bar';
        
        // Ana Motor Status
        const anaMotorHiz = latestSensor.ana_motor_hizi;
        let anaMotorStatus = document.getElementById('anaMotorStatus');
        if (anaMotorHiz < 323.3) { anaMotorStatus.textContent = '↑ NORMAL'; anaMotorStatus.className = 'metric-change metric-up'; }
        else if (anaMotorHiz < 369.8) { anaMotorStatus.textContent = '↑ UYARI'; anaMotorStatus.className = 'metric-change metric-warning'; }
        else { anaMotorStatus.textContent = '↑ TEHLİKE'; anaMotorStatus.className = 'metric-change metric-danger'; }

        // Eriyik Basıncı Status
        const eriyikBasinc = latestSensor.eriyik_basinci;
        let eriyikBasincStatus = document.getElementById('eriyikBasincStatus');
        if (eriyikBasinc < 0.65) { eriyikBasincStatus.textContent = '↑ NORMAL'; eriyikBasincStatus.className = 'metric-change metric-up'; }
        else { eriyikBasincStatus.textContent = '↑ TEHLİKE'; eriyikBasincStatus.className = 'metric-change metric-danger'; }

        // Update Metrics
        document.getElementById('cizgiMotorAkim').textContent = latestSensor.cizgi_motor_akimi.toFixed(2) + ' A';
        document.getElementById('cekiciHiz').textContent = latestSensor.cekici_hizi.toFixed(3);
        
        // Çekici Status
        const cekiciHiz = latestSensor.cekici_hizi;
        let cekiciChange = document.getElementById('cekiciChange');
        if (cekiciHiz < 1.81) { cekiciChange.textContent = '↑ NORMAL'; cekiciChange.className = 'metric-change metric-up'; }
        else if (cekiciHiz < 2.1) { cekiciChange.textContent = '↑ UYARI'; cekiciChange.className = 'metric-change metric-warning'; }
        else { cekiciChange.textContent = '↑ TEHLİKE'; cekiciChange.className = 'metric-change metric-danger'; }

        // Update Temperatures
        let tempSum = 0;
        let tempCount = 0;
        for (let i = 1; i <= 28; i++) {
            const tempVal = latestSensor[`sicaklik${i}`];
            const cell = document.querySelector(`.temp-grid div:nth-child(${i})`);
            if (cell) {
                cell.innerHTML = `<div class="temp-label">S${i}</div>${tempVal}°`;
                if (tempVal > 0) {
                    tempSum += tempVal;
                    tempCount++;
                }
            }
        }
        if (tempCount > 0) {
            document.getElementById('avgTemp').textContent = Math.round(tempSum / tempCount);
        }

        // Update Vibration Metrics if available
        if (latestVibe) {
            document.getElementById('vRmsMag').textContent = latestVibe.v_rms_magnitude.toFixed(2);
            
            // v-RMS Status
            const vRms = latestVibe.v_rms_magnitude;
            let vRmsStatus = document.getElementById('vRmsStatus');
            if (vRms < 1.12) { vRmsStatus.textContent = 'İYİ'; vRmsStatus.className = 'metric-change metric-up'; }
            else if (vRms < 2.8) { vRmsStatus.textContent = 'KABUL'; vRmsStatus.className = 'metric-change metric-up'; }
            else if (vRms < 7.1) { vRmsStatus.textContent = 'UYARI'; vRmsStatus.className = 'metric-change metric-warning'; }
            else { vRmsStatus.textContent = 'TEHLİKE'; vRmsStatus.className = 'metric-change metric-danger'; }

            document.getElementById('aRmsMag').textContent = latestVibe.a_rms_magnitude;
            
            // a-RMS Status
            const aRms = latestVibe.a_rms_magnitude;
            let aRmsStatus = document.getElementById('aRmsStatus');
            if (aRms < 13.42) { aRmsStatus.textContent = 'İYİ'; aRmsStatus.className = 'metric-change metric-up'; }
            else if (aRms < 16.59) { aRmsStatus.textContent = 'KABUL'; aRmsStatus.className = 'metric-change metric-up'; }
            else { aRmsStatus.textContent = 'TEHLİKE'; aRmsStatus.className = 'metric-change metric-danger'; }

            document.getElementById('aPeakMag').textContent = latestVibe.a_peak_magnitude;
            
            // a-Peak Status
            const aPeak = latestVibe.a_peak_magnitude;
            let aPeakStatus = document.getElementById('aPeakStatus');
            if (aPeak < 9000) { aPeakStatus.textContent = 'İYİ'; aPeakStatus.className = 'metric-change metric-up'; }
            else if (aPeak < 10440) { aPeakStatus.textContent = 'KABUL'; aPeakStatus.className = 'metric-change metric-up'; }
            else if (aPeak < 12778) { aPeakStatus.textContent = 'UYARI'; aPeakStatus.className = 'metric-change metric-warning'; }
            else { aPeakStatus.textContent = 'TEHLİKE'; aPeakStatus.className = 'metric-change metric-danger'; }

            document.getElementById('vibeSicaklik').textContent = latestVibe.sicaklik.toFixed(1);
            
            // Sıcaklık Status
            const vSicaklik = latestVibe.sicaklik;
            let vSicaklikStatus = document.getElementById('vibeSicaklikStatus');
            if (vSicaklik < 45.56) { vSicaklikStatus.textContent = 'İYİ'; vSicaklikStatus.className = 'metric-change metric-up'; }
            else if (vSicaklik < 48.19) { vSicaklikStatus.textContent = 'KABUL'; vSicaklikStatus.className = 'metric-change metric-up'; }
            else { vSicaklikStatus.textContent = 'TEHLİKE'; vSicaklikStatus.className = 'metric-change metric-danger'; }
        }
    }

    // Fetch data from API
    async function fetchData() {
        try {
            const response = await fetch(`/api/last-records/${hatId}`);
            const data = await response.json();

            if (data.sensor && data.sensor.length > 0) {
                const latest = data.sensor[data.sensor.length - 1];
                const latestVibe = data.vibration ? data.vibration[data.vibration.length - 1] : null;

                updateUI(latest, latestVibe);

                // Update Charts
                const labels = data.sensor.map(s => new Date(s.tarih).toLocaleTimeString('tr-TR'));
                
                motorChart.data.labels = labels;
                motorChart.data.datasets[0].data = data.sensor.map(s => s.ana_motor_hizi);
                motorChart.data.datasets[1].data = data.sensor.map(s => s.cizgi_motor_hizi);
                motorChart.update();

                pressureChart.data.labels = labels;
                pressureChart.data.datasets[0].data = data.sensor.map(s => s.eriyik_basinci);
                pressureChart.update();
            }
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    }

    // Update time display
    function updateTime() {
        const now = new Date();
        const timeStr = now.toLocaleTimeString('tr-TR');
        document.getElementById('currentTime').textContent = timeStr;
    }

    // Initial load
    initCharts();
    fetchData();
    updateTime();

    // Periodic refresh
    setInterval(fetchData, 2000);
    setInterval(updateTime, 1000);
</script>
{% endblock content %}