<script setup lang="ts">
interface Props {
  mode: 'edit' | 'view'
  notifications: Record<string, any>
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'add-notification': []
  'remove-notification': [key: string]
}>()

const typeOptions = [
  { title: 'Email', value: 'email' },
  { title: 'Visual (Display)', value: 'visual' },
  { title: 'Audible (Sound)', value: 'audible' }
]

const patternOptions = [
  { title: 'Absolute (Specific Time)', value: 'absolute' },
  { title: 'Relative (Before Event)', value: 'relative' },
  { title: 'Unknown', value: 'unknown' }
]

const anchorOptions = [
  { title: 'Start Time', value: 'start' },
  { title: 'End Time', value: 'end' }
]

const formatNotification = (notification: any) => {
  if (notification.pattern === 'absolute' && notification.when) {
    return `At ${new Date(notification.when).toLocaleString()}`
  } else if (notification.pattern === 'relative' && notification.offset) {
    const anchor = notification.anchor === 'end' ? 'end' : 'start'
    return `${notification.offset} before ${anchor}`
  }
  return 'Custom notification'
}
</script>

<template>
  <div v-if="Object.keys(notifications || {}).length > 0 || mode === 'edit'" class="event-editor-section">
    <div class="d-flex align-center justify-space-between mb-2">
      <div class="text-subtitle-1">Notifications</div>
      <v-btn v-if="mode === 'edit'"
        size="small"
        variant="outlined"
        @click="$emit('add-notification')">
        <v-icon left>mdi-plus</v-icon>
        Add Notification
      </v-btn>
    </div>

    <!-- Read-only view -->
    <div v-if="mode === 'view'">
      <div v-for="(notification, key) in notifications" :key="key" class="mb-2 pa-2 border rounded">
        <div class="d-flex align-center justify-space-between">
          <div>
            <div class="mb-1">
              <v-icon :icon="notification.type === 'email' ? 'mdi-email' : notification.type === 'audible' ? 'mdi-bell-ring' : 'mdi-bell'" size="small" class="mr-2" />
              <strong>{{ notification.type || 'Notification' }}</strong>
            </div>
            <div class="text-caption text-grey">{{ formatNotification(notification) }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit view -->
    <div v-else>
      <div v-for="(notification, key) in notifications" :key="key" class="mb-3 pa-3 border rounded">
        <div class="d-flex align-center justify-space-between mb-2">
          <strong>Notification</strong>
          <v-btn
            icon="mdi-delete"
            size="small"
            color="error"
            variant="text"
            @click="$emit('remove-notification', key)">
          </v-btn>
        </div>

        <v-row dense class="mb-2">
          <v-col cols="12" md="6">
            <v-select
              v-model="notification.type"
              :items="typeOptions"
              label="Type"
              variant="outlined"
              density="compact"
              :rules="[v => !!v || 'Type is required']"
            />
          </v-col>
          <v-col cols="12" md="6">
            <v-select
              v-model="notification.pattern"
              :items="patternOptions"
              label="Pattern"
              variant="outlined"
              density="compact"
              :rules="[v => !!v || 'Pattern is required']"
            />
          </v-col>
        </v-row>

        <div v-if="notification.pattern === 'absolute'">
          <v-text-field
            v-model="notification.when"
            label="When (ISO Date)"
            type="datetime-local"
            variant="outlined"
            density="compact"
            hint="Specific date and time for notification"
          />
        </div>

        <div v-else-if="notification.pattern === 'relative'">
          <v-row dense>
            <v-col cols="12" md="6">
              <v-text-field
                v-model="notification.offset"
                label="Offset (e.g., PT15M)"
                variant="outlined"
                density="compact"
                hint="ISO 8601 duration before event"
              />
            </v-col>
            <v-col cols="12" md="6">
              <v-select
                v-model="notification.anchor"
                :items="anchorOptions"
                label="Anchor"
                variant="outlined"
                density="compact"
              />
            </v-col>
          </v-row>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.event-editor-section {
  margin-bottom: 1.5rem;
}
</style>
