<template>
	<section class="simplestats-table-card">
		<header class="simplestats-table-card__header">
			<h3 class="simplestats-table-card__title">{{ text_title }}</h3>
		</header>
		<div class="simplestats-table-card__divider" />

		<div class="simplestats-table-card__th">
			<span class="simplestats-table-card__th-label">{{ text_col_page }}</span>
			<span class="simplestats-table-card__th-metrics">
				<span>{{ text_col_visitors }}</span>
				<span>{{ text_col_change }}</span>
			</span>
		</div>

		<ul v-if="rows.length" class="simplestats-table-card__list">
			<li v-for="( r, i ) in rows" :key="i" class="simplestats-table-card__row">
				<div class="simplestats-table-card__row-label">
					<span class="simplestats-table-card__row-index">{{ i + 1 }}</span>
					<span class="simplestats-table-card__row-text">{{ r.title || r.path }}</span>
				</div>
				<div class="simplestats-table-card__row-metrics">
					<span class="simplestats-table-card__row-metric">{{ formatNumber( r.visitors ) }}</span>
					<span :class="[ 'simplestats-table-card__row-metric', deltaClass( r.delta_pct ) ]">{{ deltaText( r.delta_pct ) }}</span>
				</div>
			</li>
		</ul>
		<div v-else class="simplestats-table-card__empty">{{ text_empty }}</div>

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

<script setup>
	import { computed } from 'vue';
	import { useStore } from '@/dashboard/store.js';
	import { useReportHelper } from '@/dashboard/helper.js';
	import arrowSvg from '@/images/icons/arrow-right-sm.svg?raw';

	const store            = useStore();
	const { formatNumber } = useReportHelper();
	const rows             = computed( () => store.report.data?.top_pages || [] );

	const text_title        = wp.i18n.__( 'Top Pages',     'simplestats-friendly-website-analytics' );
	const text_col_page     = wp.i18n.__( 'PAGE TITLE',    'simplestats-friendly-website-analytics' );
	const text_col_visitors = wp.i18n.__( 'VISITORS',      'simplestats-friendly-website-analytics' );
	const text_col_change   = wp.i18n.__( 'CHANGE',        'simplestats-friendly-website-analytics' );
	const text_view_all     = wp.i18n.__( 'View All Pages','simplestats-friendly-website-analytics' );
	const text_empty        = wp.i18n.__( 'No data for this range.', 'simplestats-friendly-website-analytics' );

	function deltaClass( v ) {
		const n = v === null ? 100 : Number( v ) || 0;
		if ( n > 0 ) return 'simplestats-table-card__row-metric--up';
		if ( n < 0 ) return 'simplestats-table-card__row-metric--down';
		return '';
	}

	function deltaText( v ) {
		const n = v === null ? 100 : Number( v ) || 0;
		if ( n === 0 ) return '0%';
		const sign = n > 0 ? '+' : '-';
		const abs  = Math.abs( n );
		const num  = Number.isInteger( abs ) ? String( abs ) : abs.toFixed( 1 );
		return `${ sign }${ num }%`;
	}
</script>
