<template>
  <div>
    <PageHeader
      icon="mdi-counter"
      title="Admin Loket"
      subtitle="Pilih Loket untuk mengelola antrian"
      :show-add-button="false"
      theme="primary"
    />

    <div class="admin-loket-index">
      <div v-if="loketList.length > 0" class="loket-grid">
        <div
          v-for="loket in loketList"
          :key="loket.id"
          :class="['loket-card', { 'loket-card-inactive': !loket.loketAktif }]"
          @click="loket.loketAktif ? navigateToLoket(loket.id) : null"
        >
          <div class="loket-card-header">
            <div class="loket-info">
              <h3 class="loket-name">{{ loket.namaLoket }}</h3>
              <div class="loket-details">
                <!-- Tipe Loket -->
                <v-chip 
                  size="x-small" 
                  :class="['JKN', 'Reguler', 'REGULER'].includes(loket.tipeLoket || loket.tipeloket) ? 'chip-tipe-reguler' : 'chip-tipe-eksekutif'"
                >
                  {{ loket.tipeLoket || loket.tipeloket || 'REGULER' }}
                </v-chip>
                
                <!-- Pembayaran (Multiple Chips) -->
                <v-chip
                  v-for="(payment, idx) in (Array.isArray(loket.pembayaran) ? loket.pembayaran.slice(0, 2) : [loket.pembayaran])"
                  :key="idx"
                  size="x-small"
                  class="chip-pembayaran"
                >
                  {{ payment }}
                </v-chip>
                <v-chip
                  v-if="Array.isArray(loket.pembayaran) && loket.pembayaran.length > 2"
                  size="x-small"
                  class="chip-more-payment"
                >
                  +{{ loket.pembayaran.length - 2 }}
                </v-chip>
                
                <!-- Status Tidak Aktif (only show when inactive) -->
                <v-chip
                  v-if="!loket.loketAktif"
                  size="x-small"
                  color="error"
                  variant="flat"
                  class="ml-2"
                >
                  Tidak Aktif
                </v-chip>
              </div>
            </div>
          </div>
          
          <div class="loket-preview">
            <div class="pelayanan-count">
              <v-icon size="18" color="primary-600">mdi-hospital-building</v-icon>
              <span>{{ loket.pelayanan?.length || 0 }} Pelayanan</span>
            </div>
            <div class="pelayanan-tags">
              <v-chip
                v-for="(serviceId, idx) in (loket.pelayanan || []).slice(0, 3)"
                :key="idx"
                size="small"
                class="ma-1 chip-preview"
              >
                {{ getServiceName(loket, serviceId) }}
              </v-chip>
              <v-chip
                v-if="loket.pelayanan?.length > 3"
                size="small"
                class="ma-1 chip-more"
              >
                +{{ loket.pelayanan.length - 3 }}
              </v-chip>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="empty-state">
        <v-icon size="64" color="grey-lighten-1">mdi-desktop-mac-dashboard</v-icon>
        <h3>Tidak Ada Data Loket Tersedia</h3>
        <p>Silakan tambah data loket terlebih dahulu di halaman master</p>
        <v-btn
          color="primary-600"
          variant="flat"
          class="mt-4"
          @click="router.push('/setting/masterloket')"
        >
          <v-icon left>mdi-cog</v-icon>
          Ke Halaman Master
        </v-btn>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useLoketStore } from '@/stores/loketStore';
import { useMasterStore } from '@/stores/masterStore';
import PageHeader from '@/components/common/PageHeader.vue';

const router = useRouter();
const loketStore = useLoketStore();
const masterStore = useMasterStore();

// Ensure data is loaded
onMounted(() => {
  if (loketStore.fetchLoketFromAPI) {
    loketStore.fetchLoketFromAPI();
  }
});

const loketList = computed(() => {
  return loketStore.loketData || [];
});

// Helper untuk mendapatkan nama layanan/klinik
const getServiceName = (item, serviceId) => {
  const idStr = String(serviceId);
  
  if (item._spesialisDetail && Array.isArray(item._spesialisDetail)) {
    const detail = item._spesialisDetail.find(s => String(s.idklinik) === idStr);
    if (detail && detail.namaklinik) return detail.namaklinik;
  }
  
  const byId = masterStore.getKlinikById ? masterStore.getKlinikById(serviceId) : null;
  if (byId && byId.nama) return byId.nama;

  return masterStore.getKlinikNameByKode ? masterStore.getKlinikNameByKode(serviceId) : serviceId;
};

const navigateToLoket = (id) => {
  router.push(`/adminloket/${id}`);
};
</script>

<style scoped lang="scss">
.admin-loket-index {
  background: var(--color-neutral-300);
  min-height: calc(100vh - 80px);
  padding: 16px;
  font-family: 'Inter', 'Roboto', sans-serif;
}

/* Remove rounded edges from PageHeader component */
:deep(.page-header) {
  border-radius: 0 !important;
}

.loket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  width: 100%;
  margin: 0;
}

.loket-card {
  background: var(--color-neutral-100);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--color-neutral-400);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.2);
    border-color: var(--color-primary-600);
  }
}

.loket-card-inactive {
  background: var(--color-neutral-600) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  
  &:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--color-neutral-400) !important;
  }
  
  .loket-name {
    color: var(--color-neutral-100) !important;
  }
  
  .pelayanan-count {
    color: var(--color-neutral-300) !important;
  }
}

.loket-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-neutral-400);
}

.loket-info {
  flex: 1;
}

.loket-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--color-neutral-900);
  line-height: 1.2;
}

.loket-details {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

// Chip Tipe Loket
.chip-tipe-reguler {
  background-color: #009262 !important;
  color: var(--color-neutral-100) !important;
  font-weight: 600;
  font-size: 11px;
}

.chip-tipe-eksekutif {
  background-color: #E67E22 !important;
  color: var(--color-neutral-100) !important;
  font-weight: 600;
  font-size: 11px;
}

// Chip Pembayaran
.chip-pembayaran {
  background-color: var(--color-primary-600) !important;
  color: var(--color-neutral-100) !important;
  font-weight: 600;
  font-size: 11px;
}

.chip-more-payment {
  background-color: var(--color-neutral-600) !important;
  color: var(--color-neutral-100) !important;
  font-weight: 600;
  font-size: 11px;
}

.loket-preview {
  flex: 1;
}

.pelayanan-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-600);
  margin-bottom: 12px;
}

.pelayanan-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip-preview {
  background-color: var(--color-primary-600) !important;
  color: var(--color-neutral-100) !important;
  font-weight: 500;
  font-size: 11px;
}

.chip-more {
  background-color: var(--color-neutral-600) !important;
  color: var(--color-neutral-100) !important;
  font-weight: 600;
  font-size: 11px;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--color-neutral-700);

  h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 24px 0 8px 0;
    color: var(--color-neutral-800);
  }

  p {
    font-size: 16px;
    color: var(--color-neutral-600);
  }
}

@media (max-width: 768px) {
  .admin-loket-index {
    padding: 12px;
  }

  .loket-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
</style>
