<!-- pages/AntrianPenunjang.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"
            width="64"
            height="64"
            style="width: 64px; height: 64px; object-fit: contain;"
          />
        </div>
        <div class="header-text">
          <h1 class="hospital-name">RUMAH SAKIT</h1>
          <p class="display-subtitle">Antrian Penunjang</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 -->
    <div v-if="currentCalledQueue" class="hero-call-section">
      <div class="call-label">
        <v-icon size="32" class="mr-2">mdi-bullhorn</v-icon>
        NOMOR ANTRIAN YANG DIPANGGIL
      </div>
      <div class="call-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
      <div class="call-clinic">{{ currentCalledQueue.klinik }}</div>
    </div>

    <!-- Main Grid - 3x3 Penunjang -->
    <div class="clinics-grid">
      <div
        v-for="penunjang in displayedPenunjangs"
        :key="penunjang.name"
        class="clinic-box"
      >
        <!-- Penunjang Header -->
        <div class="clinic-header-bar" style="background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);">
          <span class="clinic-title">{{ penunjang.name }}</span>
          <v-chip
            :color="penunjang.totalQueues > 0 ? '#9C27B0' : '#89939E'"
            size="small"
            class="clinic-count"
          >
            <v-icon size="16" class="mr-1">mdi-account-multiple</v-icon>
            {{ penunjang.totalQueues }}
          </v-chip>
        </div>

        <!-- Queue Content -->
        <div class="clinic-content">
          <!-- Current Queue -->
          <div v-if="penunjang.currentQueue" class="current-section">
            <div class="current-label">SEKARANG</div>
            <div class="current-number">
              {{ penunjang.currentQueue.noAntrian.split(' |')[0] }}
            </div>
          </div>

          <!-- Next Queues -->
          <div v-if="penunjang.nextQueues.length > 0" class="next-section">
            <div class="next-label">SELANJUTNYA</div>
            <div class="next-numbers">
              <div
                v-for="queue in penunjang.nextQueues.slice(0, 3)"
                :key="queue.no"
                class="next-item"
                style="background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);"
              >
                {{ queue.noAntrian.split(' |')[0] }}
              </div>
            </div>
          </div>

          <!-- Empty State -->
          <div v-if="!penunjang.currentQueue && penunjang.nextQueues.length === 0" class="empty-state">
            <v-icon size="56" color="#F5F7FA">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" style="background: #F3E5F5;">
          <v-icon size="32" color="#9C27B0">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" style="background: #F3E5F5;">
          <v-icon size="32" color="#9C27B0">mdi-clock-alert-outline</v-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ statistics.anjungan }}</div>
          <div class="stat-label">Menunggu</div>
        </div>
      </div>

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

      <div class="stat-item">
        <div class="stat-icon" style="background: #E8F5E9;">
          <v-icon size="32" color="#18B653">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="#9C27B0" 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'

definePageMeta({
  layout: false,
});

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

const penunjangPatients = computed(() => {
  return queueStore.getPatientsByStage('penunjang').value.all
})

const displayedPenunjangs = computed(() => {
  const allPenunjangs = queueStore.penunjangs.slice(0, 9)

  return allPenunjangs.map(penunjang => {
    const queues = penunjangPatients.value
      .filter(p => p.klinik === penunjang.name)
      .sort((a, b) => {
        const statusPriority = {
          'di-loket': 1,
          'anjungan': 2,
          'terlambat': 3,
          'pending': 4
        }
        
        const priorityDiff = (statusPriority[a.status] || 99) - (statusPriority[b.status] || 99)
        if (priorityDiff !== 0) return priorityDiff
        
        const timeA = a.jamPanggil.split(':').map(Number)
        const timeB = b.jamPanggil.split(':').map(Number)
        return timeA[0] * 60 + timeA[1] - (timeB[0] * 60 + timeB[1])
      })

    const currentQueue = queues.find(q => q.status === 'di-loket') || 
                        (queues.find(q => q.status === 'anjungan') || null)
    
    const nextQueues = queues.filter(q => 
      q.no !== currentQueue?.no && 
      (q.status === 'anjungan' || q.status === 'di-loket')
    )

    return {
      name: penunjang.name,
      currentQueue: currentQueue,
      nextQueues: nextQueues,
      totalQueues: queues.length
    }
  })
})

const currentCalledQueue = computed(() => {
  const calledQueues = penunjangPatients.value
    .filter(p => p.status === 'di-loket')
    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
  
  return calledQueues[0] || null
})

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

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(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
})

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

<style scoped>
.antrian-display-container {
  background: #FFFFFF;
  min-height: 100vh;
  padding: 24px;
  font-family: 'Roboto', sans-serif;
}

.display-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px;
  padding: 24px 40px;
    background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(255, 252, 255, 0.2);
}

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

.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;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.hospital-name {
  font-size: 42px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.display-subtitle {
  font-size: 22px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0;
  opacity: 0.95;
}

.time-large {
  font-size: 56px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: 2px;
}

.date-small {
  font-size: 18px;
  color: #FFFFFF;
  margin-top: 8px;
  font-weight: 400;
  opacity: 0.95;
}

.hero-call-section {
  background: linear-gradient(135deg, #E01507 0%, #E02B1D 100%);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(224, 21, 7, 0.25);
  animation: pulse-shadow 2s infinite;
}

.call-label {
  font-size: 28px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 2px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.call-number {
  font-size: 110px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  margin: 16px 0;
  letter-spacing: 4px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.call-clinic {
  font-size: 38px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 1px;
}

@keyframes pulse-shadow {
  0%, 100% {
    box-shadow: 0 12px 32px rgba(224, 21, 7, 0.25);
  }
  50% {
    box-shadow: 0 16px 48px rgba(224, 21, 7, 0.4);
  }
}

.clinics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.clinic-box {
  background: #FFFFFF;
  border: 2px solid #F3E5F5;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(156, 39, 176, 0.08);
  transition: all 0.3s ease;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.clinic-box:hover {
  box-shadow: 0 8px 24px rgba(156, 39, 176, 0.15);
  transform: translateY(-2px);
}

.clinic-header-bar {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clinic-title {
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.clinic-count {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 16px;
  backdrop-filter: blur(10px);
}

.clinic-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background: #FAFBFC;
}

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

.current-label {
  font-size: 16px;
  font-weight: 700;
  color: #18B653;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.current-number {
  font-size: 68px;
  font-weight: 900;
  color: #212121;
  line-height: 1;
  letter-spacing: 2px;
}

.next-section {
  text-align: center;
}

.next-label {
  font-size: 13px;
  font-weight: 700;
  color: #717171;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.next-numbers {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.next-item {
  color: #FFFFFF;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.2);
  letter-spacing: 1px;
}

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

.empty-text {
  font-size: 18px;
  color: #89939E;
  margin-top: 12px;
  font-weight: 600;
}

.footer-stats-bar {
  background: #FFFFFF;
  border: 2px solid #F3E5F5;
  border-radius: 20px;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  box-shadow: 0 4px 16px rgba(156, 39, 176, 0.08);
}

.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-value {
  font-size: 42px;
  font-weight: 900;
  color: #212121;
  line-height: 1;
}

.stat-label {
  font-size: 15px;
  color: #717171;
  font-weight: 600;
  margin-top: 4px;
}

.stat-divider {
  width: 2px;
  height: 64px;
  background: #F3E5F5;
}

.footer-message {
  flex: 1;
  text-align: right;
  font-size: 20px;
  font-weight: 600;
  color: #4D4D4D;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>