<template>
  <v-dialog v-model="internalModel" max-width="500px">
    <v-card class="dialog-card overflow-hidden rounded-xl" elevation="0">
      <!-- Solid Blue Header -->
      <v-card-title class="bg-primary-600 text-white py-4 px-6 d-flex justify-space-between align-center">
        <div class="d-flex align-center">
          <v-icon start icon="mdi-alert-circle-outline" class="mr-2"></v-icon>
          <span class="text-h6 font-weight-bold">Konfirmasi Selesai</span>
        </div>
        <v-btn icon="mdi-close" variant="text" size="small" @click="internalModel = false" class="text-white"></v-btn>
      </v-card-title>

      <v-card-text class="dialog-content-premium pa-6 text-center">
        <div class="text-center mb-6 text-uppercase font-weight-bold text-caption text-neutral-600" style="letter-spacing: 1px;">
          Tindakan Diperlukan
        </div>
        
        <p class="text-body-1 mb-6">
          Pasien ini <strong>sudah dibuatkan</strong> tiket antrean ruang atau penunjang, namun statusnya belum diselesaikan di Loket.
        </p>
        
        <div class="comparison-container mb-6 mx-auto" style="max-width: 220px; justify-content: center;">
          <div class="comparison-item current">
            <div class="item-label text-center">PASIEN AKTIF</div>
            <div class="item-card">
              <div class="item-number text-danger-700">{{ patient?.noAntrian?.split(' |')[0] || '-' }}</div>
              <div class="item-status">Menunggu Selesai</div>
            </div>
          </div>
        </div>

        <p class="text-body-2 text-neutral-600">
          Apakah Anda ingin menyelesaikan pasien ini sekarang dan melanjutkan ke antrean berikutnya?
        </p>
      </v-card-text>

      <v-divider />

      <v-card-actions class="pa-4 bg-light justify-center">
        <v-btn
          class="px-8 font-weight-bold rounded-lg text-none btn-batal"
          variant="outlined"
          @click="internalModel = false"
          size="large"
        >
          Batal
        </v-btn>
        <v-btn
          class="px-6 font-weight-bold ml-4 rounded-lg text-none btn-confirm"
          variant="flat"
          @click="confirm"
          size="large"
          elevation="2"
        >
          Ya, Selesaikan
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

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

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  patient: {
    type: Object,
    default: null
  }
});

const emit = defineEmits(['update:modelValue', 'confirm']);

const internalModel = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

const confirm = () => {
  emit('confirm');
  internalModel.value = false;
};
</script>

<style scoped>
.dialog-card {
  /* No border to prevent white outline */
}
.bg-light {
  background-color: var(--color-neutral-50) !important;
}


.comparison-container {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--color-neutral-300);
}

.comparison-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-neutral-600);
  letter-spacing: 0.05em;
}

.item-card {
  background: white;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-400);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  text-align: center;
}

.item-number {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.item-status {
  font-size: 11px;
  color: var(--color-neutral-600);
  font-weight: 600;
}

.text-danger-700 {
  color: var(--color-danger-700) !important;
}

.btn-batal {
  border-color: var(--color-neutral-300) !important;
  color: var(--color-neutral-700) !important;
}

.btn-confirm {
  background-color: var(--color-primary-600) !important;
  color: white !important;
}
</style>
