<template>
	<section class="simplestats-devices">
		<header class="simplestats-devices__header">
			<h3 class="simplestats-devices__title">{{ text_title }}</h3>
		</header>
		<div class="simplestats-devices__divider" />

		<div v-if="hasData" class="simplestats-devices__body">
			<div class="simplestats-devices__donut">
				<apex-chart type="donut" width="200" height="200" :options="options" :series="counts" />
				<div class="simplestats-devices__center">
					<div class="simplestats-devices__total">{{ formatNumber( devices.total ) }}</div>
					<div class="simplestats-devices__total-label">{{ text_total }}</div>
				</div>
			</div>
			<ul class="simplestats-devices__legend">
				<li v-for="item in devices.items" :key="item.key" class="simplestats-devices__legend-item">
					<span class="simplestats-devices__dot" :style="`background: ${ colorFor( item.key ) }`" />
					<span class="simplestats-devices__name">{{ labelFor( item.key ) }}</span>
					<span class="simplestats-devices__count">{{ formatNumber( item.count ) }}</span>
					<span class="simplestats-devices__pct">{{ Math.round( item.pct ) }}%</span>
				</li>
			</ul>
		</div>
		<div v-else class="simplestats-devices__empty">{{ text_empty }}</div>
	</section>
</template>

<script setup>
	import { computed } from 'vue';
	import { useStore } from '@/dashboard/store.js';
	import { useReportHelper } from '@/dashboard/helper.js';

	const store            = useStore();
	const { formatNumber } = useReportHelper();
	const devices          = computed( () => store.report.data?.devices || { total: 0, items: [] } );

	const text_title = wp.i18n.__( 'Devices', 'simplestats-friendly-website-analytics' );
	const text_total = wp.i18n.__( 'Total',   'simplestats-friendly-website-analytics' );
	const text_empty = wp.i18n.__( 'No device data.', 'simplestats-friendly-website-analytics' );

	const labels = {
		desktop: wp.i18n.__( 'Desktop', 'simplestats-friendly-website-analytics' ),
		mobile:  wp.i18n.__( 'Mobile',  'simplestats-friendly-website-analytics' ),
		tablet:  wp.i18n.__( 'Tablet',  'simplestats-friendly-website-analytics' ),
	};

	// Figma tokens (0:1363):
	//   desktop = brand/600 #CA8A04 (largest segment, dark amber)
	//   mobile  = brand/300 #FFE57D (pale yellow)
	//   tablet  = brand/400 #FACC15 (bright yellow)
	const colors = { desktop: '#CA8A04', mobile: '#FFE57D', tablet: '#FACC15' };

	const labelFor = ( k ) => labels[ k ] || k;
	const colorFor = ( k ) => colors[ k ] || '#9CA3AF';

	const hasData = computed( () => Number( devices.value.total ) > 0 );
	const counts  = computed( () => devices.value.items.map( ( i ) => i.count ) );

	const options = computed( () => ( {
		chart: {
			animations: { enabled: false },
			fontFamily: 'inherit',
		},
		colors: devices.value.items.map( ( i ) => colorFor( i.key ) ),
		stroke: { width: 4, colors: [ '#FFFFFF' ] },     // 4px white gap between segments
		dataLabels: { enabled: false },
		legend:     { show: false },
		tooltip:    { enabled: false },
		plotOptions: {
			pie: { donut: { size: '72%', labels: { show: false } } },
		},
	} ) );
</script>
