<template>
  <v-container fluid class="settings-page pa-8">
    <v-row justify="center">
      <v-col cols="12" lg="10" xl="9">
        <!-- Modern Header -->
        <div class="page-header mb-8">
          <div class="d-flex align-center mb-4">
            <div class="header-icon">
              <v-icon size="40" color="white">mdi-cog</v-icon>
            </div>
            <div class="ml-4">
              <h1 class="text-h3 font-weight-bold gradient-text">Pengaturan Akun</h1>
              <p class="text-subtitle-1 text-grey-darken-1 mt-1">Kelola keamanan, privasi, dan preferensi akun Anda</p>
            </div>
          </div>
        </div>

        <!-- Settings Navigation Tabs -->
        <v-tabs
          v-model="activeTab"
          color="blue-darken-2"
          class="mb-6 rounded-xl elevation-4 bg-white"
        >
          <v-tab value="security" class="tab-item">
            <v-icon start>mdi-shield-lock</v-icon>
            Keamanan
          </v-tab>
          <v-tab value="notifications" class="tab-item">
            <v-icon start>mdi-bell</v-icon>
            Notifikasi
          </v-tab>
          <v-tab value="privacy" class="tab-item">
            <v-icon start>mdi-eye-off</v-icon>
            Privasi
          </v-tab>
          <v-tab value="danger" class="tab-item">
            <v-icon start>mdi-alert</v-icon>
            Danger Zone
          </v-tab>
        </v-tabs>

        <v-window v-model="activeTab">
          <!-- Security Tab -->
          <v-window-item value="security">
            <v-card class="rounded-xl elevation-4 mb-4">
              <div class="card-header-gradient pa-5">
                <div class="d-flex align-center">
                  <div class="header-icon-small">
                    <v-icon color="white">mdi-lock</v-icon>
                  </div>
                  <h3 class="text-h6 font-weight-bold text-white ml-3">Password & Autentikasi</h3>
                </div>
              </div>

              <v-card-text class="pa-6">
                <div class="setting-item">
                  <div class="d-flex align-center">
                    <div class="setting-icon blue">
                      <v-icon size="24" color="blue-darken-2">mdi-key</v-icon>
                    </div>
                    <div class="ml-4 flex-grow-1">
                      <div class="text-subtitle-1 font-weight-bold">Password</div>
                      <div class="text-body-2 text-grey-darken-1">
                        Terakhir diubah: 2 bulan yang lalu
                      </div>
                    </div>
                    <v-btn
                      color="orange-darken-2"
                      variant="flat"
                      size="small"
                      class="rounded-lg"
                      @click="openChangePassword"
                    >
                      Ubah Password
                    </v-btn>
                  </div>
                </div>

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

                <div class="setting-item">
                  <div class="d-flex align-center">
                    <div class="setting-icon orange">
                      <v-icon size="24" color="orange-darken-2">mdi-two-factor-authentication</v-icon>
                    </div>
                    <div class="ml-4 flex-grow-1">
                      <div class="text-subtitle-1 font-weight-bold">Autentikasi Dua Faktor (2FA)</div>
                      <div class="text-body-2 text-grey-darken-1">
                        Tambahkan lapisan keamanan ekstra ke akun Anda
                      </div>
                      <v-chip
                        size="small"
                        :color="settings.twoFactorEnabled ? 'success' : 'grey'"
                        class="mt-2"
                      >
                        {{ settings.twoFactorEnabled ? 'Aktif' : 'Nonaktif' }}
                      </v-chip>
                    </div>
                    <v-switch
                      v-model="settings.twoFactorEnabled"
                      color="orange-darken-2"
                      hide-details
                      inset
                      @change="toggleTwoFactor"
                    ></v-switch>
                  </div>
                </div>

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

                <div class="setting-item">
                  <div class="d-flex align-center">
                    <div class="setting-icon green">
                      <v-icon size="24" color="green-darken-2">mdi-history</v-icon>
                    </div>
                    <div class="ml-4 flex-grow-1">
                      <div class="text-subtitle-1 font-weight-bold">Riwayat Login</div>
                      <div class="text-body-2 text-grey-darken-1">
                        Lihat semua aktivitas login akun Anda
                      </div>
                    </div>
                    <v-btn
                      color="blue-darken-2"
                      variant="outlined"
                      size="small"
                      class="rounded-lg"
                      @click="viewLoginHistory"
                    >
                      Lihat Detail
                    </v-btn>
                  </div>
                </div>
              </v-card-text>
            </v-card>

            <!-- Session Management -->
            <v-card class="rounded-xl elevation-4">
              <div class="card-header-modern pa-5">
                <div class="d-flex align-center">
                  <div class="section-icon-small blue">
                    <v-icon color="blue-darken-2">mdi-devices</v-icon>
                  </div>
                  <h3 class="text-h6 font-weight-bold ml-3">Sesi Aktif</h3>
                </div>
              </div>

              <v-card-text class="pa-6">
                <div class="session-list">
                  <div v-for="(session, index) in activeSessions" :key="index" class="session-item">
                    <div class="d-flex align-center">
                      <div class="device-icon">
                        <v-icon :color="session.current ? 'green' : 'blue-grey'">
                          {{ session.icon }}
                        </v-icon>
                      </div>
                      <div class="ml-4 flex-grow-1">
                        <div class="text-subtitle-2 font-weight-bold">{{ session.device }}</div>
                        <div class="text-caption text-grey-darken-1">
                          {{ session.location }} • {{ session.lastActive }}
                        </div>
                        <v-chip v-if="session.current" size="x-small" color="success" class="mt-1">
                          Sesi Ini
                        </v-chip>
                      </div>
                      <v-btn
                        v-if="!session.current"
                        icon="mdi-close"
                        size="small"
                        variant="text"
                        color="error"
                      ></v-btn>
                    </div>
                  </div>
                </div>
              </v-card-text>
            </v-card>
          </v-window-item>

          <!-- Notifications Tab -->
          <v-window-item value="notifications">
            <v-card class="rounded-xl elevation-4">
              <div class="card-header-gradient pa-5">
                <div class="d-flex align-center">
                  <div class="header-icon-small">
                    <v-icon color="white">mdi-bell-ring</v-icon>
                  </div>
                  <h3 class="text-h6 font-weight-bold text-white ml-3">Preferensi Notifikasi</h3>
                </div>
              </div>

              <v-card-text class="pa-6">
                <div class="notification-group mb-6">
                  <h4 class="text-subtitle-1 font-weight-bold mb-4">Notifikasi Sistem</h4>
                  
                  <div class="setting-item mb-4">
                    <div class="d-flex align-center justify-space-between">
                      <div class="d-flex align-center">
                        <div class="setting-icon blue">
                          <v-icon size="20" color="blue-darken-2">mdi-email</v-icon>
                        </div>
                        <div class="ml-3">
                          <div class="text-body-1 font-weight-medium">Email Notifikasi</div>
                          <div class="text-caption text-grey-darken-1">Terima pemberitahuan penting via email</div>
                        </div>
                      </div>
                      <v-switch
                        v-model="settings.emailNotifications"
                        color="blue-darken-2"
                        hide-details
                        inset
                      ></v-switch>
                    </div>
                  </div>

                  <div class="setting-item mb-4">
                    <div class="d-flex align-center justify-space-between">
                      <div class="d-flex align-center">
                        <div class="setting-icon orange">
                          <v-icon size="20" color="orange-darken-2">mdi-cellphone</v-icon>
                        </div>
                        <div class="ml-3">
                          <div class="text-body-1 font-weight-medium">Push Notifikasi</div>
                          <div class="text-caption text-grey-darken-1">Notifikasi langsung di perangkat</div>
                        </div>
                      </div>
                      <v-switch
                        v-model="settings.pushNotifications"
                        color="orange-darken-2"
                        hide-details
                        inset
                      ></v-switch>
                    </div>
                  </div>

                  <div class="setting-item">
                    <div class="d-flex align-center justify-space-between">
                      <div class="d-flex align-center">
                        <div class="setting-icon green">
                          <v-icon size="20" color="green-darken-2">mdi-message</v-icon>
                        </div>
                        <div class="ml-3">
                          <div class="text-body-1 font-weight-medium">SMS Notifikasi</div>
                          <div class="text-caption text-grey-darken-1">Terima kode verifikasi via SMS</div>
                        </div>
                      </div>
                      <v-switch
                        v-model="settings.smsNotifications"
                        color="green-darken-2"
                        hide-details
                        inset
                      ></v-switch>
                    </div>
                  </div>
                </div>

                <v-divider class="my-6"></v-divider>

                <div class="notification-group">
                  <h4 class="text-subtitle-1 font-weight-bold mb-4">Notifikasi Marketing</h4>
                  
                  <div class="setting-item mb-4">
                    <div class="d-flex align-center justify-space-between">
                      <div class="d-flex align-center">
                        <div class="setting-icon purple">
                          <v-icon size="20" color="deep-purple-darken-2">mdi-tag</v-icon>
                        </div>
                        <div class="ml-3">
                          <div class="text-body-1 font-weight-medium">Promosi & Penawaran</div>
                          <div class="text-caption text-grey-darken-1">Dapatkan info promo eksklusif</div>
                        </div>
                      </div>
                      <v-switch
                        v-model="settings.marketingNotifications"
                        color="deep-purple-darken-2"
                        hide-details
                        inset
                      ></v-switch>
                    </div>
                  </div>

                  <div class="setting-item">
                    <div class="d-flex align-center justify-space-between">
                      <div class="d-flex align-center">
                        <div class="setting-icon pink">
                          <v-icon size="20" color="pink-darken-2">mdi-newspaper</v-icon>
                        </div>
                        <div class="ml-3">
                          <div class="text-body-1 font-weight-medium">Newsletter</div>
                          <div class="text-caption text-grey-darken-1">Update bulanan dan artikel</div>
                        </div>
                      </div>
                      <v-switch
                        v-model="settings.newsletter"
                        color="pink-darken-2"
                        hide-details
                        inset
                      ></v-switch>
                    </div>
                  </div>
                </div>
              </v-card-text>
            </v-card>
          </v-window-item>

          <!-- Privacy Tab -->
          <v-window-item value="privacy">
            <v-card class="rounded-xl elevation-4">
              <div class="card-header-gradient pa-5">
                <div class="d-flex align-center">
                  <div class="header-icon-small">
                    <v-icon color="white">mdi-shield-account</v-icon>
                  </div>
                  <h3 class="text-h6 font-weight-bold text-white ml-3">Pengaturan Privasi</h3>
                </div>
              </div>

              <v-card-text class="pa-6">
                <div class="setting-item mb-4">
                  <div class="d-flex align-center justify-space-between">
                    <div class="d-flex align-center">
                      <div class="setting-icon blue">
                        <v-icon size="24" color="blue-darken-2">mdi-account-eye</v-icon>
                      </div>
                      <div class="ml-4">
                        <div class="text-subtitle-1 font-weight-bold">Profil Publik</div>
                        <div class="text-body-2 text-grey-darken-1">
                          Tampilkan profil Anda di hasil pencarian
                        </div>
                      </div>
                    </div>
                    <v-switch
                      v-model="settings.publicProfile"
                      color="blue-darken-2"
                      hide-details
                      inset
                    ></v-switch>
                  </div>
                </div>

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

                <div class="setting-item mb-4">
                  <div class="d-flex align-center justify-space-between">
                    <div class="d-flex align-center">
                      <div class="setting-icon orange">
                        <v-icon size="24" color="orange-darken-2">mdi-email-check</v-icon>
                      </div>
                      <div class="ml-4">
                        <div class="text-subtitle-1 font-weight-bold">Tampilkan Email</div>
                        <div class="text-body-2 text-grey-darken-1">
                          Perlihatkan alamat email di profil publik
                        </div>
                      </div>
                    </div>
                    <v-switch
                      v-model="settings.showEmail"
                      color="orange-darken-2"
                      hide-details
                      inset
                    ></v-switch>
                  </div>
                </div>

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

                <div class="setting-item mb-4">
                  <div class="d-flex align-center justify-space-between">
                    <div class="d-flex align-center">
                      <div class="setting-icon green">
                        <v-icon size="24" color="green-darken-2">mdi-circle</v-icon>
                      </div>
                      <div class="ml-4">
                        <div class="text-subtitle-1 font-weight-bold">Status Online</div>
                        <div class="text-body-2 text-grey-darken-1">
                          Tampilkan status online kepada pengguna lain
                        </div>
                      </div>
                    </div>
                    <v-switch
                      v-model="settings.showOnlineStatus"
                      color="green-darken-2"
                      hide-details
                      inset
                    ></v-switch>
                  </div>
                </div>

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

                <div class="setting-item">
                  <div class="d-flex align-center justify-space-between">
                    <div class="d-flex align-center">
                      <div class="setting-icon purple">
                        <v-icon size="24" color="deep-purple-darken-2">mdi-chart-line</v-icon>
                      </div>
                      <div class="ml-4">
                        <div class="text-subtitle-1 font-weight-bold">Data Analytics</div>
                        <div class="text-body-2 text-grey-darken-1">
                          Izinkan pengumpulan data untuk meningkatkan layanan
                        </div>
                      </div>
                    </div>
                    <v-switch
                      v-model="settings.allowAnalytics"
                      color="deep-purple-darken-2"
                      hide-details
                      inset
                    ></v-switch>
                  </div>
                </div>
              </v-card-text>
            </v-card>
          </v-window-item>

          <!-- Danger Zone Tab -->
          <v-window-item value="danger">
            <v-card class="rounded-xl elevation-4 danger-card">
              <div class="card-header-danger pa-5">
                <div class="d-flex align-center">
                  <div class="header-icon-small-danger">
                    <v-icon color="white">mdi-alert-octagon</v-icon>
                  </div>
                  <h3 class="text-h6 font-weight-bold text-white ml-3">Danger Zone</h3>
                </div>
              </div>

              <v-card-text class="pa-6">
                <v-alert
                  type="warning"
                  variant="tonal"
                  class="mb-6"
                  icon="mdi-information"
                >
                  <div class="text-body-2">
                    Tindakan di area ini bersifat sensitif dan dapat berdampak permanen pada akun Anda.
                  </div>
                </v-alert>

                <div class="danger-item mb-4">
                  <div class="d-flex align-center justify-space-between">
                    <div class="d-flex align-center">
                      <div class="danger-icon warning">
                        <v-icon size="28" color="orange-darken-3">mdi-pause-circle</v-icon>
                      </div>
                      <div class="ml-4">
                        <div class="text-subtitle-1 font-weight-bold">Nonaktifkan Akun</div>
                        <div class="text-body-2 text-grey-darken-1">
                          Akun Anda akan disembunyikan dan dapat diaktifkan kembali kapan saja
                        </div>
                      </div>
                    </div>
                    <v-btn
                      color="orange-darken-3"
                      variant="outlined"
                      size="small"
                      class="rounded-lg"
                      @click="deactivateAccount"
                    >
                      Nonaktifkan
                    </v-btn>
                  </div>
                </div>

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

                <div class="danger-item">
                  <div class="d-flex align-center justify-space-between">
                    <div class="d-flex align-center">
                      <div class="danger-icon error">
                        <v-icon size="28" color="error">mdi-delete-forever</v-icon>
                      </div>
                      <div class="ml-4">
                        <div class="text-subtitle-1 font-weight-bold text-error">Hapus Akun Permanen</div>
                        <div class="text-body-2 text-grey-darken-1">
                          Semua data Anda akan dihapus secara permanen dan tidak dapat dipulihkan
                        </div>
                      </div>
                    </div>
                    <v-btn
                      color="error"
                      variant="flat"
                      size="small"
                      class="rounded-lg"
                      @click="deleteAccount"
                    >
                      Hapus Permanen
                    </v-btn>
                  </div>
                </div>
              </v-card-text>
            </v-card>
          </v-window-item>
        </v-window>

        <!-- Save Button (Fixed at bottom for non-danger tabs) -->
        <v-fade-transition>
          <div v-if="activeTab !== 'danger'" class="save-bar mt-6">
            <v-card class="rounded-xl elevation-8 pa-4">
              <div class="d-flex align-center justify-space-between">
                <div>
                  <div class="text-subtitle-1 font-weight-bold">Pengaturan Telah Diubah</div>
                  <div class="text-caption text-grey-darken-1">Jangan lupa simpan perubahan Anda</div>
                </div>
                <div class="d-flex align-center" style="gap: 12px;">
                  <v-btn
                    variant="outlined"
                    class="rounded-lg"
                    @click="resetSettings"
                  >
                    Reset
                  </v-btn>
                  <v-btn
                    color="blue-darken-2"
                    variant="flat"
                    class="rounded-lg px-8"
                    prepend-icon="mdi-content-save"
                    @click="saveSettings"
                    :loading="isSaving"
                  >
                    Simpan Semua Perubahan
                  </v-btn>
                </div>
              </div>
            </v-card>
          </div>
        </v-fade-transition>
      </v-col>
    </v-row>

    <!-- Change Password Dialog -->
    <v-dialog v-model="changePasswordDialog" max-width="550" persistent>
      <v-card class="rounded-xl">
        <div class="dialog-header pa-5">
          <h3 class="text-h6 font-weight-bold text-white">Ubah Password</h3>
        </div>
        <v-card-text class="pa-6">
          <v-form ref="passwordForm">
            <div class="mb-4">
              <label class="form-label">Password Saat Ini</label>
              <v-text-field
                v-model="passwordData.currentPassword"
                type="password"
                variant="outlined"
                color="blue-darken-2"
                density="comfortable"
                hide-details="auto"
              >
                <template v-slot:prepend-inner>
                  <v-icon size="20" color="grey-darken-1">mdi-lock</v-icon>
                </template>
              </v-text-field>
            </div>
            <div class="mb-4">
              <label class="form-label">Password Baru</label>
              <v-text-field
                v-model="passwordData.newPassword"
                type="password"
                variant="outlined"
                color="blue-darken-2"
                density="comfortable"
                hide-details="auto"
              >
                <template v-slot:prepend-inner>
                  <v-icon size="20" color="blue-darken-2">mdi-lock-plus</v-icon>
                </template>
              </v-text-field>
            </div>
            <div>
              <label class="form-label">Konfirmasi Password Baru</label>
              <v-text-field
                v-model="passwordData.confirmPassword"
                type="password"
                variant="outlined"
                color="blue-darken-2"
                density="comfortable"
                hide-details="auto"
              >
                <template v-slot:prepend-inner>
                  <v-icon size="20" color="orange-darken-2">mdi-lock-check</v-icon>
                </template>
              </v-text-field>
            </div>
          </v-form>
        </v-card-text>
        <v-card-actions class="pa-6 pt-0">
          <v-spacer></v-spacer>
          <v-btn
            variant="text"
            @click="changePasswordDialog = false"
          >
            Batal
          </v-btn>
          <v-btn
            color="orange-darken-2"
            variant="flat"
            class="px-6"
            @click="changePassword"
            :loading="isChangingPassword"
          >
            Ubah Password
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Login History Dialog -->
    <v-dialog v-model="loginHistoryDialog" max-width="800" scrollable>
      <v-card class="rounded-xl">
        <div class="dialog-header pa-5">
          <h3 class="text-h6 font-weight-bold text-white">Riwayat Login</h3>
        </div>
        <v-card-text class="pa-0" style="max-height: 500px;">
          <v-timeline side="end" density="compact" class="pa-6">
            <v-timeline-item
              v-for="(login, index) in loginHistory"
              :key="index"
              :dot-color="login.success ? 'success' : 'error'"
              size="small"
            >
              <div class="timeline-content">
                <div class="d-flex align-center justify-space-between mb-2">
                  <div class="text-subtitle-2 font-weight-bold">{{ login.device }}</div>
                  <v-chip
                    :color="login.success ? 'success' : 'error'"
                    size="x-small"
                    variant="flat"
                  >
                    {{ login.success ? 'Berhasil' : 'Gagal' }}
                  </v-chip>
                </div>
                <div class="text-caption text-grey-darken-1">
                  <v-icon size="14">mdi-map-marker</v-icon> {{ login.location }}
                </div>
                <div class="text-caption text-grey-darken-1">
                  <v-icon size="14">mdi-clock</v-icon> {{ login.date }}
                </div>
              </div>
            </v-timeline-item>
          </v-timeline>
        </v-card-text>
        <v-card-actions class="pa-4">
          <v-spacer></v-spacer>
          <v-btn
            variant="text"
            @click="loginHistoryDialog = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Confirmation Dialog -->
    <v-dialog v-model="confirmDialog" max-width="500" persistent>
      <v-card class="rounded-xl">
        <v-card-title class="pa-6">
          <div class="d-flex align-center">
            <v-icon
              :color="confirmDialogType === 'danger' ? 'error' : 'warning'"
              size="32"
              class="mr-3"
            >
              mdi-alert-circle
            </v-icon>
            <span class="text-h6 font-weight-bold">{{ confirmDialogTitle }}</span>
          </div>
        </v-card-title>
        <v-card-text class="pa-6 pt-0">
          <p class="text-body-1">{{ confirmDialogMessage }}</p>
        </v-card-text>
        <v-card-actions class="pa-6 pt-0">
          <v-spacer></v-spacer>
          <v-btn
            variant="text"
            @click="confirmDialog = false"
          >
            Batal
          </v-btn>
          <v-btn
            :color="confirmDialogType === 'danger' ? 'error' : 'orange-darken-3'"
            variant="flat"
            class="px-6"
            @click="confirmAction"
          >
            Konfirmasi
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Snackbar -->
    <v-snackbar
      v-model="snackbar"
      :color="snackbarColor"
      timeout="3000"
      location="top"
    >
      <div class="d-flex align-center">
        <v-icon class="mr-2">
          {{ snackbarColor === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
        </v-icon>
        {{ snackbarMessage }}
      </div>
      <template v-slot:actions>
        <v-btn variant="text" @click="snackbar = false">Tutup</v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script setup>
import { ref, reactive } from 'vue';

definePageMeta({
  middleware: 'auth'
});

const activeTab = ref('security');
const isSaving = ref(false);
const isChangingPassword = ref(false);
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');

const changePasswordDialog = ref(false);
const loginHistoryDialog = ref(false);
const confirmDialog = ref(false);
const confirmDialogTitle = ref('');
const confirmDialogMessage = ref('');
const confirmDialogType = ref('warning');
const confirmDialogAction = ref(null);

const settings = reactive({
  twoFactorEnabled: false,
  emailNotifications: true,
  pushNotifications: true,
  smsNotifications: false,
  marketingNotifications: false,
  newsletter: true,
  publicProfile: true,
  showEmail: false,
  showOnlineStatus: true,
  allowAnalytics: true
});

const passwordData = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const activeSessions = ref([
  {
    device: 'Chrome on Windows 11',
    location: 'Sidoarjo, Indonesia',
    lastActive: 'Sekarang',
    icon: 'mdi-laptop',
    current: true
  },
  {
    device: 'Mobile App on Android',
    location: 'Surabaya, Indonesia',
    lastActive: '2 jam yang lalu',
    icon: 'mdi-cellphone',
    current: false
  },
  {
    device: 'Safari on macOS',
    location: 'Jakarta, Indonesia',
    lastActive: '1 hari yang lalu',
    icon: 'mdi-laptop',
    current: false
  }
]);

const loginHistory = ref([
  {
    device: 'Chrome on Windows',
    location: 'Sidoarjo, Indonesia',
    date: '16 Oktober 2025, 10:30 AM',
    success: true
  },
  {
    device: 'Mobile App on Android',
    location: 'Surabaya, Indonesia',
    date: '15 Oktober 2025, 08:15 PM',
    success: true
  },
  {
    device: 'Firefox on Linux',
    location: 'Jakarta, Indonesia',
    date: '14 Oktober 2025, 02:45 PM',
    success: false
  },
  {
    device: 'Safari on macOS',
    location: 'Sidoarjo, Indonesia',
    date: '13 Oktober 2025, 11:20 AM',
    success: true
  }
]);

const openChangePassword = () => {
  changePasswordDialog.value = true;
  passwordData.currentPassword = '';
  passwordData.newPassword = '';
  passwordData.confirmPassword = '';
};

const changePassword = async () => {
  if (passwordData.newPassword !== passwordData.confirmPassword) {
    snackbarMessage.value = 'Password baru tidak cocok!';
    snackbarColor.value = 'error';
    snackbar.value = true;
    return;
  }

  isChangingPassword.value = true;
  try {
    await new Promise(resolve => setTimeout(resolve, 1000));
    changePasswordDialog.value = false;
    snackbarMessage.value = 'Password berhasil diubah!';
    snackbarColor.value = 'success';
    snackbar.value = true;
  } catch (error) {
    snackbarMessage.value = 'Gagal mengubah password!';
    snackbarColor.value = 'error';
    snackbar.value = true;
  } finally {
    isChangingPassword.value = false;
  }
};

const viewLoginHistory = () => {
  loginHistoryDialog.value = true;
};

const toggleTwoFactor = () => {
  const status = settings.twoFactorEnabled ? 'diaktifkan' : 'dinonaktifkan';
  snackbarMessage.value = `Autentikasi dua faktor ${status}`;
  snackbarColor.value = 'info';
  snackbar.value = true;
};

const deactivateAccount = () => {
  confirmDialogTitle.value = 'Nonaktifkan Akun';
  confirmDialogMessage.value = 'Apakah Anda yakin ingin menonaktifkan akun? Anda dapat mengaktifkannya kembali kapan saja dengan login kembali.';
  confirmDialogType.value = 'warning';
  confirmDialogAction.value = 'deactivate';
  confirmDialog.value = true;
};

const deleteAccount = () => {
  confirmDialogTitle.value = 'Hapus Akun Permanen';
  confirmDialogMessage.value = 'PERINGATAN: Tindakan ini tidak dapat dibatalkan! Semua data Anda termasuk profil, posts, dan pengaturan akan dihapus secara permanen.';
  confirmDialogType.value = 'danger';
  confirmDialogAction.value = 'delete';
  confirmDialog.value = true;
};

const confirmAction = async () => {
  confirmDialog.value = false;
  
  if (confirmDialogAction.value === 'deactivate') {
    snackbarMessage.value = 'Akun berhasil dinonaktifkan';
    snackbarColor.value = 'warning';
    snackbar.value = true;
  } else if (confirmDialogAction.value === 'delete') {
    snackbarMessage.value = 'Permintaan penghapusan akun sedang diproses';
    snackbarColor.value = 'error';
    snackbar.value = true;
  }
};

const saveSettings = async () => {
  isSaving.value = true;
  try {
    await new Promise(resolve => setTimeout(resolve, 1000));
    snackbarMessage.value = 'Pengaturan berhasil disimpan!';
    snackbarColor.value = 'success';
    snackbar.value = true;
  } catch (error) {
    snackbarMessage.value = 'Gagal menyimpan pengaturan!';
    snackbarColor.value = 'error';
    snackbar.value = true;
  } finally {
    isSaving.value = false;
  }
};

const resetSettings = () => {
  // Reset to default values
  Object.assign(settings, {
    twoFactorEnabled: false,
    emailNotifications: true,
    pushNotifications: true,
    smsNotifications: false,
    marketingNotifications: false,
    newsletter: true,
    publicProfile: true,
    showEmail: false,
    showOnlineStatus: true,
    allowAnalytics: true
  });
  
  snackbarMessage.value = 'Pengaturan direset ke default';
  snackbarColor.value = 'info';
  snackbar.value = true;
};
</script>

<style scoped>
.settings-page {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  min-height: 100vh;
}

.page-header {
  position: relative;
}

.header-icon {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fb8c00 0%, #f57c00 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(251, 140, 0, 0.3);
}

.gradient-text {
  background: linear-gradient(135deg, #1976d2 0%, #fb8c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tab-item {
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.card-header-gradient {
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 50%, #fb8c00 100%);
  border-bottom: none;
}

.header-icon-small {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-header-modern {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.02) 0%, rgba(245, 124, 0, 0.02) 100%);
}

.section-icon-small {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section-icon-small.blue {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.setting-item {
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.02) 0%, rgba(245, 124, 0, 0.02) 100%);
  transition: all 0.3s ease;
}

.setting-item:hover {
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(245, 124, 0, 0.05) 100%);
  transform: translateX(4px);
}

.setting-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.setting-icon.blue {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.setting-icon.orange {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.setting-icon.green {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.setting-icon.purple {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}

.setting-icon.pink {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.session-item {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: white;
  transition: all 0.3s ease;
}

.session-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.device-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, rgba(245, 124, 0, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-group {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
}

.danger-card {
  border: 2px solid #ef5350;
}

.card-header-danger {
  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
  border-bottom: none;
}

.header-icon-small-danger {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.danger-item {
  padding: 20px;
  border-radius: 12px;
  border: 2px solid rgba(239, 83, 80, 0.2);
  background: rgba(239, 83, 80, 0.03);
}

.danger-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.danger-icon.warning {
  background: rgba(251, 140, 0, 0.1);
  border: 2px solid rgba(251, 140, 0, 0.3);
}

.danger-icon.error {
  background: rgba(244, 67, 54, 0.1);
  border: 2px solid rgba(244, 67, 54, 0.3);
}

.save-bar {
  position: sticky;
  bottom: 20px;
  z-index: 10;
}

.dialog-header {
  background: linear-gradient(135deg, #1976d2 0%, #fb8c00 100%);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #424242;
  margin-bottom: 8px;
}

.timeline-content {
  padding: 12px;
  border-radius: 8px;
  background: rgba(25, 118, 210, 0.03);
}
</style>