<script setup>
import { motion } from 'motion-v'
import { Clock } from 'lucide-vue-next'
import { loadHomeSearchForm } from '~/content/home-export'
import { HERO_TIME_GROUPS } from '~/constants/public-hero'
import { DEFAULT_PUBLIC_LOCALE, normalizePublicLocale } from '~/utils/public-locales'

const { locale } = usePublicLocale()
const homeHeroSearchForm = shallowRef({})
const timePopoverCopyCache = new Map()

defineProps({
  selectedTime: {
    type: String,
    default: '',
  },
  align: {
    type: String,
    default: 'left',
  },
})

defineEmits(['select'])

async function loadTimePopoverCopy(localeCode) {
  const normalizedLocale = normalizePublicLocale(localeCode)

  if (!timePopoverCopyCache.has(normalizedLocale)) {
    timePopoverCopyCache.set(normalizedLocale, loadHomeSearchForm(normalizedLocale))
  }

  homeHeroSearchForm.value = await timePopoverCopyCache.get(normalizedLocale)
}

watch(
  locale,
  async (nextLocale) => {
    await loadTimePopoverCopy(nextLocale)
  },
  { immediate: true },
)

const timeGroups = computed(() => {
  return HERO_TIME_GROUPS.map((group, index) => ({
    ...group,
    title: [
      homeHeroSearchForm.value.morningLabel,
      homeHeroSearchForm.value.afternoonLabel,
      homeHeroSearchForm.value.eveningLabel,
    ][index] || group.title,
  }))
})
</script>

<template>
  <motion.div
    data-hero-popover-scope
    :initial="{ opacity: 0, y: 10, scale: 0.98 }"
    :animate="{ opacity: 1, y: 0, scale: 1 }"
    :exit="{ opacity: 0, y: 10, scale: 0.98 }"
    :transition="{ duration: 0.2 }"
    :class="[
      'absolute top-full w-[320px] mt-4 bg-white rounded-[2rem] shadow-[0_20px_60px_rgb(0,0,0,0.08)] border border-slate-100 p-6 z-50',
      align === 'left' ? 'left-0' : 'right-0',
    ]"
  >
    <div class="flex items-center gap-3 mb-6 bg-white/40 backdrop-blur-md p-3 rounded-2xl border border-white/50 shadow-sm">
      <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm">
        <Clock class="w-4 h-4 text-brand-orange" />
      </div>
      <div>
        <div class="text-xs font-bold text-slate-800">{{ homeHeroSearchForm.operatingHoursLabel }}</div>
        <div class="text-[10px] text-slate-500 font-medium">{{ homeHeroSearchForm.operatingHoursValue }}</div>
      </div>
    </div>

    <div class="max-h-[320px] overflow-y-auto pr-2 custom-scrollbar">
      <div
        v-for="group in timeGroups"
        :key="group.title"
        class="mb-6 last:mb-0"
      >
        <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3 flex items-center gap-2">
          {{ group.title }}
          <div class="h-px flex-1 bg-slate-100" />
        </div>

        <div class="grid grid-cols-3 gap-2">
          <button
            v-for="time in group.times"
            :key="time"
            type="button"
            :class="[
              'py-2.5 rounded-xl text-sm font-semibold transition-all border shadow-sm',
              selectedTime === time
                ? 'bg-brand-orange border-brand-orange text-white shadow-md shadow-brand-orange/20'
                : 'bg-white/40 backdrop-blur-md border-white/50 text-slate-600 hover:border-white/60 hover:text-slate-900 hover:bg-white/60',
            ]"
            @click="$emit('select', time)"
          >
            {{ time }}
          </button>
        </div>
      </div>
    </div>
  </motion.div>
</template>
