<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
    checkInLat: number | null;
    checkInLng: number | null;
    checkOutLat: number | null;
    checkOutLng: number | null;
    checkInLocationTag: string | null;
    checkOutLocationTag: string | null;
    checkInAtFormatted: string;
    checkOutAtFormatted: string | null;
    attendanceDateFormatted: string;
    employeeName: string | null;
}>();

const hasCoordinates = computed(() => props.checkInLat != null && props.checkInLng != null);

const checkInSrc = computed(() => {
    if (props.checkInLat == null || props.checkInLng == null) {
        return '';
    }

    return `https://www.google.com/maps?q=${props.checkInLat},${props.checkInLng}&z=18&t=k&output=embed`;
});

const checkOutSrc = computed(() => {
    if (props.checkOutLat == null || props.checkOutLng == null) {
        return '';
    }

    return `https://www.google.com/maps?q=${props.checkOutLat},${props.checkOutLng}&z=18&t=k&output=embed`;
});

function escapeHtml(value: string): string {
    return value
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#39;');
}

function buildLabel(
    title: string,
    color: string,
    locationTag: string | null,
): string {
    const lines: string[] = [];
    lines.push(`<strong style="color:${color}">${title}</strong>`);

    lines.push(`<span>Lokasi: ${escapeHtml(locationTag ?? '-')}</span>`);

    return lines.join('<br>');
}
</script>

<template>
    <div v-if="hasCoordinates" class="space-y-3">
        <p class="text-muted-foreground text-sm">
            Lokasi Presensi
        </p>

        <!-- Check-in map -->
        <div class="space-y-1.5">
            <div class="text-xs font-medium" v-html="buildLabel('Masuk', '#16a34a', checkInLocationTag)" />
            <iframe :src="checkInSrc" class="h-56 w-full overflow-hidden rounded-lg" style="border: 0" allowfullscreen
                loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
        </div>

        <!-- Check-out map -->
        <div v-if="checkOutLat != null && checkOutLng != null" class="space-y-1.5">
            <div class="text-xs font-medium" v-html="buildLabel('Pulang', '#dc2626', checkOutLocationTag)" />
            <iframe :src="checkOutSrc" class="h-56 w-full overflow-hidden rounded-lg" style="border: 0" allowfullscreen
                loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
        </div>
    </div>
</template>
