<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-shield-lock-outline</v-icon>
          </div>
          <div class="header-text">
            <h2 class="page-title">Hak Akses</h2>
            <p class="page-subtitle">{{ new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }} - Manajemen Hak Akses</p>
          </div>
        </div>
      </div>
    </div>

    <div class="hak-akses-page pa-4">
    <!-- Dialog for Add/Edit Form -->
    <v-dialog 
      v-model="showAddEditDialog" 
      max-width="1200px" 
      persistent 
      scrollable
      transition="dialog-bottom-transition"
    >
      <v-card class="modern-dialog-card">
        <div class="dialog-header" :class="viewMode === 'add' ? 'header-add' : 'header-edit'">
          <div class="dialog-header-content">
            <div class="dialog-header-left">
              <v-avatar 
                color="primary-darken-1" 
                size="56" 
                class="dialog-avatar elevation-4"
              >
                <v-icon :icon="viewMode === 'add' ? 'mdi-plus' : 'mdi-pencil'" color="white" size="28"></v-icon>
              </v-avatar>
              <div class="dialog-header-text">
                <h2 class="dialog-title">{{ formTitle }}</h2>
                <p class="dialog-subtitle">
                  {{ viewMode === 'add' ? 'Tambahkan hak akses baru ke sistem' : 'Ubah informasi hak akses yang ada' }}
                </p>
              </div>
            </div>
            <v-btn
              icon
              variant="text"
              size="small"
              class="dialog-close-btn"
              @click="cancelForm"
            >
              <v-icon color="white" size="24">mdi-close</v-icon>
            </v-btn>
          </div>
        </div>
        <v-card-text class="dialog-content">
        <v-row>
          <v-col cols="12">
            <v-alert 
              type="info" 
              variant="tonal" 
              density="comfortable"
              class="mb-4"
            >
              <v-alert-title>Group-Based Access</v-alert-title>
              Hak akses akan diberikan ke semua user yang memiliki group dan role yang dipilih. 
              Setiap user dapat memiliki multiple hak akses dari berbagai group.
            </v-alert>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" md="6">
            <v-label class="font-weight-bold text-medium-emphasis">Role <span class="text-error">*</span></v-label>
            <v-select
              v-model="editedItem.role"
              :items="availableRoles"
              placeholder="Pilih Role"
              variant="outlined"
              density="comfortable"
              class="mt-1"
              required
            ></v-select>
          </v-col>
          <v-col cols="12" md="6">
            <v-label class="font-weight-bold text-medium-emphasis">Group <span class="text-error">*</span></v-label>
            <v-select
              v-model="selectedGroup"
              :items="availableGroupPaths"
              item-title="label"
              item-value="value"
              placeholder="Pilih Group"
              variant="outlined"
              density="comfortable"
              class="mt-1"
              required
              @update:model-value="onGroupSelected"
            >
              <template v-slot:item="{ props, item }">
                <v-list-item v-bind="props" :title="item.raw.label" :subtitle="item.raw.path"></v-list-item>
              </template>
            </v-select>
            <div v-if="selectedGroupUsers.length > 0" class="mt-2">
              <v-chip size="small" color="info" class="mr-1 mb-1">
                {{ selectedGroupUsers.length }} user akan mendapatkan hak akses ini
              </v-chip>
            </div>
          </v-col>
        </v-row>
        <v-row v-if="selectedGroupUsers.length > 0">
          <v-col cols="12">
            <v-label class="font-weight-bold text-medium-emphasis mb-2">User yang akan mendapatkan hak akses:</v-label>
            <v-card variant="outlined" class="pa-3">
              <div class="d-flex flex-wrap gap-2">
                <v-chip 
                  v-for="user in selectedGroupUsers" 
                  :key="user.id"
                  size="small"
                  color="primary"
                  variant="tonal"
                >
                  {{ user.namaLengkap || user.namaUser }} ({{ user.namaUser }})
                </v-chip>
              </div>
            </v-card>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" md="6">
            <v-label class="font-weight-bold text-medium-emphasis">Nama Tipe User (Optional)</v-label>
            <v-text-field
              v-model="editedItem.namaTipeUser"
              placeholder="Masukkan Nama Tipe User"
              variant="outlined"
              density="comfortable"
              class="mt-1"
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row v-if="viewMode === 'add' || viewMode === 'editName'">
          <v-col cols="12">
            <v-btn
              color="info"
              prepend-icon="mdi-download"
              variant="outlined"
              rounded="lg"
              class="text-capitalize"
              @click="fetchPermissionsFromBackend"
              :loading="isFetchingPermissions"
              :disabled="!editedItem.role || !editedItem.group"
            >
              Ambil Data dari Backend API
            </v-btn>
            <span class="ml-3 text-caption text-medium-emphasis">
              * Klik tombol ini untuk mengambil permissions dari backend berdasarkan Role dan Group yang sudah diisi
            </span>
          </v-col>
        </v-row>
        
        <!-- Display fetched permissions info -->
        <v-row v-if="fetchedBackendData && fetchedBackendData.length > 0" class="mt-4">
          <v-col cols="12">
            <v-card variant="outlined" class="pa-4 bg-blue-lighten-5">
              <v-card-title class="text-subtitle-1 font-weight-bold pa-0 mb-3">
                <v-icon icon="mdi-information" class="mr-2" color="info"></v-icon>
                Data dari Backend API
              </v-card-title>
              <v-card-text class="pa-0">
                <div class="mb-3">
                  <strong>Total Permissions:</strong> {{ fetchedBackendData.length }} items
                </div>
                <v-table density="compact" class="elevation-1">
                  <thead>
                    <tr>
                      <th class="text-left">No</th>
                      <th class="text-left">Page Name</th>
                      <th class="text-center">Active</th>
                      <th class="text-center">Read</th>
                      <th class="text-center">Create</th>
                      <th class="text-center">Update</th>
                      <th class="text-center">Delete</th>
                      <th class="text-center">Level</th>
                      <th class="text-center">Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(perm, index) in fetchedBackendData" :key="perm.id">
                      <td>{{ index + 1 }}</td>
                      <td>
                        <strong>{{ perm.pagename }}</strong>
                        <div class="text-caption text-grey">{{ perm.pagesID }}</div>
                      </td>
                      <td class="text-center">
                        <v-icon :color="perm.active ? 'green' : 'grey'">
                          {{ perm.active ? 'mdi-check-circle' : 'mdi-close-circle' }}
                        </v-icon>
                      </td>
                      <td class="text-center">
                        <v-icon :color="perm.read ? 'green' : 'grey'">
                          {{ perm.read ? 'mdi-check-circle' : 'mdi-close-circle' }}
                        </v-icon>
                      </td>
                      <td class="text-center">
                        <v-icon :color="perm.create ? 'green' : 'grey'">
                          {{ perm.create ? 'mdi-check-circle' : 'mdi-close-circle' }}
                        </v-icon>
                      </td>
                      <td class="text-center">
                        <v-icon :color="perm.update ? 'green' : 'grey'">
                          {{ perm.update ? 'mdi-check-circle' : 'mdi-close-circle' }}
                        </v-icon>
                      </td>
                      <td class="text-center">
                        <v-icon :color="perm.delete ? 'green' : 'grey'">
                          {{ perm.delete ? 'mdi-check-circle' : 'mdi-close-circle' }}
                        </v-icon>
                      </td>
                      <td class="text-center">{{ perm.level || '-' }}</td>
                      <td class="text-center">
                        <v-chip 
                          :color="getMappingStatus(perm.pagename) ? 'success' : 'warning'" 
                          size="small"
                        >
                          {{ getMappingStatus(perm.pagename) ? 'Mapped' : 'Not Mapped' }}
                        </v-chip>
                      </td>
                    </tr>
                  </tbody>
                </v-table>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>

        <!-- Display mapped permissions summary -->
        <v-row v-if="editedItem.hakAksesMenu && editedItem.hakAksesMenu.length > 0" class="mt-4">
          <v-col cols="12">
            <v-card variant="outlined" class="pa-4 bg-green-lighten-5">
              <v-card-title class="text-subtitle-1 font-weight-bold pa-0 mb-3">
                <v-icon icon="mdi-check-circle" class="mr-2" color="success"></v-icon>
                Permissions yang Sudah di-Mapping ke Menu
              </v-card-title>
              <v-card-text class="pa-0">
                <div class="mb-3">
                  <strong>Total Menu:</strong> {{ editedItem.hakAksesMenu.length }} items
                  <span class="ml-4">
                    <strong>Dengan Akses:</strong> 
                    {{ editedItem.hakAksesMenu.filter(m => m.canAccess).length }} items
                  </span>
                </div>
                <v-alert 
                  type="info" 
                  variant="tonal" 
                  density="compact"
                  class="mb-3"
                >
                  Data permissions dari backend telah di-mapping ke struktur menu sidebar. 
                  Anda dapat mengedit permissions di tab "Edit Hak Akses" setelah menyimpan data ini.
                </v-alert>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions class="dialog-actions">
          <v-spacer></v-spacer>
          <v-btn
            color="grey-darken-1"
            variant="outlined"
            rounded="lg"
            class="text-capitalize mr-2"
            @click="cancelForm"
            size="large"
          >
            <v-icon left>mdi-close</v-icon>
            Batal
          </v-btn>
          <v-btn
            :color="viewMode === 'add' ? 'green-darken-2' : 'orange-darken-2'"
            variant="flat"
            rounded="lg"
            class="text-capitalize"
            @click="saveItem"
            size="large"
          >
            <v-icon left>{{ viewMode === 'add' ? 'mdi-check' : 'mdi-content-save' }}</v-icon>
            {{ viewMode === 'add' ? 'Simpan' : 'Update' }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Dialog for Edit Access -->
    <v-dialog 
      v-model="showEditAccessDialog" 
      max-width="1400px" 
      persistent 
      scrollable
      transition="dialog-bottom-transition"
    >
      <v-card class="modern-dialog-card">
        <div class="dialog-header header-edit-access">
          <div class="dialog-header-content">
            <div class="dialog-header-left">
              <v-avatar 
                color="primary-darken-1" 
                size="56" 
                class="dialog-avatar elevation-4"
              >
                <v-icon icon="mdi-lock-check" color="white" size="28"></v-icon>
              </v-avatar>
              <div class="dialog-header-text">
                <h2 class="dialog-title">Edit Hak Akses</h2>
                <p class="dialog-subtitle">Kelola permissions dan akses menu untuk pengguna</p>
              </div>
            </div>
            <v-btn
              icon
              variant="text"
              size="small"
              class="dialog-close-btn"
              @click="cancelForm"
            >
              <v-icon color="white" size="24">mdi-close</v-icon>
            </v-btn>
          </div>
        </div>
        <v-card-text class="dialog-content">
          <EditHakAkses
            :item="editedItem"
            @save="updateItemAccess"
            @cancel="cancelForm"
          />
        </v-card-text>
      </v-card>
    </v-dialog>

    <!-- Dialog for View Detail -->
    <v-dialog 
      v-model="showViewDialog" 
      max-width="1200px" 
      scrollable
      :persistent="false"
      transition="dialog-bottom-transition"
    >
      <v-card class="modern-dialog-card">
        <div class="dialog-header header-view">
          <div class="dialog-header-content">
            <div class="dialog-header-left">
              <v-avatar 
                color="primary-darken-1" 
                size="56" 
                class="dialog-avatar elevation-4"
              >
                <v-icon icon="mdi-eye" color="white" size="28"></v-icon>
              </v-avatar>
              <div class="dialog-header-text">
                <h2 class="dialog-title">Detail Hak Akses</h2>
                <p class="dialog-subtitle">Lihat informasi detail hak akses pengguna</p>
              </div>
            </div>
            <v-btn
              icon
              variant="text"
              size="small"
              class="dialog-close-btn"
              @click="cancelForm"
            >
              <v-icon color="white" size="24">mdi-close</v-icon>
            </v-btn>
          </div>
        </div>
        <v-card-text class="dialog-content">
          <div v-if="viewMode === 'view'">
        <v-row>
          <v-col cols="12" md="3">
            <v-label class="font-weight-bold text-medium-emphasis">User ID</v-label>
            <v-text-field
              v-model="editedItem.userId"
              variant="outlined"
              density="comfortable"
              class="mt-1"
              readonly
            ></v-text-field>
          </v-col>
          <v-col cols="12" md="3">
            <v-label class="font-weight-bold text-medium-emphasis">Nama Lengkap</v-label>
            <v-text-field
              v-model="editedItem.namaLengkap"
              variant="outlined"
              density="comfortable"
              class="mt-1"
              readonly
            ></v-text-field>
          </v-col>
          <v-col cols="12" md="3">
            <v-label class="font-weight-bold text-medium-emphasis">Nama User</v-label>
            <v-text-field
              v-model="editedItem.namaUser"
              variant="outlined"
              density="comfortable"
              class="mt-1"
              readonly
            ></v-text-field>
          </v-col>
          <v-col cols="12" md="3">
            <v-label class="font-weight-bold text-medium-emphasis">Tipe User</v-label>
            <v-text-field
              v-model="editedItem.tipeUser"
              variant="outlined"
              density="comfortable"
              class="mt-1"
              readonly
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-label class="font-weight-bold text-medium-emphasis mb-2">Hak Akses (Multiple Groups)</v-label>
            <v-card variant="outlined" class="pa-3">
              <div class="d-flex flex-wrap gap-2">
                <v-chip 
                  v-for="(hakAkses, idx) in viewModeHakAksesList" 
                  :key="idx"
                  size="small"
                  color="primary"
                  variant="tonal"
                >
                  <v-icon start size="14">mdi-account-group</v-icon>
                  {{ hakAkses.group }} / {{ hakAkses.role }}
                </v-chip>
                <span v-if="viewModeHakAksesList.length === 0" class="text-grey">Tidak ada hak akses</span>
              </div>
            </v-card>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-card-title class="text-subtitle-1 font-weight-bold pa-0 mb-4">Hak Akses Menu</v-card-title>
            <v-table density="comfortable" class="elevation-1 rounded-xl">
              <thead>
                <tr>
                  <th class="text-left text-uppercase font-weight-bold text-grey-darken-1">No</th>
                  <th class="text-left text-uppercase font-weight-bold text-grey-darken-1">Menu</th>
                  <th class="text-center text-uppercase font-weight-bold text-grey-darken-1">Akses</th>
                  <th class="text-center text-uppercase font-weight-bold text-grey-darken-1">Lihat</th>
                  <th class="text-center text-uppercase font-weight-bold text-grey-darken-1">Tambah</th>
                  <th class="text-center text-uppercase font-weight-bold text-grey-darken-1">Edit</th>
                  <th class="text-center text-uppercase font-weight-bold text-grey-darken-1">Hapus</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(menu, index) in editedItem.hakAksesMenu" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ menu.name }}</td>
                  <td class="text-center">
                    <v-icon :color="menu.canAccess ? 'green' : 'grey-lighten-2'">{{ menu.canAccess ? 'mdi-check-circle' : 'mdi-close-circle' }}</v-icon>
                  </td>
                  <td class="text-center">
                    <v-icon :color="menu.canView ? 'green' : 'grey-lighten-2'">{{ menu.canView ? 'mdi-check-circle' : 'mdi-close-circle' }}</v-icon>
                  </td>
                  <td class="text-center">
                    <v-icon :color="menu.canAdd ? 'green' : 'grey-lighten-2'">{{ menu.canAdd ? 'mdi-check-circle' : 'mdi-close-circle' }}</v-icon>
                  </td>
                  <td class="text-center">
                    <v-icon :color="menu.canEdit ? 'green' : 'grey-lighten-2'">{{ menu.canEdit ? 'mdi-check-circle' : 'mdi-close-circle' }}</v-icon>
                  </td>
                  <td class="text-center">
                    <v-icon :color="menu.canDelete ? 'green' : 'grey-lighten-2'">{{ menu.canDelete ? 'mdi-check-circle' : 'mdi-close-circle' }}</v-icon>
                  </td>
                </tr>
              </tbody>
            </v-table>
          </v-col>
        </v-row>
          </div>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions class="dialog-actions">
          <v-spacer></v-spacer>
          <v-btn
            color="grey-darken-1"
            variant="outlined"
            rounded="lg"
            class="text-capitalize"
            @click="cancelForm"
            size="large"
          >
            <v-icon left>mdi-close</v-icon>
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Main Table View - Always visible, dialog overlays it -->
    <div>
      <!-- Action Bar -->
      <div class="action-bar mb-4">
        <div class="action-bar-left">
          <v-chip color="primary" variant="tonal" class="stat-chip mr-2">
            <v-icon start size="16">mdi-account-group</v-icon>
            {{ filteredHakAksesData.length }} User
          </v-chip>
        </div>
        <v-btn 
          color="primary" 
          @click="showAddForm"
          elevation="0"
          class="action-btn"
        >
          <v-icon left size="20">mdi-plus-circle</v-icon>
          Tambah Baru
        </v-btn>
      </div>

      <v-card class="rounded-xl elevation-2" style="background-color: white;">
        <!-- Table -->
        <v-card-text>
          <div class="d-flex flex-column flex-sm-row align-center justify-space-between mb-4">
            <div class="d-flex align-center mb-4 mb-sm-0">
              <span class="mr-2 text-subtitle-1 text-medium-emphasis">Show</span>
              <v-select
                v-model="itemsPerPage"
                :items="[10, 25, 50]"
                variant="outlined"
                density="compact"
                hide-details
                style="max-width: 80px;"
                rounded="lg"
                class="mr-2"
              ></v-select>
              <span class="text-subtitle-1 text-medium-emphasis">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="lg"
                clearable
                style="min-width: 300px; width: 100%; max-width: 400px;"
              ></v-text-field>
            </div>
          </div>

          <!-- Filter bar -->
          <v-row class="mb-4" dense>
            <v-col cols="12" sm="4">
              <v-select
                v-model="filterTipeUser"
                :items="availableTipeUsers"
                label="Filter Tipe User"
                variant="outlined"
                density="compact"
                clearable
                hide-details
              />
            </v-col>
            <v-col cols="12" sm="4">
              <v-select
                v-model="filterRole"
                :items="availableRoles"
                label="Filter Role"
                variant="outlined"
                density="compact"
                clearable
                hide-details
              />
            </v-col>
            <v-col cols="12" sm="4">
              <v-select
                v-model="filterGroup"
                :items="availableGroups"
                label="Filter Group"
                variant="outlined"
                density="compact"
                clearable
                hide-details
              />
            </v-col>
          </v-row>

          <v-data-table
            :headers="headers"
            :items="filteredHakAksesData"
            :search="search"
            :items-per-page="itemsPerPage"
            v-model:page="page"
            class="rounded-lg elevation-0 custom-table"
          >
            <template v-slot:[`item.actions`]="{ item }">
              <v-btn icon color="blue" size="small" class="mr-2" @click="viewItem(item)">
                <v-icon>mdi-eye</v-icon>
              </v-btn>
              <v-btn icon color="orange" size="small" class="mr-2" @click="editItem(item)">
                <v-icon>mdi-pencil</v-icon>
              </v-btn>
              <v-btn icon color="red" size="small" class="mr-2" @click="deleteItem(item)">
                <v-icon>mdi-delete</v-icon>
              </v-btn>
              <v-btn icon color="green" size="small" @click="editAccess(item)">
                <v-icon>mdi-lock-check</v-icon>
              </v-btn>
            </template>

            <template v-slot:no-data>
              <v-alert :value="true" color="grey-lighten-3" icon="mdi-information">
                Tidak ada data yang tersedia.
              </v-alert>
            </template>

            <template v-slot:item.id="{ item }">
              <div class="text-center">{{ item.id }}</div>
            </template>

            <!-- Tampilkan User ID dengan format generated -->
            <template v-slot:item.userId="{ item }">
              <div class="text-center">
                {{ generateDisplayUserId(item) }}
              </div>
            </template>

            <!-- Tipe User dengan chip -->
            <template v-slot:item.tipeUser="{ item }">
              <v-chip
                v-if="item.tipeUser"
                color="purple-lighten-1"
                size="small"
              >
                {{ item.tipeUser }}
              </v-chip>
              <span v-else class="text-grey">-</span>
            </template>

            <!-- Hak Akses List - menampilkan multiple hak akses per user -->
            <template v-slot:item.hakAksesList="{ item }">
              <div class="d-flex flex-wrap gap-1">
                <v-tooltip
                  v-for="(hakAkses, idx) in item.hakAksesList"
                  :key="idx"
                  location="top"
                >
                  <template v-slot:activator="{ props }">
                    <v-chip
                      v-bind="props"
                      :color="hakAkses.isGroupBased ? 'primary' : 'grey'"
                      size="small"
                      variant="tonal"
                      class="mb-1"
                    >
                      <v-icon start size="14">{{ hakAkses.isGroupBased ? 'mdi-account-group' : 'mdi-account' }}</v-icon>
                      {{ hakAkses.group }} / {{ hakAkses.role }}
                    </v-chip>
                  </template>
                  <span>{{ hakAkses.groupPath || hakAkses.group }} - {{ hakAkses.role }}</span>
                </v-tooltip>
                <span v-if="item.hakAksesList.length === 0" class="text-grey">-</span>
              </div>
            </template>
            
            <template v-slot:bottom>
              <v-row class="ma-2">
                <v-col cols="12" sm="6" class="d-flex align-center justify-start text-caption 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"
                    rounded="circle"
                    :total-visible="5"
                  ></v-pagination>
                </v-col>
              </v-row>
            </template>
          </v-data-table>
          </v-card-text>
        </v-card>
    </div>

    <v-dialog v-model="showDeleteDialog" max-width="400px">
      <v-card class="pa-6 rounded-xl elevation-4">
        <v-card-title class="text-h6 font-weight-bold">Hapus Data</v-card-title>
        <v-card-text>Apakah Anda yakin ingin menghapus data ini?</v-card-text>
        <v-card-actions class="d-flex justify-end">
          <v-btn color="grey-darken-1" variant="text" rounded="lg" @click="closeDeleteDialog">Batal</v-btn>
          <v-btn color="red-darken-1" variant="text" rounded="lg" @click="confirmDelete">Hapus</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-snackbar
      v-model="snackbar.show"
      :color="snackbar.color"
      :timeout="snackbar.timeout"
      location="top"
    >
      {{ snackbar.message }}
      <template v-slot:actions>
        <v-btn variant="text" @click="snackbar.show = false">
          Tutup
        </v-btn>
      </template>
    </v-snackbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import { useLocalStorage } from '@vueuse/core';
import EditHakAkses from '@/components/HakAkses/editHakAkses.vue';
import { useNavItemsStore } from '~/stores/navItems1';

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

interface HakAksesMenu {
  name: string;
  canAccess: boolean;
  canView: boolean;
  canAdd: boolean;
  canEdit: boolean;
  canDelete: boolean;
}

interface NavItem {
  id: number;
  name: string;
  path: string;
  icon: string;
  children?: NavItem[];
}

interface HakAksesData {
  id: number;
  userId?: string; // Optional: untuk backward compatibility dan tracking
  namaLengkap?: string;
  namaUser?: string;
  tipeUser?: string;
  role: string;
  group: string;
  namaTipeUser: string;
  hakAksesMenu: HakAksesMenu[];
  // New: untuk group-based access
  isGroupBased?: boolean; // Flag untuk membedakan group-based vs individual
  groupPath?: string; // Full group path untuk matching
}

interface BackendPermissionItem {
    id: number;
    create: boolean;
    read: boolean;
    update: boolean;
    disable: boolean;
    delete: boolean;
    active: boolean;
    pagename: string;
    pagesID: number;
    level?: number;
    sort?: number;
    parent?: number;
}

interface SessionData {
    roles: string[];
    groups: string[];
}

// State for views
const viewMode = ref<'table' | 'add' | 'editName' | 'editAccess' | 'view'>('table');

const allHakAksesData = useLocalStorage<HakAksesData[]>('allHakAksesData', []);
const navItemsStore = useNavItemsStore();

// Data table headers
// Changed to show user with their multiple access rights
const headers = ref([
  { title: 'No', key: 'id' as const, align: 'center' as const },
  { title: 'User ID', key: 'userId' as const, sortable: true, align: 'center' as const },
  { title: 'Nama Lengkap', key: 'namaLengkap' as const, sortable: true },
  { title: 'Nama User', key: 'namaUser' as const, sortable: true },
  { title: 'Tipe User', key: 'tipeUser' as const, sortable: true },
  { title: 'Hak Akses', key: 'hakAksesList' as const, sortable: false },
  { title: 'Aksi', align: 'center' as const, key: 'actions' as const, sortable: false },
]);

// Breadcrumbs
const breadcrumbs = computed(() => {
  const baseCrumbs = [
    { title: 'Dashboard', disabled: false, href: '/dashboard' },
    { title: 'Setting', disabled: false, href: '/setting' },
    { title: 'Hak Akses', disabled: false, href: '/setting/hakakses' },
  ];
  if (viewMode.value === 'add') {
    return [...baseCrumbs, { title: 'Tambah Hak Akses', disabled: true, href: '/setting/tambahhakakses' }];
  } else if (viewMode.value === 'editName') {
    return [...baseCrumbs, { title: 'Edit Nama Tipe User', disabled: true, href: '/setting/editnamahakakses' }];
  } else if (viewMode.value === 'editAccess') {
    return [...baseCrumbs, { title: 'Edit Hak Akses', disabled: true, href: '/setting/edithakakses' }];
  } else if (viewMode.value === 'view') {
    return [...baseCrumbs, { title: 'Detail Hak Akses', disabled: true, href: '/setting/viewhakakses' }];
  }
  return baseCrumbs;
});

// Table and pagination state
const itemsPerPage = ref(10);
const search = ref('');
const page = ref(1);

const editedIndex = ref(-1);
const editedItem = ref<HakAksesData>({
  id: 0,
  role: '',
  group: '',
  namaTipeUser: '',
  hakAksesMenu: [],
});

// Available roles and groups from UserLogin data
const availableRoles = ref<string[]>([]);
const availableGroups = ref<string[]>([]);
const availableUsers = ref<any[]>([]);
const availableTipeUsers = ref<string[]>([]);
const selectedUserId = ref<string | null>(null);
const selectedTipeUser = ref<string | null>(null);
const selectedGroup = ref<string | null>(null);
const selectedGroupUsers = ref<any[]>([]);
const isFetchingPermissions = ref(false);
const fetchedBackendData = ref<BackendPermissionItem[]>([]);

// Group paths dengan label yang lebih user-friendly
const availableGroupPaths = computed(() => {
  const groupMap = new Map<string, { value: string; label: string; path: string }>();
  
  availableUsers.value.forEach((user) => {
    if (Array.isArray(user.groups)) {
      user.groups.forEach((groupPath: string) => {
        if (groupPath && !groupMap.has(groupPath)) {
          const parts = groupPath.split('/').filter(Boolean);
          const label = parts.length > 1 ? parts[1] : parts[0] || groupPath;
          groupMap.set(groupPath, {
            value: groupPath,
            label: label,
            path: groupPath,
          });
        }
      });
    }
  });
  
  return Array.from(groupMap.values()).sort((a, b) => a.label.localeCompare(b.label));
});

// --- Menu management logic ---
const buildMenuTemplate = (items: NavItem[]): HakAksesMenu[] => {
  const result: HakAksesMenu[] = [];

  const walk = (list: NavItem[]) => {
    list.forEach((item) => {
      result.push({
        name: item.name,
        canAccess: false,
        canView: false,
        canAdd: false,
        canEdit: false,
        canDelete: false,
      });
      if (item.children?.length) {
        walk(item.children);
      }
    });
  };

  walk(navItemsStore.navItems);
  return result;
};

const mergePermissions = (base: HakAksesMenu[], existing: HakAksesMenu[]) => {
  return base.map((menu) => {
    const matched = existing.find((item) => item.name === menu.name);
    return matched ? { ...menu, ...matched } : menu;
  });
};

// Computed properties
const pageCount = computed(() => {
  return Math.ceil(allHakAksesData.value.length / itemsPerPage.value);
});

const showingEntriesText = computed(() => {
  const start = (page.value - 1) * itemsPerPage.value + 1;
  const end = Math.min(page.value * itemsPerPage.value, allHakAksesData.value.length);
  const total = allHakAksesData.value.length;
  return `Showing ${start} to ${end} of ${total} entries`;
});

// Filter state
const filterTipeUser = ref<string | null>(null);
const filterRole = ref<string | null>(null);
const filterGroup = ref<string | null>(null);


// Group hak akses data by user untuk menampilkan multiple hak akses per user
const groupedHakAksesByUser = computed(() => {
  const userMap = new Map<string, {
    userId: string;
    namaLengkap: string;
    namaUser: string;
    tipeUser: string;
    hakAksesList: HakAksesData[];
  }>();

  allHakAksesData.value.forEach((item) => {
    // Untuk group-based, kita perlu mencari user yang memiliki group tersebut
    if (item.isGroupBased && item.groupPath) {
      // Find users with this group
      const usersWithGroup = availableUsers.value.filter((u: any) => 
        Array.isArray(u.groups) && u.groups.includes(item.groupPath)
      );
      
      usersWithGroup.forEach((user: any) => {
        const key = user.id;
        if (!userMap.has(key)) {
          userMap.set(key, {
            userId: user.id,
            namaLengkap: user.namaLengkap || '',
            namaUser: user.namaUser || '',
            tipeUser: user.tipeUser || '',
            hakAksesList: [],
          });
        }
        const userData = userMap.get(key)!;
        userData.hakAksesList.push(item);
      });
    } else if (item.userId) {
      // Legacy: individual user access
      const key = item.userId;
      if (!userMap.has(key)) {
        userMap.set(key, {
          userId: item.userId,
          namaLengkap: item.namaLengkap || '',
          namaUser: item.namaUser || '',
          tipeUser: item.tipeUser || '',
          hakAksesList: [],
        });
      }
      const userData = userMap.get(key)!;
      userData.hakAksesList.push(item);
    }
  });

  return Array.from(userMap.values()).map((userData, index) => ({
    id: index + 1,
    ...userData,
  }));
});

// Data tabel setelah difilter oleh dropdown (menggunakan grouped data)
const filteredHakAksesData = computed(() =>
  groupedHakAksesByUser.value.filter((item) => {
    const matchTipeUser = !filterTipeUser.value || (item.tipeUser || '') === filterTipeUser.value;
    const matchRole = !filterRole.value || 
      item.hakAksesList.some(ha => ha.role === filterRole.value);
    const matchGroup = !filterGroup.value || 
      item.hakAksesList.some(ha => ha.group === filterGroup.value || ha.groupPath === filterGroup.value);
    return matchTipeUser && matchRole && matchGroup;
  }),
);

// Generate display User ID dengan format US-001, US-002, dll
// Berdasarkan urutan di filteredHakAksesData (bukan user ID asli)
const generateDisplayUserId = (item: any): string => {
  if (!item || !item.userId) {
    return 'US-000';
  }
  
  // Cari index di filteredHakAksesData
  const index = filteredHakAksesData.value.findIndex(
    (i) => i.userId === item.userId
  );
  
  // Jika tidak ditemukan, cari di groupedHakAksesByUser
  const finalIndex = index >= 0 
    ? index 
    : groupedHakAksesByUser.value.findIndex((i) => i.userId === item.userId);
  
  const number = finalIndex >= 0 ? finalIndex + 1 : 1;
  
  return `US-${String(number).padStart(3, '0')}`;
};

const formTitle = computed(() => {
  if (viewMode.value === 'editName') return 'Edit Nama Tipe User';
  if (viewMode.value === 'editAccess') return 'Edit Hak Akses';
  if (viewMode.value === 'view') return 'Detail Hak Akses';
  return 'Tambah Hak Akses';
});

// Delete dialog state
const showDeleteDialog = ref(false);

// Re-indexes IDs to be sequential
const reindexData = () => {
  allHakAksesData.value.forEach((item, index) => {
    item.id = index + 1;
  });
};

// Dialog state
const showAddEditDialog = computed({
  get: () => viewMode.value === 'add' || viewMode.value === 'editName',
  set: (val: boolean) => {
    if (!val) {
      viewMode.value = 'table';
      resetForm();
    }
  }
});

const showEditAccessDialog = computed({
  get: () => viewMode.value === 'editAccess',
  set: (val: boolean) => {
    if (!val) {
      viewMode.value = 'table';
      resetForm();
    }
  }
});

const showViewDialog = computed({
  get: () => viewMode.value === 'view',
  set: (val: boolean) => {
    if (!val) {
      viewMode.value = 'table';
      resetForm();
    }
  }
});

// Functions for actions
const showAddForm = () => {
  resetForm();
  viewMode.value = 'add';
};

const viewModeHakAksesList = ref<HakAksesData[]>([]);

const viewItem = (item: any) => {
  // Item is from groupedHakAksesByUser
  // For view, we'll show all hak akses for this user
  // Store the list of hak akses for display
  viewModeHakAksesList.value = item.hakAksesList || [];
  
  if (item.hakAksesList && item.hakAksesList.length > 0) {
    // Merge all hak akses menus (OR logic - if any access allows, then allow)
    const baseMenuItems = buildMenuTemplate(navItemsStore.navItems);
    const mergedMenu: HakAksesMenu[] = baseMenuItems.map(menu => {
      let canAccess = false;
      let canView = false;
      let canAdd = false;
      let canEdit = false;
      let canDelete = false;
      
      item.hakAksesList.forEach((ha: HakAksesData) => {
        const haMenu = ha.hakAksesMenu.find(m => m.name === menu.name);
        if (haMenu) {
          canAccess = canAccess || haMenu.canAccess;
          canView = canView || haMenu.canView;
          canAdd = canAdd || haMenu.canAdd;
          canEdit = canEdit || haMenu.canEdit;
          canDelete = canDelete || haMenu.canDelete;
        }
      });
      
      return {
        name: menu.name,
        canAccess,
        canView,
        canAdd,
        canEdit,
        canDelete,
      };
    });
    
    editedItem.value = {
      id: item.id,
      userId: item.userId,
      namaLengkap: item.namaLengkap,
      namaUser: item.namaUser,
      tipeUser: item.tipeUser,
      role: '', // Not used in view mode
      group: '', // Not used in view mode
      namaTipeUser: item.hakAksesList[0]?.namaTipeUser || '',
      hakAksesMenu: mergedMenu,
    };
  } else {
    editedItem.value = {
      id: item.id,
      userId: item.userId,
      namaLengkap: item.namaLengkap,
      namaUser: item.namaUser,
      tipeUser: item.tipeUser,
      role: '',
      group: '',
      namaTipeUser: '',
      hakAksesMenu: [],
    };
  }
  viewMode.value = 'view';
};

const editItem = (item: any) => {
  // Item is now from groupedHakAksesByUser, so we need to edit the first hak akses or create new
  // For now, we'll edit the group-based access if it exists
  if (item.hakAksesList && item.hakAksesList.length > 0) {
    // Find the group-based access for this user
    const groupBasedAccess = item.hakAksesList.find((ha: HakAksesData) => ha.isGroupBased);
    if (groupBasedAccess) {
      editedIndex.value = allHakAksesData.value.findIndex(d => d.id === groupBasedAccess.id);
      editedItem.value = { ...groupBasedAccess };
      selectedGroup.value = groupBasedAccess.groupPath || null;
      onGroupSelected(selectedGroup.value);
      viewMode.value = 'editName';
      return;
    }
  }
  
  // Fallback: create new access
  resetForm();
  viewMode.value = 'add';
};

const editAccess = (item: any) => {
  // Item is from groupedHakAksesByUser
  // For edit access, we'll edit all group-based accesses for this user
  // For simplicity, we'll edit the first one or create new
  if (item.hakAksesList && item.hakAksesList.length > 0) {
    const groupBasedAccess = item.hakAksesList.find((ha: HakAksesData) => ha.isGroupBased);
    if (groupBasedAccess) {
      editedIndex.value = allHakAksesData.value.findIndex(d => d.id === groupBasedAccess.id);
      const baseMenuItems = buildMenuTemplate(navItemsStore.navItems);
      const mergedMenuItems = mergePermissions(baseMenuItems, groupBasedAccess.hakAksesMenu);

      editedItem.value = {
        ...groupBasedAccess,
        hakAksesMenu: mergedMenuItems
      };
      selectedGroup.value = groupBasedAccess.groupPath || null;
      onGroupSelected(selectedGroup.value);
      viewMode.value = 'editAccess';
      return;
    }
  }
  
  // Fallback
  resetForm();
  viewMode.value = 'add';
};

const deleteItem = (item: any) => {
  // Item is from groupedHakAksesByUser
  // We need to delete all group-based accesses for this user
  // For now, we'll delete the first group-based access
  if (item.hakAksesList && item.hakAksesList.length > 0) {
    const groupBasedAccess = item.hakAksesList.find((ha: HakAksesData) => ha.isGroupBased);
    if (groupBasedAccess) {
      editedIndex.value = allHakAksesData.value.findIndex(d => d.id === groupBasedAccess.id);
      showDeleteDialog.value = true;
      return;
    }
  }
  
  // Fallback
  editedIndex.value = -1;
  showDeleteDialog.value = false;
};

const closeDeleteDialog = () => {
  showDeleteDialog.value = false;
  editedIndex.value = -1;
};

const confirmDelete = () => {
  if (editedIndex.value > -1) {
    allHakAksesData.value.splice(editedIndex.value, 1);
    reindexData();
  }
  closeDeleteDialog();
};

const cancelForm = () => {
  viewMode.value = 'table';
  resetForm();
};

const updateItemAccess = (updatedItem: HakAksesData & { backendPermissions?: BackendPermissionItem[] }) => {
  if (editedIndex.value > -1) {
    const itemToUpdate = allHakAksesData.value[editedIndex.value];
    
    // If backend permissions are provided, we can store them or map them to menu structure
    if (updatedItem.backendPermissions && updatedItem.backendPermissions.length > 0) {
      // Store backend permissions for reference
      (itemToUpdate as any).backendPermissions = updatedItem.backendPermissions;
      
      // Also update the menu structure if needed
      if (updatedItem.hakAksesMenu) {
        itemToUpdate.hakAksesMenu = updatedItem.hakAksesMenu;
      }
    } else {
      // Use existing menu structure update
      Object.assign(itemToUpdate, updatedItem);
    }
    
    snackbar.value = {
      show: true,
      message: 'Hak akses berhasil diperbarui!',
      color: 'success',
      timeout: 3000,
    };
  }
  cancelForm();
};

const resetForm = () => {
  editedItem.value = {
    id: 0,
    role: '',
    group: '',
    groupPath: '',
    namaTipeUser: '',
    hakAksesMenu: buildMenuTemplate(navItemsStore.navItems),
    isGroupBased: true,
  };
  selectedUserId.value = null;
  selectedTipeUser.value = null;
  selectedGroup.value = null;
  selectedGroupUsers.value = [];
  fetchedBackendData.value = [];
  viewModeHakAksesList.value = [];
};

// Check if a permission is mapped to a menu
const getMappingStatus = (pagename: string): boolean => {
  if (!editedItem.value.hakAksesMenu || editedItem.value.hakAksesMenu.length === 0) {
    return false;
  }
  
  return editedItem.value.hakAksesMenu.some(menu => 
    menu.name.toLowerCase() === pagename.toLowerCase() ||
    menu.name.toLowerCase().includes(pagename.toLowerCase()) ||
    pagename.toLowerCase().includes(menu.name.toLowerCase())
  );
};

// Handle group selection
const onGroupSelected = (groupPath: string | null) => {
  if (!groupPath) {
    selectedGroupUsers.value = [];
    editedItem.value.group = '';
    editedItem.value.groupPath = '';
    return;
  }

  // Extract group name from path
  const parts = groupPath.split('/').filter(Boolean);
  editedItem.value.group = parts.length > 1 ? parts[1] : parts[0] || groupPath;
  editedItem.value.groupPath = groupPath;

  // Find all users with this group
  selectedGroupUsers.value = availableUsers.value.filter((u: any) => 
    Array.isArray(u.groups) && u.groups.includes(groupPath)
  );

  console.log(`📋 Selected group: ${groupPath}, found ${selectedGroupUsers.value.length} users`);
};


// Snackbar for notifications
const snackbar = ref({
  show: false,
  message: '',
  color: 'success',
  timeout: 3000,
});

// Fetch permissions from backend API
const fetchPermissionsFromBackend = async () => {
  if (!editedItem.value.role || !editedItem.value.group) {
    snackbar.value = {
      show: true,
      message: 'Role dan Group harus diisi terlebih dahulu!',
      color: 'warning',
      timeout: 3000,
    };
    return;
  }

  isFetchingPermissions.value = true;
  try {
    console.log('🔄 Fetching permissions from backend...');
    console.log('📋 Request params:', {
      roles: editedItem.value.role,
      groups: editedItem.value.group,
    });

    const response = await $fetch<any>('/api/permission', {
      query: {
        roles: editedItem.value.role,
        groups: editedItem.value.group,
      },
    });

    console.log('📦 Full response:', response);

    // Map backend permissions to our menu structure
    // Backend response structure: { message, data: [...], meta: {...} }
    if (response && (response as any).data && Array.isArray((response as any).data)) {
      const backendPermissions = (response as any).data as BackendPermissionItem[];
      console.log(`✅ Received ${backendPermissions.length} permissions from backend`);
      console.log('📄 Backend permissions:', backendPermissions);

      // Store fetched data for display
      fetchedBackendData.value = backendPermissions;

      const menuTemplate = buildMenuTemplate(navItemsStore.navItems);
      console.log(`📋 Menu template has ${menuTemplate.length} items`);
      
      // Map backend permissions to menu items
      const mappedPermissions = menuTemplate.map((menu) => {
        // Find matching permission from backend (by pagename or menu name)
        const backendPerm = backendPermissions.find((perm: BackendPermissionItem) => 
          perm.pagename?.toLowerCase() === menu.name.toLowerCase() ||
          perm.pagename?.toLowerCase().includes(menu.name.toLowerCase()) ||
          menu.name.toLowerCase().includes(perm.pagename?.toLowerCase() || '')
        );

        if (backendPerm) {
          console.log(`✅ Matched menu "${menu.name}" with permission "${backendPerm.pagename}"`);
          return {
            name: menu.name,
            canAccess: backendPerm.active || backendPerm.read || false,
            canView: backendPerm.read || false,
            canAdd: backendPerm.create || false,
            canEdit: backendPerm.update || false,
            canDelete: backendPerm.delete || false,
          };
        } else {
          console.log(`⚠️ No match found for menu "${menu.name}"`);
        }
        return menu;
      });

      editedItem.value.hakAksesMenu = mappedPermissions;
      
      const matchedCount = mappedPermissions.filter(m => 
        backendPermissions.some(p => 
          p.pagename?.toLowerCase() === m.name.toLowerCase() ||
          p.pagename?.toLowerCase().includes(m.name.toLowerCase()) ||
          m.name.toLowerCase().includes(p.pagename?.toLowerCase() || '')
        )
      ).length;

      snackbar.value = {
        show: true,
        message: `Berhasil mengambil ${backendPermissions.length} permissions dari backend. ${matchedCount} menu berhasil di-mapping.`,
        color: 'success',
        timeout: 5000,
      };
    } else {
      console.warn('⚠️ Response does not have expected structure:', response);
      fetchedBackendData.value = [];
      snackbar.value = {
        show: true,
        message: 'Response dari backend tidak memiliki struktur yang diharapkan',
        color: 'warning',
        timeout: 3000,
      };
    }
  } catch (error: any) {
    console.error('❌ Error fetching permissions from backend:', error);
    snackbar.value = {
      show: true,
      message: `Gagal mengambil data dari backend: ${error.message || 'Unknown error'}`,
      color: 'error',
      timeout: 5000,
    };
  } finally {
    isFetchingPermissions.value = false;
  }
};

// Load available roles and groups from UserLogin data
const loadAvailableRolesAndGroups = async () => {
  try {
    const users = await $fetch('/api/users/list').catch(() => []);
    const rolesSet = new Set<string>();
    const groupsSet = new Set<string>();

    // Store users for selection
    availableUsers.value = (users as any[]).map((u: any) => ({
      id: u.id,
      namaLengkap: u.namaLengkap || '',
      namaUser: u.namaUser || '',
      tipeUser: u.tipeUser || '',
      roles: u.roles || [],
      realmRoles: u.realmRoles || [],
      groups: u.groups || [],
    }));

    (users as any[]).forEach((u: any) => {
      if (Array.isArray(u.roles)) {
        u.roles.forEach((r: string) => rolesSet.add(r));
      }
      if (Array.isArray(u.realmRoles)) {
        u.realmRoles.forEach((r: string) => rolesSet.add(r));
      }
      if (Array.isArray(u.groups)) {
        u.groups.forEach((g: string) => {
          // Extract group name from path (e.g., "/Instalasi STIM/Devops/Superadmin" -> "STIM")
          const parts = g.split('/').filter(Boolean);
          if (parts.length > 1) {
            groupsSet.add(parts[1]); // Get second part as group name for filter
          } else if (parts.length === 1) {
            groupsSet.add(parts[0]);
          }
        });
      }
    });

    availableRoles.value = Array.from(rolesSet).sort();
    availableGroups.value = Array.from(groupsSet).sort();
    
    // Extract unique tipe users
    const tipeUsersSet = new Set<string>();
    (users as any[]).forEach((u: any) => {
      if (u.tipeUser) {
        tipeUsersSet.add(u.tipeUser);
      }
    });
    availableTipeUsers.value = Array.from(tipeUsersSet).sort();
    
    console.log(`✅ Loaded ${availableUsers.value.length} users, ${availableRoles.value.length} roles, ${availableGroups.value.length} groups`);
  } catch (error) {
    console.error('Error loading roles and groups:', error);
  }
};

const saveItem = async () => {
  // Validate required fields
  if (!editedItem.value.role || !selectedGroup.value) {
    snackbar.value = {
      show: true,
      message: 'Role dan Group wajib diisi!',
      color: 'warning',
      timeout: 3000,
    };
    return;
  }

  // Check if permissions have been fetched from backend
  // If not, show warning and ask user to fetch first
  const hasFetchedPermissions = fetchedBackendData.value.length > 0 || 
                                 (editedItem.value.hakAksesMenu && 
                                  editedItem.value.hakAksesMenu.length > 0 && 
                                  editedItem.value.hakAksesMenu.some(m => m.canAccess || m.canView || m.canAdd || m.canEdit || m.canDelete));
  
  if (!hasFetchedPermissions) {
    snackbar.value = {
      show: true,
      message: 'Silakan klik tombol "Ambil Data dari Backend API" terlebih dahulu untuk mengambil permissions!',
      color: 'warning',
      timeout: 5000,
    };
    return;
  }

  // Ensure hakAksesMenu exists (fallback to empty template if somehow missing)
  if (!editedItem.value.hakAksesMenu || editedItem.value.hakAksesMenu.length === 0) {
    editedItem.value.hakAksesMenu = buildMenuTemplate(navItemsStore.navItems);
  }

  // Check if this group+role combination already exists
  const existingIndex = allHakAksesData.value.findIndex(
    item => item.isGroupBased && 
            item.groupPath === editedItem.value.groupPath && 
            item.role === editedItem.value.role
  );

  if (editedIndex.value > -1 || existingIndex > -1) {
    // Edit existing group-based access
    const indexToUpdate = editedIndex.value > -1 ? editedIndex.value : existingIndex;
    const existingItem = allHakAksesData.value[indexToUpdate];
    
    // Update the group-based access entry
    allHakAksesData.value[indexToUpdate] = {
      ...existingItem,
      role: editedItem.value.role,
      group: editedItem.value.group,
      groupPath: editedItem.value.groupPath,
      namaTipeUser: editedItem.value.namaTipeUser || '',
      hakAksesMenu: editedItem.value.hakAksesMenu || [],
      isGroupBased: true,
    };
    
    console.log('✅ Group-based access updated at index:', indexToUpdate);
    snackbar.value = {
      show: true,
      message: `Hak akses untuk group "${editedItem.value.group}" berhasil diperbarui! ${selectedGroupUsers.value.length} user terpengaruh.`,
      color: 'success',
      timeout: 4000,
    };
  } else {
    // Create new group-based access entry
    const newId = allHakAksesData.value.length > 0 
      ? Math.max(...allHakAksesData.value.map(i => i.id)) + 1 
      : 1;
    
    const groupBasedAccess: HakAksesData = {
      id: newId,
      role: editedItem.value.role,
      group: editedItem.value.group,
      groupPath: editedItem.value.groupPath || selectedGroup.value || '',
      namaTipeUser: editedItem.value.namaTipeUser || '',
      hakAksesMenu: editedItem.value.hakAksesMenu || [],
      isGroupBased: true,
    };

    allHakAksesData.value.push(groupBasedAccess);
    
    console.log('✅ New group-based access added with ID:', newId);
    console.log(`📋 Affected users: ${selectedGroupUsers.value.length}`);
    snackbar.value = {
      show: true,
      message: `Hak akses untuk group "${editedItem.value.group}" berhasil ditambahkan! ${selectedGroupUsers.value.length} user mendapatkan hak akses ini.`,
      color: 'success',
      timeout: 4000,
    };
  }

  // Force update localStorage by triggering reactivity
  await nextTick();
  allHakAksesData.value = [...allHakAksesData.value];
  
  // Double-check localStorage is updated
  await nextTick();
  if (typeof window !== 'undefined') {
    const stored = localStorage.getItem('allHakAksesData');
    console.log('💾 localStorage after save:', stored ? JSON.parse(stored).length + ' items' : 'empty');
  }
  
  console.log('💾 Final allHakAksesData:', allHakAksesData.value);
  console.log('💾 Final allHakAksesData length:', allHakAksesData.value.length);
  
  // Reset editedIndex after save
  editedIndex.value = -1;
  
  cancelForm();
};

// Handle initial data load and ID re-indexing
onMounted(async () => {
  console.log('🚀 HakAkses page mounted');
  console.log('📊 Initial allHakAksesData:', allHakAksesData.value);
  console.log('📊 Initial allHakAksesData length:', allHakAksesData.value.length);
  
  // Only reindex if data exists and IDs are not sequential
  if (allHakAksesData.value.length > 0) {
    const needsReindex = allHakAksesData.value.some((item, index) => item.id !== index + 1);
    if (needsReindex) {
      console.log('🔄 Re-indexing data...');
      reindexData();
      // Force save after reindex
      allHakAksesData.value = [...allHakAksesData.value];
    }
  }
  
  await loadAvailableRolesAndGroups();
  
  console.log('✅ After load - allHakAksesData length:', allHakAksesData.value.length);
  console.log('✅ After load - allHakAksesData:', allHakAksesData.value);
  
  // Debug: Check localStorage directly
  if (typeof window !== 'undefined') {
    const stored = localStorage.getItem('allHakAksesData');
    console.log('💾 localStorage value:', stored);
    if (stored) {
      try {
        const parsed = JSON.parse(stored);
        console.log('📦 Parsed localStorage data:', parsed);
        console.log('📦 Parsed data length:', parsed.length);
      } catch (e) {
        console.error('❌ Error parsing localStorage:', e);
      }
    } else {
      console.log('⚠️ No data in localStorage');
    }
  }
});
</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: #3556AE;
$primary-600: #3A61C9;

$success-700: #1B6E53;
$success-600: #009262;
$success-400: #32C997;
$success-300: #84DFC1;
$success-200: #F1FBF8;

$danger-600: #E02B1D;

// Font Family & Weights
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;

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

// Ensure page container doesn't shrink
.hak-akses-page,
.hak-akses-page * {
  box-sizing: border-box;
}

.hak-akses-page {
  font-family: $font-family-base;
  background-color: $neutral-300;
  min-height: 100vh;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding: 16px !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  display: block !important;
  position: relative !important;
}

// Ensure no max-width constraints and white background
.hak-akses-page :deep(.v-card) {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  background-color: $neutral-100 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  margin: 0 !important;
}

// Override v-main constraints from layout
:deep(.v-main) {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

:deep(.v-main__wrap) {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

// Override any container constraints
:deep(.v-container),
:deep(.container) {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

// Ensure v-card-text has white background and proper padding
.hak-akses-page :deep(.v-card-text) {
  padding: 24px !important;
  background-color: $neutral-100 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

// Ensure wrapper div doesn't shrink
.hak-akses-page > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  display: block !important;
}

// Ensure v-card wrapper doesn't shrink
.hak-akses-page > div > .v-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  display: block !important;
}

// Ensure all child elements don't constrain width
.hak-akses-page > div > * {
  max-width: 100% !important;
}

// ============================================
// 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;
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-chip {
  color: $primary-600 !important;
  font-weight: $font-weight-semibold;
  font-size: 14px;
  line-height: 20px;
}

.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-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

// ============================================
// DATA TABLE
// ============================================
.custom-table :deep(table) {
  border-collapse: collapse;
}

.custom-table :deep(th) {
  background-color: #f5f5f5 !important;
  font-weight: bold;
  font-size: 0.875rem; /* text-sm */
}

.custom-table :deep(td) {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.v-btn--icon {
  border-radius: 8px;
}

.v-select :deep(.v-field__input) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

// Ensure search field stays large
.hak-akses-page :deep(.v-text-field[label="Search"]) {
  min-width: 300px !important;
  width: 100% !important;
  max-width: 400px !important;
}

.hak-akses-page :deep(.v-text-field[label="Search"] .v-field) {
  min-width: 300px !important;
}

.handle {
  cursor: grab;
}

// ============================================
// MODERN DIALOG STYLING
// ============================================
// Ensure overlay doesn't hide content completely
:deep(.v-overlay__scrim) {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

.modern-dialog-card {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

.dialog-header {
  padding: 32px;
  color: white;
  position: relative;
  overflow: hidden;
}

.dialog-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.dialog-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.dialog-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dialog-avatar {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dialog-header-text {
  flex: 1;
}

.dialog-title {
  font-size: 28px;
  font-weight: $font-weight-semibold;
  margin: 0 0 8px 0;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dialog-subtitle {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
  color: white;
}

.dialog-close-btn {
  color: white !important;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.dialog-close-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: rotate(90deg);
}

.header-add {
  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
}

.header-edit {
  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
}

.header-edit-access {
  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
}

.header-view {
  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
}

.dialog-content {
  padding: 32px !important;
  background-color: #f5f7fa;
  max-height: 70vh;
  overflow-y: auto;
}

.dialog-actions {
  padding: 20px 32px !important;
  background-color: white;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

// Dialog animation
.dialog-bottom-transition-enter-active,
.dialog-bottom-transition-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-bottom-transition-enter-from {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.dialog-bottom-transition-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

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

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

  .dialog-header {
    padding: 24px;
  }

  .dialog-title {
    font-size: 24px;
  }

  .dialog-content {
    padding: 24px !important;
  }

  .dialog-actions {
    padding: 16px 24px !important;
  }

  .dialog-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

// Ensure container never shrinks on any screen size
@media (min-width: 0px) {
  .hak-akses-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
  
  .hak-akses-page :deep(.v-card) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}
</style>