<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div>
    <!-- Header -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <div class="header-icon">
            <v-icon size="28" color="white">mdi-hospital-building</v-icon>
          </div>
          <div class="header-text">
            <h2 class="page-title">Master Klinik</h2>
            <p class="page-subtitle">Rabu, 13 Agustus 2025 - Manajemen Klinik</p>
          </div>
        </div>
      </div>
    </div>

    <v-container>
      <!-- Action Bar -->
      <div class="action-bar mb-4">
        <v-spacer></v-spacer>
        <v-btn 
          color="primary-600"
          variant="flat"
          elevation="0"
          class="action-btn text-white"
          @click="openTambahDialog"
        >
          <v-icon left size="20">mdi-plus-circle</v-icon>
          Tambah Klinik
        </v-btn>
      </div>

      <v-card>
        <!-- Table -->
        <v-card-text>
        <!-- Filter Row -->
        <div class="d-flex flex-wrap align-center justify-space-between mb-4">
          <div class="d-flex align-center">
            <span class="mr-2 body-3">Show</span>
            <v-select
              v-model="itemsPerPage"
              :items="[10, 25, 50, 100]"
              variant="outlined"
              density="compact"
              hide-details
              style="max-width: 80px;"
              rounded
              class="mr-2"
            ></v-select>
            <span class="body-3">entries</span>
          </div>
          <div class="d-flex align-center">
            <v-text-field
              v-model="search"
              prepend-inner-icon="mdi-magnify"
              label="Search"
              variant="outlined"
              density="compact"
              hide-details
              rounded
              clearable
              style="min-width: 250px;"
            ></v-text-field>
          </div>
        </div>

        <v-data-table
          v-model:page="page"
          :headers="headers"
          :items="masterStore.klinikData"
          :items-per-page="itemsPerPage"
          :search="search"
          item-value="id"
          class="elevation-0 data-table"
          hover
          @update:itemsLength="filteredTotal = $event"
        >
          <template #item.jenisLayanan="{ item }">
            <v-chip 
              size="small" 
              :class="['Reguler', 'REGULER', 'JKN'].includes(item.jenisLayanan) ? 'chip-reguler' : 'chip-eksekutif'"
            >
              {{ item.jenisLayanan }}
            </v-chip>
          </template>
          
          <template #item.shift="{ item }">
            <v-chip size="small" class="chip-secondary">
              {{ item.shift }}
            </v-chip>
          </template>
          
          <template #item.totalQuota="{ item }">
            <span class="body-2 text-semibold">{{ item.totalQuota }}</span>
          </template>
          
          <template #item.aksi="{ item }">
            <v-btn
              size="small"
              color="warning-600"
              class="btn-edit mr-2"
              variant="flat"
              @click="openEditDialog(item)"
            >
              <v-icon size="16" left>mdi-pencil</v-icon>
              Edit
            </v-btn>
            <v-btn
              size="small"
              color="error-600"
              class="btn-delete"
              variant="flat"
              @click="handleDelete(item)"
            >
              <v-icon size="16" left>mdi-delete</v-icon>
              Delete
            </v-btn>
          </template>

          <template #bottom>
            <v-row class="ma-2" align="center">
              <v-col cols="12" sm="6" class="d-flex align-center justify-start body-3 text-grey">
                {{ showingEntriesText }}
              </v-col>
              <v-col cols="12" sm="6" class="d-flex align-center justify-end">
                <v-pagination
                  v-model="page"
                  :length="pageCount"
                  total-visible="5"
                  rounded="circle"
                  size="small"
                ></v-pagination>
              </v-col>
            </v-row>
          </template>
        </v-data-table>
      </v-card-text>
    </v-card>

    <!-- Dialog Tambah/Edit -->
    <v-dialog v-model="dialog" max-width="900px" persistent scrollable>
      <v-card class="dialog-card">
        <v-card-title class="dialog-header">
          <span class="headline-4">{{ isEdit ? 'Edit Klinik' : 'Tambah Klinik' }}</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 Dasar -->
            <div class="field-group">
              <div class="group-label">
                <span>Informasi Dasar</span>
              </div>
              
              <v-row dense>
                <v-col cols="6">
                  <v-text-field
                    v-model="formData.kode"
                    label="Kode"
                    variant="outlined"
                    density="compact"
                    :rules="[v => !!v || 'Kode harus diisi']"
                    hide-details="auto"
                    placeholder="AN"
                    class="mb-3 input-field"
                  />
                  <small class="caption-2">2 Huruf</small>
                </v-col>
                <v-col cols="6">
                  <v-text-field
                    v-model="formData.nama"
                    label="Nama"
                    variant="outlined"
                    density="compact"
                    :rules="[v => !!v || 'Nama harus diisi']"
                    hide-details="auto"
                    placeholder="Gigi dan Mulut"
                    class="mb-3 input-field"
                  />
                </v-col>
              </v-row>

              <v-checkbox
                v-model="formData.autoShift"
                label="Auto Shift"
                hide-details
                color="#0671E0"
                density="compact"
                class="checkbox-field"
              />
            </div>

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

            <!-- Jadwal Klinik -->
            <div class="field-group">
              <div class="group-label">
                <v-icon size="18" class="icon-label">mdi-calendar-check</v-icon>
                <span>Pilih Hari Operasional</span>
              </div>
              
              <div class="day-selector">
                <v-chip
                  v-for="hari in hariList"
                  :key="hari.hari"
                  class="day-chip"
                  :class="{ 'day-chip-active': formData.jadwalKlinik.includes(hari.hari) }"
                  label
                  @click="toggleHari(hari.hari)"
                >
                  <v-icon v-if="formData.jadwalKlinik.includes(hari.hari)" left size="16">mdi-check</v-icon>
                  {{ hari.hari }}
                </v-chip>
              </div>
            </div>

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

            <!-- Konfigurasi Shift Per Hari -->
            <div v-if="formData.jadwalKlinik.length > 0" class="field-group">
              <div class="group-label">
                <v-icon size="18" class="icon-label">mdi-clock-outline</v-icon>
                <span>Konfigurasi Shift & Kuota Per Hari</span>
              </div>

              <!-- Day Tabs -->
              <div class="day-tabs">
                <v-chip
                  v-for="hari in formData.jadwalKlinik"
                  :key="hari"
                  class="day-tab"
                  :class="{ 'day-tab-active': activeDay === hari }"
                  @click="activeDay = hari"
                >
                  {{ hari }}
                </v-chip>
              </div>

              <!-- Shift Configuration for Active Day -->
              <div class="shifts-container">
                <div v-for="(shift, index) in getShiftsForDay(activeDay)" :key="index" class="shift-item">
                  <v-row dense align="center">
                    <v-col cols="2">
                      <div class="shift-badge body-3">Shift {{ index + 1 }}</div>
                    </v-col>
                    
                    <v-col cols="3">
                      <v-text-field
                        v-model="shift.dari"
                        label="Mulai"
                        type="time"
                        variant="outlined"
                        density="compact"
                        hide-details
                        class="input-field"
                      />
                    </v-col>
                    
                    <v-col cols="3">
                      <v-text-field
                        v-model="shift.sampai"
                        label="Selesai"
                        type="time"
                        variant="outlined"
                        density="compact"
                        hide-details
                        class="input-field"
                      />
                    </v-col>
                    
                    <v-col cols="3">
                      <v-text-field
                        v-model.number="shift.kuota"
                        label="Kuota"
                        type="number"
                        variant="outlined"
                        density="compact"
                        hide-details
                        placeholder="0"
                        class="input-field"
                      />
                    </v-col>
                    
                    <v-col cols="1">
                      <v-btn
                        v-if="getShiftsForDay(activeDay).length > 1"
                        icon
                        size="small"
                        variant="text"
                        class="btn-delete-shift"
                        @click="removeShiftFromDay(activeDay, index)"
                      >
                        <v-icon size="18">mdi-delete</v-icon>
                      </v-btn>
                    </v-col>
                  </v-row>
                </div>

                <v-btn
                  size="small"
                  variant="outlined"
                  class="btn-add-shift mt-2"
                  @click="addShiftToDay(activeDay)"
                >
                  <v-icon left size="16">mdi-plus</v-icon>
                  Tambah Shift untuk {{ activeDay }}
                </v-btn>
              </div>

              <div class="total-badge mt-3">
                <v-icon size="18" class="icon-success">mdi-sigma</v-icon>
                <span class="body-3 text-medium">Total Kuota Semua Hari:</span>
                <v-chip size="small" variant="flat" class="chip-success">
                  {{ calculateTotalQuota() }}
                </v-chip>
              </div>
            </div>

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

            <!-- Tanggal Tutup Klinik -->
            <div class="field-group">
              <div class="group-label">
                <v-icon size="18" class="icon-label">mdi-calendar-remove</v-icon>
                <span>Jadwal Tutup Klinik</span>
              </div>

              <p class="helper-text mb-3">Tambahkan tanggal ketika klinik ini tutup (tidak beroperasi)</p>

              <!-- Input Tanggal Tutup -->
              <v-row dense>
                <v-col cols="9">
                  <v-text-field
                    v-model="newClosedDate"
                    type="date"
                    label="Pilih Tanggal Tutup"
                    variant="outlined"
                    density="compact"
                    hide-details
                    :min="new Date().toISOString().split('T')[0]"
                    class="input-field"
                  />
                </v-col>
                <v-col cols="3">
                  <v-btn
                    color="danger-600"
                    class="text-white btn-add-closed-date"
                    size="large"
                    block
                    @click="addClosedDate"
                    :disabled="!newClosedDate"
                  >
                    <v-icon left size="18">mdi-plus</v-icon>
                    Tambah
                  </v-btn>
                </v-col>
              </v-row>

              <!-- List Tanggal Tutup -->
              <div v-if="formData.tanggalTutup.length > 0" class="closed-dates-list mt-4">
                <div class="list-header">
                  <span class="body-3 text-medium">{{ formData.tanggalTutup.length }} Hari Tutup</span>
                  <v-btn
                    size="x-small"
                    variant="text"
                    color="danger-600"
                    @click="clearAllClosedDates"
                  >
                    <v-icon size="14">mdi-delete-sweep</v-icon>
                    Hapus Semua
                  </v-btn>
                </div>
                
                <div class="closed-dates-items">
                  <div
                    v-for="(date, idx) in sortedClosedDates"
                    :key="idx"
                    class="closed-date-item"
                  >
                    <div class="date-info">
                      <v-icon size="16" color="danger-600">mdi-calendar-remove</v-icon>
                      <span class="date-text">{{ formatClosedDate(date) }}</span>
                    </div>
                    <v-btn
                      icon
                      size="x-small"
                      variant="text"
                      color="danger-600"
                      @click="removeClosedDate(date)"
                    >
                      <v-icon size="16">mdi-close</v-icon>
                    </v-btn>
                  </div>
                </div>
              </div>
              
              <div v-else class="empty-closed-dates mt-3">
                <v-icon size="24" color="neutral-600">mdi-calendar-check</v-icon>
                <p class="empty-text">Belum ada tanggal tutup</p>
              </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>
  </div>
</template>

<script setup>
definePageMeta({
  middleware: ['auth', 'check-page-access']
})
import { ref, computed, onMounted } from 'vue';
import { useMasterStore } from '@/stores/masterStore';
import { useClinicStore } from '@/stores/clinicStore';

const masterStore = useMasterStore();
const clinicStore = useClinicStore();
const page = ref(1);
const itemsPerPage = ref(10);
const search = ref('');
const filteredTotal = ref(masterStore.klinikData.length);

import { watch } from 'vue';
watch(() => masterStore.klinikData.length, (newLen) => {
  if (!search.value) filteredTotal.value = newLen;
}, { immediate: true });
const dialog = ref(false);
const isEdit = ref(false);
const formRef = ref(null);

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

const headers = ref([
  { title: 'No', value: 'no', sortable: true },
  { title: 'Kode', value: 'kode', sortable: true },
  { title: 'Nama Klinik', value: 'nama', sortable: true },
  { title: 'Jenis Layanan', value: 'jenisLayanan', sortable: true },
  { title: 'Shift', value: 'shift', sortable: true },
  { title: 'Total Kuota', value: 'totalQuota', sortable: true },
  { title: 'Aksi', value: 'aksi', sortable: false },
]);

const pageCount = computed(() => {
  return Math.ceil(filteredTotal.value / itemsPerPage.value) || 1;
});

const showingEntriesText = computed(() => {
  if (filteredTotal.value === 0) return 'Showing 0 to 0 of 0 entries';
  const start = (page.value - 1) * itemsPerPage.value + 1;
  const end = Math.min(page.value * itemsPerPage.value, filteredTotal.value);
  return `Showing ${start} to ${end} of ${filteredTotal.value} entries${search.value ? ' (filtered)' : ''}`;
});

const hariList = ref([
  { no: 1, hari: 'Senin' },
  { no: 2, hari: 'Selasa' },
  { no: 3, hari: 'Rabu' },
  { no: 4, hari: 'Kamis' },
  { no: 5, hari: 'Jum\'at' },
]);

const formData = ref({
  id: null,
  kode: '',
  nama: '',
  shift: 1,
  jamShiftPerHari: {}, // { 'Senin': [{ dari, sampai, kuota }], ... }
  jamShiftList: [], // Legacy, kept for compatibility
  autoShift: false,
  jadwalKlinik: [],
  tanggalTutup: [], // Array of closed dates
});

const activeDay = ref('Senin'); // Currently selected day for shift configuration
const newClosedDate = ref(''); // For adding new closed date

// Computed property for sorted closed dates
const sortedClosedDates = computed(() => {
  return [...formData.value.tanggalTutup].sort((a, b) => new Date(a) - new Date(b));
});

// Format closed date for display
const formatClosedDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('id-ID', { 
    weekday: 'long',
    day: 'numeric', 
    month: 'long', 
    year: 'numeric' 
  });
};

// Add new closed date
const addClosedDate = () => {
  if (!newClosedDate.value) return;
  
  // Check if date already exists
  if (formData.value.tanggalTutup.includes(newClosedDate.value)) {
    snackbar.value = { 
      show: true, 
      message: 'Tanggal sudah ada dalam daftar', 
      color: 'warning' 
    };
    return;
  }
  
  formData.value.tanggalTutup.push(newClosedDate.value);
  newClosedDate.value = ''; // Reset input
};

// Remove a specific closed date
const removeClosedDate = (dateToRemove) => {
  const index = formData.value.tanggalTutup.findIndex(d => d === dateToRemove);
  if (index > -1) {
    formData.value.tanggalTutup.splice(index, 1);
  }
};

// Clear all closed dates
const clearAllClosedDates = () => {
  if (confirm('Hapus semua tanggal tutup?')) {
    formData.value.tanggalTutup = [];
  }
};

const calculateTotalQuota = () => {
  let total = 0;
  Object.values(formData.value.jamShiftPerHari || {}).forEach(shifts => {
    if (Array.isArray(shifts)) {
      shifts.forEach(shift => {
        total += parseInt(shift.kuota) || 0;
      });
    }
  });
  return total;
};

// Add shift for specific day
const addShiftToDay = (hari) => {
  if (!formData.value.jamShiftPerHari[hari]) {
    formData.value.jamShiftPerHari[hari] = [];
  }
  
  const shifts = formData.value.jamShiftPerHari[hari];
  let defaultDari = '07:00', defaultSampai = '11:00';
  
  if (shifts.length === 1) { defaultDari = '13:00'; defaultSampai = '16:00'; }
  else if (shifts.length === 2) { defaultDari = '18:00'; defaultSampai = '20:00'; }
  else if (shifts.length > 2) {
    const prevShift = shifts[shifts.length - 1];
    const [prevHour]= prevShift.sampai.split(':');
    const nextHour = (parseInt(prevHour) + 1) % 24;
    defaultDari = `${String(nextHour).padStart(2, '0')}:00`;
    defaultSampai = `${String((nextHour + 4) % 24).padStart(2, '0')}:00`;
  }
  
  shifts.push({ dari: defaultDari, sampai: defaultSampai, kuota: 0 });
};

// Remove shift from specific day
const removeShiftFromDay = (hari, index) => {
  if (formData.value.jamShiftPerHari[hari] && formData.value.jamShiftPerHari[hari].length > 1) {
    formData.value.jamShiftPerHari[hari].splice(index, 1);
  }
};

// Get shifts for a specific day
const getShiftsForDay = (hari) => {
  return formData.value.jamShiftPerHari[hari] || [];
};

// Legacy compatibility methods
const updateShiftCount = (newShiftCount) => {
  // This is kept for compatibility but not used with new per-day structure
  formData.value.shift = newShiftCount;
};

const removeShift = (index) => {
  // Legacy method, kept for compatibility
};

const toggleHari = (hari) => {
  const index = formData.value.jadwalKlinik.indexOf(hari);
  if (index > -1) {
    // Removing day - also remove its shifts
    formData.value.jadwalKlinik.splice(index, 1);
    delete formData.value.jamShiftPerHari[hari];
  } else {
    // Adding day - initialize with one shift
    formData.value.jadwalKlinik.push(hari);
    if (!formData.value.jamShiftPerHari[hari]) {
      formData.value.jamShiftPerHari[hari] = [{ dari: '07:00', sampai: '11:00', kuota: 100 }];
    }
  }
};

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

const openEditDialog = (item) => {
  isEdit.value = true;
  formData.value = {
    id: item.id,
    kode: item.kode,
    nama: item.nama,
    shift: item.shift,
    jamShiftPerHari: JSON.parse(JSON.stringify(item.jamShiftPerHari || {})),
    jamShiftList: [], // Legacy
    autoShift: item.autoShift || false,
    jadwalKlinik: [...(item.jadwalKlinik || [])],
    tanggalTutup: [...(item.tanggalTutup || [])],
  };
  activeDay.value = formData.value.jadwalKlinik[0] || 'Senin';
  dialog.value = true;
};

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

const resetForm = () => {
  formData.value = {
    id: null,
    kode: '',
    nama: '',
    shift: 1,
    jamShiftPerHari: {},
    jamShiftList: [],
    autoShift: false,
    jadwalKlinik: [],
    tanggalTutup: [],
  };
  activeDay.value = 'Senin';
  newClosedDate.value = '';
  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.updateKlinik(formData.value);
  } else {
    result = masterStore.addKlinik(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 klinik ${item.nama}?`)) {
    const result = masterStore.deleteKlinik(item.id);
    snackbar.value = {
      show: true,
      message: result.message,
      color: result.success ? 'success' : 'error'
    };
  }
};

// Fetch Reguler clinics from API on mount
onMounted(async () => {
  console.log('🚀 MasterKlinik mounted, fetching clinics...');
  console.log('📊 Current clinic count before fetch:', masterStore.klinikData.length);
  
  try {
    const result = await clinicStore.fetchRegulerClinics();
    console.log('✅ Fetch result:', result);
    console.log('📊 Current clinic count after fetch:', masterStore.klinikData.length);
    
    if (!result.success) {
      console.error('❌ Fetch failed:', result.message);
      snackbar.value = {
        show: true,
        message: result.message,
        color: 'warning'
      };
    } else {
      console.log('🎉 Fetch successful:', result.message);
      // Show success message
      snackbar.value = {
        show: true,
        message: result.message,
        color: 'success'
      };
    }
  } catch (error) {
    console.error('❌ Error in onMounted:', error);
    snackbar.value = {
      show: true,
      message: `Error: ${error.message}`,
      color: 'error'
    };
  }
});
</script>

<style scoped lang="scss">
// Import Design System SCSS Variables & Mixins
// @import '@/assets/styles/variables';
// @import '@/assets/styles/typography';

// 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: #3556AE;
$primary-600: #3A61C9;

$secondary-700: #E65A0D;
$secondary-600: #F16F29;
$secondary-300: #DBEDFF;

$success-600: #009262;
$success-300: #84DFC1;
$success-200: #F1FBF8;

$danger-600: #E02B1D;
$danger-400: #FF5A4F;

// 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;
$font-weight-bold: 700;

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

// ============================================
// PAGE HEADER
// ============================================
.page-header {
  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
  border-radius: 0 !important;
  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
}

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

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

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

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

.page-subtitle {
  margin: 2px 0 0 0;
  opacity: 0.9;
  font-size: 15px;
  line-height: 22px;
  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;
}

// ============================================
// ACTION BAR
// ============================================
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: $neutral-100;
  border-radius: 12px;
  border: 1px solid $neutral-400;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.action-btn {
  font-weight: $font-weight-semibold;
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 16px;
  line-height: 24px;
}

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

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

.chip-reguler {
  background-color: $success-600 !important;
  color: #FFFFFF !important;
  font-weight: 500;
}

.chip-eksekutif {
  background-color: $secondary-600 !important;
  color: #FFFFFF !important;
  font-weight: 500;
}

.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: $secondary-600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

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

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

.body-2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: $font-weight-regular;
}

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

.text-semibold {
  font-weight: $font-weight-semibold !important;
}

.text-medium {
  font-weight: $font-weight-medium !important;
}

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

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

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

// ============================================
// SHIFT ITEMS
// ============================================
.shift-item {
  background: $neutral-300;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid $neutral-500;
}

.shift-badge {
  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
  color: $neutral-100;
  padding: 8px;
  border-radius: 6px;
  text-align: center;
  font-weight: $font-weight-semibold;
}

.btn-delete-shift {
  color: $danger-600 !important;
}

.total-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: $success-200;
  border-radius: 8px;
  margin-top: 8px;
  border: 1px solid $success-300;
}

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

.chip-success {
  background-color: $success-600 !important;
  color: $neutral-100 !important;
  font-weight: $font-weight-semibold;
}

// ============================================
// DAY SELECTOR
// ============================================
.day-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.day-chip {
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  font-weight: $font-weight-medium;
  border: 1px solid $neutral-500;
  background-color: $neutral-100;
  color: $neutral-800;
  
  &:hover {
    background-color: $secondary-300;
  }
}

.day-chip-active {
  background-color: $secondary-600 !important;
  color: $neutral-100 !important;
  border-color: $secondary-600 !important;
}

// ============================================
// DAY TABS (for shift configuration)
// ============================================
.day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: $neutral-300;
  border-radius: 8px;
}

.day-tab {
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  font-weight: $font-weight-medium;
  border: 1px solid $neutral-500;
  background-color: $neutral-100;
  color: $neutral-800;
  
  &:hover {
    background-color: $primary-600;
    color: $neutral-100;
  }
}

.day-tab-active {
  background-color: $primary-600 !important;
  color: $neutral-100 !important;
  border-color: $primary-600 !important;
}

.shifts-container {
  padding: 12px;
  background: $neutral-300;
  border-radius: 8px;
}

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

// ============================================
// CLOSED DATES
// ============================================
.helper-text {
  font-size: 13px;
  line-height: 18px;
  font-weight: $font-weight-regular;
  color: $neutral-700;
  margin: 0;
}

.btn-add-closed-date {
  height: 40px !important;
  font-weight: $font-weight-semibold;
  text-transform: none;
  font-size: 14px;
  line-height: 20px;
}

.closed-dates-list {
  background: $neutral-300;
  border-radius: 8px;
  border: 1px solid $neutral-400;
  padding: 12px;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid $neutral-400;
  
  span {
    color: $neutral-800;
  }
}

.closed-dates-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.closed-date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: $neutral-100;
  border-radius: 6px;
  border: 1px solid $neutral-400;
  transition: all 0.2s ease;
  
  &:hover {
    border-color: $danger-400;
    background: rgba($danger-600, 0.02);
  }
}

.date-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.date-text {
  font-size: 14px;
  line-height: 20px;
  font-weight: $font-weight-medium;
  color: $neutral-800;
}

.empty-closed-dates {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: $neutral-300;
  border-radius: 8px;
  border: 1px dashed $neutral-500;
  gap: 8px;
}

.empty-text {
  font-size: 13px;
  line-height: 18px;
  font-weight: $font-weight-medium;
  color: $neutral-700;
  margin: 0;
}

// ============================================
// 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: $secondary-600 !important;
  color: $neutral-100 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 16px;
  line-height: 24px;
  min-width: 100px;
}
</style>