<template>
  <div class="anjungan-container">
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <div class="header-icon">
            <v-icon size="32" color="white">mdi-hospital-building</v-icon>
          </div>
          <div class="header-text">
            <h1 class="page-title">Anjungan RSSA</h1>
            <p class="page-subtitle">Pilih Klinik untuk Pendaftaran</p>
          </div>
        </div>
                  <div class="header-right">
          <div class="info-guide">
            <div class="guide-item">
              <span class="guide-number">1</span>
              <span class="guide-text">Pilih Poli (Hijau = Buka, Merah = Tutup)</span>
            </div>
            <div class="guide-item">
              <span class="guide-number">2</span>
              <span class="guide-text">Pilih: Daftar Sekarang atau Jadwal Lain</span>
            </div>
            <div class="guide-item">
              <span class="guide-number">3</span>
              <span class="guide-text">Pilih Jenis Pembayaran</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <v-card elevation="0" class="main-content-card">
      <v-card-text class="pa-6">
        <v-row>
          <v-col
            v-for="clinic in filteredClinics"
            :key="clinic.id"
            cols="12"
            sm="6"
            md="4"
            lg="3"
            class="pa-2"
          >
            <v-card
              :class="{
                'clinic-card': true,
                'clinic-available': clinic.available,
                'clinic-closed': !clinic.available,
              }"
              :disabled="!clinic.available"
              @click="selectClinic(clinic)"
              elevation="0"
            >
              <v-card-text class="clinic-content">
                <!-- Clinic Name - HIERARCHY: Most Prominent -->
                <h3 class="clinic-name">
                  {{ clinic.name }}
                </h3>

                <!-- Doctor Info -->
                <div class="doctor-info">
                  <v-icon size="16" :color="clinic.available ? 'var(--color-primary-600)' : 'var(--color-neutral-600)'">
                    mdi-doctor
                  </v-icon>
                  <span>{{ getDisplayDoctorInfo(clinic) }}</span>
                </div>

                <!-- Schedule Info - Fixed Bottom Left -->
                <div class="schedule-info">
                  <v-icon size="14" :color="clinic.available ? 'var(--color-success-600)' : 'var(--color-neutral-600)'">
                    mdi-clock-outline
                  </v-icon>
                  <span>{{ clinic.schedule || 'Tidak tersedia' }}</span>
                </div>

                <!-- Clinic Icon - Secondary Element -->
                <div class="clinic-icon-wrapper">
                  <v-icon
                    :icon="clinic.icon"
                    size="40"
                    :color="clinic.available ? 'var(--color-success-600)' : 'var(--color-neutral-100)'"
                  ></v-icon>
                </div>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>

        <div v-if="filteredClinics.length === 0" class="empty-state">
          <v-icon size="64" color="grey-lighten-1">mdi-hospital-marker-outline</v-icon>
          <h3 class="empty-title">Tidak ada klinik yang sesuai filter</h3>
          <p class="empty-subtitle">Coba ubah filter pencarian Anda</p>
        </div>
      </v-card-text>
    </v-card>

    <v-dialog v-model="showVisitTypeDialog" max-width="400" persistent>
      <v-card class="dialog-card">
        <v-card-title class="dialog-header">
          <v-icon class="mr-2">mdi-check-circle</v-icon>
          Konfirmasi Pilihan
        </v-card-title>

        <v-card-text class="pa-6" v-if="selectedClinic">
          <div class="dialog-content">
            <div class="dialog-icon mb-3">
              <v-icon :icon="selectedClinic.icon" size="48" color="primary-600"></v-icon>
            </div>
            <h3 class="dialog-clinic-name">{{ selectedClinic.name }}</h3>
            <p v-if="selectedClinic.subtitle" class="dialog-subtitle">
              {{ selectedClinic.subtitle }}
            </p>

            <v-divider class="my-4"></v-divider>

            <div class="dialog-info">
              <div class="doctor-list-section">
                <p><strong>Dokter yang Tersedia:</strong></p>
                <ul class="doctor-list">
                  <li v-for="(doctor, index) in selectedClinic.doctors" :key="index">
                    {{ doctor }}
                  </li>
                </ul>
              </div>
              
              <div class="quota-section">
                <p><strong>Kuota Hari Ini (Shift {{ getCurrentShiftNumber() }}):</strong></p>
                <div class="current-quota-display" :class="{ 'quota-empty': getCurrentShiftQuota() === 0 }">
                  <span class="quota-large-number">{{ getCurrentShiftQuota() }}</span>
                  <span class="quota-label">pasien tersedia</span>
                </div>
              </div>
              
              <p><strong>Jadwal:</strong> {{ selectedClinic.schedule }}</p>
            </div>
          </div>
        </v-card-text>
        
        <v-divider />
        
        <v-card-text class="pa-4">
          <v-row dense>
            <v-col cols="6">
              <v-btn 
                color="success-600" 
                class="text-white" 
                size="large" 
                block 
                @click="selectVisitType('SEKARANG')"
                :disabled="isShift1Full(selectedClinic)"
                :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
              >
                DAFTAR SEKARANG
              </v-btn>
              <p v-if="isShift1Full(selectedClinic)" class="disabled-hint">Kuota hari ini habis</p>
            </v-col>
            <v-col cols="6">
              <v-btn 
                color="primary-600" 
                class="text-white" 
                size="large" 
                block 
                @click="selectVisitType('JADWAL_LAIN')"
              >
                JADWAL LAIN
              </v-btn>
            </v-col>
          </v-row>
        </v-card-text>
        
        <v-card-actions class="justify-center pa-4 pt-0">
          <v-btn variant="outlined" color="neutral-600" @click="showVisitTypeDialog = false">
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="showPaymentTypeDialog" max-width="400">
      <v-card class="dialog-card">
        <v-card-title class="dialog-header-simple">Jenis Pembayaran</v-card-title>
        <v-divider />
        <v-card-text class="pa-4">
          <v-btn color="success-600" class="mb-3 payment-btn text-white" size="x-large" block @click="selectPaymentType('BPJS')">
            BPJS
          </v-btn>
          <v-btn color="secondary-600" class="payment-btn text-white" size="x-large" block @click="selectPaymentType('UMUM')">
            UMUM / JKMM / SPM / DLL
          </v-btn>
        </v-card-text>
        <v-card-actions class="justify-center pa-4 pt-0">
          <v-btn variant="outlined" color="neutral-600" @click="showPaymentTypeDialog = false">
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="showBookingFormDialog" max-width="500">
      <v-card class="dialog-card">
        <v-card-title class="dialog-header">
          Pilih Jadwal Kunjungan
        </v-card-title>
        <v-card-text class="pa-6">
          <v-form @submit.prevent="submitBooking">
            <v-text-field
              v-model="bookingForm.date"
              label="Tanggal"
              type="date"
              variant="outlined"
              density="compact"
              required
              class="mb-3"
              :min="getMinDate()"
              :max="getMaxDate()"
            ></v-text-field>

            <v-select
              v-model="bookingForm.shift"
              :items="getAvailableShiftsForBooking()"
              item-title="label"
              item-value="value"
              label="Pilih Shift"
              variant="outlined"
              density="compact"
              required
              class="mb-3"
            ></v-select>

            <v-select
              v-model="bookingForm.payment"
              :items="['BPJS', 'UMUM/JKMM/SPM/DLL']"
              label="Pembayaran"
              variant="outlined"
              density="compact"
              required
            ></v-select>
          </v-form>
        </v-card-text>
        <v-card-actions class="pa-4">
          <v-spacer />
          <v-btn @click="showBookingFormDialog = false" variant="outlined" color="neutral-600">
            Tutup
          </v-btn>
          <v-btn color="success-600" class="text-white" variant="flat" @click="submitBooking">
            Simpan
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000" location="top right">
      {{ snackbarText }}
      <template v-slot:actions>
        <v-btn icon @click="snackbar = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

definePageMeta({
  layout: false,
});

const loading = ref(false);
const selectedStatus = ref(null);
const searchQuery = ref("");
const showVisitTypeDialog = ref(false);
const showPaymentTypeDialog = ref(false);
const showBookingFormDialog = ref(false);
const selectedClinic = ref(null);
const selectedVisitType = ref(null);
const snackbar = ref(false);
const snackbarText = ref("");
const snackbarColor = ref("success");

const bookingForm = ref({
  date: new Date().toISOString().substring(0, 10),
  shift: "Shift 1",
  payment: null,
});

const statusOptions = ["Tersedia", "Tutup"];

const clinics = ref([
  {
    id: 1,
    name: "ANAK",
    subtitle: "",
    icon: "mdi-baby-face",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Sarah Putri, Sp.A", "dr. Andi Wijaya, Sp.A"],
    shifts: [
      { name: "Shift 1", quota: 15 },
      { name: "Shift 2", quota: 20 }
    ]
  },
  {
    id: 2,
    name: "ANESTESI",
    subtitle: "",
    icon: "mdi-face-mask",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Ahmad Fauzi, Sp.An"],
    shifts: [
      { name: "Shift 1", quota: 0 },
      { name: "Shift 2", quota: 12 }
    ]
  },
  {
    id: 3,
    name: "BEDAH",
    subtitle: "",
    icon: "mdi-medical-bag",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Budi Santoso, Sp.B", "dr. Eko Prasetyo, Sp.B", "dr. Dian Permata, Sp.B"],
    shifts: [
      { name: "Shift 1", quota: 8 },
      { name: "Shift 2", quota: 10 }
    ]
  },
  {
    id: 4,
    name: "GERIATRI",
    subtitle: "",
    icon: "mdi-human-cane",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Siti Aminah, Sp.PD-KGer"],
    shifts: [
      { name: "Shift 1", quota: 10 },
      { name: "Shift 2", quota: 8 }
    ]
  },
  {
    id: 5,
    name: "GIGI DAN MULUT",
    subtitle: "",
    icon: "mdi-tooth",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["drg. Rina Wati, Sp.KG", "drg. Made Surya, Sp.KG"],
    shifts: [
      { name: "Shift 1", quota: 18 },
      { name: "Shift 2", quota: 15 }
    ]
  },
  {
    id: 6,
    name: "GIZI",
    subtitle: "",
    icon: "mdi-food-apple",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Lisa Andriani, Sp.GK"],
    shifts: [
      { name: "Shift 1", quota: 12 },
      { name: "Shift 2", quota: 10 }
    ]
  },
  {
    id: 7,
    name: "HEMATO ONKOLOGI MEDIS",
    subtitle: "",
    icon: "mdi-water",
    shift: "TUTUP",
    schedule: "",
    available: false,
    doctors: [],
    shifts: []
  },
  {
    id: 8,
    name: "IPD (PENYAKIT DALAM)",
    subtitle: "",
    icon: "mdi-hospital",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Hendra Wijaya, Sp.PD", "dr. Agus Salim, Sp.PD", "dr. Retno Wulan, Sp.PD", "dr. Bambang Susilo, Sp.PD"],
    shifts: [
      { name: "Shift 1", quota: 25 },
      { name: "Shift 2", quota: 20 }
    ]
  },
  {
    id: 9,
    name: "JANTUNG (CARDIOLOGI)",
    subtitle: "",
    icon: "mdi-heart-pulse",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Rudi Hartono, Sp.JP", "dr. Sinta Dewi, Sp.JP"],
    shifts: [
      { name: "Shift 1", quota: 14 },
      { name: "Shift 2", quota: 12 }
    ]
  },
  {
    id: 10,
    name: "JIWA",
    subtitle: "",
    icon: "mdi-head-dots-horizontal",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Maya Kusuma, Sp.KJ"],
    shifts: [
      { name: "Shift 1", quota: 10 },
      { name: "Shift 2", quota: 8 }
    ]
  },
  {
    id: 11,
    name: "KANDUNGAN",
    subtitle: "",
    icon: "mdi-human-pregnant",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Dewi Lestari, Sp.OG", "dr. Putri Andini, Sp.OG", "dr. Nova Riani, Sp.OG"],
    shifts: [
      { name: "Shift 1", quota: 16 },
      { name: "Shift 2", quota: 14 }
    ]
  },
  {
    id: 12,
    name: "KEMOTERAPI",
    subtitle: "",
    icon: "mdi-virus",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Andi Pratama, Sp.PD-KHOM"],
    shifts: [
      { name: "Shift 1", quota: 8 },
      { name: "Shift 2", quota: 6 }
    ]
  },
  {
    id: 13,
    name: "KOMPLEMENTER (NYERI)",
    subtitle: "",
    icon: "mdi-medical-bag",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Ratna Sari, Sp.KFR"],
    shifts: [
      { name: "Shift 1", quota: 10 },
      { name: "Shift 2", quota: 8 }
    ]
  },
  {
    id: 14,
    name: "KULIT KELAMIN",
    subtitle: "",
    icon: "mdi-human-male-female",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Tika Anggraini, Sp.KK", "dr. Fajar Ramadhan, Sp.KK"],
    shifts: [
      { name: "Shift 1", quota: 12 },
      { name: "Shift 2", quota: 10 }
    ]
  },
  {
    id: 15,
    name: "MATA",
    subtitle: "",
    icon: "mdi-eye",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Yudi Prasetyo, Sp.M", "dr. Linda Kartika, Sp.M"],
    shifts: [
      { name: "Shift 1", quota: 15 },
      { name: "Shift 2", quota: 12 }
    ]
  },
  {
    id: 16,
    name: "MCU",
    subtitle: "",
    icon: "mdi-clipboard-check",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Fitri Handayani, Sp.OK"],
    shifts: [
      { name: "Shift 1", quota: 20 },
      { name: "Shift 2", quota: 15 }
    ]
  },
  {
    id: 17,
    name: "ONKOLOGI",
    subtitle: "",
    icon: "mdi-virus",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Dimas Prakoso, Sp.Onk-Rad"],
    shifts: [
      { name: "Shift 1", quota: 10 },
      { name: "Shift 2", quota: 8 }
    ]
  },
  {
    id: 18,
    name: "PARU",
    subtitle: "",
    icon: "mdi-lungs",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Nina Marlina, Sp.P", "dr. Arief Budiman, Sp.P"],
    shifts: [
      { name: "Shift 1", quota: 14 },
      { name: "Shift 2", quota: 12 }
    ]
  },
  {
    id: 19,
    name: "R. TINDAKAN (EMG, ECG, DLL)",
    subtitle: "",
    icon: "mdi-waveform",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Fajar Nugroho, Sp.S"],
    shifts: [
      { name: "Shift 1", quota: 12 },
      { name: "Shift 2", quota: 10 }
    ]
  },
  {
    id: 20,
    name: "RADIOTERAPI",
    subtitle: "",
    icon: "mdi-radioactive",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Wulan Safitri, Sp.Rad"],
    shifts: [
      { name: "Shift 1", quota: 8 },
      { name: "Shift 2", quota: 6 }
    ]
  },
  {
    id: 21,
    name: "REHAB MEDIK",
    subtitle: "",
    icon: "mdi-human-cane",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Gita Permata, Sp.KFR", "dr. Rian Saputra, Sp.KFR"],
    shifts: [
      { name: "Shift 1", quota: 16 },
      { name: "Shift 2", quota: 14 }
    ]
  },
  {
    id: 22,
    name: "SARAF (NEUROLOGI)",
    subtitle: "",
    icon: "mdi-head-cog",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: false,
    doctors: [],
    shifts: []
  },
  {
    id: 23,
    name: "THT",
    subtitle: "",
    icon: "mdi-ear-hearing",
    shift: "SHIFT 1",
    schedule: "Mulai Pukul 07:00",
    available: true,
    doctors: ["dr. Reza Maulana, Sp.THT-KL"],
    shifts: [
      { name: "Shift 1", quota: 12 },
      { name: "Shift 2", quota: 10 }
    ]
  },
]);

const filteredClinics = computed(() => {
  let filtered = clinics.value;

  if (selectedStatus.value) {
    const isAvailable = selectedStatus.value === "Tersedia";
    filtered = filtered.filter((clinic) => clinic.available === isAvailable);
  }

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    filtered = filtered.filter(
      (clinic) =>
        clinic.name.toLowerCase().includes(query) ||
        clinic.subtitle.toLowerCase().includes(query)
    );
  }

  return filtered;
});

const totalClinics = computed(() => clinics.value.length);

// Function to display doctor info on card (max 2 doctors shown)
const getDisplayDoctorInfo = (clinic) => {
  if (!clinic.doctors || clinic.doctors.length === 0) {
    return "Tidak ada dokter";
  }
  
  const maxDisplay = 2;
  const doctors = clinic.doctors;
  
  if (doctors.length <= maxDisplay) {
    return doctors.join(", ");
  } else {
    const displayedDoctors = doctors.slice(0, maxDisplay).join(", ");
    const remainingCount = doctors.length - maxDisplay;
    return `${displayedDoctors}, dan ${remainingCount} dokter lainnya`;
  }
};

// Check if Shift 1 is full
const isShift1Full = (clinic) => {
  if (!clinic || !clinic.shifts || clinic.shifts.length === 0) return true;
  const shift1 = clinic.shifts.find(s => s.name === "Shift 1");
  return shift1 ? shift1.quota === 0 : true;
};

// Get current shift number (for demo purposes, assuming Shift 1 is current)
const getCurrentShiftNumber = () => {
  return 1; // In real app, this would be dynamic based on current time
};

// Get current shift quota
const getCurrentShiftQuota = () => {
  if (!selectedClinic.value || !selectedClinic.value.shifts) return 0;
  const currentShift = selectedClinic.value.shifts.find(s => s.name === "Shift 1");
  return currentShift ? currentShift.quota : 0;
};

// Get available shifts for booking form (excluding current shift)
const getAvailableShiftsForBooking = () => {
  if (!selectedClinic.value || !selectedClinic.value.shifts) return [];
  
  const selectedDate = bookingForm.value.date;
  const today = new Date().toISOString().substring(0, 10);
  const isToday = selectedDate === today;
  
  // If today, exclude current shift (Shift 1)
  // If future date, show all shifts with available quota
  return selectedClinic.value.shifts
    .filter(shift => {
      if (isToday) {
        // Exclude Shift 1 for today
        return shift.name !== "Shift 1" && shift.quota > 0;
      } else {
        // Show all shifts with quota for future dates
        return shift.quota > 0;
      }
    })
    .map(shift => ({
      label: `${shift.name} (Kuota: ${shift.quota} pasien)`,
      value: shift.name
    }));
};

// Get minimum date (today)
const getMinDate = () => {
  return new Date().toISOString().substring(0, 10);
};

// Get maximum date (2 weeks from today)
const getMaxDate = () => {
  const today = new Date();
  const maxDate = new Date(today);
  maxDate.setDate(today.getDate() + 14); // 2 weeks = 14 days
  return maxDate.toISOString().substring(0, 10);
};

const showSnackbar = (text, color = "success") => {
  snackbarText.value = text;
  snackbarColor.value = color;
  snackbar.value = true;
};

const selectClinic = (clinic) => {
  if (clinic.available) {
    selectedClinic.value = clinic;
    showVisitTypeDialog.value = true;
  }
};

const selectVisitType = (type) => {
  selectedVisitType.value = type;
  showVisitTypeDialog.value = false;

  if (type === "SEKARANG") {
    showPaymentTypeDialog.value = true;
  } else if (type === "JADWAL_LAIN") {
    // Set default to tomorrow
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    const tomorrowStr = tomorrow.toISOString().substring(0, 10);
    
    bookingForm.value = {
      date: tomorrowStr,
      shift: "",
      payment: null,
    };
    showBookingFormDialog.value = true;
  }
};

const selectPaymentType = (paymentType) => {
  showPaymentTypeDialog.value = false;
  const message = `Pendaftaran **${selectedClinic.value.name}** untuk kunjungan **HARI INI** dengan pembayaran **${paymentType}** berhasil diproses.`;
  showSnackbar(message, "success");
  console.log(
    "Proceeding to registration for:",
    selectedClinic.value.name,
    "Type: SEKARANG",
    "Payment:",
    paymentType
  );
  selectedClinic.value = null;
};

const submitBooking = () => {
  if (
    !bookingForm.value.date ||
    !bookingForm.value.shift ||
    !bookingForm.value.payment
  ) {
    showSnackbar("Mohon lengkapi semua field.", "error");
    return;
  }

  showBookingFormDialog.value = false;
  const message = `Jadwal kunjungan **${selectedClinic.value.name}** pada ${bookingForm.value.date} - ${bookingForm.value.shift} (**${bookingForm.value.payment}**) berhasil disimpan.`;
  showSnackbar(message, "success");
  console.log(
    "Submitted booking for:",
    selectedClinic.value.name,
    bookingForm.value
  );
  selectedClinic.value = null;
};

const refreshData = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    showSnackbar("Status klinik berhasil diperbarui", "success");
  }, 1000);
};

onMounted(() => {
  refreshData();
});
</script>

<style scoped lang="scss">
.anjungan-container {
  background: var(--color-neutral-300);
  min-height: 100vh;
  padding: 16px;
  overflow-y: auto;
}

.page-header {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(255, 155, 27, 0.25);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  color: var(--color-neutral-100);
  gap: 32px;
}

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

.header-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(10px);
}

.page-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--color-neutral-100);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  margin: 4px 0 0 0;
  opacity: 0.95;
  font-size: 14px;
  color: var(--color-neutral-100);
}

.header-right {
  display: flex;
  align-items: center;
}

.info-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.guide-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.guide-text {
  color: var(--color-neutral-100);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.main-content-card {
  border-radius: 12px;
  border: 1px solid var(--color-neutral-500);
  background: var(--color-neutral-100);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.main-content-card .v-card-text {
  padding: 16px !important;
}

/* CLINIC CARD - Improved Hierarchy */
.clinic-card {
  cursor: pointer;
  border-radius: 12px !important;
  height: 180px;
  background: var(--color-neutral-100);
  border: 3px solid var(--color-neutral-500);
  position: relative;
  overflow: hidden;
}

.clinic-available {
  border-color: var(--color-success-600);
  background: var(--color-success-200);
}

.clinic-closed {
  opacity: 0.65;
  cursor: not-allowed;
  border-color: var(--color-danger-600);
  background: var(--color-danger-200);
}

.clinic-content {
  padding: 18px !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  gap: 8px;
}

/* HIERARCHY 1: Clinic Name - MOST PROMINENT */
.clinic-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-neutral-900);
  margin: 0;
  line-height: 1.2;
  padding-right: 10px;
}

.clinic-closed .clinic-name {
  color: var(--color-neutral-700);
}

/* HIERARCHY 2: Doctor Info */
.doctor-info {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--color-primary-700);
  font-weight: 600;
  line-height: 1.4;
  padding-right: 70px;
  flex: 1;
}

.clinic-closed .doctor-info {
  color: var(--color-neutral-600);
}

/* HIERARCHY 3: Schedule Info - Fixed Bottom Left */
.schedule-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-neutral-700);
  font-weight: 500;
  position: absolute;
  bottom: 18px;
  left: 18px;
}

.clinic-closed .schedule-info {
  color: var(--color-neutral-600);
}

/* HIERARCHY 4: Icon - Subtle, Bottom Right */
.clinic-icon-wrapper {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  border: 2px solid var(--color-neutral-400);
}

.clinic-closed .clinic-icon-wrapper {
  opacity: 0.5;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 48px 24px;
}

.empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-700);
  margin: 16px 0 8px 0;
}

.empty-subtitle {
  font-size: 14px;
  color: var(--color-neutral-600);
  margin: 0;
}

/* Help Dialog Styles */
.help-content {
  font-size: 14px;
}

.help-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-900);
  margin-bottom: 20px;
}

.help-step {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--color-primary-600);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.step-content h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-neutral-900);
  margin: 0 0 6px 0;
}

.step-content p {
  font-size: 13px;
  color: var(--color-neutral-700);
  margin: 0;
  line-height: 1.5;
}

.help-note {
  background: var(--color-primary-100);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.help-note p {
  margin: 0;
  font-size: 13px;
  color: var(--color-neutral-800);
  line-height: 1.6;
}

/* Quota Section */
.quota-section {
  margin-bottom: 16px;
  
  p {
    margin-bottom: 12px;
    font-size: 15px;
  }
}

.current-quota-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--color-success-100) 0%, var(--color-success-200) 100%);
  border-radius: 12px;
  border: 2px solid var(--color-success-400);
  margin-bottom: 12px;
  
  &.quota-empty {
    background: linear-gradient(135deg, var(--color-neutral-200) 0%, var(--color-neutral-300) 100%);
    border-color: var(--color-neutral-500);
    
    .quota-large-number {
      color: var(--color-neutral-600);
    }
    
    .quota-label {
      color: var(--color-neutral-700);
    }
  }
}

.quota-large-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--color-success-700);
  line-height: 1;
  margin-bottom: 4px;
}

.quota-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-success-800);
}

.disabled-hint {
  font-size: 11px;
  color: var(--color-danger-600);
  text-align: center;
  margin: 4px 0 0 0;
  font-weight: 600;
}

.btn-disabled {
  opacity: 0.5 !important;
  background-color: var(--color-neutral-500) !important;
}

.quota-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.quota-item {
  padding: 10px 12px;
  background: var(--color-success-100);
  border-radius: 8px;
  border: 2px solid var(--color-success-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  
  &.quota-full {
    background: var(--color-danger-100);
    border-color: var(--color-danger-300);
    opacity: 0.7;
    
    .quota-shift, .quota-number {
      color: var(--color-danger-700);
    }
  }
}

.quota-shift {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-success-700);
  margin-bottom: 4px;
}

.quota-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-success-800);
}

/* Dialog Styles */
.dialog-card {
  border-radius: 16px !important;
}

.dialog-header {
  background: var(--color-primary-600);
  color: var(--color-neutral-100);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
}

.dialog-header-simple {
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-900);
}

.dialog-content {
  text-align: center;
}

.dialog-icon {
  display: flex;
  justify-content: center;
}

.dialog-clinic-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-neutral-900);
  margin: 8px 0;
}

.dialog-subtitle {
  font-size: 14px;
  color: var(--color-neutral-700);
  margin: 0;
}

.dialog-info {
  text-align: left;
  font-size: 14px;
  
  p {
    margin: 8px 0;
    color: var(--color-neutral-800);
  }
  
  strong {
    color: var(--color-neutral-900);
  }
}

.doctor-list-section {
  margin-bottom: 12px;
  
  p {
    margin-bottom: 8px;
  }
}

.doctor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  
  li {
    padding: 6px 12px;
    margin: 4px 0;
    background: var(--color-primary-100);
    border-radius: 6px;
    color: var(--color-neutral-800);
    font-size: 13px;
  }
}

.status-available {
  color: var(--color-success-600);
  font-weight: 600;
}

.payment-btn {
  font-weight: 700;
  height: 64px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 18px 20px;
  }

  .header-left {
    flex-direction: column;
    gap: 12px;
  }
  
  .header-right {
    width: 100%;
  }
  
  .info-guide {
    width: 100%;
  }
  
  .guide-item {
    font-size: 12px;
    justify-content: center;
  }
  
  .guide-number {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .page-title {
    font-size: 24px;
  }
  
  .clinic-card {
    height: 170px;
  }
  
  .clinic-name {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .anjungan-container {
    padding: 12px;
  }

  .header-content {
    padding: 16px;
  }

  .page-title {
    font-size: 22px;
  }

  .header-icon {
    padding: 10px;
  }

  .clinic-card {
    height: 165px;
  }

  .clinic-name {
    font-size: 19px;
  }

  .clinic-icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .clinic-icon-wrapper .v-icon {
    font-size: 32px !important;
  }
  
  .doctor-info, .schedule-info {
    font-size: 11px;
  }
  
  .doctor-info {
    padding-right: 60px;
  }
}

@media (max-width: 600px) {
  .clinic-card {
    height: 160px;
  }

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

  .clinic-name {
    font-size: 18px;
  }
  
  .guide-item {
    font-size: 11px;
  }
  
  .guide-number {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
}
</style>