<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-account-details</v-icon>
            </div>
            <div class="header-text">
              <h2 class="page-title">Informasi Pasien</h2>
              <p class="page-subtitle">{{ currentDate }} - Detail Data Pasien</p>
            </div>
          </div>
          <div class="header-stats">
            <v-chip 
              v-if="patient.status"
              color="white" 
              variant="flat" 
              class="stat-chip mr-2"
            >
              <v-icon start size="16">mdi-progress-check</v-icon>
              {{ patient.status }}
            </v-chip>
            <v-btn 
              color="white" 
              elevation="0"
              class="btn-back"
              @click="$router.go(-1)"
            >
              <v-icon left size="20">mdi-arrow-left</v-icon>
              Kembali
            </v-btn>
          </div>
        </div>
      </div>

      <!-- Content -->
      <v-card-text class="content-section">
        <v-card class="mb-6 patient-info-card" elevation="0">
        <v-row class="align-center mb-4">
            <v-col cols="12" md="8">
                <div class="d-flex align-center mb-2">
                    <v-icon size="36" color="blue-darken-2" class="mr-3">mdi-account-circle</v-icon>
                    <div>
                        <div class="text-caption text-uppercase text-grey-darken-1">Nama Pasien</div>
                        <div class="text-h5 font-weight-black text-blue-darken-4">{{ patient.name }}</div>
                    </div>
                </div>
                <div class="d-flex align-center">
                    <v-icon size="24" color="grey-darken-1" class="mr-3">mdi-numeric</v-icon>
                    <div>
                        <div class="text-caption text-uppercase text-grey-darken-1">Nomor Rekam Medis</div>
                        <v-chip color="orange-darken-1" size="large" class="font-weight-bold">{{ patient.rm_number }}</v-chip>
                    </div>
                </div>
            </v-col>
        </v-row>
        
        <v-divider class="my-4" />

        <v-row>
          <v-col cols="12" sm="6" md="4" class="py-1">
            <div class="d-flex align-center">
                <v-icon class="mr-3" color="light-blue-darken-2">mdi-calendar</v-icon>
                <div>
                  <div class="text-caption text-uppercase text-grey-darken-1">Tanggal Lahir</div>
                  <div class="font-weight-medium text-subtitle-1">{{ patient.dob }}</div>
                </div>
            </div>
          </v-col>
          <v-col cols="12" sm="6" md="4" class="py-1">
            <div class="d-flex align-center">
                <v-icon class="mr-3" color="light-blue-darken-2">mdi-phone</v-icon>
                <div>
                  <div class="text-caption text-uppercase text-grey-darken-1">No Telepon</div>
                  <div class="font-weight-medium text-subtitle-1">{{ patient.phone }}</div>
                </div>
            </div>
          </v-col>
          <v-col cols="12" sm="12" md="4" class="py-1">
            <div class="d-flex align-center">
                <v-icon class="mr-3" color="light-blue-darken-2">mdi-map-marker</v-icon>
                <div>
                  <div class="text-caption text-uppercase text-grey-darken-1">Alamat</div>
                  <div class="font-weight-medium text-subtitle-1">{{ patient.address }}</div>
                </div>
            </div>
          </v-col>
        </v-row>
      </v-card>
      
      
        <h2 class="section-title">Tiket Pelayanan Aktif</h2>
      
      <v-row class="ticket-row">
        
        <v-col 
            v-for="ticket in patient.activeTickets" 
            :key="ticket.title"
            cols="12" 
            sm="6"    
            md="4"   
            lg="4"
        >
          <MonitorPasienTicketCard 
            :title="ticket.title" 
            :color="ticket.color"
            :steps="ticket.steps" 
            :current-step-label="ticket.currentStepLabel"
          />
        </v-col>
        
        <v-col v-if="!patient.activeTickets || patient.activeTickets.length === 0" cols="12">
          <v-card class="empty-ticket-card" elevation="0">
            <v-icon size="48" color="grey">mdi-ticket-off-outline</v-icon>
            <div class="empty-text">Pasien ini tidak memiliki tiket pelayanan aktif saat ini.</div>
          </v-card>
        </v-col>
        
      </v-row>
      </v-card-text>
    </v-card>
  </v-container>
</template>

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

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

// 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()}`;
});
// ===============================================
// JSON MOCK DATA STRUCTURE (Tetap sama)
// ===============================================
const mockPatientData = [
  { 
    id: '11111111', 
    name: 'Ragil Bayu N. Wibowo',
    rm_number: '11111111',
    dob: '1 Juni 1967',
    phone: '0851-4563-2145',
    address: 'Jalan Sumpah Pemuda No. 12, Jakarta',
    status: 'Aktif',
    activeTickets: [
        // 1. TIKET JIWA
        {
            title: 'JIWA (Antrean: 1)',
            color: 'orange-darken-1',
            currentStepLabel: 'Klinik Jiwa', 
            steps: [
                { label: 'Daftar', date: '15-8-2023', time: '15.01' },
                { label: 'Check in', date: '15-8-2023', time: '07.58' },
                { label: 'Loket 1/3', date: '15-8-2023', time: '08.51' },
                { label: 'Klinik Jiwa', date: '15-8-2023', time: '09.45' },
                { label: 'Apotek', date: '-', time: '-' },
                { label: 'Selesai', date: '-', time: '-' },
            ]
        },
        // 2. TIKET RADIOLOGI
        {
            title: 'RADIOLOGI (Antrean: 5)',
            color: 'blue-darken-2',
            currentStepLabel: 'Loket 5/6/7', 
            steps: [
                { label: 'Daftar', date: '15-8-2023', time: '15.01' },
                { label: 'Check in', date: '15-8-2023', time: '07.58' },
                { label: 'Loket 5/6/7', date: '15-8-2023', time: '08.51' },
                { label: 'Tunggu Radiologi', date: '-', time: '-' },
                { label: 'Selesai', date: '-', time: '-' },
            ]
        },
        // 3. TIKET GIZI
        {
            title: 'GIZI (Antrean: 12)',
            color: 'purple-darken-1',
            currentStepLabel: 'Konsultasi Gizi', 
            steps: [
                { label: 'Daftar', date: '16-8-2023', time: '07.00' },
                { label: 'Tunggu Panggilan', date: '16-8-2023', time: '07.20' },
                { label: 'Konsultasi Gizi', date: '16-8-2023', time: '07.45' },
                { label: 'Selesai', date: '-', time: '-' },
            ]
        },
        // 4. TIKET FISIOTERAPI
        {
            title: 'Fisioterapi (Antrean: 2)',
            color: 'teal-darken-1',
            currentStepLabel: 'Daftar', 
            steps: [
                { label: 'Daftar', date: '16-8-2023', time: '10.00' },
                { label: 'Fisioterapi', date: '-', time: '-' },
                { label: 'Selesai', date: '-', time: '-' },
            ]
        },
        // 5. TIKET LABORATORIUM
        {
            title: 'LABORATORIUM (Antrean: 7)',
            color: 'red-darken-2',
            currentStepLabel: 'Pemeriksaan Sampel', 
            steps: [
                { label: 'Daftar', date: '17-8-2023', time: '06.30' },
                { label: 'Administrasi', date: '17-8-2023', time: '06.40' },
                { label: 'Tunggu Panggilan', date: '17-8-2023', time: '06.50' },
                { label: 'Pengambilan Sampel', date: '17-8-2023', time: '07.10' },
                { label: 'Pemeriksaan Sampel', date: '17-8-2023', time: '07.30' },
                { label: 'Input Hasil', date: '-', time: '-' },
                { label: 'Verifikasi Dokter', date: '-', time: '-' },
                { label: 'Ambil Hasil', date: '-', time: '-' },
                { label: 'Selesai', date: '-', time: '-' },
            ]
        },
    ]
  },
  { 
    id: '33333333', 
    name: 'Joko Susilo',
    rm_number: '33333333',
    dob: '20 Desember 1995',
    phone: '0878-1122-3344',
    address: 'Jl. Pahlawan No. 5, Surabaya',
    status: 'Tidak Aktif',
    activeTickets: [] 
  },
];


// ===============================================
// MAIN SCRIPT LOGIC
// ===============================================
const route = useRoute();
const patientId = route.params.id; 

const patient = ref({
  name: 'Memuat...',
  address: 'Memuat...',
  phone: 'Memuat...',
  rm_number: patientId,
  dob: 'Memuat...',
  status: 'Memuat',
  activeTickets: []
});

const fetchPatientData = () => {
  const data = mockPatientData.find(p => p.id === patientId);

  if (data) {
    patient.value = data;
  } else {
    patient.value = {
      name: 'Data Pasien Tidak Ditemukan',
      address: '-',
      phone: '-',
      rm_number: patientId,
      dob: '-',
      status: 'Error',
      activeTickets: []
    };
  }
};

onMounted(fetchPatientData);
</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;
}

.btn-back {
  font-weight: $font-weight-semibold;
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 16px;
  line-height: 24px;
  color: $success-600 !important;
}

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

.patient-info-card {
  background: $neutral-300;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid $neutral-400;
  margin-bottom: 24px;
}

.section-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: $font-weight-semibold;
  color: $success-600;
  margin-bottom: 16px;
}

// ============================================
// TICKET ROW
// ============================================
.ticket-row {
  display: flex;
  align-items: stretch;
}

.ticket-row > .v-col {
  display: flex;
  flex-direction: column;
}

.empty-ticket-card {
  background: $neutral-300;
  padding: 48px 24px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid $neutral-400;
}

.empty-text {
  font-size: 16px;
  line-height: 24px;
  font-weight: $font-weight-regular;
  color: $neutral-700;
  margin-top: 16px;
}

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

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

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