<template>
  <v-card-text class="pa-0 bg-white">
    <v-table class="patient-table">
      <!-- Table Body -->
      <tbody>
        <tr
          v-for="patient in patients"
          :key="patient.rm"
          class="table-row"
          :class="{ 'verified-row': patient.status === 'Terverifikasi' }"
        >
          <!-- Status Avatar -->
          <td class="table-cell status-cell">
            <div class="status-wrapper">
              <v-avatar 
                :color="patient.status === 'Terverifikasi' ? 'secondary-600' : 'primary-600'" 
                size="48" 
                class="patient-avatar"
              >
                <v-icon size="24" color="white">
                  {{ patient.status === 'Terverifikasi' ? 'mdi-check-decagram' : 'mdi-clock-alert' }}
                </v-icon>
              </v-avatar>
            </div>
          </td>

          <!-- Nama -->
          <td class="table-cell">
            <span class="patient-name">{{ patient.nama }}</span>
          </td>

          <!-- RM -->
          <td class="table-cell">
            <v-chip size="small" color="primary-200" class="chip-rm" variant="flat">
              <v-icon start size="14" color="secondary-600">mdi-file-document</v-icon>
              <span class="chip-rm-text">{{ patient.rm }}</span>
            </v-chip>
          </td>

          <!-- Alamat -->
          <td class="table-cell">
            <div class="info-item">
              <v-icon size="14" class="mr-2" color="neutral-600">mdi-map-marker</v-icon>
              <span>{{ patient.alamat }}</span>
            </div>
          </td>

          <!-- Nomor Telepon -->
          <td class="table-cell">
            <div class="info-item">
              <v-icon size="14" class="mr-2" color="neutral-600">mdi-phone</v-icon>
              <span>{{ patient.telepon || 'Belum diisi' }}</span>
            </div>
          </td>

          <!-- Aksi -->
          <td class="table-cell action-col">
            <div class="action-wrapper">
              <v-btn
                v-if="patient.status === 'Belum Terverifikasi'"
                variant="flat"
                class="action-btn"
                @click="$emit('verify', patient)"
              >
                <v-icon start size="16">mdi-qrcode-scan</v-icon>
                VERIFIKASI
              </v-btn>
              
              <v-btn
                v-else
                color="secondary-600"
                variant="flat"
                class="verified-btn"
                disabled
              >
                <v-icon start size="16">mdi-shield-check</v-icon>
                VERIFIED
              </v-btn>
            </div>
          </td>
        </tr>
        
        <!-- Empty State -->
        <tr v-if="patients.length === 0">
          <td colspan="6" class="empty-state-cell">
            <div class="empty-state">{{ emptyMessage }}</div>
          </td>
        </tr>
      </tbody>
    </v-table>
  </v-card-text>
</template>

<script setup>
defineProps({
  patients: {
    type: Array,
    required: true
  },
  emptyMessage: {
    type: String,
    default: 'Tidak ada data pasien'
  }
});

defineEmits(['verify']);
</script>

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$neutral-400: #E5F7FA;
$neutral-500: #ABBED1;
$neutral-600: #89939E;
$neutral-700: #717171;
$neutral-900: #212121;
$primary-100: #FFE8CC;
$primary-200: #FFDCAF;
$primary-600: #FFA532;
$primary-700: #FF9B1B;
$secondary-200: #EDF5FF;
$secondary-300: #DBEDFF;
$secondary-400: #B3D9FF;
$secondary-600: #0671E0;
$secondary-700: #0053AD;
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-regular: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-extra-bold: 800;

.patient-table {
  font-family: $font-family-base;
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  
  :deep(thead),
  :deep(tbody),
  :deep(tr) {
    margin: 0;
    padding: 0;
  }
}

// ============================================
// TABLE HEADER
// ============================================
.table-header {
  background-color: $neutral-400;
}

.header-cell {
  padding: 16px 24px !important;
  text-align: left;
  font-weight: $font-weight-bold;
  font-size: 14px;
  color: $neutral-900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: $font-family-base;
  border-bottom: 2px solid $neutral-500;
  vertical-align: middle;
  
  &.status-header-hidden {
    padding: 16px 24px !important;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
  }
  
  &.action-col {
    text-align: right;
    padding-right: 24px !important;
  }
}

// ============================================
// TABLE BODY
// ============================================
.table-row {
  transition: all 0.3s ease;
  position: relative;
  
  &:hover {
    background-color: $primary-100 !important;
    
    &::before {
      transform: scaleY(1);
    }
  }
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: $primary-600;
    transform: scaleY(0);
    transition: transform 0.3s ease;
  }
}

.verified-row {
  background-color: $secondary-200 !important;
  
  &::before {
    background: $secondary-600 !important;
  }
  
  &:hover {
    background-color: $secondary-300 !important;
  }
}

.table-cell {
  padding: 16px 24px !important;
  vertical-align: middle;
  font-family: $font-family-base;
  border-bottom: 1px solid $neutral-400;
  
  &.status-cell {
    text-align: center;
    padding: 16px 24px !important;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
  }
  
  &.action-col {
    text-align: right;
    padding-right: 24px !important;
  }
}

.status-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.patient-avatar {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 3px solid $neutral-100;
  margin: 0 auto;
}

.patient-name {
  font-size: 18px;
  font-weight: $font-weight-extra-bold;
  color: $neutral-900;
  font-family: $font-family-base;
}

.chip-rm {
  border: 1px solid $secondary-400;
  font-weight: $font-weight-bold;
}

.chip-rm-text {
  color: $secondary-700;
  font-weight: $font-weight-bold;
  font-family: $font-family-base;
}

.info-item {
  color: $neutral-700;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: $font-family-base;
}

.action-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.action-btn {
  background-color: $primary-700 !important;
  text-transform: none;
  letter-spacing: 0.5px;
  font-weight: $font-weight-extra-bold;
  font-size: 14px;
  color: $neutral-100 !important;
  padding: 8px 24px !important;
  height: 40px !important;
  min-width: 150px;
  box-shadow: 0 4px 12px rgba(255, 155, 27, 0.4), 0 2px 6px rgba(255, 155, 27, 0.3);
  font-family: $font-family-base;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background-color: #E68A00 !important;
  box-shadow: 0 6px 16px rgba(255, 155, 27, 0.5), 0 3px 8px rgba(255, 155, 27, 0.4);
  transform: translateY(-2px);
}

.verified-btn {
  text-transform: none;
  letter-spacing: 0.5px;
  font-weight: $font-weight-extra-bold;
  font-size: 14px;
  color: $neutral-100 !important;
  padding: 8px 24px !important;
  height: 40px !important;
  min-width: 150px;
  font-family: $font-family-base;
  opacity: 1 !important;
}

.empty-state-cell {
  padding: 40px 24px;
  text-align: center;
}

.empty-state {
  font-size: 18px;
  color: $neutral-600;
  font-weight: $font-weight-semibold;
  font-family: $font-family-base;
}

// ============================================
// RESPONSIVE
// ============================================
@media (max-width: 960px) {
  .patient-table {
    display: block;
    overflow-x: auto;
  }
  
  .table-cell {
    padding: 20px 16px;
    white-space: nowrap;
  }
  
  .header-cell {
    padding: 12px 16px;
    font-size: 12px;
  }
  
  .action-btn,
  .verified-btn {
    font-size: 12px;
  }
  
  .patient-avatar {
    width: 44px !important;
    height: 44px !important;
  }
  
  .patient-name {
    font-size: 16px;
  }
  
  .info-item {
    font-size: 12px;
  }
}
</style>