<template>
  <div class="phone-input-wrapper">
    <v-text-field
      v-model="localNumber"
      :label="label"
      :placeholder="placeholder"
      :error="error"
      :error-messages="errorMessage"
      :hint="helpText"
      :persistent-hint="!!helpText"
      :required="required"
      :disabled="disabled"
      variant="outlined"
      density="comfortable"
      @input="handleInput"
      @blur="handleBlur"
    >
      <template #prepend-inner>
        <!-- Country Selector -->
        <v-menu
          v-model="dropdownOpen"
          :close-on-content-click="false"
          location="bottom"
          offset="4"
          max-height="300"
        >
          <template #activator="{ props: menuProps }">
            <div
              v-bind="menuProps"
              class="country-selector"
              :class="{ 'country-selector--open': dropdownOpen }"
              @click="toggleDropdown"
            >
              <img
                :src="flagUrl"
                :alt="`${selectedCountry.name} flag`"
                class="country-flag"
                @error="handleFlagError"
              />
              <span class="country-code">{{ selectedCountry.dialCode }}</span>
              <v-icon
                size="16"
                class="dropdown-icon"
                :class="{ 'dropdown-icon--rotated': dropdownOpen }"
              >
                mdi-chevron-down
              </v-icon>
            </div>
          </template>

          <!-- Dropdown Content -->
          <v-card class="country-dropdown" elevation="8">
            <!-- Search Bar -->
            <div class="search-container">
              <v-text-field
                v-model="searchQuery"
                placeholder="Search countries..."
                variant="outlined"
                density="compact"
                prepend-inner-icon="mdi-magnify"
                hide-details
                class="search-input"
                autofocus
              />
            </div>

            <!-- Country List -->
            <v-list class="country-list" density="compact">
              <v-list-item
                v-for="country in filteredCountries"
                :key="country.iso2"
                :class="{
                  'country-item': true,
                  'country-item--selected': country.iso2 === selectedCountry.iso2,
                  'country-item--preferred': isPreferredCountry(country.iso2)
                }"
                @click="selectCountry(country)"
              >
                <template #prepend>
                  <img
                    :src="getCountryFlagUrl(country.iso2)"
                    :alt="`${country.name} flag`"
                    class="list-flag"
                    @error="handleFlagError"
                  />
                </template>

                <v-list-item-title class="country-name">
                  {{ country.name }}
                </v-list-item-title>

                <template #append>
                  <span class="dial-code">{{ country.dialCode }}</span>
                </template>
              </v-list-item>
            </v-list>
          </v-card>
        </v-menu>
      </template>
    </v-text-field>
  </div>
</template>

<script setup lang="ts">
import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';

interface Country {
  name: string;
  iso2: string;
  dialCode: string;
}

interface Props {
  modelValue?: string;
  label?: string;
  placeholder?: string;
  error?: boolean;
  errorMessage?: string;
  helpText?: string;
  required?: boolean;
  disabled?: boolean;
  defaultCountry?: string;
  preferredCountries?: string[];
}

interface Emits {
  (e: 'update:modelValue', value: string): void;
  (e: 'country-changed', country: Country): void;
  (e: 'phone-data', data: { number: string; isValid: boolean; country: Country }): void;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  placeholder: 'Phone number',
  error: false,
  required: false,
  disabled: false,
  defaultCountry: 'MC',
  preferredCountries: () => ['MC', 'FR', 'US', 'IT', 'CH']
});

const emit = defineEmits<Emits>();

// Countries data - comprehensive list
const countries: Country[] = [
  { name: 'Monaco', iso2: 'MC', dialCode: '+377' },
  { name: 'France', iso2: 'FR', dialCode: '+33' },
  { name: 'United States', iso2: 'US', dialCode: '+1' },
  { name: 'Italy', iso2: 'IT', dialCode: '+39' },
  { name: 'Switzerland', iso2: 'CH', dialCode: '+41' },
  { name: 'United Kingdom', iso2: 'GB', dialCode: '+44' },
  { name: 'Germany', iso2: 'DE', dialCode: '+49' },
  { name: 'Spain', iso2: 'ES', dialCode: '+34' },
  { name: 'Canada', iso2: 'CA', dialCode: '+1' },
  { name: 'Australia', iso2: 'AU', dialCode: '+61' },
  { name: 'Netherlands', iso2: 'NL', dialCode: '+31' },
  { name: 'Belgium', iso2: 'BE', dialCode: '+32' },
  { name: 'Portugal', iso2: 'PT', dialCode: '+351' },
  { name: 'Austria', iso2: 'AT', dialCode: '+43' },
  { name: 'Sweden', iso2: 'SE', dialCode: '+46' },
  { name: 'Norway', iso2: 'NO', dialCode: '+47' },
  { name: 'Denmark', iso2: 'DK', dialCode: '+45' },
  { name: 'Finland', iso2: 'FI', dialCode: '+358' },
  { name: 'Ireland', iso2: 'IE', dialCode: '+353' },
  { name: 'Luxembourg', iso2: 'LU', dialCode: '+352' },
  { name: 'Japan', iso2: 'JP', dialCode: '+81' },
  { name: 'South Korea', iso2: 'KR', dialCode: '+82' },
  { name: 'Singapore', iso2: 'SG', dialCode: '+65' },
  { name: 'Hong Kong', iso2: 'HK', dialCode: '+852' },
  { name: 'New Zealand', iso2: 'NZ', dialCode: '+64' },
  { name: 'Brazil', iso2: 'BR', dialCode: '+55' },
  { name: 'Mexico', iso2: 'MX', dialCode: '+52' },
  { name: 'Argentina', iso2: 'AR', dialCode: '+54' },
  { name: 'Chile', iso2: 'CL', dialCode: '+56' },
  { name: 'South Africa', iso2: 'ZA', dialCode: '+27' }
];

// Reactive state
const dropdownOpen = ref(false);
const searchQuery = ref('');
const localNumber = ref('');
const selectedCountry = ref<Country>(
  countries.find(c => c.iso2 === props.defaultCountry) || countries[0]
);

// Computed
const flagUrl = computed(() => getCountryFlagUrl(selectedCountry.value.iso2));

const filteredCountries = computed(() => {
  if (!searchQuery.value) {
    // Show preferred countries first, then alphabetical
    const preferred = countries.filter(c => isPreferredCountry(c.iso2));
    const others = countries.filter(c => !isPreferredCountry(c.iso2));
    return [...preferred, ...others];
  }

  const query = searchQuery.value.toLowerCase();
  return countries.filter(country =>
    country.name.toLowerCase().includes(query) ||
    country.dialCode.includes(query) ||
    country.iso2.toLowerCase().includes(query)
  );
});

// Methods
const getCountryFlagUrl = (iso2: string) => {
  return `https://flagcdn.com/24x18/${iso2.toLowerCase()}.png`;
};

const isPreferredCountry = (iso2: string) => {
  return props.preferredCountries.includes(iso2);
};

const toggleDropdown = () => {
  if (!props.disabled) {
    dropdownOpen.value = !dropdownOpen.value;
    if (dropdownOpen.value) {
      searchQuery.value = '';
    }
  }
};

const selectCountry = (country: Country) => {
  selectedCountry.value = country;
  dropdownOpen.value = false;
  emit('country-changed', country);
  
  // Reformat existing number with new country
  if (localNumber.value) {
    handleInput();
  }
};

const handleInput = () => {
  const rawInput = localNumber.value;
  
  // Create full international number
  const fullNumber = selectedCountry.value.dialCode + rawInput.replace(/\D/g, '');
  
  try {
    // Parse and validate
    const phoneNumber = parsePhoneNumber(fullNumber);
    const isValid = phoneNumber?.isValid() || false;
    
    // Format for display (national format)
    if (phoneNumber && isValid) {
      const formatter = new AsYouType(selectedCountry.value.iso2 as any);
      const formatted = formatter.input(rawInput);
      localNumber.value = formatted;
    }
    
    // Emit data
    emit('update:modelValue', fullNumber);
    emit('phone-data', {
      number: fullNumber,
      isValid,
      country: selectedCountry.value
    });
    
  } catch (error) {
    // Handle invalid numbers gracefully
    emit('update:modelValue', fullNumber);
    emit('phone-data', {
      number: fullNumber,
      isValid: false,
      country: selectedCountry.value
    });
  }
};

const handleBlur = () => {
  // Additional formatting on blur if needed
};

const handleFlagError = (event: Event) => {
  // Fallback to a default flag or hide image
  const img = event.target as HTMLImageElement;
  img.style.display = 'none';
};

// Initialize from modelValue
watch(() => props.modelValue, (newValue) => {
  if (newValue && newValue !== selectedCountry.value.dialCode + localNumber.value.replace(/\D/g, '')) {
    try {
      const phoneNumber = parsePhoneNumber(newValue);
      if (phoneNumber) {
        // Find matching country
        const matchingCountry = countries.find(c => 
          c.dialCode === '+' + phoneNumber.countryCallingCode
        );
        
        if (matchingCountry) {
          selectedCountry.value = matchingCountry;
        }
        
        // Set local number (national format)
        localNumber.value = phoneNumber.formatNational().replace(phoneNumber.countryCallingCode, '').trim();
      }
    } catch (error) {
      // Handle invalid initial value
      localNumber.value = newValue;
    }
  }
}, { immediate: true });
</script>

<style scoped>
.phone-input-wrapper {
  width: 100%;
}

.country-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(var(--v-theme-surface), 1);
  border: 1px solid transparent;
  margin-right: 8px;
}

.country-selector:hover {
  background: rgba(var(--v-theme-primary), 0.08);
  border-color: rgba(var(--v-theme-primary), 0.24);
}

.country-selector--open {
  background: rgba(var(--v-theme-primary), 0.12);
  border-color: rgba(var(--v-theme-primary), 0.48);
}

.country-flag {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

.country-code {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  min-width: 32px;
}

.dropdown-icon {
  transition: transform 0.2s ease;
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}

.dropdown-icon--rotated {
  transform: rotate(180deg);
}

/* Dropdown Styling */
.country-dropdown {
  min-width: 280px;
  max-width: 320px;
  border-radius: 8px;
  overflow: hidden;
}

.search-container {
  padding: 12px;
  border-bottom: 1px solid rgba(var(--v-theme-outline), 0.12);
  background: rgba(var(--v-theme-surface), 1);
}

.search-input :deep(.v-field) {
  background: rgba(var(--v-theme-surface), 1);
}

/* Country List */
.country-list {
  max-height: 240px;
  overflow-y: auto;
  background: rgba(var(--v-theme-surface), 1);
}

.country-list::-webkit-scrollbar {
  width: 6px;
}

.country-list::-webkit-scrollbar-track {
  background: transparent;
}

.country-list::-webkit-scrollbar-thumb {
  background: rgba(var(--v-theme-primary), 0.3);
  border-radius: 3px;
}

.country-item {
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.country-item:hover {
  background: rgba(var(--v-theme-primary), 0.08) !important;
}

.country-item--selected {
  background: rgba(var(--v-theme-primary), 0.12) !important;
  border-left-color: rgb(var(--v-theme-primary));
  font-weight: 600;
}

.country-item--preferred {
  background: rgba(var(--v-theme-primary), 0.04);
  font-weight: 500;
}

.list-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.country-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.dial-code {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
  font-family: 'Roboto Mono', monospace;
}

/* Responsive */
@media (max-width: 768px) {
  .country-dropdown {
    min-width: 260px;
    max-width: 300px;
  }
  
  .country-list {
    max-height: 200px;
  }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .country-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}
</style>
