<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')"
              />
            </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-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 '~/server/utils/nocodb';

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>>({});

// Watch dues paid switch
watch(duesPaid, (newValue) => {
  form.value['Current Year Dues Paid'] = formatBooleanAsString(newValue);
  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 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);
    
    // Transform field names to match server expectations (snake_case)
    const memberData = {
      first_name: form.value['First Name']?.trim(),
      last_name: form.value['Last Name']?.trim(), 
      email: form.value.Email?.trim(),
      phone: form.value.Phone?.trim() || null,
      date_of_birth: form.value['Date of Birth'] || null,
      nationality: form.value.Nationality?.trim() || null,
      address: form.value.Address?.trim() || null,
      membership_status: form.value['Membership Status'],
      member_since: form.value['Member Since'] || null,
      current_year_dues_paid: form.value['Current Year Dues Paid'],
      membership_date_paid: form.value['Membership Date Paid'] || null,
      payment_due_date: form.value['Payment Due Date'] || null
    };

    console.log('[AddMemberDialog] Field access test:');
    console.log('  - First Name:', form.value['First Name']);
    console.log('  - Last Name:', form.value['Last Name']);
    console.log('  - Email:', form.value.Email);
    console.log('  - Phone:', form.value.Phone);
    
    // Ensure required fields are not empty
    if (!memberData.first_name) {
      console.error('[AddMemberDialog] First Name is empty. Raw value:', form.value['First Name']);
      throw new Error('First Name is required');
    }
    if (!memberData.last_name) {
      console.error('[AddMemberDialog] Last Name is empty. Raw value:', form.value['Last Name']);
      throw new Error('Last Name is required');
    }
    if (!memberData.email) {
      console.error('[AddMemberDialog] Email is empty. Raw value:', form.value.Email);
      throw new Error('Email is required');
    }

    console.log('[AddMemberDialog] Transformed 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>
