<template>
  <v-card class="queue-actions-card" elevation="0">
    <v-card-text class="pa-4">
      <div class="section-label mb-3">PANGGIL ANTREAN</div>
      
      <div class="quota-info mb-3">
        <div class="quota-item">
          <span class="quota-label">Kuota</span>
          <span class="quota-value">{{ totalQuota }}</span>
        </div>
        <div class="quota-item">
          <span class="quota-label">Tersedia</span>
          <span class="quota-value quota-available">{{ availableQuota }}</span>
        </div>
        <div class="quota-item full-width">
          <v-progress-linear 
            :model-value="quotaPercentage" 
            color="success-600" 
            height="6" 
            rounded 
            class="mt-1"
          />
          <span class="quota-used">Terpakai: {{ usedQuota }}</span>
        </div>
      </div>

      <div class="call-buttons">
        <v-btn 
          color="success-600" 
          variant="outlined" 
          @click="$emit('call', 1)" 
          
        >
          1
        </v-btn>
        <v-btn color="secondary-600" variant="outlined" @click="$emit('call', 5)">5</v-btn>
        <v-btn color="primary-600" variant="outlined" @click="$emit('call', 10)">10</v-btn>
        <v-btn color="danger-600" variant="outlined" @click="$emit('call', 20)">20</v-btn>
      </div>
    </v-card-text>
  </v-card>
</template>

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

const props = defineProps({
  totalQuota: {
    type: Number,
    default: 150
  },
  usedQuota: {
    type: Number,
    default: 0
  },
  hasNext: {
    type: Boolean,
    default: false
  }
});

const availableQuota = computed(() => props.totalQuota - props.usedQuota);
const quotaPercentage = computed(() => (props.usedQuota / props.totalQuota) * 100);

defineEmits(['call']);
</script>

<style scoped lang="scss">
.queue-actions-card {
  border-radius: 12px;
  border: 1px solid var(--color-neutral-500);
  background: var(--color-neutral-100);
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-neutral-600);
  text-transform: uppercase;
}

.quota-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quota-item {
  background: var(--color-neutral-300);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.quota-item.full-width {
  grid-column: 1 / -1;
}

.quota-label {
  display: block;
  font-size: 11px;
  color: var(--color-neutral-600);
  margin-bottom: 4px;
  font-weight: 600;
}

.quota-value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--color-neutral-900);
}

.quota-available {
  color: var(--color-success-600);
}

.quota-used {
  display: block;
  font-size: 11px;
  color: var(--color-neutral-600);
  margin-top: 4px;
}

.call-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.call-buttons .v-btn {
  font-size: 16px;
  font-weight: 700;
  height: 44px;
}

@media (max-width: 960px) {
  .call-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>