<template>
  <div>
    <div v-for="(shift, index) in shifts" :key="index" class="shift-item">
      <v-row dense align="center">
        <v-col cols="2">
          <div class="shift-badge body-3">Shift {{ index + 1 }}</div>
        </v-col>
        
        <v-col cols="3">
          <v-text-field
            v-model="shift.dari"
            label="Mulai"
            type="time"
            variant="outlined"
            density="compact"
            hide-details
            class="input-field"
            @update:model-value="emitUpdate"
          />
        </v-col>
        
        <v-col cols="3">
          <v-text-field
            v-model="shift.sampai"
            label="Selesai"
            type="time"
            variant="outlined"
            density="compact"
            hide-details
            class="input-field"
            @update:model-value="emitUpdate"
          />
        </v-col>
        
        <v-col cols="3">
          <v-text-field
            v-model.number="shift.kuota"
            label="Kuota"
            type="number"
            variant="outlined"
            density="compact"
            hide-details
            placeholder="0"
            class="input-field"
            @update:model-value="emitUpdate"
          />
        </v-col>
        
        <v-col cols="1">
          <v-btn
            v-if="shifts.length > 1"
            icon
            size="small"
            variant="text"
            class="btn-delete-shift"
            @click="removeShift(index)"
          >
            <v-icon size="18">mdi-delete</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </div>

    <div class="total-badge">
      <v-icon size="18" class="icon-success">mdi-sigma</v-icon>
      <span class="body-3 text-medium">Total Kuota:</span>
      <v-chip size="small" variant="flat" class="chip-success">
        {{ totalQuota }}
      </v-chip>
    </div>
  </div>
</template>

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

const props = defineProps({
  shifts: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['update:shifts', 'remove-shift']);

const totalQuota = computed(() => {
  return props.shifts.reduce((total, shift) => {
    return total + (parseInt(shift.kuota) || 0);
  }, 0);
});

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

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

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$neutral-300: #F5F7FA;
$neutral-500: #ABBED1;
$neutral-700: #717171;
$secondary-600: #0671E0;
$secondary-700: #0053AD;
$success-200: #F1FBF8;
$success-300: #84DFC1;
$success-600: #009262;
$danger-600: #E02B1D;
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-medium: 500;
$font-weight-semibold: 600;

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

.shift-badge {
  background: linear-gradient(135deg, $secondary-600 0%, $secondary-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;
}

.text-medium {
  font-weight: $font-weight-medium !important;
}

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

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

.total-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: $success-200;
  border-radius: 8px;
  margin-top: 8px;
  border: 1px solid $success-300;
}

.icon-success {
  color: $success-600 !important;
}

.chip-success {
  background-color: $success-600 !important;
  color: $neutral-100 !important;
  font-weight: $font-weight-semibold;
}
</style>