<template>
	<section class="simplestats-realtime">
		<header class="simplestats-realtime__header">
			<div class="simplestats-realtime__title-row">
				<h3 class="simplestats-realtime__title">{{ text_title }}</h3>
				<span class="simplestats-realtime__live">
					<span class="simplestats-realtime__live-dot" v-html="pulseDotSvg" />
					<span class="simplestats-realtime__live-label">{{ text_live }}</span>
				</span>
			</div>
			<span class="simplestats-realtime__online">
				<span class="simplestats-realtime__online-icon" v-html="onlineIconSvg" />
				<span class="simplestats-realtime__online-label">{{ onlineText }}</span>
			</span>
		</header>

		<ul v-if="activities.length" class="simplestats-realtime__list">
			<li v-for="( a, i ) in activities" :key="i" class="simplestats-realtime__entry">
				<CountryFlag :code="a.country_code" />
				<p class="simplestats-realtime__text">
					<span class="simplestats-realtime__muted">{{ text_someone_from }}</span>
					<strong class="simplestats-realtime__country">{{ countryName( a.country_code ) }}</strong>
					<span class="simplestats-realtime__muted">{{ text_viewed }} {{ a.page }}</span>
				</p>
				<span class="simplestats-realtime__time">{{ relativeTime( a.seconds_ago ) }}</span>
			</li>
		</ul>
		<div v-else class="simplestats-realtime__empty">{{ text_empty }}</div>

		<footer class="simplestats-realtime__footer">
			<a :href="SimpleStats.allStatsUrl" target="_blank" rel="noopener" class="simplestats-realtime__view-all">
				<span>{{ text_view_all }}</span>
				<span class="simplestats-realtime__view-all-icon" v-html="arrowSvg" />
			</a>
		</footer>
	</section>
</template>

<script setup>
	import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
	import CountryFlag from './atoms/CountryFlag.vue';
	import { useStore } from '@/dashboard/store.js';
	import pulseDotSvg   from '@/images/icons/pulse-dot.svg?raw';
	import onlineIconSvg from '@/images/icons/online-users.svg?raw';
	import arrowSvg      from '@/images/icons/arrow-right-sm.svg?raw';

	const store = useStore();

	const text_title        = wp.i18n.__( 'Real-time activity', 'simplestats-friendly-website-analytics' );
	const text_live         = wp.i18n.__( 'LIVE', 'simplestats-friendly-website-analytics' );
	const text_someone_from = wp.i18n.__( 'Someone from', 'simplestats-friendly-website-analytics' );
	const text_viewed       = wp.i18n.__( 'viewed', 'simplestats-friendly-website-analytics' );
	const text_view_all     = wp.i18n.__( 'View All Activity', 'simplestats-friendly-website-analytics' );
	const text_empty        = wp.i18n.__( 'No live activity right now.', 'simplestats-friendly-website-analytics' );
	const text_online       = wp.i18n.__( '%d online', 'simplestats-friendly-website-analytics' );

	const online     = computed( () => store.realtime.online );
	const activities = computed( () => store.realtime.activities );
	const onlineText = computed( () => wp.i18n.sprintf( text_online, online.value ) );

	const regionDisplay = ( () => {
		try {
			return new Intl.DisplayNames( [ navigator.language || 'en' ], { type: 'region' } );
		} catch {
			return null;
		}
	} )();

	function countryName( code ) {
		if ( ! code || code === 'XX' ) return wp.i18n.__( 'Unknown', 'simplestats-friendly-website-analytics' );
		if ( regionDisplay ) {
			try { return regionDisplay.of( code ) || code; } catch { return code; }
		}
		return code;
	}

	// Local tick to re-evaluate "Ns ago" between data refreshes.
	const tick = ref( 0 );
	let tickHandle = null;

	function relativeTime( seconds ) {
		void tick.value; // re-evaluate every tick so timestamps update live
		const s = Number( seconds ) || 0;
		if ( s < 60 )   return wp.i18n.sprintf( wp.i18n.__( '%ds ago', 'simplestats-friendly-website-analytics' ), s );
		if ( s < 3600 ) return wp.i18n.sprintf( wp.i18n.__( '%dm ago', 'simplestats-friendly-website-analytics' ), Math.floor( s / 60 ) );
		return wp.i18n.sprintf( wp.i18n.__( '%dh ago', 'simplestats-friendly-website-analytics' ), Math.floor( s / 3600 ) );
	}

	onMounted( () => {
		store.startRealtimePolling();
		tickHandle = setInterval( () => { tick.value++; }, 1000 );
	} );

	onBeforeUnmount( () => {
		store.stopRealtimePolling();
		if ( tickHandle ) clearInterval( tickHandle );
	} );
</script>
