<script setup lang="ts">
import { useClipboard } from '@KTXC/composables/useClipboard'

interface Props {
  mode: 'edit' | 'view'
  emails: Record<string, any>
}

defineProps<Props>()

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

const { copiedKey, copyToClipboard } = useClipboard<string>()
</script>

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

    <!-- Read-only view -->
    <div v-if="mode === 'view'">
      <div v-for="(email, key) in emails" :key="key" class="mb-2 pa-2 border rounded">
        <div class="d-flex align-center justify-space-between mb-1">
          <div class="d-flex align-center">
            <v-icon icon="mdi-email" size="small" class="mr-2" />
            <strong>{{ email.address || 'No address' }}</strong>
          </div>
          <v-btn
            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
            size="x-small"
            variant="text"
            :color="copiedKey === key ? 'success' : undefined"
            @click="copyToClipboard(email.address || '', key as string)"
          />
        </div>
        <div class="text-caption text-grey">
          Context: {{ email.context || 'Not set' }} |
          Priority: {{ email.priority || 'Not set' }}
        </div>
      </div>
    </div>

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

        <v-row class="mb-2">
          <v-col cols="12" md="6">
            <v-text-field
              v-model="email.address"
              label="Address"
              variant="outlined"
              density="compact"
            />
          </v-col>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="email.context"
              label="Context"
              variant="outlined"
              density="compact"
            />
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="12" md="6">
            <v-text-field
              v-model.number="email.priority"
              label="Priority"
              type="number"
              variant="outlined"
              density="compact"
            />
          </v-col>
        </v-row>
      </div>
    </div>
  </div>
</template>

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