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

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

defineProps<Props>()

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

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

<template>
  <div v-if="(organizations || []).length > 0 || mode === 'edit'" class="person-editor-section">
    <div class="d-flex align-center justify-space-between mb-2">
      <div class="text-subtitle-1">Organizations</div>
      <v-btn v-if="mode === 'edit'"
        size="small"
        variant="outlined"
        @click="$emit('add-organization')">
        <v-icon left>mdi-plus</v-icon>
        Add Organization
      </v-btn>
    </div>

    <!-- Read-only view -->
    <div v-if="mode === 'view'">
      <div v-for="(org, key) in organizations" :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-domain" size="small" class="mr-2" />
            <strong>{{ org.Label || 'Unnamed Organization' }}</strong>
          </div>
          <v-btn
            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
            size="x-small"
            variant="text"
            :color="copiedKey === key ? 'success' : undefined"
            @click="copyToClipboard(org.Label || '', key as string)"
          />
        </div>
        <div class="text-caption text-grey">
          Units: {{ (org.Units || []).join(', ') || 'None' }}
        </div>
        <div class="text-caption text-grey">
          Context: {{ org.context || 'Not set' }} |
          Priority: {{ org.priority || 'Not set' }}
        </div>
      </div>
    </div>

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

        <v-row class="mb-2">
          <v-col cols="12" md="6">
            <v-text-field
              v-model="org.Label"
              label="Label"
              variant="outlined"
              density="compact"
            />
          </v-col>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="org.sortName"
              label="Sort Name"
              variant="outlined"
              density="compact"
            />
          </v-col>
        </v-row>

        <v-row class="mb-2">
          <v-col cols="12" md="6">
            <v-text-field
              v-model="org.context"
              label="Context"
              variant="outlined"
              density="compact"
            />
          </v-col>
          <v-col cols="12" md="6">
            <v-text-field
              v-model.number="org.priority"
              label="Priority"
              type="number"
              variant="outlined"
              density="compact"
            />
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="12">
            <v-text-field
              v-model="org.Units"
              label="Units (comma-separated)"
              variant="outlined"
              density="compact"
              hint="Enter units separated by commas"
            />
          </v-col>
        </v-row>
      </div>
    </div>
  </div>
</template>

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