<template>
  <div v-if="config && config.style === 'box' && contacts && contacts.length && contacts.length > 0" class="mg-stack">
    <article v-for="contact in contacts" :key="contact.id" class="mg-card">
      <h3 class="mg-title">
        {{ contact.name }}
        <span v-if="contact.expiryDate" class="expiry-date">(bis {{ formatDate(contact.expiryDate) }})</span>
      </h3>
      <p class="mg-meta" v-if="displayOptions.includes('positions') && contact.positions?.length">
        <span><strong>Positionen:</strong> {{ contact.positions.map(pos => pos.caption).join(', ') }}</span>
      </p>
      <div class="mg-stack stack-tight">
        <p v-if="displayOptions.includes('phone') && contact.phone" class="mg-text"><strong>Telefon:</strong> {{ contact.phone }}</p>
        <p v-if="displayOptions.includes('email') && contact.email" class="mg-text"><strong>E-Mail:</strong> {{ contact.email }}</p>
        <p v-if="displayOptions.includes('street') && contact.street" class="mg-text"><strong>Straße:</strong> {{ contact.street }}</p>
        <p v-if="displayOptions.includes('zipcode') && contact.zipcode" class="mg-text"><strong>PLZ:</strong> {{ contact.zipcode }}</p>
        <p v-if="displayOptions.includes('city') && contact.city" class="mg-text"><strong>Stadt:</strong> {{ contact.city }}</p>
      </div>
    </article>
  </div>

  <div v-else-if="config.style === 'float' && contacts && contacts.length && contacts.length > 0" class="float-list">
    <p v-for="contact in contacts" :key="contact.id" class="float-item">
      <strong>{{ contact.name }}</strong><span v-if="contact.expiryDate" class="expiry-date"> (bis {{ formatDate(contact.expiryDate) }})</span>
      <span v-if="displayOptions.includes('phone') && contact.phone">, Telefon: {{ contact.phone }}</span>
      <span v-if="displayOptions.includes('street') && contact.street">, Straße: {{ contact.street }}</span>
      <span v-if="displayOptions.includes('zipcode') && contact.zipcode">, PLZ: {{ contact.zipcode }}</span>
      <span v-if="displayOptions.includes('city') && contact.city">, Stadt: {{ contact.city }}</span>
      <span v-if="displayOptions.includes('email') && contact.email">, E-Mail: {{ contact.email }}</span>
      <span v-if="displayOptions.includes('positions') && contact.positions?.length">, Positionen: {{ contact.positions.map(pos => pos.caption).join(', ') }}</span>
    </p>
  </div>
</template>

<script>
import axios from '@/axios';

export default {
    name: 'ContactRender',
    props: {
        config: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            contacts: [],
            loading: true,
            error: null,
            displayOptions: [],
        };
    },
    async created() {
        try {
            this.displayOptions = this.config.display || [];
            const response = await axios.post('/contact-persons/filter', {
                config: JSON.stringify(this.config),
            });
            this.contacts = response.data;
            this.loading = false;
        } catch (error) {
            console.error('Error loading contacts:', error);
            this.error = 'Fehler beim Laden der Kontaktpersonen';
            this.loading = false;
        }
    },
    methods: {
        formatDate(dateString) {
            if (!dateString) return '';
            const date = new Date(dateString);
            return date.toLocaleDateString('de-DE', {
                day: '2-digit',
                month: '2-digit',
                year: 'numeric'
            });
        }
    }
};
</script>

<style scoped>
.expiry-date {
  font-size: 0.9em;
  color: var(--color-text-muted);
  font-style: italic;
}

.stack-tight {
  gap: var(--space-2);
}

.float-list {
  display: grid;
  gap: var(--space-3);
}

.float-item {
  margin: 0;
}
</style>