<template>
  <v-container>
    <v-card>
      <!-- Header -->
      <div class="page-header">
        <div class="header-content">
          <div class="header-left">
            <div class="header-icon">
              <v-icon size="32" color="white">mdi-heart-pulse</v-icon>
            </div>
            <div class="header-text">
              <h2 class="page-title">Monitoring Pasien</h2>
              <p class="page-subtitle">{{ currentDate }} - Manajemen Data Pasien</p>
            </div>
          </div>
          <div class="header-stats">
            <v-chip color="white" variant="flat" class="stat-chip mr-2">
              <v-icon start size="16">mdi-account-group</v-icon>
              {{ totalCount }} Total
            </v-chip>
            <v-chip color="white" variant="flat" class="stat-chip mr-2">
              <v-icon start size="16">mdi-clock-outline</v-icon>
              {{ waitingCount }} Menunggu
            </v-chip>
            <v-chip color="white" variant="flat" class="stat-chip">
              <v-icon start size="16">mdi-check-circle</v-icon>
              {{ doneCount }} Selesai
            </v-chip>
          </div>
        </div>
      </div>

      <!-- Tabs -->
      <v-card-text class="tabs-section">
        <v-tabs
          v-model="activeTab"
          color="primary"
          align-tabs="start"
          show-arrows
          class="status-tabs"
        >
          <v-tab value="all" @click="filterByStatus('all')">
            Semua Pasien <v-badge color="grey-lighten-1" :content="totalCount" inline class="ml-2"></v-badge>
          </v-tab>
          <v-tab value="Menunggu Poli" @click="filterByStatus('Menunggu Poli')">
            Menunggu Poli <v-badge color="orange-lighten-1" :content="waitingCount" inline class="ml-2"></v-badge>
          </v-tab>
          <v-tab value="Diperiksa Dokter" @click="filterByStatus('Diperiksa Dokter')">
            Diperiksa Dokter <v-badge color="green-lighten-1" :content="examiningCount" inline class="ml-2"></v-badge>
          </v-tab>
          <v-tab value="Selesai Pelayanan" @click="filterByStatus('Selesai Pelayanan')">
            Selesai Pelayanan <v-badge color="blue-lighten-1" :content="doneCount" inline class="ml-2"></v-badge>
          </v-tab>
        </v-tabs>
      </v-card-text>

      <!-- Filter Section -->
      <v-card-text class="filter-section">
        <div class="filter-card">
          <v-row class="align-center">
            <v-col cols="12" sm="3">
              <v-text-field 
                label="No. RM" 
                v-model="filters.rm_number" 
                variant="outlined" 
                density="compact" 
                hide-details
                class="input-field"
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="2">
              <v-text-field 
                label="No. Antrean" 
                v-model="filters.queue_number" 
                variant="outlined" 
                density="compact" 
                hide-details 
                type="number"
                class="input-field"
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="2">
              <v-select 
                label="Layanan" 
                v-model="filters.service" 
                :items="['Klinik Jiwa', 'Radiologi', 'Fisioterapi', 'Klinik Umum']" 
                variant="outlined" 
                density="compact" 
                hide-details 
                clearable
                class="input-field"
              ></v-select>
            </v-col>
            <v-col cols="12" sm="2">
              <v-btn 
                color="success" 
                block 
                height="40" 
                @click="applyFilters"
                class="btn-search"
                variant="flat"
              >
                <v-icon left size="18">mdi-magnify</v-icon>
                Cari
              </v-btn>
            </v-col>
          </v-row>
        </div>
      </v-card-text>

      <!-- Table -->
      <v-card-text>
        <v-data-table
          :headers="headers"
          :items="paginatedPatients" 
          :items-per-page="10"
          class="elevation-0 data-table"
          :search="currentSearchTerm" 
        >
          <template v-slot:item.status="{ item }">
            <v-chip :color="getStatusColor(item.status)" size="small" class="font-weight-medium status-chip" label>
              {{ item.status }}
            </v-chip>
          </template>
          <template v-slot:item.aksi="{ item }">
            <v-btn 
              size="small" 
              @click="viewPatient(item.id)"
              class="btn-view"
              variant="flat"
            >
              <v-icon size="16" left>mdi-eye</v-icon>
              Lihat
            </v-btn>
          </template>
          <template v-slot:no-data>
            <v-alert :value="true" color="info" icon="mdi-information-outline">
              Tidak ada data pasien untuk ditampilkan.
            </v-alert>
          </template>
        </v-data-table>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

definePageMeta({
  middleware:['auth']
})

const router = useRouter();

// Get current date formatted
const currentDate = computed(() => {
  const date = new Date();
  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
  const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
  return `${days[date.getDay()]}, ${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
});

// === STATE MANAGEMENT ===
const activeTab = ref('all');

// Filter Model: Menampung input dari form pencarian
const filters = ref({
    rm_number: '',
    // qr_code: '',
    queue_number: '', // Filter baru
    service: null, // Filter Layanan
});

// State untuk menyimpan hasil filtering
const filteredPatientList = ref([]);
const currentSearchTerm = ref('');

// Table Headers
const headers = [
  { title: 'No. RM', key: 'rm_number' },
  { title: 'Nama', key: 'name' }, 
  { title: 'No. Antrean', key: 'queue_number' },
  { title: 'Layanan', key: 'service' },
  { title: 'Status', key: 'status' },
  { title: 'Aksi', key: 'aksi', sortable: false },
];

// Mock Patient Data
const ALL_PATIENTS_DATA = [
  { id: '11111111', rm_number: '11111111', name: 'Ragil Bayu N.', queue_number: 1, service: 'Klinik Jiwa', status: 'Diperiksa Dokter', qr_code: 'QR123' },
  { id: '22222222', rm_number: '22222222', name: 'Siti Aisyah', queue_number: 5, service: 'Radiologi', status: 'Menunggu Poli', qr_code: 'QR456' },
  { id: '33333333', rm_number: '33333333', name: 'Ahmad Dani', queue_number: 2, service: 'Klinik Jiwa', status: 'Selesai Pelayanan', qr_code: 'QR789' },
  { id: '44444444', rm_number: '44444444', name: 'Dewi Sartika', queue_number: 6, service: 'Fisioterapi', status: 'Menunggu Poli', qr_code: 'QR101' },
  { id: '55555555', rm_number: '55555555', name: 'Joko Susilo', queue_number: 3, service: 'Klinik Umum', status: 'Diperiksa Dokter', qr_code: 'QR112' },
  { id: '66666666', rm_number: '66666666', name: 'Budi Santoso', queue_number: 4, service: 'Radiologi', status: 'Menunggu Poli', qr_code: 'QR131' },
];

// Initialize the filtered list with all data
filteredPatientList.value = [...ALL_PATIENTS_DATA];

// === FILTERING LOGIC ===

// 1. Logic Pencarian Gabungan saat tombol "Cari" ditekan
const applyFilters = () => {
    // 1. Filter berdasarkan teks di semua kolom yang relevan (RM, QR, Antrean, Nama)
    let textSearch = '';
    
    // Gabungkan semua nilai filter menjadi satu string pencarian
    if (filters.value.rm_number) textSearch += filters.value.rm_number.toLowerCase() + ' ';
    if (filters.value.qr_code) textSearch += filters.value.qr_code.toLowerCase() + ' ';
    if (filters.value.queue_number) textSearch += filters.value.queue_number.toString().toLowerCase() + ' ';
    
    // Vuetify v-data-table memiliki fitur pencarian bawaan (di properti `search`).
    // Kita gunakan fitur ini untuk pencarian berbasis teks (No. RM, QR, Antrean).
    currentSearchTerm.value = textSearch.trim();

    // 2. Filter berdasarkan Layanan (Service), yang tidak didukung oleh `v-data-table` search
    let results = ALL_PATIENTS_DATA;

    if (filters.value.service) {
        results = results.filter(p => p.service === filters.value.service);
    }
    
    // Terapkan hasil filter Layanan
    filteredPatientList.value = results;

    // Reset status tab (penting agar hasil pencarian tampil terlepas dari tab yang aktif)
    activeTab.value = 'all'; 
};

// 2. Logic Filter Status (saat tab ditekan)
const filterByStatus = (status) => {
    // Pastikan status tab diperbarui
    activeTab.value = status;
    
    // Clear the text search term when switching tabs
    currentSearchTerm.value = '';

    if (status === 'all') {
        filteredPatientList.value = ALL_PATIENTS_DATA;
    } else {
        filteredPatientList.value = ALL_PATIENTS_DATA.filter(p => p.status === status);
    }

    // Clear form filters (opsional, tetapi membuat UX lebih jelas)
    filters.value.rm_number = '';
    filters.value.qr_code = '';
    filters.value.queue_number = '';
    filters.value.service = null;
};

// === COMPUTED PROPERTIES ===

// Hitungan untuk Badge Tab
const listForCounts = computed(() => {
    // Gunakan ALL_PATIENTS_DATA untuk hitungan badge agar hitungan selalu stabil
    return ALL_PATIENTS_DATA;
});

const totalCount = computed(() => listForCounts.value.length);
const waitingCount = computed(() => listForCounts.value.filter(p => p.status === 'Menunggu Poli').length);
const examiningCount = computed(() => listForCounts.value.filter(p => p.status === 'Diperiksa Dokter').length);
const doneCount = computed(() => listForCounts.value.filter(p => p.status === 'Selesai Pelayanan').length);

// Data yang ditampilkan di tabel adalah data yang sudah difilter
const paginatedPatients = computed(() => {
    // Jika ada filter status yang aktif (setelah menekan tab)
    if (activeTab.value !== 'all') {
        return filteredPatientList.value.filter(p => p.status === activeTab.value);
    }
    
    // Jika tidak ada filter status yang aktif, tampilkan hasil dari applyFilters()
    return filteredPatientList.value;
});

// === UTILITIES & NAVIGATION ===

// Utility function to set color based on status
const getStatusColor = (status) => {
  if (status === 'Diperiksa Dokter') return 'green-darken-1';
  if (status === 'Menunggu Poli') return 'orange-darken-1';
  if (status === 'Selesai Pelayanan') return 'blue-darken-2';
  return 'grey';
};

// Function to navigate to the detailed patient information page
const viewPatient = (patientId) => {
  router.push(`/MonitoringPasien/Pasien/${patientId}`);
};
</script>

<style scoped lang="scss">
// Colors from Design System
$neutral-900: #212121;
$neutral-800: #4D4D4D;
$neutral-700: #717171;
$neutral-600: #89939E;
$neutral-500: #ABBED1;
$neutral-400: #E5F7FA;
$neutral-300: #F5F7FA;
$neutral-100: #FFFFFF;

$success-700: #1B6E53;
$success-600: #009262;
$success-400: #32C997;
$success-300: #84DFC1;
$success-200: #F1FBF8;

$danger-600: #E02B1D;

// Font Family & Weights
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;

// Apply font family
* {
  font-family: $font-family-base;
}

// ============================================
// PAGE HEADER
// ============================================
.page-header {
  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  color: $neutral-100;
}

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

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

.page-title {
  font-size: 36px;
  line-height: 44px;
  font-weight: $font-weight-semibold;
  margin: 0;
  color: $neutral-100;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  margin: 4px 0 0 0;
  opacity: 0.9;
  font-size: 16px;
  line-height: 24px;
  font-weight: $font-weight-regular;
  color: $neutral-100;
}

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

.stat-chip {
  color: $success-600 !important;
  font-weight: $font-weight-semibold;
  font-size: 14px;
  line-height: 20px;
}

// ============================================
// TABS SECTION
// ============================================
.tabs-section {
  padding: 24px 24px 0 24px !important;
  background: $neutral-100;
}

.status-tabs {
  font-family: $font-family-base;
}

.v-tab.v-tab--selected {
  font-weight: $font-weight-semibold;
}

// ============================================
// FILTER SECTION
// ============================================
.filter-section {
  padding: 24px !important;
  background: $neutral-100;
}

.filter-card {
  background: $neutral-300;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid $neutral-400;
}

.input-field {
  font-size: 14px;
  line-height: 20px;
}

.btn-search {
  background-color: $success-600 !important;
  color: $neutral-100 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 14px;
  line-height: 20px;
}

// ============================================
// DATA TABLE
// ============================================
.data-table {
  font-family: $font-family-base;
}

.status-chip {
  font-weight: $font-weight-medium;
  font-size: 12px;
  line-height: 16px;
}

.btn-view {
  background-color: $success-600 !important;
  color: $neutral-100 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 14px;
  line-height: 20px;
}

// ============================================
// RESPONSIVE
// ============================================
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
  }

  .header-stats {
    width: 100%;
    flex-wrap: wrap;
  }

  .filter-card {
    padding: 16px;
  }
}
</style>