<template>
  <v-dialog 
    :model-value="modelValue" 
    @update:model-value="handleClose"
    :max-width="isMobile ? '95%' : '500px'"
    persistent
  >
    <v-card>
      <v-card-title class="d-flex align-center">
        <VIcon icon="tabler-alert-triangle" color="error" class="me-3" />
        <span class="text-h6">Confirm Delete</span>
      </v-card-title>

      <v-divider />

      <v-card-text class="py-6">
        <div class="text-body-1 mb-4">
          Are you sure you want to delete this record?
        </div>
        
        <v-card 
          v-if="selectedRowData" 
          variant="outlined" 
          class="pa-3 bg-grey-lighten-5"
        >
          <div class="d-flex flex-column gap-2">
            <div 
              v-for="(val, key) in previewFields" 
              :key="key" 
              class="d-flex align-center"
            >
              <VIcon icon="tabler-dot" size="small" class="me-2" />
              <strong class="me-2">{{ key }}:</strong>
              {{ formatValue(val) }}
            </div>
          </div>
        </v-card>

        <v-alert 
          type="warning" 
          variant="tonal" 
          class="mt-4"
        >
          <template #prepend>
            <VIcon icon="tabler-alert-circle" />
          </template>
          <template #text>
            This action cannot be undone and will permanently delete the user data.
          </template>
        </v-alert>
      </v-card-text>

      <v-divider />

      <v-card-actions class="pa-4">
        <v-spacer />
        
        <v-btn
          variant="outlined"
          color="grey"
          @click="handleCancel"
          :class="isMobile ? 'flex-grow-1 me-2' : ''"
        >
          <template #prepend>
            <VIcon icon="tabler-x" />
          </template>
          Cancel
        </v-btn>

        <v-btn
          variant="flat"
          color="error"
          @click="handleConfirm"
          :class="isMobile ? 'flex-grow-1' : ''"
        >
          <template #prepend>
            <VIcon icon="tabler-trash" />
          </template>
          Delete
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  selectedRowData: {
    type: Object,
    default: null
  },
  isMobile: {
    type: Boolean,
    default: false
  },
  columns: {
    type: [Array, Object],
    default: () => []
  }
})

const emit = defineEmits(['update:model-value', 'confirm', 'cancel'])

const handleClose = (value) => {
  if (!value) {
    emit('update:model-value', false)
    emit('cancel')
  }
}

const handleCancel = () => {
  emit('update:model-value', false)
  emit('cancel')
}

const handleConfirm = () => {
  emit('update:model-value', false)
  emit('confirm')
}

const previewFields = computed(() => {
  const cols = Array.isArray(props.columns) ? props.columns : (props.columns?.value || [])
  const prefer = ['title','name','fullName','todo','email','id','userId']
  const keys = []
  for (const p of prefer) {
    if (props.selectedRowData && props.selectedRowData[p] !== undefined) keys.push(p)
  }
  for (const c of cols) {
    if (c.field && !keys.includes(c.field) && c.field !== 'action' && keys.length < 4) keys.push(c.field)
  }
  const map = {}
  keys.forEach(k => { map[k] = props.selectedRowData?.[k] })
  return map
})

const formatValue = (v) => {
  if (Array.isArray(v) || typeof v === 'object') return JSON.stringify(v)
  return v ?? 'N/A'
}
</script>

<style scoped>
.v-card-title {
  background: rgba(var(--v-theme-error), 0.1);
  border-bottom: 1px solid rgba(var(--v-theme-error), 0.2);
}

.v-alert {
  border-left: 4px solid rgb(var(--v-theme-warning));
}

@media (max-width: 600px) {
  .v-card-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .v-btn {
    width: 100%;
  }
}
</style>