<template>
  <Dialog :visible="visible" @update:visible="val => emit('update:visible', val)" modal :closable="false" :style="{ width: '700px', maxWidth: '95vw' }">
    <template #header>
      <span class="modal-title">Add Contact/Address</span>
    </template>
    <div class="modal-body">
      <ContactInformationForm
        :formData="contactFormData.value"
        @update:formData="val => contactFormData.value = val"
        :isSubmitting="isSubmitting"
        :existingContacts="existingContacts"
      />
      <AddressInformationForm
        :formData="addressFormData.value"
        @update:formData="val => addressFormData.value = val"
        :isSubmitting="isSubmitting"
        :contactOptions="allContactOptions"
        :existingAddresses="existingAddresses"
      />
    </div>
    <template #footer>
      <Button label="Cancel" @click="close" severity="secondary" />
      <Button label="Create" @click="create" severity="primary" :loading="isSubmitting" />
    </template>
  </Dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
import ContactInformationForm from '../clientSubPages/ContactInformationForm.vue';
import AddressInformationForm from '../clientSubPages/AddressInformationForm.vue';

const props = defineProps({
  visible: Boolean,
  clientContacts: { type: Array, default: () => [] },
  existingContacts: { type: Array, default: () => [] },
  existingAddresses: { type: Array, default: () => [] },
  isSubmitting: { type: Boolean, default: false },
});
const emit = defineEmits(['update:visible', 'created']);

const contactFormData = ref({ contacts: [] });
const addressFormData = ref({ addresses: [], contacts: [] });

// Keep addressFormData.contacts in sync with new contacts
watch(
  () => contactFormData.value.contacts,
  (newContacts) => {
    addressFormData.value.contacts = newContacts || [];
  },
  { deep: true }
);

// All contact options = clientContacts + new contacts
const allContactOptions = computed(() => {
  const clientOpts = (props.clientContacts || []).map((c, idx) => ({
    label: `${c.firstName || ''} ${c.lastName || ''}`.trim() || `Contact ${idx + 1}`,
    value: `client-${idx}`,
    ...c,
  }));
  const newOpts = (contactFormData.value.contacts || []).map((c, idx) => ({
    label: `${c.firstName || ''} ${c.lastName || ''}`.trim() || `Contact ${idx + 1}`,
    value: `new-${idx}`,
    ...c,
  }));
  return [...clientOpts, ...newOpts];
});

function close() {
  emit('update:visible', false);
}
function create() {
  // Dummy create handler
  console.log('Create clicked', {
    contacts: contactFormData.value.contacts,
    addresses: addressFormData.value.addresses,
  });
  emit('created', {
    contacts: contactFormData.value.contacts,
    addresses: addressFormData.value.addresses,
  });
  close();
}
</script>

<style scoped>
.modal-title {
  font-size: 1.2rem;
  font-weight: 600;
}
.modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem 0;
}
</style>
