<template>
  <div class="demo-container">
    <v-card class="pa-6" elevation="2">
      <v-card-title class="text-h5 mb-4">
        🎨 New Professional Phone Input
      </v-card-title>
      
      <v-row>
        <v-col cols="12" md="6">
          <PhoneInputWrapper
            v-model="phoneNumber"
            label="Phone Number"
            placeholder="Enter your phone number"
            help-text="Monaco 🇲🇨 and France 🇫🇷 are prioritized at the top"
            @phone-data="handlePhoneData"
            @country-changed="handleCountryChange"
          />
        </v-col>
        
        <v-col cols="12" md="6">
          <v-card variant="outlined" class="pa-4">
            <v-card-title class="text-subtitle-1">Live Data:</v-card-title>
            <div class="mt-2">
              <p><strong>Phone:</strong> {{ phoneNumber }}</p>
              <p><strong>Valid:</strong> {{ phoneData?.isValid ? '✅' : '❌' }}</p>
              <p><strong>Country:</strong> {{ phoneData?.country?.name }} {{ getCountryFlag(phoneData?.country?.iso2) }}</p>
              <p><strong>Format:</strong> International</p>
            </div>
          </v-card>
        </v-col>
      </v-row>

      <v-alert type="success" variant="tonal" class="mt-4">
        <template #title>✨ Key Features:</template>
        <ul class="mt-2">
          <li><strong>Compact Dropdown:</strong> Max 240px height, professional styling</li>
          <li><strong>Monaco Priority:</strong> 🇲🇨 Monaco and 🇫🇷 France at the top</li>
          <li><strong>Real Flags:</strong> High-quality country flag icons</li>
          <li><strong>Auto-Validation:</strong> Built-in phone number validation</li>
          <li><strong>Smart Formatting:</strong> International format with country codes</li>
          <li><strong>Responsive:</strong> Mobile-optimized design</li>
        </ul>
      </v-alert>
    </v-card>
  </div>
</template>

<script setup lang="ts">
import PhoneInputWrapper from './PhoneInputWrapper.vue';

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

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

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

const getCountryFlag = (iso2: string | undefined) => {
  if (!iso2) return '';
  const flagMap: Record<string, string> = {
    'MC': '🇲🇨',
    'FR': '🇫🇷', 
    'US': '🇺🇸',
    'IT': '🇮🇹',
    'CH': '🇨🇭',
    'GB': '🇬🇧',
    'DE': '🇩🇪',
    'ES': '🇪🇸',
    'CA': '🇨🇦'
  };
  return flagMap[iso2.toUpperCase()] || '';
};
</script>

<style scoped>
.demo-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}
</style>
