<template>
  <v-tooltip 
    :text="isClickable ? 'Klik untuk proses pasien' : ''" 
    location="top"
    :disabled="!isClickable"
  >
    <template #activator="{ props: tooltipProps }">
      <v-card 
        class="patient-card" 
        elevation="2"
        :class="{ 
          'clickable-card': isClickable,
          'fast-track-card': isFastTrack && !isCurrentlyProcessing,
          'processing-card': isCurrentlyProcessing || patient.status === 'diproses'
        }"
        @click="handleCardClick"
        v-bind="isClickable ? tooltipProps : {}"
      >
        <v-card-text class="pa-4">
          <!-- Header: Queue Number, Status & Fast Track Badge -->
          <div class="card-header">
            <div class="header-left">
              <div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
              <div 
                v-if="isFastTrack"
                class="fast-track-icon-wrapper"
              >
                <v-icon 
                  color="#E53935"
                  size="14"
                  class="fast-track-icon"
                >
                  mdi-flash
                </v-icon>
              </div>
            </div>
            <v-chip
              :color="getStatusColor(patient.status)"
              size="small"
              class="status-chip"
            >
              {{ getStatusLabel(patient.status) }}
            </v-chip>
          </div>

          <!-- Patient Info - Compact Single Row -->
          <div class="patient-info mt-3">
            <div class="info-chips-row">
              <v-chip 
                size="small" 
                variant="outlined" 
                class="klinik-chip"
              >
                {{ patient.klinik }}
              </v-chip>
              <!-- Tipe Layanan atau Jenis Pasien -->
              <v-chip 
                v-if="displayJenisPasien"
                size="small" 
                :color="getJenisPasienColor(displayJenisPasien)"
                :variant="getJenisPasienVariant(displayJenisPasien)"
                :class="getJenisPasienClass(displayJenisPasien)"
              >
                {{ displayJenisPasien }}
              </v-chip>
            </div>
            <!-- Nama Dokter untuk Pasien Eksekutif -->
            <div v-if="isEksekutif && patient.namaDokter" class="doctor-info mt-2">
              <v-icon size="16" color="primary" class="doctor-icon">mdi-doctor</v-icon>
              <span class="doctor-name">{{ patient.namaDokter }}</span>
            </div>
          </div>

          
          <div v-if="!isClickable && patient.status === 'terlambat'" class="card-actions mt-3">
            <v-btn
              block
              color="success-600"
              variant="flat"
              size="small"
              class="text-white"
              @click.stop="$emit('action', patient, 'aktifkan')"
            >
              <v-icon start size="18">mdi-check-circle</v-icon>
              Aktifkan
            </v-btn>
          </div>
        </v-card-text>
      </v-card>
    </template>
  </v-tooltip>
</template>

<script setup>
import { computed } from 'vue';
import { useQueueStore } from '~/stores/queueStore';

const queueStore = useQueueStore();

const props = defineProps({
  patient: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['action']);

const isClickable = computed(() => {
  return props.patient.status === 'di-loket' || props.patient.status === 'pending';
});

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

const isCurrentlyProcessing = computed(() => {
  const currentPatient = queueStore.currentProcessingPatient?.loket;
  if (!currentPatient || !props.patient) return false;
  return currentPatient.no === props.patient.no || 
         currentPatient.barcode === props.patient.barcode;
});

const isEksekutif = computed(() => {
  const pembayaran = (props.patient.pembayaran ?? "").toString().trim().toUpperCase();
  return pembayaran === 'EKSEKUTIF';
});

// Computed untuk menentukan jenis pasien yang ditampilkan
const displayJenisPasien = computed(() => {
  // Prioritas 1: Tipe Layanan jika ada
  if (props.patient.tipeLayanan) {
    return props.patient.tipeLayanan;
  }
  // Prioritas 2: Eksekutif jika pasien eksekutif
  if (isEksekutif.value) {
    return 'Eksekutif';
  }
  // Prioritas 3: Tampilkan pembayaran sebagai fallback
  if (props.patient.pembayaran) {
    return props.patient.pembayaran;
  }
  return null;
});

// Fungsi untuk menentukan color chip berdasarkan jenis pasien
const getJenisPasienColor = (jenis) => {
  if (jenis === 'Pemeriksaan Awal') return 'primary';
  if (jenis === 'Tindakan') return 'secondary';
  if (jenis === 'Eksekutif') return 'warning';
  if (jenis === 'Fast Track') return 'warning';
  // Untuk pembayaran biasa (BPJS, UMUM), gunakan neutral-600 untuk kontras
  return 'success-500';
};

// Fungsi untuk menentukan variant chip berdasarkan jenis pasien
const getJenisPasienVariant = (jenis) => {
  // Semua jenis pasien menggunakan flat (filled) untuk kontras dengan klinik (outlined)
  return 'flat';
};

// Fungsi untuk menentukan class chip berdasarkan jenis pasien
const getJenisPasienClass = (jenis) => {
  if (jenis === 'Pemeriksaan Awal' || jenis === 'Tindakan' || jenis === 'Eksekutif' || jenis === 'Fast Track') {
    return 'text-white layanan-chip';
  }
  // Untuk pembayaran biasa (BPJS, UMUM), gunakan text putih untuk kontras dengan background
  return 'text-white layanan-chip';
};

const handleCardClick = () => {
  if (isClickable.value) {
    emit('action', props.patient, 'proses');
  }
};

const getStatusColor = (status) => {
  const colors = {
    'di-loket': "var(--color-primary-600)", // Blue
    diproses: "var(--color-primary-600)",    // Keep as Blue
    terlambat: "var(--color-danger-700)",    // Darker Red
    pending: "var(--color-secondary-600)"    // Orange
  };
  return colors[status] || "var(--color-neutral-600)";
};

const getStatusLabel = (status) => {
  const labels = {
    'di-loket': "Di Loket",
    diproses: "Diproses",
    terlambat: "Terlambat",
    pending: "Pending"
  };
  return labels[status] || status;
};
</script>

<style scoped lang="scss">
.patient-card {
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-500);
  background: var(--color-neutral-100);
  transition: all 0.2s ease;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  &.clickable-card {
    cursor: pointer;

    &:hover {
      border-color: var(--color-primary-600);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    &:active {
      transform: translateY(0);
    }
  }

  &.fast-track-card {
    background: #FBE9E8 !important;
    border-color: rgba(255, 132, 65, 0.5);

    &:hover {
      background: #F1B3AE !important;
      border-color: rgba(255, 132, 65, 0.6);
    }
  }

  &.processing-card {
    background: var(--color-primary-100) !important;
    border-color: var(--color-primary-400);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2) !important;

    &:hover {
      background: var(--color-primary-200) !important;
      border-color: var(--color-primary-500);
      box-shadow: 0 6px 16px rgba(25, 118, 210, 0.25) !important;
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-neutral-400);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-number {
  font-size: 20px;
  font-weight: 700;
  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 .fast-track-icon {
  color: #E53935 !important;
  transition: all 0.2s ease;
}

.status-chip {
  font-weight: 600;
  font-size: 11px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.patient-info {
  display: flex;
  flex-direction: column;
  /* Tinggi dinamis berdasarkan konten - card tanpa dokter akan lebih compact */
}

.info-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.klinik-chip {
  font-size: 11px;
  font-weight: 600;
  height: 24px;
  border-color: var(--color-neutral-600) !important;
  color: var(--color-neutral-900) !important;
  background-color: transparent !important;
}

.layanan-chip {
  font-size: 11px;
  font-weight: 600;
  height: 24px;
}

.doctor-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.doctor-icon {
  flex-shrink: 0;
}

.doctor-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-600);
}

.card-actions .v-btn {
  text-transform: none;
  font-weight: 600;
  font-size: 13px;
  height: 36px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>