<template>
  <div class="contact-management">
    <CrudDataTable
      ref="tableRef"
      title="Kontakte"
      entity-name="Kontakt"
      :columns="contactColumns"
      data-source="/api/contacts"
      storage-key="contactTableColumns"
      @create="openNewContactDialog"
      @edit="editContact"
      @delete="confirmDelete"
      @data-loaded="onDataLoaded"
    >
      <!-- Custom Filter Buttons -->
      <template #filter-buttons="{ loadData }">
        <div class="flex gap-2 mb-4">
          <Button
            label="Alle"
            :outlined="typeFilter !== 'all'"
            @click="filterByType('all', loadData)"
            size="small"
          />
          <Button
            label="Debitoren"
            :outlined="typeFilter !== 'debtor'"
            @click="filterByType('debtor', loadData)"
            size="small"
          />
          <Button
            label="Kreditoren"
            :outlined="typeFilter !== 'creditor'"
            @click="filterByType('creditor', loadData)"
            size="small"
          />
        </div>
      </template>

      <!-- Custom Column Templates -->
      <template #body-companyName="{ data }">
        <div class="font-semibold">{{ data.companyName }}</div>
      </template>

      <template #body-street="{ data }">
        {{ data.street }}
      </template>

      <template #body-zipCode="{ data }">
        {{ data.zipCode }}
      </template>

      <template #body-city="{ data }">
        {{ data.city }}
      </template>

      <template #body-country="{ data }">
        {{ data.country }}
      </template>

      <template #body-contactPersons="{ data }">
        <div v-if="data.contactPersons?.length > 0">
          <div v-for="person in data.contactPersons.slice(0, 2)" :key="person.id" class="mb-1">
            <div class="font-medium">
              {{ person.firstName }} {{ person.lastName }}
              <Tag v-if="person.isPrimary" value="Primär" severity="info" class="ml-1" />
            </div>
            <div v-if="person.position" class="text-sm text-500">{{ person.position }}</div>
          </div>
          <div v-if="data.contactPersons.length > 2" class="text-sm text-500">
            +{{ data.contactPersons.length - 2 }} weitere
          </div>
        </div>
        <span v-else class="text-500">Keine Ansprechpartner</span>
      </template>

      <template #body-phone="{ data }">
        <a v-if="data.phone" :href="'tel:' + data.phone" class="text-primary">{{ data.phone }}</a>
      </template>

      <template #body-fax="{ data }">
        {{ data.fax }}
      </template>

      <template #body-email="{ data }">
        <a v-if="data.email" :href="'mailto:' + data.email" class="text-primary">{{ data.email }}</a>
      </template>

      <template #body-website="{ data }">
        <a v-if="data.website" :href="data.website" target="_blank" class="text-primary">
          {{ data.website }}
        </a>
      </template>

      <template #body-type="{ data }">
        <div class="flex gap-1">
          <Tag v-if="data.isDebtor" value="Debitor" severity="success" />
          <Tag v-if="data.isCreditor" value="Kreditor" severity="warning" />
        </div>
      </template>

      <template #body-status="{ data }">
        <Tag :value="data.isActive ? 'Aktiv' : 'Inaktiv'" :severity="data.isActive ? 'success' : 'secondary'" />
      </template>

      <template #body-notes="{ data }">
        <div v-if="data.notes" class="text-sm text-500 line-clamp-2">{{ data.notes }}</div>
      </template>

      <template #body-createdAt="{ data }">
        {{ formatDate(data.createdAt) }}
      </template>

      <template #body-updatedAt="{ data }">
        {{ formatDate(data.updatedAt) }}
      </template>
    </CrudDataTable>

    <!-- Contact Dialog -->
    <Dialog
      v-model:visible="contactDialog"
      :header="editingContact?.id ? 'Kontakt bearbeiten' : 'Neuer Kontakt'"
      :modal="true"
      :style="{ width: '800px' }"
      :closable="!saving"
    >
      <div class="flex flex-col gap-4">
        <!-- Company Information -->
        <div class="font-semibold">Firmeninformationen</div>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-2">
            <label for="companyName">Firmenname *</label>
            <InputText
              id="companyName"
              v-model="editingContact.companyName"
              :class="{ 'p-invalid': submitted && !editingContact.companyName }"
              :disabled="saving"
            />
            <small v-if="submitted && !editingContact.companyName" class="p-error">Firmenname ist erforderlich</small>
          </div>

          <div class="flex flex-col gap-2">
            <label for="companyNumber">Kundennummer</label>
            <InputText id="companyNumber" v-model="editingContact.companyNumber" :disabled="saving" />
          </div>
        </div>

        <!-- Address -->
        <Divider />
        <div class="font-semibold">Adresse</div>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-2 col-span-2">
            <label for="street">Straße</label>
            <InputText id="street" v-model="editingContact.street" :disabled="saving" />
          </div>

          <div class="flex flex-col gap-2">
            <label for="zipCode">PLZ</label>
            <InputText id="zipCode" v-model="editingContact.zipCode" :disabled="saving" />
          </div>

          <div class="flex flex-col gap-2">
            <label for="city">Ort</label>
            <InputText id="city" v-model="editingContact.city" :disabled="saving" />
          </div>

          <div class="flex flex-col gap-2 col-span-2">
            <label for="country">Land</label>
            <InputText id="country" v-model="editingContact.country" :disabled="saving" />
          </div>
        </div>

        <!-- Contact Information -->
        <Divider />
        <div class="font-semibold">Kontaktinformationen</div>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-2">
            <label for="phone">Telefon</label>
            <InputText id="phone" v-model="editingContact.phone" :disabled="saving" />
          </div>

          <div class="flex flex-col gap-2">
            <label for="fax">Fax</label>
            <InputText id="fax" v-model="editingContact.fax" :disabled="saving" />
          </div>

          <div class="flex flex-col gap-2">
            <label for="email">E-Mail</label>
            <InputText id="email" v-model="editingContact.email" type="email" :disabled="saving" />
          </div>

          <div class="flex flex-col gap-2">
            <label for="website">Website</label>
            <InputText id="website" v-model="editingContact.website" :disabled="saving" />
          </div>
        </div>

        <!-- Tax Information -->
        <Divider />
        <div class="font-semibold">Steuerinformationen</div>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-2">
            <label for="taxNumber">Steuernummer</label>
            <InputText id="taxNumber" v-model="editingContact.taxNumber" :disabled="saving" />
          </div>

          <div class="flex flex-col gap-2">
            <label for="vatNumber">USt-IdNr.</label>
            <InputText id="vatNumber" v-model="editingContact.vatNumber" :disabled="saving" />
          </div>
        </div>

        <!-- Type and Status -->
        <Divider />
        <div class="font-semibold">Typ und Status</div>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex items-center gap-2">
            <Checkbox inputId="isDebtor" v-model="editingContact.isDebtor" :binary="true" :disabled="saving" />
            <label for="isDebtor">Debitor</label>
          </div>

          <div class="flex items-center gap-2">
            <Checkbox inputId="isCreditor" v-model="editingContact.isCreditor" :binary="true" :disabled="saving" />
            <label for="isCreditor">Kreditor</label>
          </div>

          <div class="flex items-center gap-2 col-span-2">
            <Checkbox inputId="isActive" v-model="editingContact.isActive" :binary="true" :disabled="saving" />
            <label for="isActive">Aktiv</label>
          </div>
        </div>

        <!-- Notes -->
        <Divider />
        <div class="flex flex-col gap-2">
          <label for="notes">Notizen</label>
          <Textarea id="notes" v-model="editingContact.notes" rows="3" :disabled="saving" />
        </div>

        <!-- Contact Persons -->
        <Divider />
        <div class="flex justify-between items-center">
          <div class="font-semibold">Ansprechpartner</div>
          <Button
            label="Hinzufügen"
            icon="pi pi-plus"
            size="small"
            outlined
            @click="addContactPerson"
            :disabled="saving"
          />
        </div>

        <div v-for="(person, index) in editingContact.contactPersons" :key="index" class="border p-3 rounded-md">
          <div class="flex justify-between items-start mb-3">
            <div class="font-medium">Ansprechpartner {{ index + 1 }}</div>
            <Button
              icon="pi pi-trash"
              size="small"
              text
              rounded
              severity="danger"
              @click="removeContactPerson(index)"
              :disabled="saving"
            />
          </div>

          <div class="grid grid-cols-2 gap-3">
            <div class="flex flex-col gap-2">
              <label :for="'salutation-' + index">Anrede</label>
              <Select
                :id="'salutation-' + index"
                v-model="person.salutation"
                :options="salutations"
                placeholder="Auswählen"
                :disabled="saving"
              />
            </div>

            <div class="flex flex-col gap-2">
              <label :for="'title-' + index">Titel</label>
              <InputText :id="'title-' + index" v-model="person.title" :disabled="saving" />
            </div>

            <div class="flex flex-col gap-2">
              <label :for="'firstName-' + index">Vorname</label>
              <InputText :id="'firstName-' + index" v-model="person.firstName" :disabled="saving" />
            </div>

            <div class="flex flex-col gap-2">
              <label :for="'lastName-' + index">Nachname</label>
              <InputText :id="'lastName-' + index" v-model="person.lastName" :disabled="saving" />
            </div>

            <div class="flex flex-col gap-2">
              <label :for="'position-' + index">Position</label>
              <InputText :id="'position-' + index" v-model="person.position" :disabled="saving" />
            </div>

            <div class="flex flex-col gap-2">
              <label :for="'department-' + index">Abteilung</label>
              <InputText :id="'department-' + index" v-model="person.department" :disabled="saving" />
            </div>

            <div class="flex flex-col gap-2">
              <label :for="'person-phone-' + index">Telefon</label>
              <InputText :id="'person-phone-' + index" v-model="person.phone" :disabled="saving" />
            </div>

            <div class="flex flex-col gap-2">
              <label :for="'mobile-' + index">Mobil</label>
              <InputText :id="'mobile-' + index" v-model="person.mobile" :disabled="saving" />
            </div>

            <div class="flex flex-col gap-2 col-span-2">
              <label :for="'person-email-' + index">E-Mail</label>
              <InputText :id="'person-email-' + index" v-model="person.email" type="email" :disabled="saving" />
            </div>

            <div class="flex items-center gap-2 col-span-2">
              <Checkbox
                :inputId="'isPrimary-' + index"
                v-model="person.isPrimary"
                :binary="true"
                @change="setPrimaryContact(index)"
                :disabled="saving"
              />
              <label :for="'isPrimary-' + index">Primärer Ansprechpartner</label>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <Button label="Abbrechen" outlined @click="closeContactDialog" :disabled="saving" />
        <Button label="Speichern" @click="saveContact" :loading="saving" />
      </template>
    </Dialog>

    <!-- Delete Confirmation Dialog -->
    <Dialog
      v-model:visible="deleteDialog"
      header="Kontakt löschen"
      :modal="true"
      :style="{ width: '450px' }"
      :closable="!deleting"
    >
      <div class="flex items-center gap-3">
        <i class="pi pi-exclamation-triangle text-3xl text-red-500"></i>
        <span>Möchten Sie diesen Kontakt wirklich löschen?</span>
      </div>
      <template #footer>
        <Button label="Abbrechen" outlined @click="deleteDialog = false" :disabled="deleting" />
        <Button label="Löschen" severity="danger" @click="deleteContact" :loading="deleting" />
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useToast } from 'primevue/usetoast'
import CrudDataTable from '../components/CrudDataTable.vue'
import Dialog from 'primevue/dialog'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import Textarea from 'primevue/textarea'
import Tag from 'primevue/tag'
import Checkbox from 'primevue/checkbox'
import Select from 'primevue/select'
import Divider from 'primevue/divider'

const toast = useToast()
const tableRef = ref(null)

// Column definitions
const contactColumns = [
  { key: 'companyName', label: 'Firma', field: 'companyName', sortable: true, style: 'min-width: 200px', default: true },
  { key: 'companyNumber', label: 'Kundennummer', field: 'companyNumber', default: false },
  { key: 'street', label: 'Straße', field: 'street', default: false },
  { key: 'zipCode', label: 'PLZ', field: 'zipCode', default: false },
  { key: 'city', label: 'Ort', field: 'city', sortable: true, default: true },
  { key: 'country', label: 'Land', field: 'country', default: false },
  { key: 'contactPersons', label: 'Ansprechpartner', style: 'min-width: 200px', default: true },
  { key: 'phone', label: 'Telefon', field: 'phone', default: true },
  { key: 'fax', label: 'Fax', field: 'fax', default: false },
  { key: 'email', label: 'E-Mail', field: 'email', default: true },
  { key: 'website', label: 'Website', field: 'website', default: true },
  { key: 'taxNumber', label: 'Steuernummer', field: 'taxNumber', default: false },
  { key: 'vatNumber', label: 'USt-IdNr.', field: 'vatNumber', default: false },
  { key: 'type', label: 'Typ (Debitor/Kreditor)', default: true },
  { key: 'status', label: 'Status', default: true },
  { key: 'notes', label: 'Notizen', field: 'notes', default: false },
  { key: 'createdAt', label: 'Erstellt am', field: 'createdAt', default: false },
  { key: 'updatedAt', label: 'Zuletzt geändert', field: 'updatedAt', default: false }
]

// State
const contactDialog = ref(false)
const deleteDialog = ref(false)
const editingContact = ref(null)
const submitted = ref(false)
const saving = ref(false)
const deleting = ref(false)
const typeFilter = ref('all')

const salutations = ref(['Herr', 'Frau', 'Divers'])

// Helper functions
const emptyContact = () => ({
  companyName: '',
  companyNumber: '',
  street: '',
  zipCode: '',
  city: '',
  country: 'Deutschland',
  phone: '',
  fax: '',
  email: '',
  website: '',
  taxNumber: '',
  vatNumber: '',
  isDebtor: false,
  isCreditor: false,
  isActive: true,
  notes: '',
  contactPersons: []
})

const emptyContactPerson = () => ({
  salutation: null,
  title: '',
  firstName: '',
  lastName: '',
  position: '',
  department: '',
  phone: '',
  mobile: '',
  email: '',
  isPrimary: false
})

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  })
}

// Filter by type
const filterByType = (type, loadData) => {
  typeFilter.value = type
  const params = {}
  
  if (type === 'debtor') {
    params.isDebtor = 'true'
  } else if (type === 'creditor') {
    params.isCreditor = 'true'
  }
  
  loadData(params)
}

// CRUD Operations
const openNewContactDialog = () => {
  editingContact.value = emptyContact()
  submitted.value = false
  contactDialog.value = true
}

const editContact = (contact) => {
  editingContact.value = { ...contact }
  submitted.value = false
  contactDialog.value = true
}

const closeContactDialog = () => {
  contactDialog.value = false
  editingContact.value = null
  submitted.value = false
}

const saveContact = async () => {
  submitted.value = true
  
  if (!editingContact.value.companyName) {
    return
  }
  
  saving.value = true
  
  try {
    const isEdit = !!editingContact.value.id
    const url = isEdit ? `/api/contacts/${editingContact.value.id}` : '/api/contacts'
    const method = isEdit ? 'PUT' : 'POST'
    
    const response = await fetch(url, {
      method,
      headers: {
        'Content-Type': 'application/ld+json',
        'Accept': 'application/ld+json'
      },
      credentials: 'include',
      body: JSON.stringify(editingContact.value)
    })
    
    if (!response.ok) {
      const error = await response.json()
      
      if (error.violations && error.violations.length > 0) {
        const errorMessages = error.violations
          .map(v => `${v.propertyPath}: ${v.message}`)
          .join('\n')
        throw new Error(errorMessages)
      }
      
      throw new Error(error['hydra:description'] || error.message || 'Fehler beim Speichern')
    }
    
    toast.add({
      severity: 'success',
      summary: 'Erfolg',
      detail: `Kontakt wurde ${isEdit ? 'aktualisiert' : 'erstellt'}`,
      life: 3000
    })
    
    closeContactDialog()
    tableRef.value?.loadData()
  } catch (error) {
    console.error('Error saving contact:', error)
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: error.message || 'Kontakt konnte nicht gespeichert werden',
      life: 5000
    })
  } finally {
    saving.value = false
  }
}

const confirmDelete = (contact) => {
  editingContact.value = contact
  deleteDialog.value = true
}

const deleteContact = async () => {
  deleting.value = true
  
  try {
    const response = await fetch(`/api/contacts/${editingContact.value.id}`, {
      method: 'DELETE',
      credentials: 'include'
    })
    
    if (!response.ok) {
      throw new Error('Fehler beim Löschen des Kontakts')
    }
    
    toast.add({
      severity: 'success',
      summary: 'Erfolg',
      detail: 'Kontakt wurde gelöscht',
      life: 3000
    })
    
    deleteDialog.value = false
    tableRef.value?.loadData()
  } catch (error) {
    console.error('Error deleting contact:', error)
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: 'Kontakt konnte nicht gelöscht werden',
      life: 3000
    })
  } finally {
    deleting.value = false
  }
}

// Contact Person Management
const addContactPerson = () => {
  editingContact.value.contactPersons.push(emptyContactPerson())
}

const removeContactPerson = (index) => {
  editingContact.value.contactPersons.splice(index, 1)
}

const setPrimaryContact = (index) => {
  if (editingContact.value.contactPersons[index].isPrimary) {
    editingContact.value.contactPersons.forEach((person, i) => {
      if (i !== index) {
        person.isPrimary = false
      }
    })
  }
}

const onDataLoaded = (data) => {
  // Optional: Do something when data is loaded
}
</script>
