<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 text-white"
          color="primary-500"
          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-header">
          <div class="patient-number-wrapper">
            <div class="patient-number">{{ patient.noAntrian.split(" |")[0] }}</div>
            <div 
              v-if="isFastTrack"
              class="fast-track-icon-wrapper"
            >
              <v-icon 
                color="#E53935"
                size="18"
                class="fast-track-icon"
              >
                mdi-flash
              </v-icon>
            </div>
          </div>
          <div class="action-icons">
            <v-btn
              class="action-icon-btn text-white"
              color="secondary-600"
              variant="flat"
              size="small"
              @click="$emit('change-klinik')"
            >
              <v-icon size="16">mdi-swap-horizontal</v-icon>
              <span class="btn-label">{{ changeButtonText }}</span>
            </v-btn>
            <v-btn
              class="action-icon-btn text-white"
              color="primary-600"
              variant="flat"
              size="small"
              @click="$emit('action', 'terlambat')"
            >
              <v-icon size="16">mdi-clock-alert</v-icon>
              <span class="btn-label">Terlambat</span>
            </v-btn>
            <v-btn
              class="action-icon-btn text-white"
              color="danger-600"
              variant="flat"
              size="small"
              @click="$emit('action', 'pending')"
            >
              <v-icon size="16">mdi-pause</v-icon>
              <span class="btn-label">Pending</span>
            </v-btn>
            <v-btn
              class="action-icon-btn text-white"
              color="success-600"
              variant="flat"
              size="small"
              @click="$emit('action', 'check-in')"
            >
              <v-icon size="16">mdi-check</v-icon>
              <span class="btn-label">Selesai</span>
            </v-btn>
          </div>
        </div>
        <div class="patient-info-text">
          <div class="patient-barcode-rm d-flex align-center">
            <div class="patient-barcode">{{ patient.barcode }}</div>
            <v-chip v-if="patient.noRM" size="x-small" color="primary-600" variant="flat" class="text-white ml-2">
              RM: {{ patient.noRM }}
            </v-chip>
          </div>
          <div class="patient-klinik-pembayaran">{{ patient.klinik }} | {{ patient.pembayaran }}</div>
        </div>

        <!-- NEW: Option to process next even if current is active -->
        <div class="next-action-shortcut mt-2" v-if="hasNextQueue">
          <v-btn
            block
            variant="tonal"
            color="primary-600"
            size="small"
            class="text-none font-weight-bold"
            @click="$emit('process-next')"
          >
            <v-icon start size="16">mdi-skip-next</v-icon>
            Panggil Berikutnya
          </v-btn>
          <div class="info-text text-center mt-1" style="font-size: 10px; color: var(--color-neutral-600);">
            (Gunakan jika lupa klik Selesai pada pasien ini)
          </div>
        </div>
        
        <div class="create-queue-buttons mt-4">
          <div class="create-buttons-container">
            <v-btn
              class="create-btn-ruang py-6 text-white"
              color="primary-600"
              :disabled="!patient"
              @click="$emit('open-klinik-ruang')"
            >
              <v-icon size="20" class="mr-2">mdi-door</v-icon>
              Buat Antrean Ruang
            </v-btn>
            <v-btn
              class="create-btn-penunjang py-6 text-white"
              color="secondary-600"
              :disabled="!patient"
              @click="$emit('open-penunjang')"
            >
              <v-icon size="20" class="mr-2">mdi-clipboard-pulse</v-icon>
              Buat Antrean Penunjang
            </v-btn>
          </div>
        </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>
import { computed } from 'vue';

const props = 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
  }
});

const isFastTrack = computed(() => {
  if (!props.patient) return false;
  const fastTrack = (props.patient.fastTrack ?? "").toString().trim().toUpperCase();
  return fastTrack === 'YA';
});

defineEmits(['action', 'change-klinik', 'process-next', 'call', 'open-klinik-ruang', 'open-penunjang']);
</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;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.call-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.call-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

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

.patient-details-primary {
  background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-100) 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-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}

.patient-number-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.patient-number {
  font-size: 32px;
  line-height: 36px;
  font-weight: 700;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-neutral-900);
}

.fast-track-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 83, 80, 0.15);
  border: 2px solid rgba(229, 57, 53, 0.4);
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.2);
}

.fast-track-icon-wrapper:hover {
  background: #E53935;
  border-color: #E53935;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4);
}

.fast-track-icon-wrapper .fast-track-icon {
  color: #E53935 !important;
  transition: all 0.2s ease;
}

.fast-track-icon-wrapper:hover .fast-track-icon {
  color: white !important;
}

.action-icons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.action-icon-btn {
  min-width: auto !important;
  width: auto !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
  text-transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px;
}

.btn-label {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.action-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}

.action-icon-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.patient-info-text {
  font-size: 14px;
  line-height: 24px;
  color: var(--color-neutral-700);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.patient-barcode {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutral-700);
  font-weight: 400;
}

.patient-klinik-pembayaran {
  font-size: 15px;
  line-height: 22px;
  color: var(--color-neutral-800);
  font-weight: 600;
}

.create-queue-buttons {
  margin-top: 0;
}

.create-buttons-container {
  display: flex;
  gap: 16px;
  width: 100%;
}

.create-queue-buttons .v-btn {
  flex: 1;
  text-transform: none;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
  border-radius: 8px;
  justify-content: center !important;
  text-align: center;
  display: flex !important;
  align-items: center !important;
}

.create-queue-buttons .v-btn :deep(.v-btn__content) {
  justify-content: center !important;
  width: 100%;
  display: flex !important;
  align-items: center !important;
  flex: 1;
}

.create-queue-buttons .v-btn :deep(.v-icon) {
  flex-shrink: 0;
}

.create-btn-ruang {
  background-color: var(--color-primary-600) !important;
  color: var(--color-neutral-100) !important;
}

.create-btn-ruang:hover:not(:disabled) {
  background-color: var(--color-primary-700) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(58, 97, 201, 0.25);
}

.create-btn-penunjang {
  background-color: var(--color-secondary-600) !important;
  color: var(--color-neutral-100) !important;
}

.create-btn-penunjang:hover:not(:disabled) {
  background-color: var(--color-secondary-700) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(241, 111, 41, 0.25);
}

.create-queue-buttons .v-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.create-queue-buttons .v-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

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

.empty-state .v-btn {
  text-transform: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.empty-state .v-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.empty-state .v-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.empty-text {
  font-size: 14px;
  line-height: 20px;
  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;
  line-height: 16px;
  color: var(--color-neutral-700);
  font-weight: 600;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (max-width: 960px) {
  .patient-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .action-icons {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  .action-icon-btn {
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 600px) {
  .create-buttons-container {
    flex-direction: column;
    gap: 12px;
  }
}
</style>