<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
import PlateInput from '@/components/PlateInput.vue'
import VehicleInfo from '@/components/VehicleInfo.vue'
import type { VehicleInfo as VehicleData } from '@/components/VehicleInfo.vue'

const FAKE_VEHICLES: Record<string, VehicleData> = {
  ABC123: { make: 'Volvo', model: 'V70', year: 2009, color: 'Silver' },
  ABC12D: { make: 'Volkswagen', model: 'Golf', year: 2020, color: 'Blå' },
  XYZ789: { make: 'Saab', model: '9-3', year: 2005, color: 'Röd' },
}

const plate = ref('')
const vehicle = ref<VehicleData | null>(null)
const notFound = ref(false)
const lookingUp = ref(false)

function handleLookup(lookedUpPlate: string) {
  lookingUp.value = true
  notFound.value = false
  vehicle.value = null

  setTimeout(() => {
    const found = FAKE_VEHICLES[lookedUpPlate]
    if (found) {
      vehicle.value = found
      notFound.value = false
    } else {
      vehicle.value = null
      notFound.value = true
    }
    lookingUp.value = false
  }, 400)
}
</script>

<template>
  <div class="home">
    <p class="home__subtitle">Skicka ett brev till en fordonsägare</p>

    <PlateInput v-model="plate" @lookup="handleLookup" />

    <VehicleInfo
      :vehicle="vehicle"
      :loading="lookingUp"
      :not-found="notFound"
      :plate="plate"
    />

    <RouterLink
      v-if="vehicle"
      :to="{ name: 'compose', query: { plate } }"
      class="home__cta"
    >
      Skicka ett brev till ägaren
    </RouterLink>
  </div>
</template>

<style scoped>
.home {
  max-width: 28rem;
  margin: 3rem auto 0;
  padding: 0 1rem;
}

.home__subtitle {
  color: #718096;
  margin: 0 0 1.5rem 0;
}

.home__cta {
  display: block;
  margin-top: 1.5rem;
  padding: 0.875rem 1.5rem;
  background: #38a169;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0.5rem;
  font-size: 1rem;
}

.home__cta:hover {
  background: #2f855a;
}
</style>
