<!-- pages/Anjungan/AntrianLoket/index.vue -->
<template>
  <div class="antrian-display-container">
    <!-- Header -->
    <div class="display-header">
      <div class="header-left">
        <div class="logo-circle">
          <img 
            src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp" 
            alt="RSUD Logo" 
            class="header-logo"
          />
        </div>
        <div class="header-text">
          <h1 class="hospital-name">ANTRIAN LOKET</h1>
          <p class="display-subtitle">RSUD dr. Saiful Anwar Provinsi Jawa Timur</p>
          <p v-if="loketData" class="klinik-info">{{ loketData.namaLoket }}</p>
        </div>
      </div>
      <div class="header-right">
        <div class="datetime-display">
          <div class="time-large">{{ currentTime }}</div>
          <div class="date-small">{{ currentDate }}</div>
        </div>
      </div>
    </div>

    <!-- Hero Call Section - Large with multiple calls on the side -->
    <div class="hero-main-section">
      <div v-if="currentCalledQueue" class="hero-call-section">
        <div class="call-label">
          <v-icon size="32" color="white" class="mr-2">mdi-bullhorn</v-icon>
          SEDANG DIPANGGIL
        </div>
        <div class="call-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
        <div class="call-klinik">{{ currentCalledQueue.klinik || 'Klinik' }}</div>
        <div v-if="currentMultipleCallsTimer" class="call-timer-main">
          <v-icon size="20" color="white">mdi-timer</v-icon>
          <span>{{ currentMultipleCallsTimer }}</span>
        </div>
      </div>
      
      <!-- Multiple Calls Cards (Small) on the right -->
      <div v-if="currentMultipleCalls && currentMultipleCalls.length > 1" class="hero-multiple-calls-side">
        <div 
          v-for="(queue, idx) in currentMultipleCalls.slice(1)" 
          :key="`multi-call-${queue.no}`"
          class="hero-call-card-side"
        >
          <div class="call-number-side">{{ queue.noAntrian.split(' |')[0] }}</div>
          <div v-if="currentMultipleCallsTimer && idx === 0" class="call-timer-side">
            <v-icon size="12" color="white">mdi-timer</v-icon>
            <span>{{ currentMultipleCallsTimer }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Next 5 Tickets to be Called -->
    <div v-if="nextTicketsToCall && nextTicketsToCall.length > 0" class="next-tickets-section">
      <div class="next-tickets-header">
        <v-icon size="24" color="primary-600">mdi-clock-fast</v-icon>
        <span>5 Tiket Akan Dipanggil Tercepat</span>
      </div>
      <div class="next-tickets-grid">
        <div 
          v-for="(ticket, idx) in nextTicketsToCall" 
          :key="`next-${ticket.no}`"
          class="next-ticket-card"
          :class="{ 
            'is-multiple-call': ticket.isMultipleCall,
            'highlight-called': isCalled(ticket),
            'is-next-in-queue': idx === 0 && !isCalled(ticket)
          }"
        >
          <div class="next-ticket-number">{{ ticket.noAntrian.split(' |')[0] }}</div>
          <div class="next-ticket-klinik">{{ ticket.klinik || 'Klinik' }}</div>
          <div v-if="ticket.loket" class="next-ticket-loket">{{ ticket.loket }}</div>
          <div v-if="getTimerText(ticket)" class="next-ticket-timer">
            <v-icon size="14" color="warning">mdi-timer</v-icon>
            <span>{{ getTimerText(ticket) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Main Grid - Display Klinik -->
    <div class="kliniks-grid">
      <div
        v-for="klinik in displayedClinics"
        :key="klinik.name"
        class="klinik-box"
      >
        <!-- Klinik Header -->
        <div class="klinik-header-bar">
          <span class="klinik-title">{{ klinik.name }}</span>
          <v-chip size="small" class="klinik-count">
            <v-icon size="16" color="white" class="mr-1">mdi-account-multiple</v-icon>
            <span class="count-text">{{ klinik.totalQueues }}</span>
          </v-chip>
        </div>

          <!-- Queue Content -->
          <div class="klinik-content">
            <!-- Current Serving Queue (Large) -->
            <div class="current-serving-section">
              <div class="current-label">SEDANG DILAYANI</div>
              <div 
                v-if="klinik.currentQueue"
                class="current-number-large"
                :class="{ 'highlight-called': isCalled(klinik.currentQueue) }"
              >
                {{ klinik.currentQueue.noAntrian.split(' |')[0] }}
              </div>
              <div v-else class="current-waiting-text">
                MENUNGGU PANGGILAN
              </div>
            </div>

            <!-- All Queues Grid (Small) - Shows all queues including current and multiple calls -->
            <div 
              v-if="klinik.allQueues && klinik.allQueues.length > 0" 
              class="all-queues-grid"
              :style="getGridStyle(klinik.allQueues.length)"
            >
              <div 
                v-for="queue in klinik.allQueues" 
                :key="`queue-${queue.no}`"
                class="queue-grid-item"
                :class="{ 
                  'is-current': queue.no === klinik.currentQueue?.no,
                  'is-multiple': klinik.multipleCalls?.some(mc => mc.no === queue.no),
                  'highlight-called': isCalled(queue),
                  'is-terlambat': queue.status === 'terlambat',
                  'is-pending': queue.status === 'pending'
                }"
              >
                {{ queue.noAntrian.split(' |')[0] }}
              </div>
            </div>

            <!-- Empty State -->
            <div v-if="!klinik.currentQueue && (!klinik.allQueues || klinik.allQueues.length === 0)" class="empty-state">
              <v-icon size="48" color="grey-lighten-3">mdi-clock-outline</v-icon>
              <p class="empty-text">Tidak Ada Antrian</p>
            </div>
          </div>
      </div>
    </div>

    <!-- Footer Stats -->
    <div class="footer-stats-bar">
      <div class="stat-item">
        <div class="stat-icon stat-icon-total">
          <v-icon size="32" color="success-600">mdi-format-list-numbered</v-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ statistics.total }}</div>
          <div class="stat-label">Total Antrian</div>
        </div>
      </div>

      <div class="stat-divider"></div>

      <div class="stat-item">
        <div class="stat-icon stat-icon-active">
          <v-icon size="32" color="success-600">mdi-account-check</v-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ statistics.active }}</div>
          <div class="stat-label">Sedang Dilayani</div>
        </div>
      </div>

      <div class="footer-message">
        <v-icon size="24" color="success-600" class="mr-2">mdi-information</v-icon>
        <span>Harap perhatikan nomor antrian Anda di layar</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useQueueStore } from '@/stores/queueStore'
import { useLoketStore } from '@/stores/loketStore'
import { useMasterStore } from '@/stores/masterStore'
import { useClinicStore } from '@/stores/clinicStore'
import { useRoute } from '#app'

definePageMeta({
  layout: false,
})

const route = useRoute()
const queueStore = useQueueStore()
const loketStore = useLoketStore()
const masterStore = useMasterStore()
const clinicStore = useClinicStore()

const currentTime = ref('')
const currentDate = ref('')
let timeInterval = null

// Get loket ID from route
const loketId = computed(() => {
  const id = route.params.id
  const idValue = Array.isArray(id) ? id[0] : id
  const parsed = parseInt(idValue)
  return isNaN(parsed) ? null : parsed
})

// Get loket data for this ID
const loketData = computed(() => {
  const id = loketId.value
  if (!id) return null
  return loketStore.getLoketById(id) || null
})

// Get current processing patient dari AdminLoket
const currentProcessingPatient = computed(() => {
  return queueStore.currentProcessingPatient?.loket || null
})

// Get all patients with processStage "loket" and filter status "di-loket" (sudah check-in)
// Hanya tampilkan nomor antrian yang sudah check-in dan berstatus "di-loket"
const loketPatients = computed(() => {
  const allPatients = queueStore.getPatientsByStage('loket').value.all
  // Hanya tampilkan antrian dengan status "di-loket" (sudah check-in di admin loket)
  // Jangan tampilkan status "waiting", "menunggu", "terlambat", atau "pending"
  return allPatients.filter(p => p.status === 'di-loket')
})

// Helper untuk mendapatkan waktu check-in atau waktu dipanggil
const getCheckInTime = (patient) => {
  // Jika ada checkInAt, gunakan itu
  if (patient.checkInAt) {
    return new Date(patient.checkInAt)
  }
  // Jika status di-loket dan ada createdAt, gunakan createdAt sebagai waktu check-in
  if (patient.status === 'di-loket' && patient.createdAt) {
    return new Date(patient.createdAt)
  }
  // Jika ada lastCalledAt, gunakan itu
  if (patient.lastCalledAt) {
    return new Date(patient.lastCalledAt)
  }
  // Fallback ke createdAt
  return new Date(patient.createdAt || 0)
}

// Helper untuk mendapatkan nama klinik dari pasien
// Membaca poli/klinik dari nomor antrian yang dibuat sebelumnya
// Nomor antrian dibuat dengan kode klinik tertentu, jadi kita baca dari data pasien
const getKlinikNameFromPatient = (patient) => {
  // Prioritas 1: Gunakan kodeKlinik dari data pasien (dari nomor antrian yang dibuat sebelumnya)
  // Ini adalah sumber kebenaran karena kodeKlinik disimpan saat nomor antrian dibuat
  if (patient.kodeKlinik) {
    // Cari di clinicStore terlebih dahulu
    const clinic = clinicStore.getClinicByKode ? clinicStore.getClinicByKode(patient.kodeKlinik) : null
    if (clinic && clinic.name) {
      return clinic.name.trim()
    }
    // Fallback ke masterStore
    const klinikData = masterStore.getKlinikByKode ? masterStore.getKlinikByKode(patient.kodeKlinik) : null
    if (klinikData && klinikData.nama) {
      return klinikData.nama.trim()
    }
  }
  
  // Prioritas 2: Gunakan patient.klinik jika ada dan valid
  // Ini juga dari data pasien yang dibuat sebelumnya
  if (patient.klinik && patient.klinik.trim() !== '') {
    return patient.klinik.trim()
  }
  
  // Prioritas 3: Coba parse dari noAntrian sebagai fallback
  // Catatan: Format nomor antrian adalah RA001, EA001, dll (R/E + Loket + nomor)
  // Kode klinik tidak langsung terlihat dari format ini, tapi kita coba match dengan kode yang ada
  if (patient.noAntrian) {
    const noAntrianPart = patient.noAntrian.split(' |')[0] // Ambil bagian sebelum " |"
    // Hapus prefix R/E dan Fast Track (F) jika ada
    const withoutPrefix = noAntrianPart.replace(/^[FR]?[RE]?/, '') // Hapus F, R, E di awal
    const match = withoutPrefix.match(/^([A-Z]+)/) // Extract kode loket/klinik (A, B, C, dll)
    
    if (match) {
      const kode = match[1]
      
      // Cek semua kemungkinan kode di clinicStore
      let allClinics = []
      if (clinicStore.getAllClinics) {
        allClinics = typeof clinicStore.getAllClinics === 'function' 
          ? clinicStore.getAllClinics() 
          : (clinicStore.getAllClinics.value || [])
      }
      
      // Coba match dengan kode klinik yang ada
      let matchedClinic = allClinics.find(c => c.kode === kode)
      
      if (matchedClinic && matchedClinic.name) {
        return matchedClinic.name.trim()
      }
      
      // Fallback ke masterStore
      const klinikData = masterStore.getKlinikByKode ? masterStore.getKlinikByKode(kode) : null
      if (klinikData && klinikData.nama) {
        return klinikData.nama.trim()
      }
    }
  }
  
  // Fallback: UMUM
  return 'UMUM'
}

// Display clinics with their queues - Group by klinik, filtered by loket pelayanan
const displayedClinics = computed(() => {
  // Get pelayanan dari loket yang dipilih
  const targetLoketId = loketId.value
  let allowedPelayananCodes = []
  
  if (targetLoketId && loketData.value) {
    // Ambil pelayanan dari loket (array of kode klinik seperti ['AN', 'IP', 'SR'])
    allowedPelayananCodes = loketData.value.pelayanan || []
  }
  
  // Jika tidak ada loketId atau pelayanan kosong, tampilkan semua
  const shouldFilterByPelayanan = targetLoketId && allowedPelayananCodes.length > 0
  
  // Include currentProcessingPatient dalam list jika ada
  let allPatientsForDistribution = [...loketPatients.value]
  
  // Include currentProcessingPatient jika ada
  if (currentProcessingPatient.value) {
    const existsInList = allPatientsForDistribution.find(p => p.no === currentProcessingPatient.value.no)
    if (!existsInList) {
      allPatientsForDistribution.push(currentProcessingPatient.value)
    }
  }
  
  // Filter berdasarkan loket jika ada loketId di route
  if (targetLoketId) {
    allPatientsForDistribution = allPatientsForDistribution.filter(p => {
      const patientLoketId = p.loketId || 1
      return patientLoketId === targetLoketId || 
             patientLoketId === targetLoketId.toString() ||
             (p.loket && loketData.value && p.loket.toLowerCase().includes(loketData.value.namaLoket?.toLowerCase() || ''))
    })
  }
  
  // Group by klinik dan filter berdasarkan pelayanan loket
  const clinicsMap = new Map()
  
  allPatientsForDistribution.forEach(patient => {
    // Gunakan helper untuk mendapatkan nama klinik yang benar
    // Ini akan parse dari noAntrian jika patient.klinik tidak sesuai
    const klinikName = getKlinikNameFromPatient(patient)
    
    // Jika ada filter pelayanan, cek apakah klinik ini ada di pelayanan loket
    if (shouldFilterByPelayanan) {
      // Cari kode klinik dari nama klinik menggunakan clinicStore
      const clinic = clinicStore.getClinicByName ? clinicStore.getClinicByName(klinikName) : null
      
      if (clinic) {
        // Jika ditemukan di clinicStore, cek apakah kode-nya ada di pelayanan
        const isAllowed = allowedPelayananCodes.includes(clinic.kode)
        if (!isAllowed) return // Skip jika tidak ada di pelayanan
      } else {
        // Jika tidak ditemukan di clinicStore, cek menggunakan masterStore
        // Juga cek dari noAntrian jika ada (RA001 -> RA -> Radioterapi)
        let matchedKode = allowedPelayananCodes.find(kode => {
          const k = masterStore.getKlinikByKode ? masterStore.getKlinikByKode(kode) : null
          return k && k.nama === klinikName
        })
        
        // Jika belum match, coba parse dari noAntrian
        if (!matchedKode && patient.noAntrian) {
          const noAntrianPart = patient.noAntrian.split(' |')[0]
          const match = noAntrianPart.match(/^([A-Z]+)/)
          if (match) {
            const kodeFromNoAntrian = match[1]
            matchedKode = allowedPelayananCodes.find(kode => kode === kodeFromNoAntrian)
          }
        }
        
        if (!matchedKode) return // Skip jika tidak match
      }
    }
    
    // Pastikan pasien memiliki klinik yang valid sebelum di-group
    if (!klinikName || klinikName.trim() === '') {
      return // Skip jika klinik tidak valid
    }
    
    if (!clinicsMap.has(klinikName)) {
      clinicsMap.set(klinikName, [])
    }
    // Pastikan pasien yang di-push memiliki klinik yang sesuai
    clinicsMap.get(klinikName).push(patient)
  })
  
  // Jika ada filter pelayanan, pastikan semua pelayanan loket ditampilkan (meskipun belum ada antrian)
  if (shouldFilterByPelayanan) {
    allowedPelayananCodes.forEach(kode => {
      const klinikData = masterStore.getKlinikByKode ? masterStore.getKlinikByKode(kode) : null
      if (klinikData && !clinicsMap.has(klinikData.nama)) {
        // Tambahkan klinik kosong jika belum ada antrian
        clinicsMap.set(klinikData.nama, [])
      }
    })
  }
  
  // Process each clinic
  const clinics = Array.from(clinicsMap.entries()).map(([klinikName, patients]) => {
    // Sort berdasarkan prioritas untuk multiple klinik dalam satu loket:
    // 1. Waktu generate tiket (createdAt) - yang lebih lama lebih dulu
    // 2. Urutan tiket (no) - yang lebih kecil lebih dulu
    // 3. Waktu check-in - yang lebih lama lebih dulu
    const sortedQueues = patients.sort((a, b) => {
      // Prioritas 1: Waktu generate tiket
      const createdAtA = new Date(a.createdAt || 0)
      const createdAtB = new Date(b.createdAt || 0)
      if (createdAtA.getTime() !== createdAtB.getTime()) {
        return createdAtA - createdAtB
      }
      
      // Prioritas 2: Urutan tiket
      if (a.no !== b.no) {
        return a.no - b.no
      }
      
      // Prioritas 3: Waktu check-in
      const checkInA = getCheckInTime(a)
      const checkInB = getCheckInTime(b)
      return checkInA - checkInB
    })
    
    // Deteksi multiple calls (antrian yang dipanggil bersamaan dalam 5 detik)
    const multipleCallGroups = []
    const processed = new Set()
    
    sortedQueues.forEach((queue, index) => {
      if (processed.has(queue.no)) return
      
      // Hanya proses antrian dengan status 'di-loket' (sudah check-in)
      if (queue.status === 'di-loket') {
        const callTime = queue.lastCalledAt ? new Date(queue.lastCalledAt) : (queue.createdAt ? new Date(queue.createdAt) : null)
        if (callTime) {
          const group = [queue]
          processed.add(queue.no)
          
          sortedQueues.forEach((otherQueue, otherIndex) => {
            if (otherIndex !== index && !processed.has(otherQueue.no) && otherQueue.status === 'di-loket') {
              const otherCallTime = otherQueue.lastCalledAt ? new Date(otherQueue.lastCalledAt) : (otherQueue.createdAt ? new Date(otherQueue.createdAt) : null)
              if (otherCallTime) {
                const timeDiff = Math.abs(callTime - otherCallTime)
                // Jika dipanggil dalam 5 detik, anggap sebagai multiple call
                if (timeDiff <= 5000) {
                  group.push(otherQueue)
                  processed.add(otherQueue.no)
                }
              }
            }
          })
          
          if (group.length > 1) {
            multipleCallGroups.push(group)
          }
        }
      }
    })
    
    // Flatten multiple call groups untuk mendapatkan semua multiple calls
    const allMultipleCalls = multipleCallGroups.flat()
    
    // Current queue adalah yang sedang dilayani untuk klinik ini
    // Prioritas 1: Pasien yang sedang dipanggil di hero section (currentCalledQueue) jika sesuai dengan klinik ini
    // Prioritas 2: Pasien yang status 'di-loket' (yang sedang dilayani)
    // PASTIKAN hanya mengambil dari pasien yang klinik-nya sesuai dengan card ini
    let currentQueue = null
    
    // Normalize nama klinik sekali di awal scope
    const normalizedKlinikName = klinikName.trim()
    
    // Prioritas 1: Cek apakah pasien yang sedang dipanggil di hero section sesuai dengan klinik ini
    // Jika pasien dipanggil di hero section, tampilkan di "SEDANG DILAYANI" di card klinik yang sesuai
    // Filter berdasarkan nama klinik: jika RADIOTERAPI dipanggil, tampilkan di card RADIOTERAPI, dst
    if (currentCalledQueue.value) {
      const heroPatient = currentCalledQueue.value
      const heroKlinik = getKlinikNameFromPatient(heroPatient)
      
      // Pastikan nama klinik dari hero section sesuai dengan card ini
      if (heroKlinik === normalizedKlinikName) {
        // Cari pasien di sortedQueues berdasarkan no, noAntrian, atau barcode
        const heroInQueues = sortedQueues.find(q => 
          q.no === heroPatient.no || 
          (q.noAntrian && heroPatient.noAntrian && q.noAntrian === heroPatient.noAntrian) ||
          (q.barcode && heroPatient.barcode && q.barcode === heroPatient.barcode)
        )
        
        if (heroInQueues) {
          // Gunakan pasien dari sortedQueues (data lebih lengkap)
          // Pastikan pasien ini sesuai dengan filter (processStage 'loket')
          if (heroInQueues.processStage === 'loket') {
            currentQueue = heroInQueues
          }
        } else {
          // Jika tidak ada di sortedQueues, gunakan langsung dari hero section
          // Pastikan pasien sesuai dengan filter (processStage 'loket' dan status 'di-loket')
          if (heroPatient.processStage === 'loket' && 
              heroPatient.status === 'di-loket') {
            // Langsung gunakan pasien dari hero section karena sudah dipanggil dan check-in
            currentQueue = heroPatient
          }
        }
      }
    }
    
    // Prioritas 2: Cari yang sedang di-loket (sedang dilayani) dan pastikan klinik-nya sesuai
    // HANYA ambil yang dipanggil dari admin loket (processStage masih 'loket')
    // Gunakan helper untuk mendapatkan nama klinik yang benar dari pasien
    if (!currentQueue) {
      const diLoketQueues = sortedQueues.filter(q => {
        // Pastikan:
        // 1. Status 'di-loket' (sudah check-in di admin loket)
        // 2. processStage masih 'loket' (masih di admin loket, belum pindah ke klinik)
        // 3. Klinik-nya sesuai dengan card ini
        const patientKlinik = getKlinikNameFromPatient(q)
        return q.status === 'di-loket' && 
               q.processStage === 'loket' && 
               patientKlinik === normalizedKlinikName
      })
      
      if (diLoketQueues.length > 0) {
        // Ambil yang paling lama (berdasarkan waktu check-in atau createdAt)
        currentQueue = diLoketQueues.sort((a, b) => {
          const checkInA = getCheckInTime(a)
          const checkInB = getCheckInTime(b)
          return checkInA - checkInB // Yang lebih lama lebih dulu
        })[0]
      }
    }
    
    // Multiple calls untuk display - semua yang dipanggil bersamaan (termasuk yang sudah di-loket)
    // Pastikan hanya dari klinik ini
    const multipleCalls = allMultipleCalls.filter(q => {
      // Pastikan dari klinik yang sama (gunakan helper untuk mendapatkan nama klinik yang benar)
      const queueKlinik = getKlinikNameFromPatient(q)
      if (queueKlinik !== normalizedKlinikName) return false
      // Exclude currentQueue jika ada
      return q.no !== currentQueue?.no || currentQueue?.status !== 'di-loket'
    })
    
    // Validasi akhir: pastikan currentQueue benar-benar dari klinik ini dan dari admin loket
    let validatedCurrentQueue = currentQueue
    if (validatedCurrentQueue) {
      // Pastikan klinik-nya sesuai
      const queueKlinik = getKlinikNameFromPatient(validatedCurrentQueue)
      if (queueKlinik !== normalizedKlinikName) {
        // Jika tidak match, set ke null untuk menghindari menampilkan tiket yang salah
        validatedCurrentQueue = null
      }
      
      // Pastikan processStage masih 'loket' (dipanggil dari admin loket)
      if (validatedCurrentQueue && validatedCurrentQueue.processStage !== 'loket') {
        validatedCurrentQueue = null
      }
      
      // Pastikan status selalu 'di-loket' (sudah check-in di admin loket)
      if (validatedCurrentQueue && validatedCurrentQueue.status !== 'di-loket') {
        validatedCurrentQueue = null
      }
    }
    
    // Validasi allQueues: pastikan semua pasien benar-benar dari klinik ini
    // Hanya ambil yang status 'di-loket' (sudah check-in) dan dipanggil dari admin loket
    const validatedAllQueues = sortedQueues.filter(q => {
      // Pastikan:
      // 1. Status 'di-loket' (sudah check-in di admin loket)
      // 2. processStage masih 'loket' (masih di admin loket, belum pindah ke klinik)
      // 3. Klinik-nya sesuai dengan card ini (dibaca dari nomor antrian)
      const queueKlinik = getKlinikNameFromPatient(q)
      return q.status === 'di-loket' && 
             q.processStage === 'loket' && 
             queueKlinik === normalizedKlinikName
    })
    
    return {
      name: klinikName,
      currentQueue: validatedCurrentQueue,
      multipleCalls: multipleCalls,
      allQueues: validatedAllQueues,
      totalQueues: validatedAllQueues.length
    }
  })
  
  return clinics.sort((a, b) => a.name.localeCompare(b.name))
})

// Helper untuk cek apakah tiket masih dalam TTS window (15 detik)
const isInTTSWindow = (queue) => {
  if (!queue) return false
  
  const _ = currentTime.value // Force reactivity
  
  const callTime = queue.lastCalledAt ? new Date(queue.lastCalledAt) : null
  if (!callTime) return false
  
  const ttsDuration = 15000 // 15 detik
  const elapsed = Date.now() - callTime.getTime()
  const remaining = ttsDuration - elapsed
  
  return remaining > 0
}

// Current called queue - tiket yang sedang diproses di admin loket
// Nomor antrian menjadi "dipanggil" jika diproses pada AdminLoket
const currentCalledQueue = computed(() => {
  // Prioritas 1: Pasien yang sedang diproses di admin loket (currentProcessingPatient)
  // Ini adalah pasien yang sedang dipanggil/diproses di AdminLoket
  if (currentProcessingPatient.value) {
    const processingPatient = currentProcessingPatient.value
    // Pastikan pasien memiliki noAntrian dan status 'di-loket' (sudah check-in)
    if (processingPatient.noAntrian && processingPatient.status === 'di-loket') {
      // Dapatkan nama klinik dari nomor antrian
      const klinikName = getKlinikNameFromPatient(processingPatient)
      return {
        ...processingPatient,
        klinik: klinikName || processingPatient.klinik || 'Klinik'
      }
    }
  }
  
  return null
})

// Current multiple calls - antrian yang dipanggil bersamaan
const currentMultipleCalls = computed(() => {
  const allMultipleCalls = displayedClinics.value
    .flatMap(klinik => (klinik.multipleCalls || []).map(queue => ({
      ...queue,
      klinikName: klinik.name
    })))
    .sort((a, b) => {
      const timeA = a.lastCalledAt ? new Date(a.lastCalledAt) : new Date(a.createdAt || 0)
      const timeB = b.lastCalledAt ? new Date(b.lastCalledAt) : new Date(b.createdAt || 0)
      return timeB - timeA
    })
  
  if (allMultipleCalls.length > 0) {
    // Group by call time (within 5 seconds)
    const groups = []
    const processed = new Set()
    
    allMultipleCalls.forEach(queue => {
      if (processed.has(queue.no)) return
      
      const callTime = queue.lastCalledAt ? new Date(queue.lastCalledAt) : new Date(queue.createdAt || 0)
      const group = [queue]
      processed.add(queue.no)
      
      allMultipleCalls.forEach(otherQueue => {
        if (!processed.has(otherQueue.no)) {
          const otherCallTime = otherQueue.lastCalledAt ? new Date(otherQueue.lastCalledAt) : new Date(otherQueue.createdAt || 0)
          const timeDiff = Math.abs(callTime - otherCallTime)
          if (timeDiff <= 5000) {
            group.push(otherQueue)
            processed.add(otherQueue.no)
          }
        }
      })
      
      if (group.length > 1) {
        groups.push(group)
      }
    })
    
    if (groups.length > 0) {
      // Return most recent group
      return groups[0].map(q => ({
        ...q,
        klinik: q.klinikName || q.klinik || 'Klinik'
      }))
    }
  }
  
  return null
})

// Timer untuk card utama (TTS countdown)
const currentMultipleCallsTimer = computed(() => {
  if (!currentCalledQueue.value) return null
  
  const _ = currentTime.value // Force reactivity
  
  const callTime = currentCalledQueue.value.lastCalledAt ? new Date(currentCalledQueue.value.lastCalledAt) : null
  if (!callTime) return null
  
  const ttsDuration = 15000 // 15 detik
  const elapsed = Date.now() - callTime.getTime()
  const remaining = Math.max(0, ttsDuration - elapsed)
  
  if (remaining <= 0) return null
  
  const seconds = Math.ceil(remaining / 1000)
  return `${seconds}s`
})

// Get timer text for multiple calls
const getTimerText = (queue) => {
  if (!queue) return ''
  
  const _ = currentTime.value // Force reactivity
  
  // Gunakan lastCalledAt untuk waktu panggilan
  const callTime = queue.lastCalledAt ? new Date(queue.lastCalledAt) : 
                   (queue.createdAt ? new Date(queue.createdAt) : null)
  if (!callTime) return ''
  
  // Hitung waktu text-to-speech (15 detik)
  const ttsDuration = 15000 // 15 detik
  const elapsed = Date.now() - callTime.getTime()
  const remaining = Math.max(0, ttsDuration - elapsed)
  
  if (remaining <= 0) return ''
  
  const seconds = Math.ceil(remaining / 1000)
  return `${seconds}s`
}

// Next 5 tickets to be called - tiket yang sudah check-in (status 'di-loket') dan belum diproses
const nextTicketsToCall = computed(() => {
  // Ambil semua tiket yang sudah check-in (status 'di-loket') dan processStage 'loket'
  const allDiLoketQueues = loketPatients.value.filter(p => 
    p.status === 'di-loket' && p.processStage === 'loket'
  )
  
  // Filter berdasarkan pelayanan loket jika ada
  const targetLoketId = loketId.value
  let filteredQueues = allDiLoketQueues
  
  if (targetLoketId && loketData.value) {
    const allowedPelayananCodes = loketData.value.pelayanan || []
    if (allowedPelayananCodes.length > 0) {
      filteredQueues = allDiLoketQueues.filter(patient => {
        // Dapatkan nama klinik dari nomor antrian
        const klinikName = getKlinikNameFromPatient(patient)
        const clinic = clinicStore.getClinicByName ? clinicStore.getClinicByName(klinikName) : null
        
        if (clinic) {
          return allowedPelayananCodes.includes(clinic.kode)
        } else {
          // Coba match dengan kode dari nomor antrian
          if (patient.noAntrian) {
            const noAntrianPart = patient.noAntrian.split(' |')[0]
            const match = noAntrianPart.match(/^([A-Z]+)/)
            if (match) {
              const kodeFromNoAntrian = match[1]
              return allowedPelayananCodes.includes(kodeFromNoAntrian)
            }
          }
          const matchedKode = allowedPelayananCodes.find(kode => {
            const k = masterStore.getKlinikByKode ? masterStore.getKlinikByKode(kode) : null
            return k && k.nama === klinikName
          })
          return !!matchedKode
        }
      })
    }
  }
  
  // Urutkan berdasarkan waktu check-in (yang check-in duluan lebih dulu)
  const sortedByCheckIn = filteredQueues.sort((a, b) => {
    const checkInA = getCheckInTime(a)
    const checkInB = getCheckInTime(b)
    return checkInA - checkInB
  })
  
  // Exclude current called queue (yang sedang diproses)
  const currentCalledNo = currentCalledQueue.value?.no
  const waitingForProcess = sortedByCheckIn.filter(q => q.no !== currentCalledNo)
  
  // Ambil 5 tiket berikutnya yang sudah check-in tapi belum diproses
  return waitingForProcess.slice(0, 5).map(queue => ({
    ...queue,
    klinik: getKlinikNameFromPatient(queue) || queue.klinik || 'Klinik',
    loket: queue.loket || 'Loket'
  }))
})

// Get grid style based on queue count - semakin sedikit antrian, semakin besar ukurannya
const getGridStyle = (queueCount) => {
  let minWidth = 85
  let fontSize = 16
  let padding = '10px 8px'
  
  if (queueCount <= 3) {
    // Jika antrian sangat sedikit (1-3), perbesar maksimal
    minWidth = 120
    fontSize = 20
    padding = '14px 12px'
  } else if (queueCount <= 6) {
    // Jika antrian sedikit (4-6), perbesar sedang
    minWidth = 100
    fontSize = 18
    padding = '12px 10px'
  } else if (queueCount <= 10) {
    // Jika antrian sedang (7-10), ukuran normal
    minWidth = 85
    fontSize = 16
    padding = '10px 8px'
  } else {
    // Jika antrian banyak (>10), ukuran lebih kecil
    minWidth = 75
    fontSize = 14
    padding = '8px 6px'
  }
  
  return {
    gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}px, 1fr))`,
    '--grid-item-font-size': `${fontSize}px`,
    '--grid-item-padding': padding
  }
}


// Check if a queue is currently called (highlighted)
const isCalled = (queue) => {
  if (!currentCalledQueue.value || !queue) return false
  return currentCalledQueue.value.no === queue.no
}

// Statistics
const statistics = computed(() => {
  const all = loketPatients.value
  const active = all.filter(p => p.status === 'di-loket').length
  return {
    total: all.length,
    active: active
  }
})

const updateTime = () => {
  const now = new Date()
  // Format jam dengan titik dua (HH:MM:SS)
  const timeString = now.toLocaleTimeString('id-ID', { 
    hour: '2-digit', 
    minute: '2-digit',
    second: '2-digit'
  })
  currentTime.value = timeString.replace(/\./g, ':')
  currentDate.value = now.toLocaleDateString('id-ID', {
    weekday: 'long',
    day: 'numeric',
    month: 'long',
    year: 'numeric'
  })
}

onMounted(() => {
  // Redirect to index if loket not found
  if (!loketData.value) {
    navigateTo('/anjungan/antrianloket')
    return
  }
  
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timeInterval) clearInterval(timeInterval)
})
</script>

<style scoped lang="scss">
.antrian-display-container {
  background: var(--color-neutral-300);
  min-height: 100vh;
  max-width: 1920px;
  max-height: 1080px;
  width: 100vw;
  height: 100vh;
  padding: 24px;
  font-family: 'Inter', 'Roboto', sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

/* ========== HEADER ========== */
.display-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  border-radius: 16px;
  padding: 24px 40px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(33, 150, 243, 0.3);
}

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

.logo-circle {
  background: rgba(255, 255, 255, 0.95);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: 4px;
}

.hospital-name {
  font-size: 48px;
  font-weight: 800;
  color: var(--color-neutral-100);
  margin: 0;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  line-height: 1;
}

.display-subtitle {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-neutral-100);
  margin: 6px 0 0 0;
  opacity: 0.95;
}

.klinik-info {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-neutral-100);
  margin: 4px 0 0 0;
  opacity: 0.85;
}

.datetime-display {
  text-align: right;
}

.time-large {
  font-size: 56px;
  font-weight: 900;
  color: var(--color-neutral-100);
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.date-small {
  font-size: 18px;
  color: var(--color-neutral-100);
  margin-top: 8px;
  font-weight: 500;
  opacity: 0.95;
}

/* ========== HERO MAIN SECTION ========== */
.hero-main-section {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: flex-start;
}

/* ========== HERO CALL SECTION (LARGE) ========== */
.hero-call-section {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  border-radius: 20px;
  padding: 32px;
  flex: 1;
  text-align: center;
  box-shadow: 0 12px 32px rgba(33, 150, 243, 0.35);
  animation: pulse-highlight 2s ease-in-out infinite;
}

.call-label {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-neutral-100);
  letter-spacing: 2px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.call-number {
  font-size: 140px;
  font-weight: 900;
  color: var(--color-neutral-100);
  margin: 16px 0;
  letter-spacing: 8px;
  line-height: 1;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: number-pulse 1.5s ease-in-out infinite;
}

.call-klinik {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-neutral-100);
  letter-spacing: 1px;
}

.call-timer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-neutral-100);
  margin-top: 16px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

/* ========== NEXT TICKETS SECTION ========== */
.next-tickets-section {
  background: var(--color-neutral-100);
  border: 2px solid var(--color-primary-200);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.12);
}

.next-tickets-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary-600);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-primary-200);
}

.next-tickets-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 100%;
}

@media (max-width: 1366px) {
  .next-tickets-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .next-tickets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .next-ticket-number {
    font-size: 24px;
  }
  
  .next-ticket-klinik {
    font-size: 12px;
  }
}

.next-ticket-card {
  background: var(--color-neutral-100);
  border: 2px solid var(--color-primary-300);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &.is-multiple-call {
    border-color: var(--color-warning-500);
    background: var(--color-warning-50);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
  }

  &.highlight-called {
    border-color: var(--color-danger-500);
    background: var(--color-danger-50);
    animation: highlight-flash 1s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
  }

  /* Next in queue - akan naik ke card utama setelah TTS selesai */
  &.is-next-in-queue {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
    border-width: 3px;
  }
}

.next-ticket-number {
  font-size: 32px;
  font-weight: 900;
  color: var(--color-neutral-900);
  letter-spacing: 2px;
  margin-bottom: 8px;
  line-height: 1;
}

.next-ticket-klinik {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-600);
  margin-bottom: 4px;
}

.next-ticket-loket {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary-600);
  margin-bottom: 6px;
}

.next-ticket-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-warning-700);
  margin-top: 6px;
}

/* Multiple Calls on the Side */
.hero-multiple-calls-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 140px;
}

.hero-call-card-side {
  background: linear-gradient(135deg, var(--color-warning-600) 0%, var(--color-warning-700) 100%);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.call-number-side {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-neutral-100);
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 4px;
}

.call-timer-side {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-neutral-100);
  margin-top: 4px;
}

@keyframes pulse-highlight {
  0%, 100% {
    box-shadow: 0 12px 32px rgba(33, 150, 243, 0.35);
  }
  50% {
    box-shadow: 0 12px 48px rgba(33, 150, 243, 0.55);
  }
}

.call-label {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-neutral-100);
  letter-spacing: 2px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.call-number {
  font-size: 140px;
  font-weight: 900;
  color: var(--color-neutral-100);
  margin: 16px 0;
  letter-spacing: 8px;
  line-height: 1;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: number-pulse 1.5s ease-in-out infinite;
}

@keyframes number-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.call-loket {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-neutral-100);
  letter-spacing: 1px;
}

/* ========== KLINIKS GRID ========== */
.kliniks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
  flex: 1;
}

.klinik-box {
  background: var(--color-neutral-100);
  border: 2px solid var(--color-primary-200);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.12);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.klinik-header-bar {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.klinik-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-neutral-100);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
  flex: 1;
}

.klinik-count {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-neutral-100) !important;
  font-weight: 700;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
}

.count-text {
  font-size: 18px;
  font-weight: 800;
}

.klinik-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--color-primary-50);
  gap: 12px;
}

/* Current Serving Section */
.current-serving-section {
  text-align: center;
  background: var(--color-neutral-100);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 12px;
}

.current-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-600);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.current-number-large {
  font-size: 72px;
  font-weight: 900;
  color: var(--color-neutral-900);
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &.highlight-called {
    color: var(--color-danger-600);
    animation: highlight-flash 1s ease-in-out infinite;
    transform: scale(1.05);
  }
}

.current-waiting-text {
  font-size: 48px;
  font-weight: 700;
  color: var(--color-neutral-500);
  letter-spacing: 2px;
  line-height: 1;
  margin-top: 10px;
  opacity: 0.7;
}

/* Multiple Calls Row (Small chips) */
.multiple-calls-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.multiple-call-chip {
  background: var(--color-warning-100);
  border: 1px solid var(--color-warning-400);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-warning-800);
  transition: all 0.3s ease;
  white-space: nowrap;

  &.highlight-called {
    border-color: var(--color-danger-500);
    background: var(--color-danger-100);
    color: var(--color-danger-700);
    animation: highlight-flash 1s ease-in-out infinite;
  }
}

/* All Queues Grid */
.all-queues-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.queue-grid-item {
  background: var(--color-neutral-100);
  border: 2px solid var(--color-neutral-500);
  border-radius: 8px;
  padding: var(--grid-item-padding, 10px 8px);
  text-align: center;
  font-size: var(--grid-item-font-size, 16px);
  font-weight: 700;
  color: var(--color-neutral-700);
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Current queue - highlighted in orange */
  &.is-current {
    background: var(--color-warning-100);
    border: 3px solid var(--color-warning-600);
    color: var(--color-warning-800);
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
  }

  /* Multiple calls - highlighted in red */
  &.is-multiple {
    background: var(--color-danger-100);
    border: 3px solid var(--color-danger-600);
    color: var(--color-danger-700);
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(244, 67, 54, 0.3);
  }

  /* Currently called - red with animation */
  &.highlight-called {
    background: var(--color-danger-100);
    border: 3px solid var(--color-danger-600);
    color: var(--color-danger-700);
    animation: highlight-flash 1s ease-in-out infinite;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
  }

  /* If both current and multiple, prioritize multiple (red) */
  &.is-current.is-multiple {
    background: var(--color-danger-100);
    border: 3px solid var(--color-danger-600);
    color: var(--color-danger-700);
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
  }

  /* Terlambat - highlighted in orange */
  &.is-terlambat {
    background: var(--color-warning-50);
    border: 3px solid var(--color-warning-500);
    color: var(--color-warning-800);
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
  }

  /* Pending - highlighted in grey */
  &.is-pending {
    background: var(--color-neutral-100);
    border: 3px solid var(--color-neutral-400);
    color: var(--color-neutral-600);
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 0.8;
  }
}


.current-section {
  text-align: center;
  margin-bottom: 12px;
}

.current-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-600);
  margin-bottom: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.current-number {
  font-size: 80px;
  font-weight: 900;
  color: var(--color-neutral-900);
  letter-spacing: 4px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &.highlight-called {
    color: var(--color-danger-600);
    animation: highlight-flash 1s ease-in-out infinite;
    transform: scale(1.1);
  }
}

@keyframes highlight-flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}


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

.empty-text {
  font-size: 16px;
  color: var(--color-neutral-600);
  margin-top: 12px;
  font-weight: 600;
}

/* ========== FOOTER STATS ========== */
.footer-stats-bar {
  background: var(--color-neutral-100);
  border: 2px solid var(--color-primary-200);
  border-radius: 16px;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.12);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon-total,
.stat-icon-active {
  background: var(--color-primary-200);
}

.stat-info {
  text-align: left;
}

.stat-value {
  font-size: 40px;
  font-weight: 900;
  color: var(--color-neutral-900);
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 14px;
  color: var(--color-neutral-700);
  font-weight: 600;
  margin-top: 4px;
  opacity: 0.95;
}

.stat-divider {
  width: 2px;
  height: 60px;
  background: var(--color-primary-200);
}

.footer-message {
  flex: 1;
  text-align: right;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-neutral-800);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ========== RESPONSIVE ========== */
@media (min-width: 1920px) and (min-height: 1080px) {
  .antrian-display-container {
    width: 1920px;
    height: 1080px;
    padding: 24px;
  }
}

@media (max-width: 1366px) {
  .antrian-display-container {
    padding: 16px;
  }

  .display-header {
    padding: 16px 24px;
  }

  .logo-circle {
    width: 64px;
    height: 64px;
  }

  .logo-circle .v-icon {
    font-size: 40px !important;
  }

  .hospital-name {
    font-size: 36px;
  }

  .display-subtitle {
    font-size: 16px;
  }

  .time-large {
    font-size: 48px;
  }

  .date-small {
    font-size: 14px;
  }

  .hero-call-section {
    padding: 24px;
  }

  .hero-main-section {
    flex-direction: column;
  }

  .hero-multiple-calls-side {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
  }

  .call-label {
    font-size: 24px;
  }

  .call-number {
    font-size: 100px;
  }

  .call-number {
    font-size: 100px;
  }


  .call-loket {
    font-size: 28px;
  }

  .kliniks-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lokets-grid {
    gap: 12px;
  }

  .loket-box {
    min-height: 220px;
    padding: 0;
  }

  .loket-header-bar {
    padding: 14px 16px;
  }

  .loket-title {
    font-size: 20px;
  }

  .loket-content {
    padding: 16px;
  }

  .current-number {
    font-size: 72px;
  }

  .footer-stats-bar {
    padding: 16px 32px;
  }

  .stat-icon {
    width: 56px;
    height: 56px;
  }

  .stat-icon .v-icon {
    font-size: 28px !important;
  }

  .stat-value {
    font-size: 36px;
  }

  .stat-label {
    font-size: 13px;
  }

  .stat-divider {
    height: 50px;
  }

  .footer-message {
    font-size: 18px;
  }
}

@media (max-width: 1024px) {
  .display-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .header-left {
    flex-direction: column;
    gap: 12px;
  }

  .datetime-display {
    text-align: center;
  }

  .lokets-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-stats-bar {
    flex-direction: column;
    gap: 16px;
  }

  .stat-divider {
    display: none;
  }

  .footer-message {
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .lokets-grid {
    grid-template-columns: 1fr;
  }

  .hospital-name {
    font-size: 28px;
  }

  .time-large {
    font-size: 36px;
  }

  .call-number {
    font-size: 80px;
  }

  .call-number-small {
    font-size: 28px;
  }

  .current-number {
    font-size: 60px;
  }

  .current-number-large {
    font-size: 48px;
  }

  .kliniks-grid {
    grid-template-columns: 1fr;
  }

  .hero-call-card-small {
    min-width: 100px;
  }

  .call-number-tiny {
    font-size: 20px;
  }
}

/* Prevent text selection */
* {
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

