<!-- eslint-disable vue/valid-v-slot -->
<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-view-dashboard</v-icon>
            </div>
            <div class="header-text">
              <h2 class="page-title">Master Loket</h2>
              <p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
            </div>
          </div>
          <v-btn 
            color="white" 
            elevation="0"
            class="add-btn"
            @click="openTambahDialog"
          >
            <v-icon left size="20">mdi-plus-circle</v-icon>
            Tambah Loket
          </v-btn>
        </div>
      </div>

      <!-- Table -->
      <v-card-text>
        <v-data-table
          :headers="loketHeaders"
          :items="masterStore.loketData"
          :items-per-page="10"
          class="elevation-0 data-table"
        >
          <template #item.pelayanan="{ item }">
            <v-chip
              v-for="(serviceKode, idx) in item.pelayanan.slice(0, 2)"
              :key="idx"
              size="small"
              class="mr-1 mb-1 chip-primary-outline"
            >
              {{ masterStore.getKlinikNameByKode(serviceKode) }}
            </v-chip>
            <v-chip
              v-if="item.pelayanan.length > 2"
              size="small"
              class="chip-neutral"
            >
              +{{ item.pelayanan.length - 2 }}
            </v-chip>
          </template>

          <template #item.aksi="{ item }">
            <v-btn
              size="small"
              variant="flat"
              class="btn-edit mr-2"
              @click="openEditDialog(item)"
            >
              <v-icon size="16" left>mdi-pencil</v-icon>
              Edit
            </v-btn>
            <v-btn 
              size="small" 
              variant="outlined" 
              class="btn-delete"
              @click="handleDelete(item)"
            >
              <v-icon size="16" left>mdi-delete</v-icon>
              Delete
            </v-btn>
          </template>
        </v-data-table>
      </v-card-text>
    </v-card>

    <!-- Dialog Tambah/Edit -->
    <v-dialog v-model="dialog" max-width="700px" persistent scrollable>
      <v-card class="dialog-card">
        <v-card-title class="dialog-header">
          <span class="headline-4">{{ isEdit ? 'Edit Loket' : 'Tambah Loket Baru' }}</span>
          <v-btn icon variant="text" size="small" class="btn-close" @click="closeDialog">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-card-title>

        <v-divider/>

        <v-card-text class="dialog-content">
          <v-form ref="formRef">
            <!-- Informasi Loket -->
            <div class="field-group">
              <div class="group-label">Informasi Loket</div>
              
              <v-text-field
                v-model="formData.namaLoket"
                label="Nama Loket"
                variant="outlined"
                density="compact"
                :rules="[v => !!v || 'Nama loket harus diisi']"
                hide-details="auto"
                class="mb-3 input-field"
                placeholder="Loket A"
              />

              <v-text-field
                v-model.number="formData.kuota"
                label="Kuota Bangku"
                type="number"
                variant="outlined"
                density="compact"
                :rules="[v => !!v || 'Kuota harus diisi', v => v > 0 || 'Kuota minimal 1']"
                hide-details="auto"
                class="mb-3 input-field"
                placeholder="500"
              />
            </div>

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

            <!-- Konfigurasi -->
            <div class="field-group">
              <div class="group-label">Konfigurasi</div>
              
              <v-select
                v-model="formData.statusPelayanan"
                label="Status Pelayanan"
                :items="['RAWAT JALAN', 'RAWAT INAP']"
                variant="outlined"
                density="compact"
                :rules="[v => !!v || 'Status pelayanan harus dipilih']"
                hide-details="auto"
                class="mb-3 input-field"
              />

              <v-row dense>
                <v-col cols="6">
                  <v-select
                    v-model="formData.pembayaran"
                    label="Pembayaran"
                    :items="['JKN', 'UMUM', 'SPM', 'JKMM', 'JAMPERSAL', 'T4', 'KARYAWAN']"
                    variant="outlined"
                    density="compact"
                    :rules="[v => !!v || 'Pembayaran harus dipilih']"
                    hide-details="auto"
                    class="input-field"
                  />
                </v-col>
                <v-col cols="6">
                  <v-select
                    v-model="formData.keterangan"
                    label="Keterangan"
                    :items="['ONLINE', 'OFFLINE']"
                    variant="outlined"
                    density="compact"
                    :rules="[v => !!v || 'Keterangan harus dipilih']"
                    hide-details="auto"
                    class="input-field"
                  />
                </v-col>
              </v-row>
            </div>

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

            <!-- Pelayanan -->
            <div class="field-group">
              <div class="group-label">
                <v-icon size="18" class="icon-label">mdi-hospital-box</v-icon>
                <span>Pelayanan</span>
              </div>
              
              <v-select
                v-model="formData.pelayanan"
                label="Pilih Pelayanan"
                :items="masterStore.availableServices"
                item-title="nama"
                item-value="id"
                variant="outlined"
                density="compact"
                multiple
                chips
                closable-chips
                :rules="[v => v.length > 0 || 'Pilih minimal 1 pelayanan']"
                hide-details="auto"
                class="input-field"
              >
                <template #chip="{ props, item }">
                  <v-chip
                    v-bind="props"
                    closable
                    size="small"
                    class="chip-primary"
                  >
                    {{ item.raw.nama }}
                  </v-chip>
                </template>
                <template #item="{ props, item }">
                  <v-list-item v-bind="props">
                    <template #prepend>
                      <v-chip size="x-small" class="chip-primary-small">{{ item.raw.id }}</v-chip>
                    </template>
                    <v-list-item-title class="body-3">{{ item.raw.nama }}</v-list-item-title>
                  </v-list-item>
                </template>
              </v-select>
              
              <!-- Selected Services Preview -->
              <div v-if="formData.pelayanan.length > 0" class="selected-preview">
                <v-icon size="14" class="icon-success">mdi-check-circle</v-icon>
                <small class="caption-2">{{ formData.pelayanan.length }} pelayanan dipilih</small>
              </div>
            </div>
          </v-form>
        </v-card-text>

        <v-divider/>

        <v-card-actions class="dialog-actions">
          <v-spacer/>
          <v-btn
            variant="outlined"
            class="btn-cancel"
            @click="closeDialog"
          >
            <v-icon left size="18">mdi-close</v-icon>
            Batal
          </v-btn>
          <v-btn
            variant="flat"
            class="btn-submit"
            @click="submitForm"
          >
            <v-icon left size="18">mdi-content-save</v-icon>
            Simpan
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Snackbar -->
    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="3000">
      <span class="body-3">{{ snackbar.message }}</span>
      <template #actions>
        <v-btn variant="text" size="small" @click="snackbar.show = false">Tutup</v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script setup>
import { ref } from 'vue';
import { useMasterStore } from '@/stores/masterStore';

const masterStore = useMasterStore();
const dialog = ref(false);
const isEdit = ref(false);
const formRef = ref(null);

const snackbar = ref({
  show: false,
  message: '',
  color: 'success'
});

const loketHeaders = ref([
  { title: "No", value: "no" },
  { title: "Nama Loket", value: "namaLoket" },
  { title: "Kuota", value: "kuota" },
  { title: "Pelayanan", value: "pelayanan" },
  { title: "Pembayaran", value: "pembayaran" },
  { title: "Keterangan", value: "keterangan" },
  { title: "Aksi", value: "aksi", sortable: false },
]);

const formData = ref({
  id: null,
  namaLoket: '',
  kuota: null,
  statusPelayanan: '',
  pembayaran: '',
  keterangan: '',
  pelayanan: [],
});

const openTambahDialog = () => {
  isEdit.value = false;
  resetForm();
  dialog.value = true;
};

const openEditDialog = (item) => {
  isEdit.value = true;
  formData.value = {
    id: item.id,
    namaLoket: item.namaLoket,
    kuota: item.kuota,
    statusPelayanan: item.statusPelayanan || 'RAWAT JALAN',
    pembayaran: item.pembayaran,
    keterangan: item.keterangan,
    pelayanan: [...item.pelayanan],
  };
  dialog.value = true;
};

const closeDialog = () => {
  dialog.value = false;
  resetForm();
};

const resetForm = () => {
  formData.value = {
    id: null,
    namaLoket: '',
    kuota: null,
    statusPelayanan: '',
    pembayaran: '',
    keterangan: '',
    pelayanan: [],
  };
  if (formRef.value) {
    formRef.value.reset();
  }
};

const submitForm = async () => {
  const { valid } = await formRef.value.validate();
  
  if (!valid) return;

  let result;
  if (isEdit.value) {
    result = masterStore.updateLoket(formData.value);
  } else {
    result = masterStore.addLoket(formData.value);
  }

  if (result.success) {
    snackbar.value = { show: true, message: result.message, color: 'success' };
    closeDialog();
  } else {
    snackbar.value = { show: true, message: result.message, color: 'error' };
  }
};

const handleDelete = (item) => {
  if (confirm(`Hapus loket ${item.namaLoket}?`)) {
    const result = masterStore.deleteLoket(item.id);
    snackbar.value = {
      show: true,
      message: result.message,
      color: result.success ? 'success' : 'error'
    };
  }
};
</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;

$primary-700: #FF9B1B;
$primary-600: #FFA532;
$primary-300: #FFDCAF;

$secondary-600: #0671E0;

$success-600: #009262;
$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, $primary-600 0%, $primary-700 100%);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 4px 16px rgba(255, 165, 50, 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;
}

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

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

.chip-primary-outline {
  border: 1px solid $primary-600;
  background-color: transparent !important;
  color: $primary-600 !important;
  font-weight: $font-weight-medium;
  font-size: 12px;
  line-height: 16px;
}

.chip-neutral {
  background-color: $neutral-600 !important;
  color: $neutral-100 !important;
  font-weight: $font-weight-medium;
  font-size: 12px;
  line-height: 16px;
}

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

.btn-delete {
  border-color: $danger-600 !important;
  color: $danger-600 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 14px;
  line-height: 20px;
}

// ============================================
// DIALOG
// ============================================
.dialog-card {
  font-family: $font-family-base;
}

.dialog-header {
  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
  color: $neutral-100;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headline-4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: $font-weight-semibold;
  margin: 0;
}

.btn-close {
  color: $neutral-100 !important;
}

.dialog-content {
  padding: 24px !important;
  background: $neutral-300;
}

.dialog-actions {
  padding: 16px 24px;
  background: $neutral-300;
}

// ============================================
// FORM ELEMENTS
// ============================================
.field-group {
  background: $neutral-100;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 0;
  border: 1px solid $neutral-400;
}

.group-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: $font-weight-semibold;
  color: $primary-600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-label {
  color: $primary-600 !important;
}

.caption-2 {
  font-size: 12px;
  line-height: 16px;
  font-weight: $font-weight-regular;
  color: $neutral-700;
}

.body-3 {
  font-size: 14px;
  line-height: 20px;
  font-weight: $font-weight-regular;
}

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

.divider-section {
  border-color: $neutral-400 !important;
}

// ============================================
// CHIPS
// ============================================
.chip-primary {
  background-color: $primary-600 !important;
  color: $neutral-100 !important;
  font-weight: $font-weight-medium;
}

.chip-primary-small {
  background-color: $primary-600 !important;
  color: $neutral-100 !important;
  font-weight: $font-weight-semibold;
  font-size: 12px;
  line-height: 16px;
}

// ============================================
// SELECTED PREVIEW
// ============================================
.selected-preview {
  margin-top: 8px;
  padding: 8px 12px;
  background: $success-200;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid $success-300;
}

.icon-success {
  color: $success-600 !important;
}

// ============================================
// BUTTONS
// ============================================
.btn-cancel {
  border-color: $neutral-600 !important;
  color: $neutral-800 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 16px;
  line-height: 24px;
  min-width: 100px;
}

.btn-submit {
  background-color: $primary-600 !important;
  color: $neutral-100 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 16px;
  line-height: 24px;
  min-width: 100px;
}
</style>