<script setup lang="ts">
import { computed } from 'vue';
import { useSimulation } from '../composables/useSimulation';

const { state, togglePlay, setSpeed } = useSimulation();

const formattedTime = computed(() => {
    const hours = Math.floor(state.value.currentTime);
    const minutes = Math.floor((state.value.currentTime - hours) * 60);
    return `Day ${state.value.day} - ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
});

const netEnergy = computed(() => {
    return (state.value.totalGeneration || 0) - (state.value.totalConsumption || 0);
});
</script>

<template>
  <div class="dashboard-bar">
    
    <!-- Left: Energy Stats -->
    <div class="stat-group">
        <div class="stat-item">
            <span class="label">CONSUMPTION</span>
            <span class="value red">{{ Math.round(state.totalConsumption || 0) }} kW</span>
        </div>
        <div class="stat-item">
            <span class="label">GENERATION</span>
            <span class="value green">{{ Math.round(state.totalGeneration || 0) }} kW</span>
        </div>
        <div class="stat-item">
            <span class="label">NET GRID</span>
            <span class="value" :class="netEnergy >= 0 ? 'green' : 'red'">
                {{ netEnergy > 0 ? '+' : ''}}{{ Math.round(netEnergy) }} kW
            </span>
        </div>
    </div>

    <!-- Center: Time -->
    <div class="time-display">
        {{ formattedTime }}
    </div>

    <!-- Right: Controls -->
    <div class="controls">
        <div class="speed-controls">
            <button @click="setSpeed(1)" :class="{ active: state.speed === 1 }">1x</button>
            <button @click="setSpeed(200)" :class="{ active: state.speed === 200 }">200x</button>
        </div>
        <button class="play-btn" @click="togglePlay" :class="{ active: state.isPlaying }">
            {{ state.isPlaying ? 'PAUSE' : 'PLAY' }}
        </button>
    </div>

  </div>
</template>

<style scoped>
.dashboard-bar {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 80px;
    background: #111;
    border-top: 4px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
    color: white;
    font-family: 'Courier New', monospace;
    z-index: 900;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}

.stat-group {
    display: flex;
    gap: 30px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.label {
    font-size: 0.75rem;
    color: #888;
    font-weight: 700;
}

.value {
    font-size: 1.4rem;
    font-weight: 700;
}

.value.green { color: #00ff00; text-shadow: 0 0 10px rgba(0,255,0,0.3); }
.value.red { color: #ff3333; text-shadow: 0 0 10px rgba(255,0,0,0.3); }

.time-display {
    font-size: 1.8rem;
    font-weight: 900;
    color: #FFD700; /* Gold */
    background: #000;
    padding: 5px 20px;
    border: 2px solid #333;
    letter-spacing: 2px;
}

.controls {
    display: flex;
    gap: 20px;
    align-items: center;
}

.speed-controls {
    display: flex;
    gap: 5px;
    background: #222;
    padding: 4px;
    border: 1px solid #444;
}

button {
    background: transparent;
    border: 2px solid transparent;
    color: #888;
    padding: 6px 12px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.1s;
}

button:hover {
    color: white;
    background: #333;
}

button.active {
    background: #FFD700;
    color: black;
    box-shadow: 0 0 10px #FFD700;
}

.play-btn {
    border: 2px solid #444;
    padding: 10px 24px;
    font-size: 1.1rem;
    background: #222;
    color: white;
}

.play-btn:hover {
    border-color: #fff;
}

.play-btn.active {
    background: #ff3333; /* Stop/Pause color */
    color: white;
    box-shadow: none;
    border-color: #ff0000;
}

</style>
