<template>
  <div class="gp-monitor-sidebar">
    <div class="sidebar-header">
      <v-icon size="18" class="mr-2" color="#3F51B5">mdi-monitor-dashboard</v-icon>
      <span class="title">MONITOR RUANG</span>
    </div>
    
    <div class="stats-row">
      <div class="stat-box box-success">
        <div class="stat-label text-success">TERSEDIA</div>
        <div class="stat-value text-success">{{ availableCount }}</div>
      </div>
      <div class="stat-box box-danger ml-2">
        <div class="stat-label text-danger">SIBUK</div>
        <div class="stat-value text-danger">{{ busyCount }}</div>
      </div>
    </div>
    
    <div class="rooms-list">
      <GpRoomMonitorCard
        v-for="room in rooms"
        :key="room.id"
        :room-name="room.name"
        :active-patient="room.activePatient"
        :clinic-name="room.clinicName"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import GpRoomMonitorCard from './GpRoomMonitorCard.vue';

const props = defineProps({
  rooms: { type: Array, default: () => [] }
});

const availableCount = computed(() => props.rooms.filter(r => !r.activePatient).length);
const busyCount = computed(() => props.rooms.filter(r => r.activePatient).length);
</script>

<style scoped>
.gp-monitor-sidebar {
  width: 300px;
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--gp-border, #e5e7eb);
}
.sidebar-header {
  padding: 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--gp-border, #e5e7eb);
}
.title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gp-text-primary, #1f2937);
}
.stats-row {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid var(--gp-border, #e5e7eb);
}
.stat-box {
  flex: 1;
  padding: 12px;
  border-radius: 2px;
}
.box-success {
  background: #ECFDF5;
  border: 1px solid #D1FAE5;
}
.box-danger {
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
}
.stat-label {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 4px;
}
.stat-value {
  font-size: 20px;
  font-weight: 700;
}
.text-success { color: var(--gp-success, #10b981); }
.text-danger { color: var(--gp-room-number, #F97316); } /* Orange */

.rooms-list {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
</style>
