<template>
  <v-card class="current-patient-card" elevation="0">
    <v-card-text class="pa-4">
      <div class="section-header mb-3">
        <div class="section-label">SEDANG DIPROSES</div>
        <v-btn
          v-if="patient"
          class="call-button"
          color="primary-600"
          variant="flat"
          size="small"
          @click="$emit('call')"
        >
          <v-icon start size="18">mdi-bullhorn</v-icon>
          Panggil
        </v-btn>
      </div>
      
      <div v-if="patient" class="patient-details" :class="`patient-details-${theme}`">
        <div class="patient-number mb-2">{{ patient.noAntrian.split(" |")[0] }}</div>
        <div class="patient-info-text mb-3">
          <div>{{ patient.barcode }}</div>
          <div>{{ patient.klinik }} | {{ patient.pembayaran }}</div>
        </div>
        
        <div class="action-grid">
          <v-btn class="text-white" color="success-600" variant="flat" block size="large" @click="$emit('action', 'check-in')">
            <v-icon start size="20">mdi-check</v-icon>
            Selesai
          </v-btn>
          <v-btn class="text-white" color="primary-600" variant="flat" block size="large" @click="$emit('action', 'terlambat')">
            <v-icon start size="20">mdi-clock-alert</v-icon>
            Terlambat
          </v-btn>
          <v-btn class="text-white" color="danger-600" variant="flat" block size="large" @click="$emit('action', 'pending')">
            <v-icon start size="20">mdi-pause</v-icon>
            Pending
          </v-btn>
          <v-btn class="text-white" color="secondary-600" variant="flat" block size="large" @click="$emit('change-klinik')">
            <v-icon start size="20">mdi-swap-horizontal</v-icon>
            {{ changeButtonText }}
          </v-btn>
        </div>
      </div>
      
      <div v-else class="empty-state">
        <v-icon size="48" color="grey-lighten-2">mdi-account-off-outline</v-icon>
        <div class="empty-text mb-4">Tidak ada pasien yang diproses</div>
        <v-btn
          block
          class="py-6 text-white"
          color="primary-600"
          size="large"
          :disabled="!hasNextQueue"
          @click="$emit('process-next')"
        >
          <v-icon start>mdi-play-circle</v-icon>
          Proses Antrian Berikutnya
        </v-btn>
        <div v-if="nextQueueInfo" class="next-queue-info mt-3">
          <div class="info-text">{{ nextQueueInfo }}</div>
        </div>
        <div v-else-if="!hasNextQueue" class="no-next-queue mt-3">
          <div class="info-text">Tidak ada antrian di loket</div>
        </div>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup>
defineProps({
  patient: {
    type: Object,
    default: null
  },
  theme: {
    type: String,
    default: 'primary', // 'primary', 'secondary', or 'accent'
    validator: (value) => ['primary', 'secondary', 'accent'].includes(value)
  },
  changeButtonText: {
    type: String,
    default: 'Ubah Klinik'
  },
  hasNextQueue: {
    type: Boolean,
    default: false
  },
  nextQueueInfo: {
    type: String,
    default: null
  }
});

defineEmits(['action', 'change-klinik', 'process-next', 'call']);
</script>

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

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.call-button {
  text-transform: none;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.patient-details {
  border-radius: 8px;
  padding: 16px;
}

.patient-details-primary {
  background: linear-gradient(135deg, var(--color-primary-200) 0%, var(--color-primary-300) 100%);
}

.patient-details-secondary {
  background: linear-gradient(135deg, var(--color-secondary-200) 0%, var(--color-secondary-300) 100%);
}

.patient-details-accent {
  background: linear-gradient(135deg, var(--color-accent-200) 0%, var(--color-accent-300) 100%);
}

.patient-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-neutral-900);
  line-height: 1;
}

.patient-info-text {
  font-size: 13px;
  color: var(--color-neutral-700);
  line-height: 1.5;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.empty-state {
  text-align: center;
  padding: 32px 16px;
}

.empty-text {
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-top: 8px;
}

.next-queue-info,
.no-next-queue {
  text-align: center;
  padding: 8px;
  background: var(--color-neutral-200);
  border-radius: 8px;
}

.info-text {
  font-size: 12px;
  color: var(--color-neutral-700);
  font-weight: 600;
}

@media (max-width: 960px) {
  .action-grid {
    grid-template-columns: 1fr;
  }
}
</style>