<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-plus</v-icon>
        <h2 class="text-h5 text-white font-weight-bold flex-grow-1">
          Add New Member
        </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">
              <PhoneInputWrapper
                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')"
                hint="Enter the actual date when dues were paid (can be historical)"
                persistent-hint
              />
            </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')"
                hint="Enter when payment is due (for new members in grace period)"
                persistent-hint
              />
            </v-col>

            <!-- Dues Status Preview -->
            <v-col cols="12" v-if="duesPaid && form['Membership Date Paid']">
              <v-card variant="tonal" :color="calculatedDuesStatus.color" class="pa-3">
                <div class="d-flex align-center">
                  <v-icon :color="calculatedDuesStatus.color" class="mr-2">
                    {{ calculatedDuesStatus.icon }}
                  </v-icon>
                  <div>
                    <div class="text-subtitle-2 font-weight-bold">
                      Calculated Dues Status: {{ calculatedDuesStatus.text }}
                    </div>
                    <div class="text-caption">
                      {{ calculatedDuesStatus.message }}
                    </div>
                  </div>
                </div>
              </v-card>
            </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-account-plus</v-icon>
          Add Member
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import type { Member } from '~/utils/types';
import { formatBooleanAsString } from '~/utils/client-utils';
import { isPaymentOverOneYear, isDuesActuallyCurrent, calculateOverdueDays } from '~/utils/dues-calculations';

interface Props {
  modelValue: boolean;
}

interface Emits {
  (e: 'update:model-value', value: boolean): void;
  (e: 'member-created', 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
const form = ref({
  'First Name': '',
  'Last Name': '',
  Email: '',
  Phone: '',
  'Date of Birth': '',
  Nationality: '',
  Address: '',
  'Membership Status': 'Active',
  'Member Since': new Date().toISOString().split('T')[0], // Today's date
  '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>>({});

// Computed dues status calculation
const calculatedDuesStatus = computed(() => {
  if (!duesPaid.value || !form.value['Membership Date Paid']) {
    return {
      color: 'grey',
      icon: 'mdi-help',
      text: 'Unknown',
      message: 'Please enter payment date to calculate status'
    };
  }

  // Create a mock member object with form data to use calculation functions
  const mockMember = {
    current_year_dues_paid: 'true',
    membership_date_paid: form.value['Membership Date Paid'],
    payment_due_date: form.value['Payment Due Date'],
    member_since: form.value['Member Since']
  } as Member;

  const isOverdue = !isDuesActuallyCurrent(mockMember);
  const paymentTooOld = isPaymentOverOneYear(mockMember);

  if (isOverdue && paymentTooOld) {
    const overdueDays = calculateOverdueDays(mockMember);
    return {
      color: 'error',
      icon: 'mdi-alert-circle',
      text: 'Overdue',
      message: `Payment is ${overdueDays} days overdue (more than 1 year since payment)`
    };
  } else if (isOverdue) {
    return {
      color: 'warning',
      icon: 'mdi-clock-alert',
      text: 'Due Soon',
      message: 'Dues will be due soon based on payment date'
    };
  } else {
    const paymentDate = new Date(form.value['Membership Date Paid']);
    const nextDue = new Date(paymentDate);
    nextDue.setFullYear(nextDue.getFullYear() + 1);
    const nextDueFormatted = nextDue.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
    
    return {
      color: 'success',
      icon: 'mdi-check-circle',
      text: 'Current',
      message: `Dues are current. Next payment due: ${nextDueFormatted}`
    };
  }
});

// Watch dues paid switch
watch(duesPaid, (newValue) => {
  form.value['Current Year Dues Paid'] = formatBooleanAsString(newValue);
  if (newValue) {
    form.value['Payment Due Date'] = '';
  } else {
    form.value['Membership Date Paid'] = '';
  }
});

// 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 submission
const handleSubmit = async () => {
  if (!formRef.value) return;

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

  loading.value = true;
  clearFieldErrors();

  try {
    // Debug: Log the current form state
    console.log('[AddMemberDialog] Form validation passed');
    console.log('[AddMemberDialog] Current form.value:', JSON.stringify(form.value, null, 2));
    console.log('[AddMemberDialog] Form keys:', Object.keys(form.value));
    console.log('[AddMemberDialog] duesPaid switch value:', duesPaid.value);
    
    // Get current form values
    const currentForm = unref(form);
    
    console.log('[AddMemberDialog] Unref form access test:');
    console.log('  - First Name:', currentForm['First Name']);
    console.log('  - Last Name:', currentForm['Last Name']);
    console.log('  - Email:', currentForm.Email);
    console.log('  - Phone:', currentForm.Phone);
    
    // Simple approach - send the form data as-is with display names
    // Let the server handle field normalization
    const memberData = {
      'First Name': currentForm['First Name']?.trim(),
      'Last Name': currentForm['Last Name']?.trim(),
      'Email': currentForm.Email?.trim(),
      'Phone': currentForm.Phone?.trim() || '',
      'Date of Birth': currentForm['Date of Birth'] || '',
      'Nationality': currentForm.Nationality?.trim() || '',
      'Address': currentForm.Address?.trim() || '',
      'Membership Status': currentForm['Membership Status'],
      'Member Since': currentForm['Member Since'] || '',
      'Current Year Dues Paid': currentForm['Current Year Dues Paid'],
      'Membership Date Paid': currentForm['Membership Date Paid'] || '',
      'Payment Due Date': currentForm['Payment Due Date'] || ''
    };
    
    // Ensure required fields are not empty
    if (!memberData['First Name']) {
      console.error('[AddMemberDialog] First Name is empty. Raw value:', currentForm['First Name']);
      throw new Error('First Name is required');
    }
    if (!memberData['Last Name']) {
      console.error('[AddMemberDialog] Last Name is empty. Raw value:', currentForm['Last Name']);
      throw new Error('Last Name is required');
    }
    if (!memberData['Email']) {
      console.error('[AddMemberDialog] Email is empty. Raw value:', currentForm.Email);
      throw new Error('Email is required');
    }

    console.log('[AddMemberDialog] Final memberData:', JSON.stringify(memberData, null, 2));
    console.log('[AddMemberDialog] About to submit to API...');

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

    if (response.success && response.data) {
      console.log('[AddMemberDialog] Member created successfully:', response.data);
      emit('member-created', response.data);
      closeDialog();
      resetForm();
    } else {
      throw new Error(response.message || 'Failed to create member');
    }
  } catch (error: any) {
    console.error('[AddMemberDialog] Error creating 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 create member. Please try again.'
      };
    }
  } finally {
    loading.value = false;
  }
};

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

const resetForm = () => {
  form.value = {
    'First Name': '',
    'Last Name': '',
    Email: '',
    Phone: '',
    'Date of Birth': '',
    Nationality: '',
    Address: '',
    'Membership Status': 'Active',
    'Member Since': new Date().toISOString().split('T')[0],
    'Current Year Dues Paid': 'false',
    'Membership Date Paid': '',
    'Payment Due Date': ''
  };
  duesPaid.value = false;
  phoneData.value = null;
  clearFieldErrors();
  
  // Reset form validation
  nextTick(() => {
    formRef.value?.resetValidation();
  });
};

// Watch for dialog open/close
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    // Dialog opened - reset form
    resetForm();
  }
});
</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>
