import * as common from '/pages/src/common.mjs';

const valEl = document.getElementById('draft-value');
const barEl = document.getElementById('draft-bar');
const statusEl = document.getElementById('status-text');
const dashEl = document.getElementById('dash');
const wrapperEl = document.getElementById('wrapper');

// Variables par défaut
let userOpacity = 90;
let userZoom = 100;
const MAX_SAVINGS_PCT = 40; 

// --- GESTION REGLAGES ---
function loadSettings() {
    const sOp = localStorage.getItem('myMod_Draft_Op');
    const sZoom = localStorage.getItem('myMod_Draft_Zoom');

    if(sOp) userOpacity = parseInt(sOp);
    if(sZoom) userZoom = parseInt(sZoom);

    const opInput = document.getElementById('in-opacity');
    const zoomInput = document.getElementById('in-zoom');
    
    if(opInput) opInput.value = userOpacity;
    if(zoomInput) zoomInput.value = userZoom;

    applyVisuals();
}

function saveSettings() {
    userOpacity = parseInt(document.getElementById('in-opacity').value);
    userZoom = parseInt(document.getElementById('in-zoom').value);

    localStorage.setItem('myMod_Draft_Op', userOpacity);
    localStorage.setItem('myMod_Draft_Zoom', userZoom);

    applyVisuals();
    if(document.getElementById('settings-panel')) {
        document.getElementById('settings-panel').style.display = 'none';
    }
}

function applyVisuals() {
    const opLabel = document.getElementById('op-label');
    if(opLabel) opLabel.innerText = userOpacity;
    if(dashEl) dashEl.style.backgroundColor = `rgba(0, 0, 0, ${userOpacity/100})`;
    
    const zoomLabel = document.getElementById('zoom-label');
    if(zoomLabel) zoomLabel.innerText = (userZoom/100).toFixed(1);
    if(wrapperEl) wrapperEl.style.transform = `scale(${userZoom/100})`;
}

// --- LOGIQUE ASPIRATION & SUPER TUCK ---
function updateDraft(packet) {
    if (!packet || !packet.state) return;
    const state = packet.state;

    const draftWatts = state.draft || 0;
    const power = state.power || 0;
    const speedKmh = state.speed || 0; 
    const grade = (state.grade || 0) * 100; 

    // --- 1. MISE A JOUR VISUELLE CLASSIQUE ---
    valEl.innerText = Math.round(draftWatts);
    
    let savingsPct = 0;
    if (power > 0) {
        savingsPct = (draftWatts / power) * 100;
    }

    let barPct = (savingsPct / MAX_SAVINGS_PCT) * 100;
    if (barPct > 100) barPct = 100;
    
    barEl.style.width = barPct + '%';

    // --- 2. TEXTE DE STATUT PRINCIPAL ---
    if (grade <= -3.0 && speedKmh >= 58.0) {
        if (power < 10) {
            statusEl.innerText = "🚀 SUPER TUCK ACTIF";
            statusEl.style.color = "#33ccff"; 
            valEl.style.color = "#33ccff";
        } else {
            statusEl.innerText = "🛑 0W REQUIS ➡️ SUPER TUCK";
            statusEl.style.color = "#ffcc33"; 
            valEl.style.color = "white";
        }
    } else if (grade >= 4 && draftWatts < 15) {
        statusEl.innerText = "PENTE > ASPIRATION";
        statusEl.style.color = "#ffcc33"; 
        valEl.style.color = "white";
    } else if (draftWatts < 5) {
        statusEl.innerText = "DANS LE VENT";
        statusEl.style.color = "#aaa"; 
        valEl.style.color = "white";
    } else if (savingsPct < 15) {
        statusEl.innerText = "ASPIRATION LÉGÈRE";
        statusEl.style.color = "#ffffcc"; 
        valEl.style.color = "#ffffcc";
    } else {
        statusEl.innerText = "ASPIRATION MAX";
        statusEl.style.color = "#44ff44"; 
        valEl.style.color = "#44ff44";
    }
}

// --- MAIN ---
export async function main() {
    loadSettings();

    const btnSettings = document.getElementById('btn-settings');
    if(btnSettings) {
        btnSettings.addEventListener('click', () => {
            const p = document.getElementById('settings-panel');
            if(p) p.style.display = p.style.display === 'block' ? 'none' : 'block';
        });
    }
    
    const btnSave = document.getElementById('btn-save');
    if(btnSave) btnSave.addEventListener('click', saveSettings);

    const inOpacity = document.getElementById('in-opacity');
    if(inOpacity) {
        inOpacity.addEventListener('input', (e) => {
            userOpacity = e.target.value; applyVisuals();
        });
    }
    
    const inZoom = document.getElementById('in-zoom');
    if(inZoom) {
        inZoom.addEventListener('input', (e) => {
            userZoom = e.target.value; applyVisuals();
        });
    }

    if (common && common.initInteractionListeners) {
        common.initInteractionListeners();
        
        common.subscribe('athlete/watching', (packet) => {
            if(packet) {
                updateDraft(packet);
            }
        });
    }
}