<script setup lang="ts">
import { computed } from 'vue'
import { METRICS } from '../services/units'
import MetricChart from './MetricChart.vue'
import type { DataRow } from '../services/api'

const props = defineProps<{ metricKey: string | null; currentData: DataRow }>()
const emit  = defineEmits<{ (e: 'close'): void }>()

const meta  = computed(() => props.metricKey ? METRICS[props.metricKey] : null)
</script>

<style scoped lang="scss">
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover { background: var(--hover); }
}
</style>

<template>
  <Teleport to="body">
    <Transition name="fade">
      <div v-if="metricKey" class="backdrop" @click.self="emit('close')">
        <div class="modal">
          <div class="modal-header">
            <div class="modal-title">
              <span>{{ meta?.icon }}</span>
              <span>{{ meta?.label ?? metricKey }}</span>
            </div>
            <button class="close-btn" @click="emit('close')">✕</button>
          </div>
          <MetricChart :metric-key="metricKey" :current-data="currentData" />
        </div>
      </div>
    </Transition>
  </Teleport>
</template>
