<template>
  <div 
    v-if="selectedBuilding" 
    class="building-panel" 
    ref="panelRef"
    :class="{ 'flipped': isFlipped }"
    :style="panelStyle"
  >
    <div class="header">
        <h3>{{ selectedBuilding.id }} - {{ selectedBuilding.description }}</h3>
        <button class="close-btn" @click="closePanel">×</button>
    </div>
    
    <div class="content">
        <div class="info-row">
            <span class="label">Type:</span>
            <span class="value">{{ selectedBuilding.type }}</span>
        </div>
        
        <div class="section-title">Energy Status</div>
        <div class="info-row">
            <span class="label">Consumption:</span>
            <span class="value">{{ selectedBuilding.consumption }} kWh</span>
        </div>
        <div class="info-row">
            <span class="label">Generation:</span>
            <span class="value">{{ selectedBuilding.generation }} kWh</span>
        </div>
        
        <div class="section-title">IoT Devices</div>
        <p class="iot-text">{{ selectedBuilding.iot || 'No active devices' }}</p>
        
        <div class="actions">
            <button class="action-btn">Toggle Lights</button>
            <button class="action-btn">View Charts</button>
        </div>
    </div>
  </div>
</template>

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

const { selectedBuilding } = useSimulation();
const windowWidth = ref(window.innerWidth);
const windowHeight = ref(window.innerHeight);

const updateDimensions = () => {
    windowWidth.value = window.innerWidth;
    windowHeight.value = window.innerHeight;
};

onMounted(() => window.addEventListener('resize', updateDimensions));
onUnmounted(() => window.removeEventListener('resize', updateDimensions));

const closePanel = () => {
    selectedBuilding.value = null;
};

// Panel Constants
const PANEL_WIDTH = 300;
const PANEL_HEIGHT_EST = 350; // Estimated max height
const MARGIN = 20;

const isFlipped = computed(() => {
    if (!selectedBuilding.value || !selectedBuilding.value.uiY) return false;
    // If top position < panel height + margin, flip to bottom
    // Default alignment is translate(-50%, -110%) -> Above the point
    // So if uiY < 350, the top of panel is off screen (-negative)
    return selectedBuilding.value.uiY < (PANEL_HEIGHT_EST + MARGIN);
});

const panelStyle = computed(() => {
    if (!selectedBuilding.value || !selectedBuilding.value.uiX || !selectedBuilding.value.uiY) return {};

    let x = selectedBuilding.value.uiX;
    let y = selectedBuilding.value.uiY;

    // Clamp X to keep 300px panel within screen
    // Default transform centers it (-50%), so anchor is center.
    // Left edge = x - 150, Right edge = x + 150
    
    const halfWidth = PANEL_WIDTH / 2;
    
    // Check Left Edge
    if (x - halfWidth < MARGIN) {
        x = halfWidth + MARGIN;
    }
    // Check Right Edge
    else if (x + halfWidth > windowWidth.value - MARGIN) {
        x = windowWidth.value - MARGIN - halfWidth;
    }

    return {
        left: x + 'px',
        top: y + 'px'
    };
});
</script>

<style scoped>
.building-panel {
    position: absolute;
    width: 300px;
    background: rgba(20, 20, 25, 0.95); /* Dark HUD background */
    border: 3px solid #000; /* Bold Outline */
    border-radius: 0; /* Sharp corners */
    box-shadow: 6px 6px 0px rgba(0,0,0,0.4); /* Hard drop shadow */
    padding: 0;
    overflow: hidden;
    font-family: 'Courier New', monospace; /* Tech/Game font */
    z-index: 1000;
    pointer-events: auto;
    color: white;
    
    /* Default: Above the point */
    transform: translate(-50%, -110%);
    transition: left 0.05s linear, top 0.05s linear; /* Snappier movement */
}

/* Flip to below the point if active */
.building-panel.flipped {
    transform: translate(-50%, 10%); /* 10% gap below point */
}

.header {
    background: #FFD700; /* Vibrant Gold */
    color: black;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #000;
    text-transform: uppercase;
}

.header h3 {
    margin: 0;
    font-size: 1.0rem;
    font-weight: 900;
}

.close-btn {
    background: black;
    border: 2px solid black;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 8px;
    font-weight: bold;
}
.close-btn:hover {
    background: #ff4444;
}

.content {
    padding: 16px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    border-bottom: 2px dashed #444;
    padding-bottom: 4px;
}

.label {
    color: #aaa;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.value {
    font-weight: 600;
    color: #fff;
    font-family: monospace;
}

.section-title {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    text-transform: uppercase;
    background: #333;
    color: #fff;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    border: 2px solid #000;
}

.iot-text {
    font-size: 0.85rem;
    color: #ccc;
    background: #111;
    padding: 8px;
    border: 2px solid #333;
    margin: 0;
}

.actions {
    margin-top: 20px;
    display: flex;
    gap: 8px;
}

.action-btn {
    flex: 1;
    padding: 8px;
    border: 3px solid #000;
    border-radius: 0;
    background: #ffcc00;
    color: black;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 3px 3px 0px #000;
    transition: all 0.1s;
}

.action-btn:hover {
    transform: translate(2px, 2px); /* Click effect */
    box-shadow: 1px 1px 0px #000;
}

.action-btn:active {
    transform: translate(3px, 3px);
    box-shadow: 0px 0px 0px #000;
}
</style>
