<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps<{ 
    data: [] 
}>()

const assigned = computed(() => props.data.filter(a => a.incident_id != null))
const unassigned = computed(() => props.data.filter(a => a.incident_id == null))

</script>

<template>
  <div class="alarm_groups">

    <div v-if="unassigned.length > 0" class="alarm_group">
      <div class="group_label">UNASSIGNED <span class="group_count">{{ unassigned.length }}</span></div>
      <ul class="alarm_list">
        <li v-for="item in unassigned" :key="item.id"
          class="alarm_item" :class="`sev_${item.severity}`"
          @click="router.push(`/cellsites/${item.site_id}`)">
          <div class="alarm_left">
            <span class="alarm_sev">SEV {{ item.severity }}</span>
            <span class="alarm_site">SITE {{ item.site_id }}</span>
          </div>
          <div class="alarm_body">
            <span class="alarm_text">{{ item.text }}</span>
            <span class="alarm_time">{{ item.created }}</span>
          </div>
        </li>
      </ul>
    </div>

    <div v-if="assigned.length > 0" class="alarm_group">
      <div class="group_label">ASSIGNED <span class="group_count">{{ assigned.length }}</span></div>
      <ul class="alarm_list">
        <li v-for="item in assigned" :key="item.id"
          class="alarm_item assigned" :class="`sev_${item.severity}`"
          @click="router.push(`/cellsites/${item.site_id}`)">
          <div class="alarm_left">
            <span class="alarm_sev">SEV {{ item.severity }}</span>
            <span class="alarm_site">SITE {{ item.site_id }}</span>
          </div>
          <div class="alarm_body">
            <span class="alarm_text">{{ item.text }}</span>
            <span class="alarm_time">{{ item.created }}</span>
          </div>
          <span class="alarm_incident" @click.stop="router.push(`/incidents/${item.incident_id}`)">
            INC #{{ item.incident_id }} →
          </span>
        </li>
      </ul>
    </div>

  </div>
</template>


<style scoped>
.alarm_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.alarm_groups { display: flex; flex-direction: column; gap: 1rem; }

.group_label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--theme-dim);
    margin-bottom: 0.4rem;
}

.group_count {
    color: var(--theme);
    margin-left: 0.5rem;
}

.alarm_item.assigned {
    opacity: 0.6;
}

.alarm_incident {
    font-size: 0.7rem;
    color: var(--theme-dim);
    white-space: nowrap;
    transition: color 0.15s;
}

.alarm_incident:hover {
    color: var(--theme);
}


.alarm_item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-left: 4px solid transparent;
    background: rgba(20, 20, 20, 0.9);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
}

.alarm_item:hover {
    background: rgba(40, 40, 40, 0.9);
}

.alarm_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    gap: 0.2rem;
}

.alarm_sev {
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.alarm_site {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.alarm_body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.alarm_text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.alarm_time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
}

/* severity colors */
.sev_1 { border-left-color: rgb(220, 30, 30); }
.sev_1 .alarm_sev { color: rgb(220, 30, 30); box-shadow: -4px 0 8px rgba(220, 30, 30, 0.4); }
.sev_1 { box-shadow: inset -1px 0 0 0 rgba(220,30,30,0.1); }

.sev_2 { border-left-color: rgb(220, 120, 30); }
.sev_2 .alarm_sev { color: rgb(220, 120, 30); }

.sev_3 { border-left-color: rgb(200, 180, 30); }
.sev_3 .alarm_sev { color: rgb(200, 180, 30); }

.sev_4 { border-left-color: rgb(60, 140, 200); }
.sev_4 .alarm_sev { color: rgb(60, 140, 200); }

.sev_5 { border-left-color: rgb(80, 160, 180); }
.sev_5 .alarm_sev { color: rgb(80, 160, 180); }
</style>
