<template>
  <div>
    <div v-for="(ruang, index) in rooms" :key="index" class="ruang-item">
      <v-row dense align="center">
        <v-col cols="1">
          <div class="ruang-badge body-3">{{ index + 1 }}</div>
        </v-col>
        
        <v-col cols="3">
          <v-text-field
            label="No. Ruang"
            v-model="ruang.nomorRuang"
            variant="outlined"
            density="compact"
            hide-details
            placeholder="1"
            class="input-field"
            @update:model-value="emitUpdate"
          />
        </v-col>
        
        <v-col cols="4">
          <v-text-field
            label="Nama Ruang"
            v-model="ruang.namaRuang"
            variant="outlined"
            density="compact"
            hide-details
            placeholder="Ruang Konsultasi"
            class="input-field"
            @update:model-value="emitUpdate"
          />
        </v-col>
        
        <v-col cols="3">
          <v-text-field
            label="No. Screen"
            v-model="ruang.nomorScreen"
            variant="outlined"
            density="compact"
            hide-details
            placeholder="101"
            class="input-field"
            @update:model-value="emitUpdate"
          />
        </v-col>
        
        <v-col cols="1">
          <v-btn
            v-if="rooms.length > 1"
            icon
            size="small"
            variant="text"
            @click="removeRoom(index)"
            class="btn-delete-ruang"
          >
            <v-icon size="18">mdi-delete</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </div>

    <v-btn
      variant="outlined"
      size="small"
      @click="addRoom"
      class="btn-add-ruang mt-2"
    >
      <v-icon left size="18">mdi-plus</v-icon>
      Tambah Ruang
    </v-btn>
  </div>
</template>

<script setup>
const props = defineProps({
  rooms: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['update:rooms', 'add-room', 'remove-room']);

const emitUpdate = () => {
  emit('update:rooms', props.rooms);
};

const addRoom = () => {
  emit('add-room');
};

const removeRoom = (index) => {
  emit('remove-room', index);
};
</script>

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$neutral-300: #F5F7FA;
$neutral-500: #ABBED1;
$success-600: #009262;
$success-700: #1B6E53;
$danger-600: #E02B1D;
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-semibold: 600;

.ruang-item {
  background: $neutral-300;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid $neutral-500;
}

.ruang-badge {
  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
  color: $neutral-100;
  padding: 8px;
  border-radius: 6px;
  text-align: center;
  font-weight: $font-weight-semibold;
}

.body-3 {
  font-size: 14px;
  line-height: 20px;
}

.input-field {
  font-size: 14px;
  line-height: 20px;
}

.btn-delete-ruang {
  color: $danger-600 !important;
}

.btn-add-ruang {
  border-color: $success-600 !important;
  color: $success-600 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 14px;
  line-height: 20px;
}
</style>