<template>
  <v-dialog
    :model-value="modelValue"
    @update:model-value="$emit('update:model-value', $event)"
    max-width="900"
    persistent
    scrollable
  >
    <v-card>
      <v-card-title class="d-flex align-center pa-6 bg-primary">
        <v-icon class="mr-3 text-white">mdi-account-edit</v-icon>
        <h2 class="text-h5 text-white font-weight-bold flex-grow-1">
          Edit Member: {{ member?.FullName || `${member?.first_name} ${member?.last_name}` }}
        </h2>
        <v-btn
          icon
          variant="text"
          color="white"
          @click="closeDialog"
        >
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-card-title>

      <v-card-text class="pa-6">
        <v-form ref="formRef" v-model="formValid" @submit.prevent="handleSubmit">
          <v-row>
            <!-- Personal Information Section -->
            <v-col cols="12">
              <h3 class="text-h6 mb-4 text-primary">Personal Information</h3>
            </v-col>
            
            <v-col cols="12" md="6">
              <v-text-field
                v-model="form.first_name"
                label="First Name"
                variant="outlined"
                :rules="[rules.required]"
                required
                :error="hasFieldError('first_name')"
                :error-messages="getFieldError('first_name')"
              />
            </v-col>
            
            <v-col cols="12" md="6">
              <v-text-field
                v-model="form.last_name"
                label="Last Name"
                variant="outlined"
                :rules="[rules.required]"
                required
                :error="hasFieldError('last_name')"
                :error-messages="getFieldError('last_name')"
              />
            </v-col>
            
            <v-col cols="12" md="6">
              <v-text-field
                v-model="form.email"
                label="Email Address"
                type="email"
                variant="outlined"
                :rules="[rules.required, rules.email]"
                required
                :error="hasFieldError('email')"
                :error-messages="getFieldError('email')"
              />
            </v-col>
            
            <v-col cols="12" md="6">
              <EnhancedPhoneInput
                v-model="form.phone"
                label="Phone Number"
                placeholder="Enter phone number"
                :error="hasFieldError('phone')"
                :error-message="getFieldError('phone')"
                @phone-data="handlePhoneData"
              />
            </v-col>
            
            <v-col cols="12" md="6">
              <v-text-field
                v-model="form.date_of_birth"
                label="Date of Birth"
                type="date"
                variant="outlined"
                :error="hasFieldError('date_of_birth')"
                :error-messages="getFieldError('date_of_birth')"
              />
            </v-col>
            
            <v-col cols="12" md="6">
              <MultipleNationalityInput
                v-model="form.nationality"
                label="Nationality"
                :error="hasFieldError('nationality')"
                :error-message="getFieldError('nationality')"
                :max-nationalities="3"
              />
            </v-col>
            
            <v-col cols="12">
              <v-textarea
                v-model="form.address"
                label="Address"
                variant="outlined"
                rows="2"
                :error="hasFieldError('address')"
                :error-messages="getFieldError('address')"
              />
            </v-col>

            <!-- Membership Information Section -->
            <v-col cols="12">
              <v-divider class="my-4" />
              <h3 class="text-h6 mb-4 text-primary">Membership Information</h3>
            </v-col>
            
            <v-col cols="12" md="4">
              <v-select
                v-model="form.membership_status"
                :items="membershipStatusOptions"
                label="Membership Status"
                variant="outlined"
                :rules="[rules.required]"
                required
                :error="hasFieldError('membership_status')"
                :error-messages="getFieldError('membership_status')"
              />
            </v-col>
            
            <v-col cols="12" md="4">
              <v-text-field
                v-model="form.member_since"
                label="Member Since"
                type="date"
                variant="outlined"
                :error="hasFieldError('member_since')"
                :error-messages="getFieldError('member_since')"
              />
            </v-col>
            
            <v-col cols="12" md="4">
              <v-switch
                v-model="duesPaid"
                label="Current Year Dues Paid"
                color="success"
                inset
                :error="hasFieldError('current_year_dues_paid')"
                :error-messages="getFieldError('current_year_dues_paid')"
              />
            </v-col>
            
            <v-col cols="12" md="6" v-if="duesPaid">
              <v-text-field
                v-model="form.membership_date_paid"
                label="Payment Date"
                type="date"
                variant="outlined"
                :error="hasFieldError('membership_date_paid')"
                :error-messages="getFieldError('membership_date_paid')"
              />
            </v-col>
            
            <v-col cols="12" md="6" v-if="!duesPaid">
              <v-text-field
                v-model="form.payment_due_date"
                label="Payment Due Date"
                type="date"
                variant="outlined"
                :error="hasFieldError('payment_due_date')"
                :error-messages="getFieldError('payment_due_date')"
              />
            </v-col>
          </v-row>
        </v-form>
      </v-card-text>

      <v-card-actions class="pa-6 pt-0">
        <v-spacer />
        <v-btn
          variant="text"
          @click="closeDialog"
          :disabled="loading"
        >
          Cancel
        </v-btn>
        <v-btn
          color="primary"
          @click="handleSubmit"
          :loading="loading"
          :disabled="!formValid"
        >
          <v-icon start>mdi-content-save</v-icon>
          Save Changes
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import type { Member } from '~/utils/types';

interface Props {
  modelValue: boolean;
  member: Member | null;
}

interface Emits {
  (e: 'update:model-value', value: boolean): void;
  (e: 'member-updated', member: Member): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// Form state
const formRef = ref();
const formValid = ref(false);
const loading = ref(false);

// Form data - using snake_case field names
const form = ref({
  first_name: '',
  last_name: '',
  email: '',
  phone: '',
  date_of_birth: '',
  nationality: '',
  address: '',
  membership_status: 'Active',
  member_since: '',
  current_year_dues_paid: 'false',
  membership_date_paid: '',
  payment_due_date: ''
});

// Additional form state
const duesPaid = ref(false);
const phoneData = ref(null);

// Error handling
const fieldErrors = ref<Record<string, string>>({});

// Watch dues paid switch
watch(duesPaid, (newValue) => {
  form.value.current_year_dues_paid = newValue ? 'true' : 'false';
  if (newValue) {
    form.value.payment_due_date = '';
    if (!form.value.membership_date_paid) {
      form.value.membership_date_paid = new Date().toISOString().split('T')[0];
    }
  } else {
    form.value.membership_date_paid = '';
    if (!form.value.payment_due_date) {
      // Set due date to one year from member since date or today
      const memberSince = form.value.member_since || new Date().toISOString().split('T')[0];
      const dueDate = new Date(memberSince);
      dueDate.setFullYear(dueDate.getFullYear() + 1);
      form.value.payment_due_date = dueDate.toISOString().split('T')[0];
    }
  }
});

// Membership status options
const membershipStatusOptions = [
  { title: 'Active', value: 'Active' },
  { title: 'Inactive', value: 'Inactive' },
  { title: 'Pending', value: 'Pending' },
  { title: 'Expired', value: 'Expired' }
];

// Validation rules
const rules = {
  required: (value: any) => {
    if (typeof value === 'string') {
      return !!value?.trim() || 'This field is required';
    }
    return !!value || 'This field is required';
  },
  email: (value: string) => {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return !value || pattern.test(value) || 'Please enter a valid email address';
  }
};

// Error handling methods
const hasFieldError = (fieldName: string) => {
  return !!fieldErrors.value[fieldName];
};

const getFieldError = (fieldName: string) => {
  return fieldErrors.value[fieldName] || '';
};

const clearFieldErrors = () => {
  fieldErrors.value = {};
};

// Phone data handler
const handlePhoneData = (data: any) => {
  phoneData.value = data;
};

// Form pre-population - Updated to use snake_case field names
const populateForm = () => {
  if (!props.member) return;
  
  console.log('[EditMemberDialog] Populating form with member data:', props.member);
  
  const member = props.member;
  
  // Convert date fields to proper format for input[type="date"]
  const formatDateForInput = (dateString: string) => {
    if (!dateString) return '';
    try {
      const date = new Date(dateString);
      return date.toISOString().split('T')[0];
    } catch {
      return dateString;
    }
  };
  
  form.value = {
    first_name: member.first_name || '',
    last_name: member.last_name || '',
    email: member.email || '',
    phone: member.phone || '',
    date_of_birth: formatDateForInput(member.date_of_birth || ''),
    nationality: member.nationality || '',
    address: member.address || '',
    membership_status: member.membership_status || 'Active',
    member_since: formatDateForInput(member.member_since || ''),
    current_year_dues_paid: member.current_year_dues_paid || 'false',
    membership_date_paid: formatDateForInput(member.membership_date_paid || ''),
    payment_due_date: formatDateForInput(member.payment_due_date || '')
  };
  
  // Set dues paid switch based on the string value
  duesPaid.value = member.current_year_dues_paid === 'true';
  
  console.log('[EditMemberDialog] Form populated:', form.value);
};

// Form submission
const handleSubmit = async () => {
  if (!formRef.value || !props.member) return;

  const isValid = await formRef.value.validate();
  if (!isValid.valid) {
    return;
  }

  loading.value = true;
  clearFieldErrors();

  try {
    // Prepare the data for submission
    const memberData = { ...form.value };
    
    // Ensure required fields are not empty
    if (!memberData.first_name?.trim()) {
      throw new Error('First Name is required');
    }
    if (!memberData.last_name?.trim()) {
      throw new Error('Last Name is required');
    }
    if (!memberData.email?.trim()) {
      throw new Error('Email is required');
    }

    console.log('[EditMemberDialog] Updating member data:', memberData);

    const response = await $fetch<{ success: boolean; data: Member; message?: string }>(`/api/members/${props.member.Id}`, {
      method: 'PUT',
      body: memberData
    });

    if (response.success && response.data) {
      console.log('[EditMemberDialog] Member updated successfully:', response.data);
      emit('member-updated', response.data);
      closeDialog();
    } else {
      throw new Error(response.message || 'Failed to update member');
    }
  } catch (error: any) {
    console.error('[EditMemberDialog] Error updating member:', error);
    
    // Handle validation errors
    if (error.data?.fieldErrors) {
      fieldErrors.value = error.data.fieldErrors;
    } else {
      // Show general error
      fieldErrors.value = {
        general: error.message || 'Failed to update member. Please try again.'
      };
    }
  } finally {
    loading.value = false;
  }
};

// Dialog management
const closeDialog = () => {
  emit('update:model-value', false);
};

// Watch for dialog open/close and member changes
watch(() => props.modelValue, (newValue) => {
  if (newValue && props.member) {
    // Dialog opened - populate form with member data
    populateForm();
    clearFieldErrors();
    
    // Reset form validation
    nextTick(() => {
      formRef.value?.resetValidation();
    });
  }
});

watch(() => props.member, (newMember) => {
  if (newMember && props.modelValue) {
    // Member changed while dialog is open
    populateForm();
  }
});
</script>

<style scoped>
.bg-primary {
  background: linear-gradient(135deg, #a31515 0%, #d32f2f 100%) !important;
}

.text-primary {
  color: #a31515 !important;
}

.v-card {
  border-radius: 12px !important;
}

/* Form section spacing */
.v-card-text .v-row .v-col:first-child h3 {
  border-bottom: 2px solid rgba(var(--v-theme-primary), 0.12);
  padding-bottom: 8px;
}

/* Error message styling */
.field-error {
  color: rgb(var(--v-theme-error));
  font-size: 0.75rem;
  margin-top: 4px;
}

/* Switch styling */
.v-switch {
  flex: none;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .v-dialog {
    margin: 16px;
  }
}

@media (max-width: 600px) {
  .v-card-title {
    padding: 16px !important;
  }
  
  .v-card-text {
    padding: 16px !important;
  }
  
  .v-card-actions {
    padding: 16px !important;
    padding-top: 0 !important;
  }
}
</style>
