<template>
  <div class="signup-container">
    <v-container fluid class="fill-height">
      <v-row class="fill-height" justify="center" align="center">
        <v-col cols="12" sm="10" md="8" lg="6" xl="5">
          <v-card class="signup-card" elevation="24" :loading="loading">
            <v-card-text class="pa-8">
              <!-- Logo and Welcome -->
              <div class="text-center mb-6">
                <v-img 
                  src="/MONACOUSA-Flags_376x376.png" 
                  width="80" 
                  height="80"
                  class="mx-auto mb-3" 
                  alt="MonacoUSA Logo"
                />
                <h1 class="text-h4 font-weight-bold mb-2" style="color: #a31515;">
                  Join MonacoUSA
                </h1>
                <p class="text-body-1 text-medium-emphasis">
                  Register as a member of MonacoUSA Association
                </p>
              </div>
              
              <!-- Registration Form -->
              <v-form ref="form" v-model="valid" @submit.prevent="submitRegistration">
                <v-row>
                  <v-col cols="12" sm="6">
                    <v-text-field
                      v-model="form.first_name"
                      name="firstName"
                      autocomplete="given-name"
                      label="First Name"
                      :rules="nameRules"
                      prepend-inner-icon="mdi-account"
                      variant="outlined"
                      :disabled="loading"
                      required
                      @update:model-value="updateField('first_name', $event)"
                    />
                  </v-col>
                  <v-col cols="12" sm="6">
                    <v-text-field
                      v-model="form.last_name"
                      name="lastName"
                      autocomplete="family-name"
                      label="Last Name"
                      :rules="nameRules"
                      variant="outlined"
                      :disabled="loading"
                      required
                      @update:model-value="updateField('last_name', $event)"
                    />
                  </v-col>
                </v-row>

                <v-text-field
                  v-model="form.email"
                  name="email"
                  autocomplete="email"
                  label="Email Address"
                  type="email"
                  :rules="emailRules"
                  prepend-inner-icon="mdi-email"
                  variant="outlined"
                  :disabled="loading"
                  required
                  @update:model-value="updateField('email', $event)"
                />

                <PhoneInputWrapper 
                  v-model="form.phone"
                  label="Phone Number"
                  :rules="phoneRules"
                  :disabled="loading"
                  required
                />

                <v-text-field
                  v-model="form.date_of_birth"
                  label="Date of Birth"
                  type="date"
                  :rules="dobRules"
                  prepend-inner-icon="mdi-calendar"
                  variant="outlined"
                  :disabled="loading"
                  required
                />

                <v-textarea
                  v-model="form.address"
                  name="address"
                  autocomplete="street-address"
                  label="Address"
                  :rules="addressRules"
                  prepend-inner-icon="mdi-map-marker"
                  variant="outlined"
                  rows="3"
                  :disabled="loading"
                  required
                  @update:model-value="updateField('address', $event)"
                />

                <MultipleNationalityInput 
                  v-model="form.nationality"
                  label="Nationality"
                  :rules="nationalityRules"
                  :disabled="loading"
                  required
                />

                <!-- reCAPTCHA -->
                <div class="d-flex justify-center my-4">
                  <vue-recaptcha
                    v-if="recaptchaConfig.siteKey"
                    ref="recaptcha"
                    :sitekey="recaptchaConfig.siteKey"
                    @verify="onRecaptchaVerified"
                    @expired="onRecaptchaExpired"
                  />
                  <v-alert 
                    v-else
                    type="warning"
                    variant="outlined"
                    class="text-body-2"
                  >
                    reCAPTCHA not configured. Please contact administrator.
                  </v-alert>
                </div>

                <!-- Error Alert -->
                <v-alert
                  v-if="errorMessage"
                  type="error"
                  variant="tonal"
                  class="mb-4"
                  closable
                  @click:close="errorMessage = ''"
                >
                  <v-alert-title>Registration Failed</v-alert-title>
                  {{ errorMessage }}
                </v-alert>

                <!-- Success Alert -->
                <v-alert
                  v-if="successMessage"
                  type="success"
                  variant="tonal"
                  class="mb-4"
                >
                  <v-alert-title>Registration Successful!</v-alert-title>
                  {{ successMessage }}
                </v-alert>

                <v-btn
                  type="submit"
                  color="primary"
                  size="large"
                  block
                  :disabled="!valid || !recaptchaToken || loading"
                  :loading="loading"
                  class="mb-4"
                  style="background-color: #a31515 !important; color: white !important;"
                >
                  <v-icon left>mdi-account-plus</v-icon>
                  Register
                </v-btn>
              </v-form>

              <!-- Payment Information -->
              <v-divider class="my-6" />
              <div class="payment-info">
                <div class="d-flex align-center mb-4">
                  <v-icon color="#a31515" class="mr-2">mdi-bank</v-icon>
                  <h3 class="text-h6" style="color: #a31515;">Membership Dues Payment</h3>
                </div>
                
                <div class="payment-details" style="color: #000 !important;">
                  <p class="text-body-1 mb-3" style="color: #000 !important;">
                    After registration, please transfer your annual membership dues:
                  </p>
                  
                  <v-row dense class="mb-2">
                    <v-col cols="4">
                      <span class="text-body-2 font-weight-bold" style="color: #000 !important;">Amount:</span>
                    </v-col>
                    <v-col cols="8">
                      <span class="text-body-2" style="color: #000 !important;">€{{ registrationConfig.membershipFee }}/year</span>
                    </v-col>
                  </v-row>
                  
                  <v-row dense class="mb-2" v-if="registrationConfig.iban">
                    <v-col cols="4">
                      <span class="text-body-2 font-weight-bold" style="color: #000 !important;">IBAN:</span>
                    </v-col>
                    <v-col cols="8">
                      <span class="text-body-2 font-family-monospace" style="color: #000 !important;">{{ registrationConfig.iban }}</span>
                    </v-col>
                  </v-row>
                  
                  <v-row dense class="mb-2" v-if="registrationConfig.accountHolder">
                    <v-col cols="4">
                      <span class="text-body-2 font-weight-bold" style="color: #000 !important;">Account:</span>
                    </v-col>
                    <v-col cols="8">
                      <span class="text-body-2" style="color: #000 !important;">{{ registrationConfig.accountHolder }}</span>
                    </v-col>
                  </v-row>

                  <v-divider class="my-3" />
                  
                  <div class="text-body-2 d-flex align-center" style="color: #666 !important;">
                    <v-icon size="small" class="mr-2" color="#666">mdi-information</v-icon>
                    Your account will be activated once payment is verified by our administrators.
                  </div>
                </div>
              </div>
              
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
import type { RegistrationFormData, RecaptchaConfig, RegistrationConfig } from '~/utils/types';

// Page metadata
definePageMeta({
  layout: false,
  middleware: 'guest'
});

// Head configuration
useHead({
  title: 'Register - MonacoUSA Portal',
  meta: [
    { name: 'description', content: 'Register to become a member of MonacoUSA Association' },
    { name: 'robots', content: 'noindex, nofollow' }
  ]
});

// Reactive data
const form = ref<Omit<RegistrationFormData, 'recaptcha_token'>>({
  first_name: '',
  last_name: '',
  email: '',
  phone: '',
  date_of_birth: '',
  address: '',
  nationality: ''
});

const valid = ref(false);
const loading = ref(false);
const recaptchaToken = ref('');
const successMessage = ref('');
const errorMessage = ref('');

// Configs
const recaptchaConfig = ref<RecaptchaConfig>({ siteKey: '', secretKey: '' });
const registrationConfig = ref<RegistrationConfig>({
  membershipFee: 50,
  iban: '',
  accountHolder: ''
});

// Form validation rules
const nameRules = [
  (v: string) => !!v || 'Name is required',
  (v: string) => v.length >= 2 || 'Name must be at least 2 characters'
];

const emailRules = [
  (v: string) => !!v || 'Email is required',
  (v: string) => /.+@.+\..+/.test(v) || 'Email must be valid'
];

const phoneRules = [
  (v: string) => !!v || 'Phone number is required'
];

const dobRules = [
  (v: string) => !!v || 'Date of birth is required',
  (v: string) => {
    if (!v) return true;
    const birthDate = new Date(v);
    const today = new Date();
    const age = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();
    
    let actualAge = age;
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
      actualAge = age - 1;
    }
    
    return actualAge >= 18 || 'You must be at least 18 years old';
  }
];

const addressRules = [
  (v: string) => !!v || 'Address is required',
  (v: string) => v.length >= 10 || 'Please provide a complete address'
];

const nationalityRules = [
  (v: string) => !!v || 'Nationality is required'
];

// reCAPTCHA handling
function onRecaptchaVerified(token: string) {
  recaptchaToken.value = token;
}

function onRecaptchaExpired() {
  recaptchaToken.value = '';
}

// Template refs
const recaptcha = ref<any>(null);

// Helper function to handle form field updates (prevents autocomplete conflicts)
const updateField = (fieldName: keyof typeof form.value, value: string) => {
  form.value[fieldName] = value;
};

// Form submission
async function submitRegistration() {
  if (!valid.value || !recaptchaToken.value) {
    return;
  }

  loading.value = true;
  errorMessage.value = '';
  successMessage.value = '';

  try {
    const registrationData: RegistrationFormData = {
      ...form.value,
      recaptcha_token: recaptchaToken.value
    };

    const response = await $fetch('/api/registration', {
      method: 'POST',
      body: registrationData
    }) as any;

    if (response?.success) {
      successMessage.value = response.message || 'Registration successful!';
      // Reset form
      form.value = {
        first_name: '',
        last_name: '',
        email: '',
        phone: '',
        date_of_birth: '',
        address: '',
        nationality: ''
      };
      recaptchaToken.value = '';
      // Reset reCAPTCHA
      recaptcha.value?.reset();
    }

  } catch (error: any) {
    console.error('Registration failed:', error);
    errorMessage.value = error.data?.message || error.message || 'Registration failed. Please try again.';
    
    // Reset reCAPTCHA on error
    recaptchaToken.value = '';
    recaptcha.value?.reset();
  } finally {
    loading.value = false;
  }
}

// Load configurations on mount
onMounted(async () => {
  try {
    // Load reCAPTCHA config (public endpoint)
    const recaptchaResponse = await $fetch('/api/admin/recaptcha-config') as any;
    if (recaptchaResponse?.success && recaptchaResponse?.data?.siteKey) {
      recaptchaConfig.value.siteKey = recaptchaResponse.data.siteKey;
    }

    // Load registration config (public endpoint)
    const registrationResponse = await $fetch('/api/admin/registration-config') as any;
    if (registrationResponse?.success) {
      registrationConfig.value = registrationResponse.data;
    }
  } catch (error) {
    console.warn('Failed to load configuration:', error);
    // Page will still work with default values
  }
});
</script>

<style scoped>
.signup-container {
  min-height: 100vh;
  background: linear-gradient(rgba(163, 21, 21, 0.7), rgba(0, 0, 0, 0.5)),
              url('/monaco_high_res.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Prevent overscroll bounce on mobile Safari */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

/* Fix for mobile Safari overscroll */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: hidden;
}

/* Safari-specific fixes */
@supports (-webkit-touch-callout: none) {
  .signup-container {
    background-attachment: scroll;
    position: fixed;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ensure background extends beyond viewport */
  .signup-container::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    bottom: -100px;
    background: linear-gradient(rgba(163, 21, 21, 0.7), rgba(0, 0, 0, 0.5)),
                url('/monaco_high_res.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
  }
}

.signup-card {
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease;
  max-width: 600px;
  width: 100%;
}

.signup-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

.payment-info {
  background: rgba(163, 21, 21, 0.05);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(163, 21, 21, 0.1);
}

.payment-details * {
  color: #000 !important;
}

/* Custom scrollbar for mobile */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(163, 21, 21, 0.5);
  border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .signup-container {
    background-attachment: scroll;
    padding: 16px;
  }
  
  .signup-card {
    margin: 0;
  }
}

/* Loading state styles */
.v-btn--loading {
  pointer-events: none;
}

/* Form field focus styles */
.v-field--focused {
  border-color: #a31515 !important;
}

.v-field--focused .v-field__outline {
  border-color: #a31515 !important;
}

/* Ensure PhoneInputWrapper and MultipleNationalityInput align properly */
:deep(.v-field) {
  width: 100%;
}

:deep(.v-input) {
  width: 100%;
}

:deep(.v-text-field) {
  width: 100%;
}
</style>
