import re

with open('src/views/TaxiView.vue', 'r', encoding='utf-8') as f:
    text = f.read()

# Just extract the content using regex
template_match = re.search(r'<template>(.*?)</template>\s*<style', text, re.DOTALL)
if template_match:
    template_content = template_match.group(1)
    
    # Split by tabs
    tab1_match = re.search(r'<!-- TAB 1: LOCAL TAXIS -->(.*?)<!-- TAB 2: INTERCITY SHUTTLES -->', template_content, re.DOTALL)
    tab2_match = re.search(r'<!-- TAB 2: INTERCITY SHUTTLES -->(.*?)</div>\s*$', template_content, re.DOTALL)
    
    if tab1_match and tab2_match:
        tab1_code = tab1_match.group(1)
        tab2_code = tab2_match.group(1)
        
        # Clean up the `<template v-if="currentTab === 'local'">` wrapper
        tab1_code = re.sub(r'<template v-if="currentTab === \'local\'">', '', tab1_code)
        tab1_code = re.sub(r'</template>\s*$', '', tab1_code.strip())
        
        tab2_code = re.sub(r'<template v-else>', '', tab2_code)
        tab2_code = re.sub(r'</template>\s*$', '', tab2_code.strip())

        # Read style
        style_match = re.search(r'<style scoped>(.*?)</style>', text, re.DOTALL)
        style_content = style_match.group(1) if style_match else ""
        
        # Create TaxisLocales.vue
        taxis_script = """<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { useTaxiStore } from '@/stores/taxi'
import { analyticsService } from '@/services/analyticsService'
import type { Taxi } from '@/types'
import FavoriteButton from '@/components/FavoriteButton.vue'
import { getImageUrl } from '@/utils/imageUrl'

const { t } = useI18n()
const taxiStore = useTaxiStore()
const router = useRouter()

const selectedZone = ref('all')
const selectedShift = ref('all')
const onlyEnglish = ref(false)

const corregimientos = ['all', 'Boquete', 'David - Boquete', 'Boquete - David', 'Aeropuerto - Boquete']
const shifts = ['all', 'dia', 'tarde', 'noche']

onMounted(async () => {
    analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'TaxisLocales' })
    if(taxiStore.taxis.length === 0) {
        await taxiStore.loadTaxis()
    }
})

const filteredTaxis = computed(() => {
  return taxiStore.taxis.filter(taxi => {
    const matchesZone = selectedZone.value === 'all' || taxi.corregimiento === selectedZone.value
    const matchesShift = selectedShift.value === 'all' || taxi.shift === selectedShift.value
    const matchesEnglish = !onlyEnglish.value || taxi.english_speaking
    return matchesZone && matchesShift && matchesEnglish
  })
})

const handleCall = (taxi: Taxi) => {
  analyticsService.logEvent({ 
    event_name: 'taxi_click', 
    item_id: taxi.owner_name,
    properties: { 
      action: 'call',
      taxi_id: taxi.id,
      plate: taxi.license_plate
    }
  })
  window.location.href = `tel:${taxi.phone_number}`
}

function getShiftLabel(shift: string) {
  if (shift === 'dia') return t('taxi.dayShift')
  if (shift === 'tarde') return t('taxi.afternoonShift')
  if (shift === 'noche') return t('taxi.nightShift')
  return shift
}
</script>"""
        
        with open('src/views/transporte/TaxisLocales.vue', 'w', encoding='utf-8') as f:
            f.write(taxis_script + f"\n<template>\n  <div class=\"taxis-locales\">\n{tab1_code}\n  </div>\n</template>\n\n<style scoped>\n{style_content}\n</style>")
            
        # Create ViajesTuristicos.vue
        viajes_script = """<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useShuttleStore } from '@/stores/shuttle'
import { analyticsService } from '@/services/analyticsService'
import { getImageUrl } from '@/utils/imageUrl'

const { t } = useI18n()
const shuttleStore = useShuttleStore()
const router = useRouter()

const shuttleRouteFilter = ref('all')
const shuttleTypeFilter = ref('all')
const shuttleRefs = ref<Record<string, any>>({})

const setShuttleRef = (el: any, id: string) => {
  if (el) shuttleRefs.value[id] = el
}

const shuttleRoutes = computed(() => {
  const routes = shuttleStore.shuttles.map(s => `${s.origin} - ${s.destination}`)
  return [...new Set(routes)].sort()
})

const filteredShuttles = computed(() => {
  return shuttleStore.shuttles.filter(shuttle => {
    const routeName = `${shuttle.origin} - ${shuttle.destination}`
    const matchesRoute = shuttleRouteFilter.value === 'all' || routeName === shuttleRouteFilter.value
    const matchesType = shuttleTypeFilter.value === 'all' || shuttle.trip_type === shuttleTypeFilter.value
    return matchesRoute && matchesType
  })
})

const verDetalle = (shuttleId: number) => {
    router.push({
        name: 'ShuttleDetalle',
        params: { id: shuttleId }
    })
}

onMounted(async () => {
    analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'ViajesTuristicos' })
    if(shuttleStore.shuttles.length === 0) {
        await shuttleStore.loadShuttles()
    }
})
</script>"""
        tab2_code = tab2_code.replace("router.push(`/shuttle/${shuttle.id}`);", "verDetalle(shuttle.id);")
        with open('src/views/transporte/ViajesTuristicos.vue', 'w', encoding='utf-8') as f:
            f.write(viajes_script + f"\n<template>\n  <div class=\"viajes-turisticos\">\n{tab2_code}\n  </div>\n</template>\n\n<style scoped>\n{style_content}\n</style>")
            
        print("Success!")
    else:
        print("Could not find tabs")
else:
    print("Could not find template")