<template>
  <div class="test-page">
    <v-container>
      <v-row justify="center">
        <v-col cols="12" md="8" lg="6">
          <v-card class="pa-6">
            <v-card-title>
              📱 Phone Input Test
            </v-card-title>
            
            <v-card-text>
              <PhoneInputWrapper
                v-model="phoneNumber"
                label="Test Phone Number"
                placeholder="Click the flag dropdown to test"
                help-text="The dropdown should open when you click the flag area"
                @phone-data="handlePhoneData"
                @country-changed="handleCountryChange"
              />
              
              <v-alert type="info" class="mt-4" v-if="phoneData">
                <strong>Phone Data:</strong><br>
                Number: {{ phoneData.number }}<br>
                Valid: {{ phoneData.isValid ? 'Yes' : 'No' }}<br>
                Country: {{ phoneData.country.name }} ({{ phoneData.country.iso2 }})<br>
                Dial Code: {{ phoneData.country.dialCode }}
              </v-alert>
              
              <div class="mt-4">
                <v-btn @click="testNumber" variant="outlined" color="primary" size="small" class="mr-2">
                  Test US Number
                </v-btn>
                <v-btn @click="resetNumber" variant="outlined" size="small">
                  Reset
                </v-btn>
              </div>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
interface PhoneData {
  number: string;
  isValid: boolean;
  country: {
    name: string;
    iso2: string;
    dialCode: string;
  };
}

const phoneNumber = ref('');
const phoneData = ref<PhoneData | null>(null);

const handlePhoneData = (data: PhoneData) => {
  phoneData.value = data;
  console.log('Phone data updated:', data);
};

const handleCountryChange = (country: any) => {
  console.log('Country changed:', country);
};

const testNumber = () => {
  phoneNumber.value = '+19179324061';
};

const resetNumber = () => {
  phoneNumber.value = '';
  phoneData.value = null;
};

definePageMeta({
  layout: 'dashboard',
  middleware: 'auth'
});
</script>

<style scoped>
.test-page {
  padding: 20px 0;
}
</style>
